brew-js-react 0.1.6 → 0.1.9

package/dist/brew-js-react.js

@@ -1,16 +1,24 @@
 (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"));
+		module.exports = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
 	else if(typeof define === 'function' && define.amd)
-		define("brew-js-react", ["brew-js", "react", "react-dom", "zeta-dom", "zeta-dom-react", "waterpipe"], factory);
+		define("brew-js-react", ["brew-js", "react", "react-dom", "zeta-dom", "zeta-dom-react", "waterpipe", "jQuery"], factory);
 	else if(typeof exports === 'object')
-		exports["brew-js-react"] = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"));
+		exports["brew-js-react"] = factory(require("brew-js"), require("react"), require("react-dom"), require("zeta-dom"), require("zeta-dom-react"), require("waterpipe"), require("jQuery"));
 	else
-		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["zeta"], root["zeta-dom-react"], root["waterpipe"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__80__, __WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__, __WEBPACK_EXTERNAL_MODULE__654__, __WEBPACK_EXTERNAL_MODULE__103__, __WEBPACK_EXTERNAL_MODULE__28__) {
+		root["brew-js-react"] = factory(root["brew"], root["React"], root["ReactDOM"], root["zeta"], root["zeta-dom-react"], root["waterpipe"], root["jQuery"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__80__, __WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__, __WEBPACK_EXTERNAL_MODULE__654__, __WEBPACK_EXTERNAL_MODULE__103__, __WEBPACK_EXTERNAL_MODULE__28__, __WEBPACK_EXTERNAL_MODULE__145__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 145:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__145__;
+
+/***/ }),
+
 /***/ 28:
 /***/ ((module) => {
 
@@ -59,6 +67,19 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__654__;
 
 /***/ }),
 
+/***/ 346:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+/// <reference types="jq-scrollable" />
+// @ts-nocheck
+
+/** @type {JQueryStatic} */
+var jQuery = window.jQuery || __webpack_require__(145);
+
+module.exports = jQuery;
+
+/***/ }),
+
 /***/ 43:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -148,6 +169,7 @@ __webpack_require__.d(src_namespaceObject, {
   "Dialog": () => (Dialog),
   "ErrorHandlerMixin": () => (ErrorHandlerMixin),
   "FlyoutMixin": () => (FlyoutMixin),
+  "FlyoutToggleMixin": () => (FlyoutToggleMixin),
   "FocusStateMixin": () => (FocusStateMixin),
   "LoadingStateMixin": () => (LoadingStateMixin),
   "Mixin": () => (Mixin),
@@ -227,10 +249,14 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     combineFn = _lib$util.combineFn,
     executeOnce = _lib$util.executeOnce,
     createPrivateStore = _lib$util.createPrivateStore,
+    util_setTimeout = _lib$util.setTimeout,
     setTimeoutOnce = _lib$util.setTimeoutOnce,
+    util_setInterval = _lib$util.setInterval,
+    setIntervalSafe = _lib$util.setIntervalSafe,
     util_setImmediate = _lib$util.setImmediate,
     setImmediateOnce = _lib$util.setImmediateOnce,
     throwNotFunction = _lib$util.throwNotFunction,
+    errorWithCode = _lib$util.errorWithCode,
     keys = _lib$util.keys,
     values = _lib$util.values,
     util_hasOwnProperty = _lib$util.hasOwnProperty,
@@ -271,7 +297,6 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
 var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.util,
     domReady = domUtil_lib$util.domReady,
     tagName = domUtil_lib$util.tagName,
-    domUtil_is = domUtil_lib$util.is,
     isVisible = domUtil_lib$util.isVisible,
     matchSelector = domUtil_lib$util.matchSelector,
     comparePosition = domUtil_lib$util.comparePosition,
@@ -298,11 +323,6 @@ var domUtil_lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_do
     getContentRect = domUtil_lib$util.getContentRect,
     scrollBy = domUtil_lib$util.scrollBy,
     scrollIntoView = domUtil_lib$util.scrollIntoView,
-    createRange = domUtil_lib$util.createRange,
-    rangeIntersects = domUtil_lib$util.rangeIntersects,
-    rangeEquals = domUtil_lib$util.rangeEquals,
-    rangeCovers = domUtil_lib$util.rangeCovers,
-    compareRangePosition = domUtil_lib$util.compareRangePosition,
     makeSelection = domUtil_lib$util.makeSelection,
     getRect = domUtil_lib$util.getRect,
     getRects = domUtil_lib$util.getRects,
@@ -332,6 +352,7 @@ var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_z
     releaseModal = _lib$dom.releaseModal,
     retainFocus = _lib$dom.retainFocus,
     releaseFocus = _lib$dom.releaseFocus,
+    iterateFocusPath = _lib$dom.iterateFocusPath,
     dom_focus = _lib$dom.focus;
 
 ;// CONCATENATED MODULE: ./src/include/zeta-dom/dom.js
@@ -736,7 +757,27 @@ definePrototype(StatefulMixin, Mixin, {
 
 
 
+
 var ClassNameMixinSuper = StatefulMixin.prototype;
+
+function checkState(self, element, state, isAsync) {
+  var classNames = state.classNames;
+  var prev = extend({}, classNames);
+  each(self.classNames, function (i, v) {
+    classNames[v] = element.classList.contains(v);
+  });
+
+  if (!equal(prev, classNames)) {
+    var cb = self.onClassNameUpdated.bind(self, element, prev, extend({}, classNames));
+
+    if (isAsync) {
+      setImmediate(cb);
+    } else {
+      cb();
+    }
+  }
+}
+
 function ClassNameMixin(classNames) {
   StatefulMixin.call(this);
   this.classNames = classNames || [];
@@ -745,6 +786,16 @@ definePrototype(ClassNameMixin, StatefulMixin, {
   getClassNames: function getClassNames() {
     return [this.state.classNames];
   },
+  getRef: function getRef() {
+    var self = this;
+    var element = self.state.element;
+
+    if (element && containsOrEquals(root, element)) {
+      checkState(self, element, self.state, true);
+    }
+
+    return ClassNameMixinSuper.getRef.call(this);
+  },
   initState: function initState() {
     return {
       element: null,
@@ -755,14 +806,7 @@ definePrototype(ClassNameMixin, StatefulMixin, {
     var self = this;
     zeta_dom_dom.watchAttributes(element, ['class'], function (nodes) {
       if (nodes.includes(element)) {
-        var prev = extend({}, state.classNames);
-        each(self.classNames, function (i, v) {
-          state.classNames[v] = element.classList.contains(v);
-        });
-
-        if (!equal(prev, state.classNames)) {
-          self.onClassNameUpdated(element, prev, state.classNames);
-        }
+        checkState(self, element, state);
       }
     });
   },
@@ -895,31 +939,34 @@ definePrototype(ErrorHandlerMixin, StatefulMixin, {
     });
   }
 });
-;// CONCATENATED MODULE: ./src/mixins/FlyoutMixin.js
+;// CONCATENATED MODULE: ./src/mixins/FlyoutToggleMixin.js
 
 
-
-var FlyoutMixinSuper = ClassNameMixin.prototype;
-var flyoutMixinCounter = 0;
-
+var FlyoutToggleMixinSuper = ClassNameMixin.prototype;
 function FlyoutToggleMixin(mixin) {
   ClassNameMixin.call(this, ['target-opened']);
   this.flyoutMixin = mixin;
 }
-
 definePrototype(FlyoutToggleMixin, ClassNameMixin, {
   getCustomAttributes: function getCustomAttributes() {
     var element = this.flyoutMixin.elements()[0];
-    return extend({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
+    return extend({}, FlyoutToggleMixinSuper.getCustomAttributes.call(this), {
       'toggle': element && '#' + element.id
     });
   },
   clone: function clone() {
-    return extend(FlyoutMixinSuper.clone.call(this), {
+    return extend(FlyoutToggleMixinSuper.clone.call(this), {
       flyoutMixin: this.flyoutMixin
     });
   }
 });
+;// CONCATENATED MODULE: ./src/mixins/FlyoutMixin.js
+
+
+
+
+var FlyoutMixinSuper = ClassNameMixin.prototype;
+var flyoutMixinCounter = 0;
 function FlyoutMixin() {
   var self = this;
   ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
@@ -945,7 +992,8 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   getCustomAttributes: function getCustomAttributes() {
     var self = this;
     return extend({}, FlyoutMixinSuper.getCustomAttributes.call(self), {
-      'is-flyout': ''
+      'is-flyout': '',
+      'swipe-dismiss': self.swipeToDismiss
     }, self.modal && {
       'is-modal': ''
     }, self.effects && {
@@ -1000,23 +1048,8 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
   },
   onClassNameUpdated: function onClassNameUpdated(element, prevState, state) {
     var self = this;
-
-    var isAdded = function isAdded(v) {
-      return prevState[v] !== state[v] && state[v];
-    };
-
-    var isRemoved = function isRemoved(v) {
-      return prevState[v] !== state[v] && !state[v];
-    };
-
-    if (isAdded('open')) {
-      self.isFlyoutOpened = true;
-      self.visible = true;
-    } else if (isAdded('closing') || isAdded('tweening-out')) {
-      self.isFlyoutOpened = false;
-    } else if (isRemoved('open')) {
-      self.visible = false;
-    }
+    self.visible = state.open;
+    self.isFlyoutOpened = state.open && !state.closing && !state['tweening-out'];
   }
 });
 ;// CONCATENATED MODULE: ./src/mixins/FocusStateMixin.js
@@ -1081,17 +1114,21 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
     }];
   }
 });
+// EXTERNAL MODULE: ./src/include/external/jquery.js
+var jquery = __webpack_require__(346);
 ;// CONCATENATED MODULE: ./src/mixins/ScrollableMixin.js
 
 
 
 
+
 var ScrollableMixinSuper = ClassNameMixin.prototype;
 function ScrollableMixin() {
   var self = this;
   ClassNameMixin.call(self, ['scrollable-x', 'scrollable-x-l', 'scrollable-x-r', 'scrollable-y', 'scrollable-y-d', 'scrollable-y-u']);
   self.target = Mixin.scrollableTarget;
   self.pageIndex = 0;
+  self.scrolling = false;
 }
 definePrototype(ScrollableMixin, ClassNameMixin, {
   withOptions: function withOptions(options) {
@@ -1114,11 +1151,19 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
   },
   initElement: function initElement(element, state) {
     var self = this;
-    app_app.on(element, 'statechange', function (e) {
-      if ('pageIndex' in e.newValues) {
-        extend(self, {
-          pageIndex: e.newValues.pageIndex
-        });
+    app_app.on(element, {
+      statechange: function statechange(e) {
+        if ('pageIndex' in e.newValues) {
+          extend(self, {
+            pageIndex: e.newValues.pageIndex
+          });
+        }
+      },
+      scrollStart: function scrollStart() {
+        self.scrolling = true;
+      },
+      scrollStop: function scrollStop() {
+        self.scrolling = false;
       }
     }, true);
   },
@@ -1128,6 +1173,12 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     return mixin;
   }
 });
+each('destroy enable disable setOptions refresh scrollPadding stop scrollLeft scrollTop scrollBy scrollTo scrollByPage scrollToPage scrollToElement', function (i, v) {
+  defineHiddenProperty(ScrollableMixin.prototype, v, function () {
+    var obj = jquery(this.elements());
+    return obj.scrollable.apply(obj, [v].concat(makeArray(arguments)));
+  });
+});
 ;// CONCATENATED MODULE: ./src/mixin.js
 
 
@@ -1143,6 +1194,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
 
 
 
+
 function extendSelf(options) {
   extend(this, options);
 }
@@ -1187,12 +1239,21 @@ var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_bre
 
 
 var routeMap = new Map();
+var stateId;
 
 function ViewContainer() {
   /** @type {any} */
   var self = this;
   external_commonjs_react_commonjs2_react_amd_react_root_React_.Component.apply(self, arguments);
   self.mounted = false;
+
+  if (!stateId) {
+    stateId = history.state;
+    app_app.on('navigate', function () {
+      stateId = history.state;
+    });
+  }
+
   self.componentWillUnmount = app_app.on('navigate', function () {
     if (self.mounted && self.getViewComponent()) {
       self.forceUpdate();
@@ -1224,8 +1285,8 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
       }
 
       self.currentView = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(V, {
-        key: app_app.route.view,
-        rootProps: exclude(self.props, ['views']),
+        key: routeMap.get(V).id,
+        rootProps: self.props.rootProps,
         onComponentLoaded: function onComponentLoaded(element) {
           self.currentElement = element;
           util_setImmediate(function () {
@@ -1238,17 +1299,19 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
     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 views = this.props.views;
-    return any(views, isViewMatched) || void redirectTo(views[0]);
+    var props = this.props;
+    return any(props.views, isViewMatched) || history.state === stateId && void redirectTo(props.defaultView);
   }
 });
 function isViewMatched(view) {
   var params = routeMap.get(view);
-  return !!params && equal(params, pick(app_app.route, keys(params)));
+  return !!params && !any(params.matchers, function (v, i) {
+    var value = app_app.route[i] || '';
+    return isFunction(v) ? !v(value) : (v || '') !== value;
+  });
 }
 function registerView(factory, routeParams) {
   var Component = function Component(props) {
-    var childProps = exclude(props, ['rootProps', 'onComponentLoaded']);
     var Component = (0,external_zeta_dom_react_.useAsync)(factory)[0];
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement('div', extend({}, props.rootProps, {
       ref: function ref(element) {
@@ -1256,27 +1319,41 @@ function registerView(factory, routeParams) {
           (props.onComponentLoaded || noop)(element);
         }
       },
-      children: Component && /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(Component["default"], childProps)
+      children: Component && /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(Component["default"])
     }));
   };
 
-  routeMap.set(Component, routeParams);
+  routeParams = extend({}, routeParams);
+  each(routeParams, function (i, v) {
+    if (v instanceof RegExp) {
+      routeParams[i] = v.test.bind(v);
+    }
+  });
+  routeMap.set(Component, {
+    id: randomId(),
+    matchCount: keys(routeParams).length,
+    matchers: routeParams,
+    params: pick(routeParams, function (v) {
+      return typeof v === 'string';
+    })
+  });
   return Component;
 }
 function renderView() {
   var views = makeArray(arguments);
-  var props;
-
-  if (views[0] && typeof views[0] !== 'function') {
-    props = views.shift();
-  }
-
-  return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewContainer, extend({}, props, {
-    views: views
-  }));
+  var rootProps = isFunction(views[0]) ? {} : views.shift();
+  var defaultView = views[0];
+  views.sort(function (a, b) {
+    return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
+  });
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(ViewContainer, {
+    rootProps: rootProps,
+    views: views,
+    defaultView: defaultView
+  });
 }
 function linkTo(view, params) {
-  return app_app.route.getPath(extend({}, app_app.route, params, routeMap.get(view)));
+  return app_app.route.getPath(extend({}, app_app.route, params, (routeMap.get(view) || {}).params));
 }
 function navigateTo(view, params) {
   return app_app.navigate(linkTo(view, params));