brew-js-react 0.5.6 → 0.6.0

package/dist/brew-js-react.js

@@ -1,4 +1,4 @@
-/*! brew-js-react v0.5.6 | (c) misonou | https://misonou.github.io */
+/*! brew-js-react v0.6.0 | (c) misonou | https://misonou.github.io */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("zeta-dom"), require("react"), require("react-dom"), require("brew-js"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
@@ -8,7 +8,7 @@
 		exports["brew-js-react"] = factory(require("zeta-dom"), require("react"), require("react-dom"), require("brew-js"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
 	else
 		root["brew"] = root["brew"] || {}, root["brew"]["react"] = factory(root["zeta"], root["React"], root["ReactDOM"], root["brew"], root["zeta"]["react"], root["waterpipe"], root["jQuery"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE__231__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__311__, __WEBPACK_EXTERNAL_MODULE__760__, __WEBPACK_EXTERNAL_MODULE__402__, __WEBPACK_EXTERNAL_MODULE__87__, __WEBPACK_EXTERNAL_MODULE__942__) => {
+})(self, (__WEBPACK_EXTERNAL_MODULE__231__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__33__, __WEBPACK_EXTERNAL_MODULE__760__, __WEBPACK_EXTERNAL_MODULE__402__, __WEBPACK_EXTERNAL_MODULE__87__, __WEBPACK_EXTERNAL_MODULE__914__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -28,11 +28,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__760__;
 
 /***/ }),
 
-/***/ 942:
+/***/ 914:
 /***/ ((module) => {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__942__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__914__;
 
 /***/ }),
 
@@ -44,11 +44,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__12__;
 
 /***/ }),
 
-/***/ 311:
+/***/ 33:
 /***/ ((module) => {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__311__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__33__;
 
 /***/ }),
 
@@ -71,7 +71,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__402__;
 /***/ 621:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-var ReactDOM = __webpack_require__(311);
+var ReactDOM = __webpack_require__(33);
 var ReactDOMClient;
 
 if (ReactDOM.createRoot) {
@@ -249,12 +249,10 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
   util_keys = _lib$util.keys,
   kv = _lib$util.kv,
   makeArray = _lib$util.makeArray,
-  makeAsync = _lib$util.makeAsync,
   map = _lib$util.map,
   mapObject = _lib$util.mapObject,
   noop = _lib$util.noop,
   pick = _lib$util.pick,
-  pipe = _lib$util.pipe,
   randomId = _lib$util.randomId,
   resolve = _lib$util.resolve,
   resolveAll = _lib$util.resolveAll,
@@ -262,13 +260,26 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
   setImmediateOnce = _lib$util.setImmediateOnce,
   single = _lib$util.single,
   throwNotFunction = _lib$util.throwNotFunction,
+  _throws = _lib$util["throws"],
   watch = _lib$util.watch,
   watchable = _lib$util.watchable;
 
-// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react","amd":"react","root":["React"]}
+// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react","amd":"react","root":"React"}
 var external_commonjs_react_commonjs2_react_amd_react_root_React_ = __webpack_require__(12);
-// EXTERNAL MODULE: external {"commonjs":"react-dom","commonjs2":"react-dom","amd":"react-dom","root":["ReactDOM"]}
-var external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_ = __webpack_require__(311);
+;// CONCATENATED MODULE: ./|umd|/react.js
+
+var Component = external_commonjs_react_commonjs2_react_amd_react_root_React_.Component,
+  Fragment = external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment,
+  createContext = external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext,
+  createElement = external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement,
+  useContext = external_commonjs_react_commonjs2_react_amd_react_root_React_.useContext,
+  useEffect = external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect,
+  useMemo = external_commonjs_react_commonjs2_react_amd_react_root_React_.useMemo,
+  useRef = external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef,
+  useState = external_commonjs_react_commonjs2_react_amd_react_root_React_.useState;
+
+// EXTERNAL MODULE: external {"commonjs":"react-dom","commonjs2":"react-dom","amd":"react-dom","root":"ReactDOM"}
+var external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_ = __webpack_require__(33);
 // EXTERNAL MODULE: ./node_modules/@misonou/react-dom-client/fallback.js
 var fallback = __webpack_require__(621);
 ;// CONCATENATED MODULE: ./|umd|/zeta-dom/domUtil.js
@@ -284,12 +295,15 @@ var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_do
 
 var dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.dom;
 /* harmony default export */ const zeta_dom_dom = (dom);
+var reportError = dom.reportError;
+
 ;// CONCATENATED MODULE: ./|umd|/zeta-dom/domLock.js
 
 var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.dom,
   lock = _lib$dom.lock,
   notifyAsync = _lib$dom.notifyAsync,
   preventLeave = _lib$dom.preventLeave,
+  runAsync = _lib$dom.runAsync,
   subscribeAsync = _lib$dom.subscribeAsync;
 
 // EXTERNAL MODULE: external {"commonjs":"brew-js","commonjs2":"brew-js","amd":"brew-js","root":"brew"}
@@ -316,7 +330,7 @@ var closeFlyout = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_b
 function createDialog(props) {
   var root = document.createElement('div');
   var reactRoot = fallback.createRoot(root);
-  var _closeDialog = closeFlyout.bind(0, root);
+  var closeDialog = closeFlyout.bind(0, root);
   var promise;
   zeta_dom_dom.on(root, {
     flyoutshow: function flyoutshow() {
@@ -335,7 +349,7 @@ function createDialog(props) {
   subscribeAsync(root, true);
   return {
     root: root,
-    close: _closeDialog,
+    close: closeDialog,
     open: function open() {
       if (promise) {
         return promise;
@@ -348,15 +362,13 @@ function createDialog(props) {
       }
       if (props.onRender) {
         var dialogProps = extend({}, props, {
-          closeDialog: function closeDialog(value) {
-            var promise = makeAsync(props.onCommit || pipe)(value);
-            notifyAsync(zeta_dom_dom.activeElement, promise);
-            return promise.then(_closeDialog);
-          }
+          closeDialog: props.onCommit ? function (value) {
+            return runAsync(zeta_dom_dom.activeElement, props.onCommit.bind(this, value)).then(closeDialog);
+          } : closeDialog
         });
-        var content = /*#__PURE__*/(0,external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement)(props.onRender, dialogProps);
+        var content = /*#__PURE__*/createElement(props.onRender, dialogProps);
         if (props.wrapper) {
-          content = /*#__PURE__*/(0,external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement)(props.wrapper, dialogProps, content);
+          content = /*#__PURE__*/createElement(props.wrapper, dialogProps, content);
         }
         reactRoot.render(content);
       }
@@ -377,12 +389,12 @@ function createDialog(props) {
  * @param {import("./dialog").DialogProps} props
  */
 function Dialog(props) {
-  var _props = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)({})[0];
-  var dialog = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
+  var _props = useState({})[0];
+  var dialog = useState(function () {
     return createDialog(_props);
   })[0];
   extend(_props, props);
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+  useEffect(function () {
     var opened = containsOrEquals(zeta_dom_dom.root, dialog.root);
     if (either(opened, _props.isOpen)) {
       if (!opened) {
@@ -392,13 +404,23 @@ function Dialog(props) {
       }
     }
   }, [_props.isOpen]);
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+  useEffect(function () {
     return dialog.close;
   }, [dialog]);
   return /*#__PURE__*/external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.createPortal(props.children, dialog.root);
 }
 // EXTERNAL MODULE: external {"commonjs":"zeta-dom-react","commonjs2":"zeta-dom-react","amd":"zeta-dom-react","root":["zeta","react"]}
 var external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_ = __webpack_require__(402);
+;// CONCATENATED MODULE: ./|umd|/zeta-dom-react.js
+
+var ViewStateProvider = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.ViewStateProvider,
+  classNames = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.classNames,
+  useAsync = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useAsync,
+  useMemoizedFunction = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useMemoizedFunction,
+  useObservableProperty = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useObservableProperty,
+  useSingleton = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useSingleton,
+  useValueTrigger = external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useValueTrigger;
+
 ;// CONCATENATED MODULE: ./|umd|/zeta-dom/events.js
 
 var EventContainer = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.EventContainer;
@@ -465,7 +487,7 @@ var rootContext = freeze(extend(new ViewContext(), {
   container: root
 }));
 var rootState = _(rootContext);
-var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(rootContext);
+var StateContext = /*#__PURE__*/createContext(rootContext);
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
 var view_event = {};
@@ -504,14 +526,17 @@ function ViewContext(view, page, parent) {
   });
   watch(self, 'page', function (page, previousPage) {
     emitter.emit('pagechange', self, {
-      previousPage: previousPage
+      page: page,
+      previousPage: previousPage,
+      navigationType: view_event.navigationType,
+      waitFor: view_event.waitFor
     });
   });
 }
 definePrototype(ViewContext, {
   getChildren: function getChildren() {
     return map(_(this).children, function (v) {
-      return v.currentState;
+      return v.currentContext;
     });
   },
   on: function on(event, handler) {
@@ -519,11 +544,11 @@ definePrototype(ViewContext, {
   }
 });
 function ErrorBoundary() {
-  external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
+  Component.apply(this, arguments);
   this.state = {};
 }
 ErrorBoundary.contextType = StateContext;
-definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react_root_React_.Component, {
+definePrototype(ErrorBoundary, Component, {
   componentDidCatch: function componentDidCatch(error) {
     var self = this;
     if (errorView && !self.state.error) {
@@ -534,9 +559,7 @@ definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react
       // emit error in next tick as ref callback may yet to be invoked
       // if error is thrown synchronously in first render
       setImmediate(function () {
-        zeta_dom_dom.emit('error', self.context.container, {
-          error: error
-        }, true);
+        reportError(error, self.context.container);
       });
       // ensure promise sent to beforepageload event is resolved
       self.props.onComponentLoaded();
@@ -551,12 +574,12 @@ definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react
     };
     var onComponentLoaded = self.props.onComponentLoaded;
     if (props.error) {
-      return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(errorView, {
+      return /*#__PURE__*/createElement(errorView, {
         onComponentLoaded: onComponentLoaded,
         viewProps: props
       });
     }
-    return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(props.view, {
+    return /*#__PURE__*/createElement(props.view, {
       onComponentLoaded: onComponentLoaded,
       viewProps: self.props.viewProps
     });
@@ -568,10 +591,10 @@ definePrototype(ErrorBoundary, external_commonjs_react_commonjs2_react_amd_react
   }
 });
 function ViewContainer() {
-  external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(this, arguments);
+  Component.apply(this, arguments);
 }
 ViewContainer.contextType = StateContext;
-definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react_root_React_.Component, {
+definePrototype(ViewContainer, Component, {
   setActive: noop,
   componentDidMount: function componentDidMount() {
     var self = this;
@@ -584,7 +607,7 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
       arrRemove(parent, self);
       unwatch();
       setImmediate(function () {
-        if (self.unmountView && !self.currentState.active) {
+        if (self.unmountView && !self.currentContext.active) {
           self.unmountView();
         }
       });
@@ -599,7 +622,7 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
       self.updateView();
     }
     (self.onRender || noop)();
-    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);
+    return /*#__PURE__*/createElement(Fragment, null, self.prevView, self.currentView);
   },
   updateView: function updateView() {
     var self = this;
@@ -616,20 +639,21 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
     }
     if (V && viewChanged) {
       (self.unmountView || noop)(true);
-      var state = new ViewContext(V, app_app.page, self.context);
+      var context = new ViewContext(V, app_app.page, self.context);
+      var state = routeMap.get(V);
       var onComponentLoaded;
       var promise = new Promise(function (resolve) {
         onComponentLoaded = resolve;
       });
       var unmountView = onComponentLoaded;
       var initElement = executeOnce(function (element) {
-        state.container = element;
+        context.container = element;
         promise.then(function () {
-          if (self.currentState === state) {
+          if (self.currentContext === context) {
             unmountView = function unmountView() {
               self.prevView = self.currentView;
               app_app.emit('pageleave', element, {
-                pathname: state.page.path,
+                pathname: context.page.path,
                 view: V
               }, true);
               animateOut(element, 'show').then(function () {
@@ -639,39 +663,41 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
             };
             animateIn(element, 'show', '[brew-view]', true);
             app_app.emit('pageenter', element, {
-              pathname: state.page.path,
+              pathname: context.page.path,
               view: V
             }, true);
           }
         });
         notifyAsync(element, promise);
       });
-      var viewProps = freeze({
-        navigationType: view_event.navigationType,
-        viewContext: state,
-        viewData: view_event.data || {}
-      });
-      var view = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(StateContext.Provider, {
-        key: routeMap.get(V).id,
-        value: state
-      }, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewStateContainer, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement('div', extend({}, self.props.rootProps, {
+      var viewProps = function viewProps() {
+        return freeze({
+          navigationType: view_event.navigationType,
+          viewContext: context,
+          viewData: context.page.data || {}
+        });
+      };
+      var view = /*#__PURE__*/createElement(StateContext.Provider, {
+        key: state.id,
+        value: context
+      }, /*#__PURE__*/createElement(ViewStateContainer, null, /*#__PURE__*/createElement('div', extend({}, self.props.rootProps, {
         ref: initElement,
         'brew-view': ''
-      }), /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ErrorBoundary, {
+      }), /*#__PURE__*/createElement(ErrorBoundary, {
         onComponentLoaded: onComponentLoaded,
         viewProps: viewProps
       }))));
-      extend(self, _(state), {
-        currentState: state,
+      extend(self, _(context), {
+        currentContext: context,
         currentView: view,
         currentViewComponent: V,
         unmountView: executeOnce(function () {
           self.setActive(false);
-          routeMap.get(V).rendered--;
+          state.rendered--;
           unmountView();
         })
       });
-      routeMap.get(V).rendered++;
+      state.rendered++;
       (view_event.waitFor || noop)(promise);
     }
     (self.setPage || noop)(app_app.page);
@@ -727,24 +753,29 @@ function matchViewParams(view, route) {
 function createViewComponent(factory) {
   var promise;
   throwNotFunction(factory);
-  if (factory.prototype instanceof external_commonjs_react_commonjs2_react_amd_react_root_React_.Component) {
-    factory = external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement.bind(null, factory);
+  if (factory.prototype instanceof Component) {
+    factory = createElement.bind(null, factory);
   }
   return function fn(props) {
-    var viewProps = props.viewProps;
-    var children = !promise && factory(viewProps);
+    var viewContext = useContext(StateContext);
+    var viewProps = useState(props.viewProps);
+    var children = !promise && factory(viewProps[0]);
     if (isThenable(children)) {
       promise = children;
       children = null;
       catchAsync(promise);
     }
-    var state = (0,external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useAsync)(function () {
-      return promise.then(function (s) {
-        return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(s["default"], viewProps);
-      });
+    var state = useAsync(function () {
+      return promise;
     }, !!promise)[1];
     var loaded = !promise || !state.loading;
-    external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect(function () {
+    useEffect(function () {
+      // listen to property directly so that it is invoked after pagechange event handlers in actual component
+      return watch(viewContext, 'page', function () {
+        viewProps[1](props.viewProps);
+      });
+    }, []);
+    useEffect(function () {
       if (loaded) {
         setImmediate(props.onComponentLoaded);
       }
@@ -752,11 +783,11 @@ function createViewComponent(factory) {
     if (state.error) {
       throw state.error;
     }
-    return children || state.value || /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment);
+    return children || (state.value ? /*#__PURE__*/createElement(state.value["default"], viewProps[0]) : null);
   };
 }
 function useViewContext() {
-  return external_commonjs_react_commonjs2_react_amd_react_root_React_.useContext(StateContext);
+  return useContext(StateContext);
 }
 function isViewMatched(view) {
   return matchViewParams(view, app_app.route);
@@ -810,7 +841,7 @@ function renderView() {
     }
   });
   views.sort(sortViews);
-  return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewContainer, {
+  return /*#__PURE__*/createElement(ViewContainer, {
     rootProps: rootProps,
     views: views,
     defaultView: defaultView
@@ -888,7 +919,7 @@ function updateViewState(state, key, store) {
 }
 function useViewContextWithEffect(callback, deps) {
   var container = useViewContext();
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+  useEffect(function () {
     return app_app.on('beforepageload popstate', function () {
       if (container.active) {
         callback(getCurrentStates());
@@ -901,7 +932,7 @@ function useAppReady() {
   return useAppReadyState().ready;
 }
 function useAppReadyState() {
-  var readyState = (0,external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useObservableProperty)(app_app, 'readyState');
+  var readyState = useObservableProperty(app_app, 'readyState');
   return {
     ready: readyState === 'ready',
     error: readyState === 'error'
@@ -911,20 +942,15 @@ function useRouteParam(name, defaultValue) {
   var container = useViewContext();
   var params = container.page.params;
   var value = params[name] || '';
-  var ref = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef)(value);
-  var forceUpdate = (0,external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useUpdateTrigger)();
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+  var notifyChange = useValueTrigger(value);
+  useEffect(function () {
     var setValue = function setValue() {
-      var current = container.page.params[name] || '';
-      if (current !== ref.current) {
-        forceUpdate();
-      }
+      notifyChange(container.page.params[name] || '');
     };
     // route parameter might be changed after state initialization and before useEffect hook is called
     setValue();
     return container.on('pagechange', setValue);
   }, [name]);
-  ref.current = value;
   if (defaultValue && container.active && (!value || name === 'remainingSegments' && value === '/')) {
     app_app.navigate(app_app.route.getPath(extend({}, params, kv(name, defaultValue))), true);
   }
@@ -932,7 +958,7 @@ function useRouteParam(name, defaultValue) {
 }
 function useRouteState(key, defaultValue, snapshotOnUpdate) {
   var cur = getCurrentStates();
-  var state = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(cur && cur.has(key) ? cur.get(key) : defaultValue);
+  var state = useState(cur && cur.has(key) ? cur.get(key) : defaultValue);
   var container = useViewContextWithEffect(function (cur) {
     state[1](function (oldValue) {
       return cur.has(key) ? cur.get(key) : (cur.set(key, oldValue), oldValue);
@@ -954,22 +980,20 @@ function useQueryParam(key, value, snapshotOnUpdate) {
   }
   var container = useViewContext();
   var getParams = function getParams() {
-    return mapObject(key === false ? value : kv(key, value), function (v, i) {
+    return freeze(mapObject(key === false ? value : kv(key, value), function (v, i) {
       return getQueryParam(i, app_app.path) || v || '';
-    });
+    }));
   };
-  var state = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)([]);
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useMemo)(function () {
-    state[0].splice(0, 2, getParams());
+  var ref = useRef({});
+  useMemo(function () {
+    ref.current = getParams();
   }, [key]);
-  var current = state[0][0];
-  var trackChanges = function trackChanges(values) {
-    if (!equal(values, current)) {
-      extend(current, values);
-      state[1]([current]);
-    }
-  };
-  var setParams = (0,external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useMemoizedFunction)(function (values) {
+  var current = ref.current;
+  var notifyChange = useValueTrigger(current, function (current, params) {
+    return equal(current, params) || !(ref.current = params);
+  });
+  var setParams = useMemoizedFunction(function (values) {
+    var current = ref.current;
     if (key !== false) {
       values = kv(key, isFunction(values) ? values(current[key]) : values);
     } else if (isFunction(values)) {
@@ -984,28 +1008,28 @@ function useQueryParam(key, value, snapshotOnUpdate) {
         if (snapshotOnUpdate) {
           app_app.snapshot();
         }
-        catchAsync(app_app.navigate(search + url.hash, true));
-        trackChanges(getParams());
+        catchAsync(app_app.navigate((search || '?') + url.hash, true));
+        notifyChange(getParams());
       }
     }
   });
-  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+  useEffect(function () {
     return app_app.watch('path', function () {
       if (container.active) {
-        trackChanges(getParams());
+        notifyChange(getParams());
       }
     });
   }, [key]);
-  return [key !== false ? current[key] : state[0][1] || (state[0][1] = freeze(extend({}, current))), setParams];
+  return [key !== false ? current[key] : current, setParams];
 }
 function ViewStateContainer(props) {
-  var cache = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)({})[0];
+  var cache = useState({})[0];
   var container = useViewContextWithEffect(function (cur) {
     each(cache, function (i, v) {
       updateViewState(v, v.key, cur);
     });
   }, []);
-  var provider = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
+  var provider = useState(function () {
     return {
       getState: function getState(uniqueId, key) {
         var state = cache[uniqueId];
@@ -1018,7 +1042,7 @@ function ViewStateContainer(props) {
       }
     };
   })[0];
-  return /*#__PURE__*/(0,external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement)(external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.ViewStateProvider, {
+  return /*#__PURE__*/createElement(ViewStateProvider, {
     value: provider
   }, props.children);
 }
@@ -1056,7 +1080,7 @@ function createCallback(translate) {
   });
 }
 function useLanguage() {
-  return (0,external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useObservableProperty)(app_app, 'language');
+  return useObservableProperty(app_app, 'language');
 }
 function makeTranslation(resources, defaultLang) {
   var re = new RegExp('^(' + Object.keys(resources[defaultLang]).join('|') + ')\\.');
@@ -1178,7 +1202,7 @@ util_define(Mixin, {
     });
     extend(props, {
       ref: combineFn(refs),
-      className: external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.classNames.apply(null, args)
+      className: classNames.apply(null, args)
     });
     each(mixins, function (i, v) {
       v.next();
@@ -1196,6 +1220,22 @@ var observe_lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom
 
 
 var StatefulMixin_ = createPrivateStore();
+var unmounted = new Set();
+function disposeUnmountedStates() {
+  each(unmounted, function (i, v) {
+    combineFn(StatefulMixin_(v).splice(0))();
+  });
+  unmounted.clear();
+}
+function MixinState(parent, element) {
+  StatefulMixin_(this, [parent["delete"].bind(parent, element)]);
+  parent.set(element, this);
+}
+definePrototype(MixinState, {
+  onDispose: function onDispose(callback) {
+    StatefulMixin_(this).push(throwNotFunction(callback));
+  }
+});
 function MixinRefImpl(mixin) {
   this.mixin = mixin;
 }
@@ -1207,8 +1247,9 @@ definePrototype(MixinRefImpl, {
 function StatefulMixin() {
   Mixin.call(this);
   StatefulMixin_(this, {
-    elements: new Set(),
-    states: new WeakMap(),
+    pending: {},
+    elements: [],
+    states: new Map(),
     flush: watch(this, false),
     dispose: []
   });
@@ -1233,36 +1274,37 @@ definePrototype(StatefulMixin, Mixin, {
     var self = this;
     var obj = StatefulMixin_(self);
     var newState = obj.pending;
-    var state;
+    var element, state;
     return function (current) {
       if (current) {
-        state = obj.states.get(current) || extend(self.initState(), newState);
-        if (state.element !== current) {
-          state.element = current;
-          self.initElement(current, state);
-          obj.states.set(current, state);
+        element = current;
+        state = obj.states.get(element) || new MixinState(obj.states, element);
+        obj.elements.push(element);
+        if (!state.element) {
+          self.initElement(element, extend(state, self.initState(), newState, {
+            element: element
+          }));
         } else if (util_keys(newState)[0]) {
-          self.mergeState(current, state, newState);
+          self.mergeState(element, state, newState);
         }
-        self.onLayoutEffect(current, state);
-        obj.elements.add(current);
+        self.onLayoutEffect(element, state);
+        unmounted["delete"](state);
       } else if (state) {
-        var prev = state.element;
-        self.onBeforeUpdate(prev, state);
-        obj.elements["delete"](prev);
+        unmounted.add(state);
+        self.onBeforeUpdate(element, state);
+        arrRemove(obj.elements, element);
       }
+      setImmediateOnce(disposeUnmountedStates);
     };
   },
   elements: function elements() {
-    return map(StatefulMixin_(this).elements, pipe);
+    return StatefulMixin_(this).elements.slice();
   },
   onDispose: function onDispose(callback) {
     StatefulMixin_(this).dispose.push(callback);
   },
   initState: function initState() {
-    return {
-      element: null
-    };
+    return {};
   },
   initElement: function initElement(element, state) {},
   mergeState: function mergeState(element, state, newState) {
@@ -1275,9 +1317,12 @@ definePrototype(StatefulMixin, Mixin, {
   },
   dispose: function dispose() {
     var state = StatefulMixin_(this);
+    each(state.states, function (i, v) {
+      unmounted.add(v);
+    });
+    setImmediateOnce(disposeUnmountedStates);
     combineFn(state.dispose.splice(0))();
     state.flush();
-    state.states = {};
     state.pending = {};
   }
 });
@@ -1302,18 +1347,13 @@ function ClassNameMixin(classNames) {
   this.classNames = classNames || [];
 }
 definePrototype(ClassNameMixin, StatefulMixin, {
-  initState: function initState() {
-    return {
-      element: null,
-      classNames: fill(this.classNames, false)
-    };
-  },
   initElement: function initElement(element, state) {
     var self = this;
+    state.classNames = fill(self.classNames, false);
     checkState(self, element, state);
-    watchOwnAttributes(element, 'class', function () {
+    state.onDispose(watchOwnAttributes(element, 'class', function () {
       checkState(self, element, state, true);
-    });
+    }).dispose);
   },
   onLayoutEffect: function onLayoutEffect(element, state) {
     setClass(element, state.classNames);
@@ -1373,8 +1413,8 @@ definePrototype(AnimateSequenceItemMixin, ClassNameMixin, {
     return [this.className].concat(AnimateSequenceItemMixinSuper.getClassNames.call(this));
   }
 });
-// EXTERNAL MODULE: external {"commonjs":"jquery","commonjs2":"jquery","amd":"jquery","root":["jQuery"]}
-var external_commonjs_jquery_commonjs2_jquery_amd_jquery_root_jQuery_ = __webpack_require__(942);
+// EXTERNAL MODULE: external {"commonjs":"jquery","commonjs2":"jquery","amd":"jquery","root":"jQuery"}
+var external_commonjs_jquery_commonjs2_jquery_amd_jquery_root_jQuery_ = __webpack_require__(914);
 ;// CONCATENATED MODULE: ./src/mixins/AnimateSequenceMixin.js
 
 
@@ -1406,9 +1446,9 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
     var self = this;
     AnimateSequenceMixinSuper.initElement.call(self, element, state);
     if (self.selector) {
-      self.onDispose(watchElements(element, self.selector, function (addedNodes) {
+      state.onDispose(watchElements(element, self.selector, function (addedNodes) {
         external_commonjs_jquery_commonjs2_jquery_amd_jquery_root_jQuery_(addedNodes).attr('is-animate-sequence', '');
-      }));
+      }).dispose);
     }
   }
 });
@@ -1438,24 +1478,43 @@ definePrototype(ClassNameToggleMixin, StatefulMixin, {
 
 
 
-
 var FlyoutToggleMixinSuper = ClassNameMixin.prototype;
 function FlyoutToggleMixin(mixin) {
   ClassNameMixin.call(this, ['target-opened']);
   this.flyoutMixin = mixin;
 }
+function triggerFlyoutAction(self, state, trigger, action, args) {
+  if ((state.trigger || 'click') === trigger) {
+    action.apply(self, args);
+  }
+}
 definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+  on: function on(trigger) {
+    this.state.trigger = trigger;
+    return this;
+  },
   open: function open(value, source) {
     return this.flyoutMixin.open(value, source);
   },
   close: function close(value) {
     return this.flyoutMixin.close(value);
   },
+  toggle: function toggle(source) {
+    return this.flyoutMixin.toggleSelf(source);
+  },
   initElement: function initElement(element, state) {
     var self = this;
     FlyoutToggleMixinSuper.initElement.call(self, element, state);
-    self.onDispose(zeta_dom_dom.on(element, 'click', function () {
-      toggleFlyout(self.flyoutMixin.elements()[0], element, self.flyoutMixin.getOptions());
+    state.onDispose(zeta_dom_dom.on(element, {
+      focusin: function focusin() {
+        triggerFlyoutAction(self, state, 'focus', self.open, [null, zeta_dom_dom.activeElement]);
+      },
+      focusout: function focusout() {
+        triggerFlyoutAction(self, state, 'focus', self.close, []);
+      },
+      click: function click() {
+        triggerFlyoutAction(self, state, 'click', self.toggle, [element]);
+      }
     }));
   }
 });
@@ -1484,6 +1543,9 @@ function FlyoutMixin() {
   });
 }
 definePrototype(FlyoutMixin, ClassNameMixin, {
+  get element() {
+    return this.elements()[0] || null;
+  },
   getOptions: function getOptions() {
     var self = this;
     var options = pick(self, ['closeOnBlur']);
@@ -1516,16 +1578,18 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     });
   },
   open: function open(value, source) {
-    return openFlyout(this.elements()[0], value, source, this.getOptions());
+    return openFlyout(this.element, value, source, this.getOptions());
   },
   close: function close(value) {
-    return closeFlyout(this.elements()[0], value);
+    return closeFlyout(this.element, value);
+  },
+  toggleSelf: function toggleSelf(source) {
+    return toggleFlyout(this.element, source, this.getOptions());
   },
   onOpen: function onOpen(callback) {
-    var element = this.elements()[0];
     return this.onToggleState(function (opened) {
       if (opened) {
-        return callback(valueMap.get(element));
+        callback(valueMap.get(this.element));
       }
     });
   },
@@ -1537,8 +1601,11 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   },
   initElement: function initElement(element, state) {
     var self = this;
+    if (self.elements()[1]) {
+      _throws('FlyoutMixin only supports single element');
+    }
     FlyoutMixinSuper.initElement.call(self, element, state);
-    self.onDispose(app_app.on(element, {
+    state.onDispose(app_app.on(element, {
       flyoutshow: function flyoutshow(e) {
         valueMap.set(element, e.data);
         self.isFlyoutOpened = true;
@@ -1582,7 +1649,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
         callback(arg || target);
       }
     };
-    this.onDispose(zeta_dom_dom.on(element, {
+    state.onDispose(zeta_dom_dom.on(element, {
       focusin: function focusin(e) {
         state.focused = e.source;
         setClass(element, 'focused', e.source);
@@ -1621,7 +1688,7 @@ definePrototype(LoadingStateMixin, ClassNameMixin, {
     var self = this;
     LoadingStateMixinSuper.initElement.call(self, element, state);
     getDirectiveComponent(element).enableLoadingClass = true;
-    self.onDispose(subscribeAsync(element, function (loading) {
+    state.onDispose(subscribeAsync(element, function (loading) {
       self.loading = loading || !!any(self.elements(), function (v) {
         return v !== element && getClass(v, 'loading') === true;
       });
@@ -1643,6 +1710,13 @@ function ScrollableMixin() {
   self.scrolling = false;
 }
 definePrototype(ScrollableMixin, ClassNameMixin, {
+  get element() {
+    return this.elements()[0] || null;
+  },
+  get contentElement() {
+    var element = this.element;
+    return element && getDirectiveComponent(element).scrollable.scrollTarget;
+  },
   withOptions: function withOptions(options) {
     this.options = options;
     return this;
@@ -1663,8 +1737,11 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
   },
   initElement: function initElement(element, state) {
     var self = this;
+    if (self.elements()[1]) {
+      _throws('ScrollableMixin only supports single element');
+    }
     ScrollableMixinSuper.initElement.call(self, element, state);
-    self.onDispose(app_app.on(element, {
+    state.onDispose(app_app.on(element, {
       scrollIndexChange: function scrollIndexChange(e) {
         self.pageIndex = e.newIndex;
       },
@@ -1679,7 +1756,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
 });
 each('destroy enable disable setOptions setStickyPosition refresh scrollPadding stop scrollLeft scrollTop scrollBy scrollTo scrollByPage scrollToPage scrollToElement', function (i, v) {
   defineHiddenProperty(ScrollableMixin.prototype, v, function () {
-    var obj = getDirectiveComponent(this.elements()[0]);
+    var obj = getDirectiveComponent(this.element);
     return obj.scrollable[v].apply(null, arguments);
   });
 });
@@ -1756,7 +1833,7 @@ var useScrollableMixin = /*#__PURE__*/createUseFunction(ScrollableMixin);
 var useScrollIntoViewMixin = /*#__PURE__*/createUseFunction(ScrollIntoViewMixin);
 var useUnmanagedClassNameMixin = /*#__PURE__*/createUseFunction(UnmanagedClassNameMixin);
 function useMixin(ctor) {
-  return (0,external_commonjs_zeta_dom_react_commonjs2_zeta_dom_react_amd_zeta_dom_react_root_zeta_react_.useSingleton)(function () {
+  return useSingleton(function () {
     return new ctor();
   }).reset();
 }