brew-js-react 0.4.2 → 0.4.4

package/dialog.d.ts

@@ -1,4 +1,4 @@
-export type DialogCloseCallback<T> = (value?: T) => void;
+export type DialogCloseCallback<T> = (value?: T) => Promise<void>;
 
 export interface DialogState<T> {
     readonly root: HTMLElement;

package/dialog.js

@@ -1,10 +1,10 @@
 import { createElement, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import ReactDOMClient from "./include/external/react-dom-client.js";
-import { always, catchAsync, either, extend, makeAsync, noop, pipe } from "./include/zeta-dom/util.js";
-import { containsOrEquals, removeNode } from "./include/zeta-dom/domUtil.js";
+import { always, either, extend, makeAsync, noop, pipe, setImmediate } from "./include/zeta-dom/util.js";
+import { containsOrEquals, removeNode, setClass } from "./include/zeta-dom/domUtil.js";
 import dom from "./include/zeta-dom/dom.js";
-import { lock, preventLeave } from "./include/zeta-dom/domLock.js";
+import { lock, notifyAsync, preventLeave, subscribeAsync } from "./include/zeta-dom/domLock.js";
 import { closeFlyout, openFlyout } from "./include/brew-js/domAction.js";
 
 /**
@@ -16,13 +16,22 @@ export function createDialog(props) {
     var closeDialog = closeFlyout.bind(0, root);
     var promise;
 
-    dom.on(root, 'flyouthide', function () {
-        removeNode(root);
-        (props.onClose || noop)(root);
-        if (props.onRender) {
-            reactRoot.unmount();
+    dom.on(root, {
+        flyouthide: function () {
+            removeNode(root);
+            (props.onClose || noop)(root);
+            if (props.onRender) {
+                reactRoot.unmount();
+            }
+        },
+        asyncStart: function () {
+            setClass(root, 'loading', true);
+        },
+        asyncEnd: function () {
+            setClass(root, 'loading', false);
         }
     });
+    subscribeAsync(root);
 
     return {
         root: root,
@@ -42,8 +51,8 @@ export function createDialog(props) {
                 var dialogProps = extend({}, props, {
                     closeDialog: function (value) {
                         var promise = makeAsync(props.onCommit || pipe)(value);
-                        catchAsync(lock(dom.activeElement, promise));
-                        promise.then(closeDialog, noop);
+                        notifyAsync(dom.activeElement, promise);
+                        return promise.then(closeDialog);
                     }
                 });
                 var content = createElement(props.onRender, dialogProps);
@@ -51,6 +60,9 @@ export function createDialog(props) {
                     content = createElement(props.wrapper, dialogProps, content);
                 }
                 reactRoot.render(content);
+                setImmediate(function () {
+                    dom.focus(root);
+                });
             }
             promise = openFlyout(root);
             if (props.preventLeave) {

package/dist/brew-js-react.js

@@ -1,4 +1,4 @@
-/*! brew-js-react v0.4.2 | (c) misonou | https://hackmd.io/@misonou/brew-js-react */
+/*! brew-js-react v0.4.4 | (c) misonou | https://hackmd.io/@misonou/brew-js-react */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), (function webpackLoadOptionalExternalModule() { try { return require("react-dom/client"); } catch(e) {} }()), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
@@ -402,7 +402,8 @@ var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_z
     retainFocus = _lib$dom.retainFocus,
     releaseFocus = _lib$dom.releaseFocus,
     iterateFocusPath = _lib$dom.iterateFocusPath,
-    dom_focus = _lib$dom.focus;
+    dom_focus = _lib$dom.focus,
+    dom_blur = _lib$dom.blur;
 
 ;// CONCATENATED MODULE: ./src/include/zeta-dom/dom.js
 
@@ -444,14 +445,23 @@ function createDialog(props) {
   var _closeDialog = closeFlyout.bind(0, root);
 
   var promise;
-  zeta_dom_dom.on(root, 'flyouthide', function () {
-    removeNode(root);
-    (props.onClose || noop)(root);
+  zeta_dom_dom.on(root, {
+    flyouthide: function flyouthide() {
+      removeNode(root);
+      (props.onClose || noop)(root);
 
-    if (props.onRender) {
-      reactRoot.unmount();
+      if (props.onRender) {
+        reactRoot.unmount();
+      }
+    },
+    asyncStart: function asyncStart() {
+      setClass(root, 'loading', true);
+    },
+    asyncEnd: function asyncEnd() {
+      setClass(root, 'loading', false);
     }
   });
+  subscribeAsync(root);
   return {
     root: root,
     close: _closeDialog,
@@ -473,8 +483,8 @@ function createDialog(props) {
         var dialogProps = extend({}, props, {
           closeDialog: function closeDialog(value) {
             var promise = makeAsync(props.onCommit || pipe)(value);
-            catchAsync(lock(zeta_dom_dom.activeElement, promise));
-            promise.then(_closeDialog, noop);
+            notifyAsync(zeta_dom_dom.activeElement, promise);
+            return promise.then(_closeDialog);
           }
         });
         var content = /*#__PURE__*/(0,external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement)(props.onRender, dialogProps);
@@ -484,6 +494,9 @@ function createDialog(props) {
         }
 
         reactRoot.render(content);
+        setImmediate(function () {
+          zeta_dom_dom.focus(root);
+        });
       }
 
       promise = openFlyout(root);
@@ -590,15 +603,17 @@ var setBaseUrl = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_br
 
 
 
+var _ = createPrivateStore();
+
 var root = zeta_dom_dom.root;
 var routeMap = new Map();
 var usedParams = {};
 var sortedViews = [];
 var emitter = new ZetaEventContainer();
-var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(Object.freeze({
-  container: root,
-  active: true
+var rootContext = freeze(extend(new ViewContext(null, null), {
+  container: root
 }));
+var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(rootContext);
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
 
@@ -606,11 +621,25 @@ var view_event = {};
 onAppInit(function () {
   app_app.on('beforepageload', function (e) {
     view_event = e;
+
+    _(rootContext).setPage(app_app.page);
   });
 });
 
-function ViewContext(view) {
-  defineOwnProperty(this, 'view', view, true);
+function ViewContext(view, page) {
+  var self = this;
+  defineOwnProperty(self, 'view', view, true);
+
+  _(self, {
+    setPage: defineObservableProperty(self, 'page', page, true),
+    setActive: defineObservableProperty(self, 'active', true, true)
+  });
+
+  watch(self, 'page', function (page, previousPage) {
+    emitter.emit('pagechange', self, {
+      previousPage: previousPage
+    });
+  });
 }
 
 definePrototype(ViewContext, {
@@ -676,31 +705,40 @@ function ViewContainer() {
   this.stateId = history.state;
 }
 
+ViewContainer.contextType = StateContext;
 definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react_root_React_.Component, {
   componentDidMount: function componentDidMount() {
     /** @type {any} */
     var self = this;
     self.componentWillUnmount = combineFn(watch(app_app.route, function () {
-      self.setActive(self.getViewComponent() === self.currentViewComponent);
+      (self.setActive || noop)(self.getViewComponent() === self.currentViewComponent);
     }), app_app.on('beforepageload', function () {
       self.stateId = history.state;
-      self.updateView();
-      self.forceUpdate();
+
+      if (self.context === rootContext || self.updateOnNext) {
+        view_event.waitFor(new Promise(function (resolve) {
+          self.onRender = resolve;
+        }));
+        self.updateView();
+        self.forceUpdate();
+      }
     }));
   },
   render: function render() {
     /** @type {any} */
     var self = this;
 
-    if (history.state === self.stateId) {
+    if (history.state === self.stateId && self.context.active) {
       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);
   },
   updateView: function updateView() {
     var self = this;
     var V = self.getViewComponent();
+    self.updateOnNext = false;
 
     if (V) {
       // ensure the current path actually corresponds to the matched view
@@ -709,6 +747,8 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
 
       if (targetPath !== removeQueryAndHash(app_app.path)) {
         app_app.navigate(targetPath, true);
+        self.updateOnNext = true;
+        return;
       }
     }
 
@@ -728,6 +768,7 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         });
       }
 
+      (self.cancelPrevious || noop)();
       var onComponentLoaded;
       var promise = new Promise(function (resolve) {
         onComponentLoaded = resolve;
@@ -743,7 +784,7 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         });
         notifyAsync(element, promise);
       });
-      var state = new ViewContext(V);
+      var state = new ViewContext(V, app_app.page);
       var viewProps = freeze({
         navigationType: view_event.navigationType,
         viewContext: state,
@@ -758,17 +799,11 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
         onComponentLoaded: onComponentLoaded,
         viewProps: viewProps
       }))));
-      extend(self, {
+      extend(self, _(state), {
+        cancelPrevious: onComponentLoaded,
         currentPath: app_app.path,
         currentView: view,
-        currentViewComponent: V,
-        setPage: defineObservableProperty(state, 'page', app_app.page, true),
-        setActive: defineObservableProperty(state, 'active', true, true)
-      });
-      watch(state, 'page', function (page, previousPage) {
-        emitter.emit('pagechange', state, {
-          previousPage: previousPage
-        });
+        currentViewComponent: V
       });
       (view_event.waitFor || noop)(promise);
     }
@@ -846,6 +881,7 @@ function createViewComponent(factory) {
     if (isThenable(children)) {
       promise = children;
       children = null;
+      catchAsync(promise);
     }
 
     var state = (0,external_zeta_dom_react_.useAsync)(function () {
@@ -994,10 +1030,11 @@ function useAppReadyState() {
 }
 function useRouteParam(name, defaultValue) {
   var container = useViewContext();
+  var params = container.page.params;
   var route = app_app.route;
-  var value = route[name] || '';
+  var value = params[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];
+  var forceUpdate = (0,external_zeta_dom_react_.useUpdateTrigger)();
   (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
     var setValue = function setValue() {
       var current = route[name] || '';
@@ -1005,7 +1042,7 @@ function useRouteParam(name, defaultValue) {
       if (current !== ref.current) {
         if (container.active) {
           ref.current = current;
-          forceUpdate({});
+          forceUpdate();
         } else {
           watch(container, 'active', setValue);
         }
@@ -1025,8 +1062,8 @@ function useRouteParam(name, defaultValue) {
   }, [name, defaultValue]);
   ref.current = value;
 
-  if (defaultValue !== undefined && (!value || name === 'remainingSegments' && value === '/')) {
-    app_app.navigate(route.getPath(extend({}, route, kv(name, defaultValue))), true);
+  if (defaultValue && container.active && (!value || name === 'remainingSegments' && value === '/')) {
+    app_app.navigate(route.getPath(extend({}, params, kv(name, defaultValue))), true);
   }
 
   return value;
@@ -1284,7 +1321,7 @@ var observe_lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom
 
 
 
-var _ = createPrivateStore();
+var StatefulMixin_ = createPrivateStore();
 
 function MixinRefImpl(mixin) {
   this.mixin = mixin;
@@ -1298,8 +1335,8 @@ definePrototype(MixinRefImpl, {
 function StatefulMixin() {
   Mixin.call(this);
 
-  _(this, {
-    elements: new Set(),
+  StatefulMixin_(this, {
+    elements: new WeakSet(),
     flush: watch(this, false),
     dispose: [],
     states: {},
@@ -1316,18 +1353,18 @@ definePrototype(StatefulMixin, Mixin, {
   },
 
   get state() {
-    var obj = _(this);
+    var obj = StatefulMixin_(this);
 
     var key = obj.prefix + obj.counter;
     return obj.states[key] || (obj.states[key] = this.initState());
   },
 
   reset: function reset() {
-    _(this).counter = 0;
+    StatefulMixin_(this).counter = 0;
     return this;
   },
   next: function next() {
-    _(this).counter++;
+    StatefulMixin_(this).counter++;
     return this;
   },
   getRef: function getRef() {
@@ -1336,20 +1373,20 @@ definePrototype(StatefulMixin, Mixin, {
     return function (current) {
       state.element = current;
 
-      if (current && setAdd(_(self).elements, current)) {
+      if (current && setAdd(StatefulMixin_(self).elements, current)) {
         self.initElement(current, state);
       }
     };
   },
   elements: function elements() {
-    return values(_(this).states).map(function (v) {
+    return values(StatefulMixin_(this).states).map(function (v) {
       return v.element;
     }).filter(function (v) {
       return v;
     });
   },
   onDispose: function onDispose(callback) {
-    _(this).dispose.push(callback);
+    StatefulMixin_(this).dispose.push(callback);
   },
   initState: function initState() {
     return {
@@ -1361,7 +1398,7 @@ definePrototype(StatefulMixin, Mixin, {
     var self = this;
     var clone = inherit(Object.getPrototypeOf(self), self);
 
-    _(clone, extend({}, _(self), {
+    StatefulMixin_(clone, extend({}, StatefulMixin_(self), {
       prefix: randomId() + '.',
       counter: 0
     }));
@@ -1369,12 +1406,12 @@ definePrototype(StatefulMixin, Mixin, {
     return clone;
   },
   dispose: function dispose() {
-    var state = _(this);
+    var state = StatefulMixin_(this);
 
     var states = state.states;
     combineFn(state.dispose.splice(0))();
     state.flush();
-    state.elements.clear();
+    state.elements = new WeakSet();
     each(states, function (i, v) {
       delete states[i];
     });
@@ -1514,6 +1551,8 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
 ;// CONCATENATED MODULE: ./src/mixins/FlyoutToggleMixin.js
 
 
+
+
 var FlyoutToggleMixinSuper = ClassNameMixin.prototype;
 function FlyoutToggleMixin(mixin) {
   ClassNameMixin.call(this, ['target-opened']);
@@ -1526,11 +1565,12 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
   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
-    });
+  initElement: function initElement(element, state) {
+    var self = this;
+    FlyoutToggleMixinSuper.initElement.call(self, element, state);
+    self.onDispose(zeta_dom_dom.on(element, 'click', function () {
+      openFlyout(self.flyoutMixin.elements()[0], null, element, true);
+    }));
   }
 });
 ;// CONCATENATED MODULE: ./src/mixins/FlyoutMixin.js
@@ -1541,7 +1581,6 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
 
 var FlyoutMixinSuper = ClassNameMixin.prototype;
 var valueMap = new WeakMap();
-var flyoutMixinCounter = 0;
 function FlyoutMixin() {
   var self = this;
   ClassNameMixin.call(self, ['open', 'closing', 'visible', 'tweening-in', 'tweening-out']);
@@ -1609,11 +1648,6 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   initElement: function initElement(element, state) {
     var self = this;
     FlyoutMixinSuper.initElement.call(self, element, state);
-
-    if (!element.id) {
-      element.id = 'flyout-' + ++flyoutMixinCounter;
-    }
-
     self.onDispose(app_app.on(element, {
       animationstart: function animationstart() {
         self.animating = true;
@@ -1622,11 +1656,6 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         self.animating = false;
       }
     }, true));
-    setImmediate(function () {
-      each(self.toggle.elements(), function (i, v) {
-        v.setAttribute('toggle', '#' + element.id);
-      });
-    });
   },
   clone: function clone() {
     var self = this;
@@ -1653,23 +1682,47 @@ function FocusStateMixin() {
   StatefulMixin.call(this);
 }
 definePrototype(FocusStateMixin, StatefulMixin, {
+  "for": function _for(ref) {
+    this.state.ref = ref;
+    return this;
+  },
   initElement: function initElement(element, state) {
     FocusStateMixinSuper.initElement.call(this, element, state);
+
+    var checkTarget = function checkTarget(callback, arg) {
+      var ref = state.ref;
+      var target = ref && (typeof ref === 'string' ? element.querySelector(ref) : ref.current);
+
+      if (target && !zeta_dom_dom.focused(target)) {
+        callback(arg || target);
+      }
+    };
+
     this.onDispose(zeta_dom_dom.on(element, {
       focusin: function focusin(e) {
-        state.focused = true;
+        state.focused = e.source;
         setClass(element, 'focused', e.source);
+        checkTarget(zeta_dom_dom.focus);
       },
       focusout: function focusout() {
         state.focused = false;
         setClass(element, 'focused', false);
+      },
+      focuschange: function focuschange() {
+        checkTarget(zeta_dom_dom.blur, element);
       }
     }));
   },
   getClassNames: function getClassNames() {
-    return [{
-      focused: !!this.state.focused
-    }];
+    var classes = {};
+    var focused = this.state.focused;
+
+    if (focused) {
+      classes.focused = true;
+      classes['focused-' + focused] = true;
+    }
+
+    return [classes];
   }
 });
 ;// CONCATENATED MODULE: ./src/mixins/LoadingStateMixin.js
@@ -1741,6 +1794,8 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
       'scroller-snap-page': options.paged,
       'scroller-page': options.pagedItemSelector,
       'scroller-state': 'pageIndex'
+    }, options.persistScroll && {
+      'persist-scroll': ''
     });
   },
   onPageIndexChanged: function onPageIndexChanged(callback) {