@pinnacle0/web-ui 0.3.61 → 0.3.63

package/core/Markdown/index.js

@@ -20,7 +20,7 @@ var Markdown = /** @class */ (function (_super) {
     function Markdown() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.renderBold = function (content, index) {
-            var splitContents = content.split("__");
+            var splitContents = content.split(/__|\*\*/);
             return React.createElement(React.Fragment, { key: index }, splitContents.map(function (_, segmentIndex) { return (segmentIndex % 2 === 1 ? React.createElement("b", { key: "bold" + segmentIndex }, _) : _); }));
         };
         _this.renderLine = function (content, index) {

package/core/Markdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/Markdown/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAetB;IAA8B,4BAA0B;IAAxD;QAAA,qEAyBC;QAtBG,gBAAU,GAAG,UAAC,OAAe,EAAE,KAAa;YACxC,IAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC1C,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,IAAG,aAAa,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,YAAY,IAAK,OAAA,CAAC,YAAY,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,2BAAG,GAAG,EAAE,MAAM,GAAG,YAAY,IAAG,CAAC,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAArE,CAAqE,CAAC,CAAkB,CAAC;QACxK,CAAC,CAAC;QAEF,gBAAU,GAAG,UAAC,OAAe,EAAE,KAAa;YACxC,IAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,CACH,6BAAK,SAAS,EAAC,MAAM,EAAC,GAAG,EAAE,KAAK,IAC3B,aAAa,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,YAAY,IAAK,OAAA,CAAC,YAAY,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,4BAAI,GAAG,EAAE,YAAY,IAAG,CAAC,CAAM,CAAC,CAAC,CAAC,KAAI,CAAC,UAAU,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,EAA7F,CAA6F,CAAC,CACpI,CACT,CAAC;QACN,CAAC,CAAC;;IAUN,CAAC;IARG,yBAAM,GAAN;QACU,IAAA,KAAoB,IAAI,CAAC,KAAK,EAA7B,QAAQ,cAAA,EAAE,KAAK,WAAc,CAAC;QACrC,OAAO,CACH,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,KAAK,IACnC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACxC,CACT,CAAC;IACN,CAAC;IAvBM,oBAAW,GAAG,UAAU,CAAC;IAwBpC,eAAC;CAAA,AAzBD,CAA8B,KAAK,CAAC,aAAa,GAyBhD;SAzBY,QAAQ"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/Markdown/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAetB;IAA8B,4BAA0B;IAAxD;QAAA,qEAyBC;QAtBG,gBAAU,GAAG,UAAC,OAAe,EAAE,KAAa;YACxC,IAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC/C,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,IAAG,aAAa,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,YAAY,IAAK,OAAA,CAAC,YAAY,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,2BAAG,GAAG,EAAE,MAAM,GAAG,YAAY,IAAG,CAAC,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAArE,CAAqE,CAAC,CAAkB,CAAC;QACxK,CAAC,CAAC;QAEF,gBAAU,GAAG,UAAC,OAAe,EAAE,KAAa;YACxC,IAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,CACH,6BAAK,SAAS,EAAC,MAAM,EAAC,GAAG,EAAE,KAAK,IAC3B,aAAa,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,YAAY,IAAK,OAAA,CAAC,YAAY,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,4BAAI,GAAG,EAAE,YAAY,IAAG,CAAC,CAAM,CAAC,CAAC,CAAC,KAAI,CAAC,UAAU,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,EAA7F,CAA6F,CAAC,CACpI,CACT,CAAC;QACN,CAAC,CAAC;;IAUN,CAAC;IARG,yBAAM,GAAN;QACU,IAAA,KAAoB,IAAI,CAAC,KAAK,EAA7B,QAAQ,cAAA,EAAE,KAAK,WAAc,CAAC;QACrC,OAAO,CACH,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,KAAK,IACnC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACxC,CACT,CAAC;IACN,CAAC;IAvBM,oBAAW,GAAG,UAAU,CAAC;IAwBpC,eAAC;CAAA,AAzBD,CAA8B,KAAK,CAAC,aAAa,GAyBhD;SAzBY,QAAQ"}

package/core/Progress/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ProgressProps } from "antd/lib/progress";
+import "antd/lib/progress/style";
+interface Props extends ProgressProps {
+}
+export declare class Popover extends React.PureComponent<Props> {
+    static displayName: string;
+    render(): JSX.Element;
+}
+export {};

package/core/Progress/index.js

@@ -0,0 +1,42 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import Progress from "antd/lib/progress";
+import "antd/lib/progress/style";
+var Popover = /** @class */ (function (_super) {
+    __extends(Popover, _super);
+    function Popover() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Popover.prototype.render = function () {
+        return React.createElement(Progress, __assign({}, this.props));
+    };
+    Popover.displayName = "Progress";
+    return Popover;
+}(React.PureComponent));
+export { Popover };
+//# sourceMappingURL=index.js.map

package/core/Progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/Progress/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAEzC,OAAO,yBAAyB,CAAC;AAIjC;IAA6B,2BAA0B;IAAvD;;IAMA,CAAC;IAHG,wBAAM,GAAN;QACI,OAAO,oBAAC,QAAQ,eAAK,IAAI,CAAC,KAAK,EAAI,CAAC;IACxC,CAAC;IAJM,mBAAW,GAAG,UAAU,CAAC;IAKpC,cAAC;CAAA,AAND,CAA6B,KAAK,CAAC,aAAa,GAM/C;SANY,OAAO"}

package/hooks/useAPI.d.ts

@@ -0,0 +1,6 @@
+export declare function useAPI<Request extends any[], Response>(api: (...request: Request) => Promise<Response>, initialRequest: Request): {
+    request: Request;
+    response: Response | null;
+    loading: boolean;
+    refresh: (request: Request) => void;
+};

package/hooks/useAPI.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+function reducer(state, action) {
+    switch (action.type) {
+        case "start":
+            return __assign(__assign({}, state), { loading: true, request: action.request });
+        case "load":
+            return __assign(__assign({}, state), { loading: false, data: action.data });
+    }
+}
+export function useAPI(api, initialRequest) {
+    var _a = __read(React.useReducer(reducer, { request: initialRequest, data: null, loading: false }), 2), _b = _a[0], loading = _b.loading, data = _b.data, request = _b.request, dispatch = _a[1];
+    var fetchData = React.useCallback(function (newRequest) { return dispatch({ type: "start", request: newRequest }); }, []);
+    React.useEffect(function () {
+        dispatch({ type: "start", request: request });
+        api.apply(void 0, __spreadArray([], __read(request), false)).then(function (data) { return dispatch({ type: "load", data: data }); });
+        // TODO: Review if api change should trigger re-fetch
+    }, [request, api, dispatch]);
+    return { loading: loading, request: request, response: data, refresh: fetchData };
+}
+//# sourceMappingURL=useAPI.js.map

package/hooks/useAPI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAPI.js","sourceRoot":"","sources":["../../src/hooks/useAPI.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,SAAS,OAAO,CAAkC,KAA+B,EAAE,MAAiC;IAChH,QAAQ,MAAM,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACR,6BAAW,KAAK,KAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,IAAE;QAC9D,KAAK,MAAM;YACP,6BAAW,KAAK,KAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,IAAE;KAC5D;AACL,CAAC;AAED,MAAM,UAAU,MAAM,CAClB,GAA+C,EAC/C,cAAuB;IAEjB,IAAA,KAAA,OAAuC,KAAK,CAAC,UAAU,CAAC,OAAuE,EAAE,EAAC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC,IAAA,EAAtL,UAAwB,EAAvB,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAG,QAAQ,QAAoJ,CAAC;IAC9L,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,UAAmB,IAAW,OAAA,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAC,CAAC,EAA9C,CAA8C,EAAE,EAAE,CAAC,CAAC;IAEvH,KAAK,CAAC,SAAS,CAAC;QACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,SAAA,EAAC,CAAC,CAAC;QACnC,GAAG,wCAAI,OAAO,WAAE,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,MAAA,EAAC,CAAC,EAA9B,CAA8B,CAAC,CAAC;QAC7D,qDAAqD;IACzD,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,EAAC,OAAO,SAAA,EAAE,OAAO,SAAA,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAC,CAAC;AAClE,CAAC"}

package/hooks/useBool.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Return an array of 3 element, representing:
+ *  - current boolean value
+ *  - a function to set the value to true
+ *  - a function to set the value to false
+ *
+ * Example usage:
+ * const [showModal, openModal, closeModal] = useBool();
+ */
+export declare function useBool(initialValue?: boolean): [boolean, () => void, () => void];

package/hooks/useBool.js

@@ -0,0 +1,34 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+/**
+ * Return an array of 3 element, representing:
+ *  - current boolean value
+ *  - a function to set the value to true
+ *  - a function to set the value to false
+ *
+ * Example usage:
+ * const [showModal, openModal, closeModal] = useBool();
+ */
+export function useBool(initialValue) {
+    if (initialValue === void 0) { initialValue = false; }
+    var _a = __read(React.useState(initialValue), 2), value = _a[0], setValue = _a[1];
+    var setValueToTrue = React.useCallback(function () { return setValue(true); }, [setValue]);
+    var setValueToFalse = React.useCallback(function () { return setValue(false); }, [setValue]);
+    return [value, setValueToTrue, setValueToFalse];
+}
+//# sourceMappingURL=useBool.js.map

package/hooks/useBool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBool.js","sourceRoot":"","sources":["../../src/hooks/useBool.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CAAC,YAA6B;IAA7B,6BAAA,EAAA,oBAA6B;IAC3C,IAAA,KAAA,OAAoB,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAA,EAA/C,KAAK,QAAA,EAAE,QAAQ,QAAgC,CAAC;IACvD,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,QAAQ,CAAC,IAAI,CAAC,EAAd,CAAc,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC3E,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE7E,OAAO,CAAC,KAAK,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC;AACpD,CAAC"}

package/hooks/useDidMountEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDidMountEffect(onMount: () => void): void;

package/hooks/useDidMountEffect.js

@@ -0,0 +1,8 @@
+import React from "react";
+export function useDidMountEffect(onMount) {
+    React.useEffect(function () {
+        onMount();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intentional to emulate the behaviour of componentDidMount
+    }, []);
+}
+//# sourceMappingURL=useDidMountEffect.js.map

package/hooks/useDidMountEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDidMountEffect.js","sourceRoot":"","sources":["../../src/hooks/useDidMountEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,iBAAiB,CAAC,OAAmB;IACjD,KAAK,CAAC,SAAS,CAAC;QACZ,OAAO,EAAE,CAAC;QACV,4HAA4H;IAChI,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC"}

package/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare function useForceUpdate(): () => void;

package/hooks/useForceUpdate.js

@@ -0,0 +1,23 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+export function useForceUpdate() {
+    var _a = __read(React.useState(), 2), setState = _a[1];
+    var forceUpdate = React.useCallback(function () { return setState({}); }, []);
+    return forceUpdate;
+}
+//# sourceMappingURL=useForceUpdate.js.map

package/hooks/useForceUpdate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForceUpdate.js","sourceRoot":"","sources":["../../src/hooks/useForceUpdate.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,cAAc;IACpB,IAAA,KAAA,OAAe,KAAK,CAAC,QAAQ,EAAO,IAAA,EAAjC,QAAQ,QAAyB,CAAC;IAC3C,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,QAAQ,CAAC,EAAE,CAAC,EAAZ,CAAY,EAAE,EAAE,CAAC,CAAC;IAC9D,OAAO,WAAW,CAAC;AACvB,CAAC"}

package/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T;

package/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import React from "react";
+export function usePrevious(value) {
+    var ref = React.useRef(value);
+    React.useEffect(function () {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+//# sourceMappingURL=usePrevious.js.map

package/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sourceRoot":"","sources":["../../src/hooks/usePrevious.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,WAAW,CAAI,KAAQ;IACnC,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,KAAK,CAAC,SAAS,CAAC;QACZ,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,GAAG,CAAC,OAAO,CAAC;AACvB,CAAC"}

package/hooks/useThunk.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TODO: Compare DX with useAPI
+ * Use API hook with similar style to other react hooks like useMemo
+ * const {response, loading, refresh} = useThunk(() => {new Promise(resolve => resolve("arrow function changes everytime")}, [deps]);
+ * @param thunk
+ * @param deps
+ */
+export declare function useThunk<Response>(thunk: () => Promise<Response>, deps: any[]): {
+    response: Response | null;
+    loading: boolean;
+    refresh: () => void;
+};

package/hooks/useThunk.js

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+function reducer(state, action) {
+    switch (action.type) {
+        case "start":
+            return __assign(__assign({}, state), { loading: true });
+        case "load":
+            return __assign(__assign({}, state), { loading: false, data: action.data });
+    }
+}
+/**
+ * TODO: Compare DX with useAPI
+ * Use API hook with similar style to other react hooks like useMemo
+ * const {response, loading, refresh} = useThunk(() => {new Promise(resolve => resolve("arrow function changes everytime")}, [deps]);
+ * @param thunk
+ * @param deps
+ */
+export function useThunk(thunk, deps) {
+    var _a = __read(React.useReducer(reducer, { data: null, loading: false }), 2), _b = _a[0], loading = _b.loading, data = _b.data, dispatch = _a[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only recall on deps change
+    var callback = React.useCallback(thunk, deps);
+    var fetchData = React.useCallback(function () {
+        dispatch({ type: "start" });
+        callback().then(function (data) { return dispatch({ type: "load", data: data }); });
+    }, [callback, dispatch]);
+    React.useEffect(function () {
+        dispatch({ type: "start" });
+        callback().then(function (data) { return dispatch({ type: "load", data: data }); });
+    }, [callback, dispatch]);
+    return { loading: loading, response: data, refresh: fetchData };
+}
+//# sourceMappingURL=useThunk.js.map

package/hooks/useThunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThunk.js","sourceRoot":"","sources":["../../src/hooks/useThunk.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,SAAS,OAAO,CAAW,KAAsB,EAAE,MAAwB;IACvE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACR,6BAAW,KAAK,KAAE,OAAO,EAAE,IAAI,IAAE;QACrC,KAAK,MAAM;YACP,6BAAW,KAAK,KAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,IAAE;KAC5D;AACL,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAW,KAA8B,EAAE,IAAW;IACpE,IAAA,KAAA,OAA8B,KAAK,CAAC,UAAU,CAAC,OAAqD,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC,IAAA,EAAlI,UAAe,EAAd,OAAO,aAAA,EAAE,IAAI,UAAA,EAAG,QAAQ,QAAyG,CAAC;IAC1I,qFAAqF;IACrF,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAEhD,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;QAChC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAC;QAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,MAAA,EAAC,CAAC,EAA9B,CAA8B,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,KAAK,CAAC,SAAS,CAAC;QACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAC;QAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,MAAA,EAAC,CAAC,EAA9B,CAA8B,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,EAAC,OAAO,SAAA,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAC,CAAC;AACzD,CAAC"}

package/hooks/useWhyDidYouUpdate.d.ts

@@ -0,0 +1,21 @@
+export declare const useWhyDidYouUpdate: typeof _useWhyDidYouUpdate;
+/**
+ * Logs in console the diff in props between renders.
+ * For debugging use only. Remove before production.
+ *
+ * https://usehooks.com/useWhyDidYouUpdate/
+ *
+ * Example usage:
+ * ```jsx
+ * const ComponentName = ReactUtil.memo("ComponentName", (props: Props) => {
+ *     const stateFromStore = useSelector(state => state.app.moduleName.stateFromStore);
+ *     useWhyDidYouUpdate("ComponentName", {...props, stateFromStore});
+ *     return <div style={props.style}>{props.count}</div>;
+ * });
+ * ```
+ *
+ * @param name A tag for identifying the function component using this hook
+ * @param props Props of the function component
+ */
+declare function _useWhyDidYouUpdate<P extends object>(name: string, props: P): void;
+export {};

package/hooks/useWhyDidYouUpdate.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+export var useWhyDidYouUpdate = "_self" in React.createElement("div") ? function () { } : _useWhyDidYouUpdate;
+/**
+ * Logs in console the diff in props between renders.
+ * For debugging use only. Remove before production.
+ *
+ * https://usehooks.com/useWhyDidYouUpdate/
+ *
+ * Example usage:
+ * ```jsx
+ * const ComponentName = ReactUtil.memo("ComponentName", (props: Props) => {
+ *     const stateFromStore = useSelector(state => state.app.moduleName.stateFromStore);
+ *     useWhyDidYouUpdate("ComponentName", {...props, stateFromStore});
+ *     return <div style={props.style}>{props.count}</div>;
+ * });
+ * ```
+ *
+ * @param name A tag for identifying the function component using this hook
+ * @param props Props of the function component
+ */
+function _useWhyDidYouUpdate(name, props) {
+    // Get a mutable ref object where we can store props for comparison next time this hook runs.
+    var prevProps = React.useRef();
+    React.useEffect(function () {
+        if (prevProps.current) {
+            // Use changesObj to keep track of changed props
+            var changesObj_1 = {};
+            // Iterate through all keys from previous and current props
+            Object.keys(__assign(__assign({}, prevProps.current), props)).forEach(function (key) {
+                // Add to changesObj if previous is different from current
+                if (prevProps.current[key] !== props[key]) {
+                    changesObj_1[key] = { from: prevProps.current[key], to: props[key] };
+                }
+            });
+            // If changesObj not empty then output to console
+            if (Object.keys(changesObj_1).length) {
+                // eslint-disable-next-line no-console -- this is intentional as this hook should only be used for debugging and should be removed before deploying to production
+                console.info("%c[%cwhy-did-you-update%c] %c".concat(name), "color: inherit", "color: #e36eec", "color: inherit", "color: #f38b54", changesObj_1);
+            }
+        }
+        // Update previousProps with current props for next hook call
+        prevProps.current = props;
+    });
+}
+//# sourceMappingURL=useWhyDidYouUpdate.js.map

package/hooks/useWhyDidYouUpdate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWhyDidYouUpdate.js","sourceRoot":"","sources":["../../src/hooks/useWhyDidYouUpdate.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,kBAAkB,GAA+B,OAAO,IAAI,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC;AAErI;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAS,mBAAmB,CAAmB,IAAY,EAAE,KAAQ;IACjE,6FAA6F;IAC7F,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,EAAK,CAAC;IAEpC,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,SAAS,CAAC,OAAO,EAAE;YACnB,gDAAgD;YAChD,IAAM,YAAU,GAAsD,EAAE,CAAC;YACzE,2DAA2D;YAC1D,MAAM,CAAC,IAAI,uBAAK,SAAS,CAAC,OAAQ,GAAK,KAAK,EAAqB,CAAC,OAAO,CAAC,UAAA,GAAG;gBAC1E,0DAA0D;gBAC1D,IAAI,SAAS,CAAC,OAAQ,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;oBACxC,YAAU,CAAC,GAAG,CAAC,GAAG,EAAC,IAAI,EAAE,SAAS,CAAC,OAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,GAAG,CAAC,EAAC,CAAC;iBACrE;YACL,CAAC,CAAC,CAAC;YAEH,iDAAiD;YACjD,IAAI,MAAM,CAAC,IAAI,CAAC,YAAU,CAAC,CAAC,MAAM,EAAE;gBAChC,iKAAiK;gBACjK,OAAO,CAAC,IAAI,CAAC,uCAAgC,IAAI,CAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAU,CAAC,CAAC;aAC5I;SACJ;QAED,6DAA6D;QAC7D,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;AACP,CAAC"}

package/hooks/useWillUnmountEffect.d.ts

@@ -0,0 +1 @@
+export declare function useWillUnmountEffect(willUnmount: () => void): void;

package/hooks/useWillUnmountEffect.js

@@ -0,0 +1,8 @@
+import React from "react";
+export function useWillUnmountEffect(willUnmount) {
+    React.useEffect(function () {
+        return willUnmount;
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intentional to emulate the behaviour of componentWillUnmount
+    }, []);
+}
+//# sourceMappingURL=useWillUnmountEffect.js.map

package/hooks/useWillUnmountEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWillUnmountEffect.js","sourceRoot":"","sources":["../../src/hooks/useWillUnmountEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,oBAAoB,CAAC,WAAuB;IACxD,KAAK,CAAC,SAAS,CAAC;QACZ,OAAO,WAAW,CAAC;QACnB,+HAA+H;IACnI,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pinnacle0/web-ui",
-    "version": "0.3.61",
+    "version": "0.3.63",
     "author": "Pinnacle",
     "license": "MIT",
     "sideEffects": [

package/util/ReactUtil.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+declare function joinNodes(nodes: React.ReactElement[], separator: React.ReactElement | string, innerJoin?: boolean): React.ReactElement;
+/**
+ * For React Native UI, parameters must be Text-based node
+ * Currently, only support placeholders {1} {2} in sequence
+ *
+ * E.g: interpolateTextNode("Dice {1} Prize {2}", <Dice value={6}/>, <Amount value={3.5}/>)
+ */
+declare function interpolateNode(text: string, ...parameters: React.ReactElement[]): React.ReactElement;
+/**
+ * Similar to React.memo, differences are:
+ * - Preserves the generic of component props if there are any
+ * - Adds a parameter to assign displayName to component
+ *
+ * Example usage:
+ *   interface Props<T extends string> {
+ *       tabs: ReadonlyArray<TabType<T>>;
+ *   }
+ *   export const Tabs = ReactUtil.memo("Tabs", function<T extends string>(props: Props<T>) { .... });
+ */
+declare function memo<T extends (props: any) => React.ReactElement | null>(displayName: string, functionComponent: T): T;
+/**
+ * To group some components into a static-method like usage, without creating dummy class.
+ *
+ * Example usage:
+ *    const Left = ReactUtil.memo("Left", () => {...});
+ *    const Right = ReactUtil.memo("Left", () => {...});
+ *    const SomeContainer = ReactUtil.statics("SomeContainer", {Left, Right})
+ *
+ * Then you can use <SomeContainer.Left> or <SomeContainer.Right> with proper displayName set.
+ */
+declare function statics<T extends {
+    [key: string]: React.ComponentType<any> | {
+        [key: string]: React.ComponentType<any>;
+    };
+}>(displayName: string, componentMap: T): T;
+export declare const ReactUtil: Readonly<{
+    joinNodes: typeof joinNodes;
+    interpolateNode: typeof interpolateNode;
+    memo: typeof memo;
+    statics: typeof statics;
+}>;
+export {};

package/util/ReactUtil.js

@@ -0,0 +1,108 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+function joinNodes(nodes, separator, innerJoin) {
+    if (innerJoin === void 0) { innerJoin = true; }
+    // Do not use nodes.reduce, because it fails to handle key(prop) perfectly.
+    var joinedNodes = nodes.map(function (_, index) { return (React.createElement(React.Fragment, { key: index },
+        _,
+        index < nodes.length - 1 && separator)); });
+    if (!innerJoin) {
+        joinedNodes.unshift(React.createElement(React.Fragment, { key: "__first__" }, separator));
+        joinedNodes.push(React.createElement(React.Fragment, { key: "__last__" }, separator));
+    }
+    return React.createElement(React.Fragment, null, joinedNodes);
+}
+/**
+ * For React Native UI, parameters must be Text-based node
+ * Currently, only support placeholders {1} {2} in sequence
+ *
+ * E.g: interpolateTextNode("Dice {1} Prize {2}", <Dice value={6}/>, <Amount value={3.5}/>)
+ */
+function interpolateNode(text) {
+    var parameters = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        parameters[_i - 1] = arguments[_i];
+    }
+    var nodes = [];
+    text.split(/\{\d+\}/g).forEach(function (_, index) {
+        nodes.push(_);
+        nodes.push(parameters[index]);
+    });
+    return React.createElement(React.Fragment, null, nodes);
+}
+/**
+ * Similar to React.memo, differences are:
+ * - Preserves the generic of component props if there are any
+ * - Adds a parameter to assign displayName to component
+ *
+ * Example usage:
+ *   interface Props<T extends string> {
+ *       tabs: ReadonlyArray<TabType<T>>;
+ *   }
+ *   export const Tabs = ReactUtil.memo("Tabs", function<T extends string>(props: Props<T>) { .... });
+ */
+function memo(displayName, functionComponent) {
+    return React.memo(Object.assign(functionComponent, { displayName: displayName }));
+}
+/**
+ * To group some components into a static-method like usage, without creating dummy class.
+ *
+ * Example usage:
+ *    const Left = ReactUtil.memo("Left", () => {...});
+ *    const Right = ReactUtil.memo("Left", () => {...});
+ *    const SomeContainer = ReactUtil.statics("SomeContainer", {Left, Right})
+ *
+ * Then you can use <SomeContainer.Left> or <SomeContainer.Right> with proper displayName set.
+ */
+function statics(displayName, componentMap) {
+    var namedComponentMap = {};
+    Object.entries(componentMap).forEach(function (_a) {
+        var _b = __read(_a, 2), key = _b[0], componentOrMap = _b[1];
+        if (typeof componentOrMap === "function") {
+            var Component_1 = componentOrMap;
+            namedComponentMap[key] = memo(displayName, function (props) { return React.createElement(Component_1, __assign({}, props)); });
+        }
+        else {
+            var nestedComponentMap_1 = {};
+            Object.entries(componentOrMap).forEach(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], Component = _b[1];
+                nestedComponentMap_1[key] = Component;
+            });
+            namedComponentMap[key] = nestedComponentMap_1;
+        }
+    });
+    return namedComponentMap;
+}
+export var ReactUtil = Object.freeze({
+    joinNodes: joinNodes,
+    interpolateNode: interpolateNode,
+    memo: memo,
+    statics: statics,
+});
+//# sourceMappingURL=ReactUtil.js.map

package/util/ReactUtil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactUtil.js","sourceRoot":"","sources":["../../src/util/ReactUtil.tsx"],"names":[],"mappings":"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"}