brew-js-react 0.5.1 → 0.5.3

package/dialog.d.ts

@@ -1,35 +1,116 @@
 export type DialogCloseCallback<T> = (value?: T) => Promise<void>;
 
 export interface DialogState<T> {
+    /**
+     * Gets the root element of the dialog.
+     */
     readonly root: HTMLElement;
+    /**
+     * Opens the dialog.
+     *
+     * It will receive result from {@link DialogState.close} or {@link DialogRenderComponentProps.closeDialog} when the dialog is properly closed.
+     * Otherwise in cases such as being closed due to lost of focus, result value will always be `undefined`.
+     */
     open: () => Promise<T | undefined>;
-    close: DialogCloseCallback<T>;
+    /**
+     * Closes the dialog, with optional result value.
+     *
+     * This method is different from {@link DialogRenderComponentProps.closeDialog} that {@link DialogBaseProps.onCommit} will not be called.
+     */
+    close: (value?: T) => Promise<void>;
 }
 
-export interface DialogBaseProps<T> {
+export interface DialogBaseProps<T, V = T> {
+    /**
+     * Specifies dialog title.
+     * This property is intended to be handled by {@link DialogOptions.onRender} or {@link DialogOptions.wrapper}.
+     */
     title?: string;
+    /**
+     * CSS class names to be added to root element.
+     */
     className?: string;
+    /**
+     * Whether to show close button in the dialog.
+     * This property is intended to be handled by {@link DialogOptions.onRender} or {@link DialogOptions.wrapper}.
+     */
     showCloseButton?: boolean;
+    /**
+     * Whether confirmation should be prompted when user leaves the page.
+     */
     preventLeave?: boolean;
+    /**
+     * Whether navigation within single-paged app should be prevented.
+     */
     preventNavigation?: boolean;
+    /**
+     * Whether the dialog is modal.
+     */
     modal?: boolean;
-    onCommit?: (value: T | undefined) => void;
+    /**
+     * Whether flyout content will be initially focused.
+     * Default is `true` if source element is not an text input element.
+     *
+     * If a CSS selector is given, the first matched element will be focused; otherwise
+     * the first focusable element will be focused.
+     */
+    focus?: boolean | string;
+    /**
+     * Callback to perform asynchronous action when user confirms the dialog.
+     *
+     * The callback will receive value sent from {@link DialogRenderComponentProps.closeDialog},
+     * and will send resolved value to promise returned by {@link DialogState.open}.
+     *
+     * The dialog will be held open until the returned promise resolves.
+     * When the promise rejects, the dialog will remain open.
+     */
+    onCommit?: (value: V | undefined) => T | Promise<T> | void;
+    /**
+     * Callback to be invoked when dialog has opened.
+     */
     onOpen?: (root: HTMLElement) => void;
+    /**
+     * Callback to be invoked when dialog has closed, after outro animation and before React DOM is unmounted.
+     */
     onClose?: (root: HTMLElement) => void;
 }
 
-export interface DialogRenderComponentProps<T, P = {}> extends DialogBaseProps<T>, P {
-    closeDialog: DialogCloseCallback<T>;
+export interface DialogRenderComponentProps<T, V = T> extends DialogBaseProps<T, V> {
+    /**
+     * Commits the dialog, with optional result value.
+     *
+     * When {@link DialogBaseProps.onCommit} is specified, it is invoked with the value passed in.
+     * Dialog will be closed when async operation is completed, or remain open if the operation failed.
+     */
+    closeDialog: (value?: V) => Promise<void>;
 }
 
-export interface DialogOptions<T, P = {}> extends DialogBaseProps<T> {
-    onRender: React.FC<DialogRenderComponentProps<T, P>>;
+export interface DialogOptions<T, V = T> extends DialogBaseProps<T, V> {
+    /**
+     * A callback that render dialog contents.
+     */
+    onRender: React.FC<DialogRenderComponentProps<T, V> & this>;
+    /**
+     * Specifies wrapper component that envelops content from {@link DialogOptions.onRender},
+     * which is useful for reusable layout for dialogs.
+     */
+    wrapper?: React.FC<React.PropsWithChildren<DialogRenderComponentProps<T, V> & this>>;
 }
 
-export interface DialogProps<T> extends React.PropsWithChildren<DialogBaseProps<T>> {
+export interface DialogProps<T, V = T> extends React.PropsWithChildren<DialogBaseProps<T, V>> {
+    /**
+     * A boolean flag controlling whether dialog is open.
+     */
     isOpen: boolean;
 }
 
-export function createDialog<T = any, P = {}>(props: DialogOptions<T, P> & { wrapper?: React.FC<React.PropsWithChildren<DialogRenderComponentProps<T, P>>> }): DialogState<T>;
+/**
+ * Creates a controller to render dialog.
+ * @param props A dictionary containing options.
+ */
+export function createDialog<T = any, V = T>(props: DialogOptions<T, V>): DialogState<T>;
 
-export function Dialog<T>(props: DialogProps<T>): JSX.Element;
+/**
+ * Renders a dialog declaratively.
+ */
+export function Dialog<T, V = T>(props: DialogProps<T, V>): JSX.Element;

package/dialog.js

@@ -1,8 +1,8 @@
 import { createElement, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import ReactDOMClient from "./include/external/react-dom-client.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 { either, extend, makeAsync, noop, pick, pipe, resolve } from "./include/zeta-dom/util.js";
+import { containsOrEquals, removeNode } from "./include/zeta-dom/domUtil.js";
 import dom from "./include/zeta-dom/dom.js";
 import { lock, notifyAsync, preventLeave, subscribeAsync } from "./include/zeta-dom/domLock.js";
 import { closeFlyout, openFlyout } from "./include/brew-js/domAction.js";
@@ -17,21 +17,20 @@ export function createDialog(props) {
     var promise;
 
     dom.on(root, {
+        flyoutshow: function () {
+            (props.onOpen || noop)(root);
+        },
         flyouthide: function () {
+            promise = null;
             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);
+    root.setAttribute('loading-class', '');
+    subscribeAsync(root, true);
 
     return {
         root: root,
@@ -45,7 +44,6 @@ export function createDialog(props) {
             dom.retainFocus(dom.activeElement, root);
             if (props.modal) {
                 root.setAttribute('is-modal', '');
-                dom.setModal(root);
             }
             if (props.onRender) {
                 var dialogProps = extend({}, props, {
@@ -60,20 +58,15 @@ export function createDialog(props) {
                     content = createElement(props.wrapper, dialogProps, content);
                 }
                 reactRoot.render(content);
-                setImmediate(function () {
-                    dom.focus(root);
-                });
             }
-            promise = openFlyout(root);
+            promise = resolve().then(function () {
+                return openFlyout(root, null, pick(props, ['focus']));
+            });
             if (props.preventLeave) {
                 preventLeave(root, promise);
             } else if (props.preventNavigation) {
                 lock(root, promise);
             }
-            always(promise, function () {
-                promise = null;
-            });
-            (props.onOpen || noop)(root);
             return promise;
         }
     };

package/dist/brew-js-react.js

@@ -1,4 +1,4 @@
-/*! brew-js-react v0.5.1 | (c) misonou | https://misonou.github.io */
+/*! brew-js-react v0.5.3 | (c) misonou | https://misonou.github.io */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
@@ -355,6 +355,7 @@ var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_do
     createNodeIterator = domUtil_lib$util.createNodeIterator,
     createTreeWalker = domUtil_lib$util.createTreeWalker,
     bind = domUtil_lib$util.bind,
+    bindOnce = domUtil_lib$util.bindOnce,
     bindUntil = domUtil_lib$util.bindUntil,
     dispatchDOMMouseEvent = domUtil_lib$util.dispatchDOMMouseEvent,
     removeNode = domUtil_lib$util.removeNode,
@@ -412,6 +413,7 @@ var domLock_lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom
     cancelLock = domLock_lib$dom.cancelLock,
     subscribeAsync = domLock_lib$dom.subscribeAsync,
     notifyAsync = domLock_lib$dom.notifyAsync,
+    runAsync = domLock_lib$dom.runAsync,
     preventLeave = domLock_lib$dom.preventLeave;
 
 ;// CONCATENATED MODULE: ./tmp/brew-js/domAction.js
@@ -443,22 +445,21 @@ function createDialog(props) {
 
   var promise;
   zeta_dom_dom.on(root, {
+    flyoutshow: function flyoutshow() {
+      (props.onOpen || noop)(root);
+    },
     flyouthide: function flyouthide() {
+      promise = null;
       removeNode(root);
       (props.onClose || noop)(root);
 
       if (props.onRender) {
         reactRoot.unmount();
       }
-    },
-    asyncStart: function asyncStart() {
-      setClass(root, 'loading', true);
-    },
-    asyncEnd: function asyncEnd() {
-      setClass(root, 'loading', false);
     }
   });
-  subscribeAsync(root);
+  root.setAttribute('loading-class', '');
+  subscribeAsync(root, true);
   return {
     root: root,
     close: _closeDialog,
@@ -473,7 +474,6 @@ function createDialog(props) {
 
       if (props.modal) {
         root.setAttribute('is-modal', '');
-        zeta_dom_dom.setModal(root);
       }
 
       if (props.onRender) {
@@ -491,12 +491,11 @@ function createDialog(props) {
         }
 
         reactRoot.render(content);
-        setImmediate(function () {
-          zeta_dom_dom.focus(root);
-        });
       }
 
-      promise = openFlyout(root);
+      promise = resolve().then(function () {
+        return openFlyout(root, null, pick(props, ['focus']));
+      });
 
       if (props.preventLeave) {
         preventLeave(root, promise);
@@ -504,10 +503,6 @@ function createDialog(props) {
         lock(root, promise);
       }
 
-      always(promise, function () {
-        promise = null;
-      });
-      (props.onOpen || noop)(root);
       return promise;
     }
   };
@@ -1273,9 +1268,9 @@ function makeTranslation(resources, defaultLang) {
 ;// CONCATENATED MODULE: ./src/mixins/StaticAttributeMixin.js
 
 
-function StaticAttributeMixin(attributes) {
+function StaticAttributeMixin(name, value) {
   Mixin.call(this);
-  this.attributes = attributes || {};
+  this.attributes = isPlainObject(name) || kv(name, value || '');
 }
 definePrototype(StaticAttributeMixin, Mixin, {
   getCustomAttributes: function getCustomAttributes() {
@@ -1306,9 +1301,11 @@ definePrototype(Mixin, {
 watchable(Mixin.prototype);
 util_define(Mixin, {
   get scrollableTarget() {
-    return new StaticAttributeMixin({
-      'scrollable-target': ''
-    });
+    return new StaticAttributeMixin('scrollable-target');
+  },
+
+  get tabRoot() {
+    return new StaticAttributeMixin('tab-root');
   },
 
   use: function use() {
@@ -1425,8 +1422,10 @@ definePrototype(StatefulMixin, Mixin, {
 
         self.onLayoutEffect(current, state);
         obj.elements.add(current);
-      } else {
-        obj.elements["delete"](state.element);
+      } else if (state) {
+        var prev = state.element;
+        self.onBeforeUpdate(prev, state);
+        obj.elements["delete"](prev);
       }
     };
   },
@@ -1446,6 +1445,7 @@ definePrototype(StatefulMixin, Mixin, {
     extend(state, newState);
   },
   onLayoutEffect: function onLayoutEffect(element, state) {},
+  onBeforeUpdate: function onBeforeUpdate(element, state) {},
   clone: function clone() {
     return this;
   },
@@ -1471,7 +1471,8 @@ function checkState(self, element, state, fireEvent) {
     classNames[i] = element.classList.contains(i);
   });
 
-  if (fireEvent && !equal(prev, classNames)) {
+  if (fireEvent && !equal(state.prev || prev, classNames)) {
+    state.prev = prev;
     self.onClassNameUpdated(element, prev, extend({}, classNames));
   }
 }
@@ -1497,6 +1498,9 @@ definePrototype(ClassNameMixin, StatefulMixin, {
   onLayoutEffect: function onLayoutEffect(element, state) {
     setClass(element, state.classNames);
   },
+  onBeforeUpdate: function onBeforeUpdate(element, state) {
+    checkState(this, element, state);
+  },
   onClassNameUpdated: function onClassNameUpdated(element, prevState, state) {}
 });
 ;// CONCATENATED MODULE: ./src/mixins/AnimateMixin.js
@@ -1525,7 +1529,7 @@ definePrototype(AnimateMixin, ClassNameMixin, {
   },
   getCustomAttributes: function getCustomAttributes() {
     var self = this;
-    return extend({}, AnimateMixinSuper.getCustomAttributes.call(self), {
+    return extend(AnimateMixinSuper.getCustomAttributes.call(self), {
       'animate-in': (self.effects || []).join(' '),
       'animate-on': self.trigger || 'show'
     });
@@ -1541,7 +1545,7 @@ function AnimateSequenceItemMixin(className) {
 }
 definePrototype(AnimateSequenceItemMixin, ClassNameMixin, {
   getCustomAttributes: function getCustomAttributes() {
-    return extend({}, AnimateSequenceItemMixinSuper.getCustomAttributes.call(this), {
+    return extend(AnimateSequenceItemMixinSuper.getCustomAttributes.call(this), {
       'is-animate-sequence': ''
     });
   },
@@ -1576,7 +1580,7 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
   },
   getCustomAttributes: function getCustomAttributes() {
     var self = this;
-    return extend({}, AnimateSequenceMixinSuper.getCustomAttributes.call(self), {
+    return extend(AnimateSequenceMixinSuper.getCustomAttributes.call(self), {
       'animate-in': null,
       'animate-sequence-type': (self.effects || []).join(' '),
       'animate-sequence': self.selector || '.' + self.className
@@ -1636,7 +1640,7 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
     var self = this;
     FlyoutToggleMixinSuper.initElement.call(self, element, state);
     self.onDispose(zeta_dom_dom.on(element, 'click', function () {
-      toggleFlyout(self.flyoutMixin.elements()[0], element);
+      toggleFlyout(self.flyoutMixin.elements()[0], element, self.flyoutMixin.flyoutOptions);
     }));
   }
 });
@@ -1656,6 +1660,7 @@ function FlyoutMixin() {
   self.isFlyoutOpened = false;
   self.animating = false;
   self.visible = false;
+  self.initialFocus = undefined;
   self.toggle = new FlyoutToggleMixin(self);
   self.onDispose(function () {
     self.isFlyoutOpened = false;
@@ -1663,6 +1668,16 @@ function FlyoutMixin() {
   });
 }
 definePrototype(FlyoutMixin, ClassNameMixin, {
+  get flyoutOptions() {
+    var options = {};
+
+    if (this.initialFocus !== undefined) {
+      options.focus = this.initialFocus;
+    }
+
+    return options;
+  },
+
   next: function next() {
     this.effects = undefined;
     return FlyoutMixinSuper.next.call(this);
@@ -1673,7 +1688,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   },
   getCustomAttributes: function getCustomAttributes() {
     var self = this;
-    return extend({}, FlyoutMixinSuper.getCustomAttributes.call(self), {
+    return extend(FlyoutMixinSuper.getCustomAttributes.call(self), {
       'is-flyout': '',
       'swipe-dismiss': self.swipeToDismiss
     }, self.modal && {
@@ -1689,7 +1704,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   open: function open(value) {
     var element = this.elements()[0];
     valueMap.set(element, value);
-    return openFlyout(element);
+    return openFlyout(element, null, this.flyoutOptions);
   },
   close: function close(value) {
     return closeFlyout(this.elements()[0], value);
@@ -1771,32 +1786,35 @@ definePrototype(FocusStateMixin, StatefulMixin, {
     setClass(element, 'focused', state.focused);
   }
 });
+;// CONCATENATED MODULE: ./tmp/brew-js/directive.js
+
+var getDirectiveComponent = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.getDirectiveComponent,
+    registerSimpleDirective = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.registerSimpleDirective,
+    registerDirective = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.registerDirective;
+
 ;// CONCATENATED MODULE: ./src/mixins/LoadingStateMixin.js
 
 
 
 
-var LoadingStateMixinSuper = StatefulMixin.prototype;
+
+var LoadingStateMixinSuper = ClassNameMixin.prototype;
 function LoadingStateMixin() {
-  StatefulMixin.call(this);
+  ClassNameMixin.call(this, ['loading', 'loading-complete']);
+  this.loading = false;
 }
-definePrototype(LoadingStateMixin, StatefulMixin, {
+definePrototype(LoadingStateMixin, ClassNameMixin, {
   initElement: function initElement(element, state) {
-    LoadingStateMixinSuper.initElement.call(this, element, state);
-    this.onDispose(subscribeAsync(element, function (loading) {
-      state.loading = loading;
-      setClass(element, 'loading', loading);
+    var self = this;
+    LoadingStateMixinSuper.initElement.call(self, element, state);
+    getDirectiveComponent(element).enableLoadingClass = true;
+    self.onDispose(subscribeAsync(element, function (loading) {
+      self.loading = loading || !!any(self.elements(), function (v) {
+        return v !== element && getClass(v, 'loading') === true;
+      });
     }));
-  },
-  onLayoutEffect: function onLayoutEffect(element, state) {
-    setClass(element, 'loading', state.loading);
   }
 });
-;// CONCATENATED MODULE: ./tmp/brew-js/directive.js
-
-var getDirectiveComponent = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.getDirectiveComponent,
-    registerDirective = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.registerDirective;
-
 ;// CONCATENATED MODULE: ./src/mixins/ScrollableMixin.js
 
 
@@ -1818,7 +1836,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
   },
   getCustomAttributes: function getCustomAttributes() {
     var options = this.options || {};
-    return extend({}, ScrollableMixinSuper.getCustomAttributes.call(this), {
+    return extend(ScrollableMixinSuper.getCustomAttributes.call(this), {
       'scrollable': [options.direction || 'both', options.handle || 'auto'].join(' ')
     }, options.pagedItemSelector && {
       'scroller-snap-page': options.paged,