armstrong-react - npm Package Compare versions

Comparing version 4.0.0-pre20 to 4.0.0-pre21

dist/_test/calendar.spec.js

@@ -40,3 +40,3 @@ "use strict";
         var result = react_hooks_testing_library_1.renderHook(function () { return useCalendar_1.useCalendar({}); }).result;
-        assertResult(result.current, tslib_1.__assign({}, currentYearMonth(), noDateExpected));
+        assertResult(result.current, tslib_1.__assign(tslib_1.__assign({}, currentYearMonth()), noDateExpected));
     });
@@ -62,3 +62,3 @@ it("Default Settings - Min", function () {
         react_hooks_testing_library_1.act(function () { return result.current.gotoDate("x"); });
-        assertResult(result.current, tslib_1.__assign({}, currentYearMonth(), noDateExpected));
+        assertResult(result.current, tslib_1.__assign(tslib_1.__assign({}, currentYearMonth()), noDateExpected));
     });
@@ -68,11 +68,11 @@ it("Set Invalid Date", function () {
         react_hooks_testing_library_1.act(function () { return result.current.selectDate("x"); });
-        assertResult(result.current, tslib_1.__assign({}, currentYearMonth(), noDateExpected));
+        assertResult(result.current, tslib_1.__assign(tslib_1.__assign({}, currentYearMonth()), noDateExpected));
     });
     it("Invalid Selected Date Settings", function () {
         var result = react_hooks_testing_library_1.renderHook(function () { return useCalendar_1.useCalendar({ selectedDate: "xxxxxx" }); }).result;
-        assertResult(result.current, tslib_1.__assign({}, currentYearMonth(), noDateExpected));
+        assertResult(result.current, tslib_1.__assign(tslib_1.__assign({}, currentYearMonth()), noDateExpected));
     });
     it("Invalid Seed Date Settings", function () {
         var result = react_hooks_testing_library_1.renderHook(function () { return useCalendar_1.useCalendar({ seedDate: "xxxxxx" }); }).result;
-        assertResult(result.current, tslib_1.__assign({}, currentYearMonth(), noDateExpected));
+        assertResult(result.current, tslib_1.__assign(tslib_1.__assign({}, currentYearMonth()), noDateExpected));
     });
@@ -79,0 +79,0 @@ it("Alternative format Settings", function () {

dist/_test/infinite-paging.spec.js

 "use strict";
-var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -25,3 +24,3 @@ var tslib_1 = require("tslib");
 describe("useInfinitePaging", function () {
-    it("Basic", function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+    it("Basic", function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
         var pageSize, totalRecords, _a, result, waitForNextUpdate;
@@ -28,0 +27,0 @@ return tslib_1.__generator(this, function (_b) {

dist/_test/paging.spec.js

 "use strict";
-var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -19,3 +18,3 @@ var tslib_1 = require("tslib");
 describe("usePaging", function () {
-    it("Basic", function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+    it("Basic", function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
         var pageSize, totalRecords, totalPages, _a, result, waitForNextUpdate;
@@ -22,0 +21,0 @@ return tslib_1.__generator(this, function (_b) {

dist/components/display/dialog.d.ts

 import * as React from "react";
 export interface IDialogProps extends React.HTMLAttributes<HTMLElement> {
-    /** (string) The title of the dialog */
+    /** The title of the dialog */
     title?: string;
-    /** (React.ReactHTML) The element to use to wrap the title of the dialog */
+    /** The element to use to wrap the title of the dialog */
     headerTagName?: keyof React.ReactHTML;
-    /** (string) default: '#host' - The selector of the element you'd like to inject the dialog into */
+    /** default: '#host' - The selector of the element you'd like to inject the dialog into */
     bodySelector?: string;
-    /** (string) An additional class for the dialog layer, normally used for forcing higher z-index values  */
+    /** An additional class for the dialog layer, normally used for forcing higher z-index values  */
     layerClass?: string;
-    /** (boolean) Setting this to true or false will open or close the dialog */
+    /** Setting this to true or false will open or close the dialog */
     isOpen: boolean;
-    /** (number) The width of the dialog */
+    /** The width of the dialog */
     width?: number;
-    /** (number) The height of the dialog */
+    /** The height of the dialog */
     height?: number;
-    /** (()=> void) Event to fire when the dialog is closed */
+    /** Event to fire when the dialog is closed */
     onClose: () => void;
-    /** (()=> void) Event to fire when the x button is clicked. Use this to confirm (double dialogs) */
+    /** Event to fire when the x button is clicked. Use this to confirm (double dialogs) */
     onXClicked?: () => void;
-    /** (boolean) Controls wether the dialog closes when the background overlay is clicked */
+    /**  Controls wether the dialog closes when the background overlay is clicked */
     closeOnBackgroundClick?: boolean;
@@ -61,3 +61,6 @@ }
 }
-export declare function usePortal(PortalComponent: React.FC<IUseDialogProps>, settings?: IUsePortalSettings): {
+export interface IUsePortalProps {
+    removeFromDOM: () => void;
+}
+export declare function usePortal(PortalComponent: React.FC<IUsePortalProps>, settings?: IUsePortalSettings): {
     open: () => void;
@@ -64,0 +67,0 @@ portal: React.ReactPortal;

dist/components/display/dialog.js

@@ -67,11 +67,11 @@ "use strict";
                         if (_a.sent()) {
-                            p.onClose();
+                            p.removeFromDOM();
                         }
                         return [2 /*return*/];
                     case 2:
-                        p.onClose();
+                        p.removeFromDOM();
                         return [2 /*return*/];
                 }
             });
-        }); }, [p.onClose, beforeDialogClose]);
+        }); }, [p.removeFromDOM, beforeDialogClose]);
         var onUserClose = React.useCallback(function () { return onClose("user"); }, [onClose]);
@@ -86,3 +86,3 @@ return (React.createElement(exports.DialogLayer, tslib_1.__assign({}, rest, { onClose: onClose }),
     var portal = React.useMemo(function () {
-        return ReactDOM.createPortal(React.createElement(PortalComponent, { onClose: function () { return setState(defaultState); } }), document.querySelector(settings && settings.hostElement || "#host"));
+        return ReactDOM.createPortal(React.createElement(PortalComponent, { removeFromDOM: function () { return setState(defaultState); } }), document.querySelector(settings && settings.hostElement || "#host"));
     }, [PortalComponent, settings && settings.hostElement]);
@@ -89,0 +89,0 @@ var open = React.useCallback(function () {

dist/components/display/dialogProvider.js

@@ -30,3 +30,3 @@ "use strict";
     var closeDialog = React.useCallback(function () {
-        setDialogContent(utils_1.utils.array.first(dialogContent, dialogContent.length - 1).slice());
+        setDialogContent(tslib_1.__spreadArrays(utils_1.utils.array.first(dialogContent, dialogContent.length - 1)));
     }, [dialogContent, setDialogContent]);
@@ -47,3 +47,3 @@ React.useImperativeHandle(ref, function () { return ({
                     };
-                    setDialogContent(dialogContent.concat([tslib_1.__assign({ body: React.createElement(Body, { argument: argument, close: close, choose: choose }), close: close }, (settings || {}))]));
+                    setDialogContent(tslib_1.__spreadArrays(dialogContent, [tslib_1.__assign({ body: React.createElement(Body, { argument: argument, close: close, choose: choose }), close: close }, (settings || {}))]));
                     return [2 /*return*/];
@@ -50,0 +50,0 @@ });

dist/components/display/image.d.ts

 import * as React from "react";
-export interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    /** (boolean) Should the image be circular? */
+export interface IImageProps extends React.ImgHTMLAttributes<HTMLPictureElement> {
+    /** Should the image be circular? */
     rounded?: boolean;
+    /** WEBP source */
+    webpSrc?: string;
 }
@@ -6,0 +8,0 @@ export declare function useRandomUserImageSrc(sampleUserSeed?: string): string;

dist/components/display/image.js

@@ -30,6 +30,8 @@ "use strict";
 function Image(props) {
-    var className = props.className, rounded = props.rounded, attrs = tslib_1.__rest(props, ["className", "rounded"]);
+    var className = props.className, rounded = props.rounded, src = props.src, webpSrc = props.webpSrc, attrs = tslib_1.__rest(props, ["className", "rounded", "src", "webpSrc"]);
     var classes = classHelpers_1.ClassHelpers.classNames(className, { rounded: rounded });
-    return (React.createElement("img", tslib_1.__assign({}, attrs, { className: classes })));
+    return (React.createElement("picture", null,
+        webpSrc && React.createElement("source", { srcSet: webpSrc, type: "image/webp" }),
+        React.createElement("img", tslib_1.__assign({}, attrs, { className: classes, src: src }))));
 }
 exports.Image = Image;

dist/components/form/form.js

@@ -99,3 +99,3 @@ "use strict";
     }
-    return vrs.map(function (a) { return (tslib_1.__assign({}, a, { attribute: a.attribute.substring(dataPath.length + 1) })); });
+    return vrs.map(function (a) { return (tslib_1.__assign(tslib_1.__assign({}, a), { attribute: a.attribute.substring(dataPath.length + 1) })); });
 }
@@ -135,3 +135,3 @@ exports.extractChildValidationResults = extractChildValidationResults;
     }, [onDataBinderChange, onDataChanged, dataBinder]);
-    var ch = FormElementProcessor.processChildren(tslib_1.__assign({}, props, { validationMode: validationMode || "icon" }), children, notifyChange);
+    var ch = FormElementProcessor.processChildren(tslib_1.__assign(tslib_1.__assign({}, props), { validationMode: validationMode || "icon" }), children, notifyChange);
     var context = React.useContext(exports.FormContext);
@@ -138,0 +138,0 @@ var hasParentForm = !!context;

dist/components/form/inputs/arrayItems.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var utils_1 = require("../../../utilities/utils");
@@ -8,3 +9,3 @@ function addValue(values, item) {
     }
-    return values.concat([item]).sort();
+    return tslib_1.__spreadArrays(values, [item]).sort();
 }
@@ -11,0 +12,0 @@ function removeValue(values, item) {

dist/components/form/inputs/autoCompleteMultiInput.js

@@ -90,3 +90,3 @@ "use strict";
             else {
-                onValueChange(value.concat([selected]));
+                onValueChange(tslib_1.__spreadArrays(value, [selected]));
             }
@@ -93,0 +93,0 @@ }

dist/components/form/inputs/tagInput.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var React = require("react");
@@ -66,3 +67,3 @@ var useDidUpdateEffect_1 = require("../../../hooks/useDidUpdateEffect");
     var addTag = React.useCallback(function (tag) {
-        notifyTagsChange(tags.concat([tag]));
+        notifyTagsChange(tslib_1.__spreadArrays(tags, [tag]));
         input.current.value = "";
@@ -87,3 +88,3 @@ input.current.focus();
                     if (tags.indexOf(targetValue) === -1) {
-                        var newTags = tags.concat([targetValue]);
+                        var newTags = tslib_1.__spreadArrays(tags, [targetValue]);
                         notifyTagsChange(newTags);
@@ -110,3 +111,3 @@ }
                 if (tags.length !== 0 && !targetValue) {
-                    var newTags = tags.slice();
+                    var newTags = tslib_1.__spreadArrays(tags);
                     newTags.splice(-1, 1);
@@ -113,0 +114,0 @@ notifyTagsChange(newTags);

dist/components/layout/grid.js

@@ -21,3 +21,3 @@ "use strict";
     }); }, [className, fillContainer, debugMode]);
-    return React.createElement(tagName, tslib_1.__assign({}, attrs, { ref: grid, className: classes }));
+    return React.createElement(tagName, tslib_1.__assign(tslib_1.__assign({}, attrs), { ref: grid, className: classes }));
 };
@@ -60,3 +60,3 @@ exports.Grid = React.forwardRef(exports.GridRef);
     }, [style, height]);
-    return React.createElement(tagName, tslib_1.__assign({}, attrs, { className: classes, style: styles }), React.Children.map(props.children, function (c) {
+    return React.createElement(tagName, tslib_1.__assign(tslib_1.__assign({}, attrs), { className: classes, style: styles }), React.Children.map(props.children, function (c) {
         return c ? React.cloneElement(c, { style: c.props.style }) : null;
@@ -107,3 +107,3 @@ }));
     }, [style, width]);
-    return React.createElement(tagName, tslib_1.__assign({}, attrs, { className: classes, style: styles }));
+    return React.createElement(tagName, tslib_1.__assign(tslib_1.__assign({}, attrs), { className: classes, style: styles }));
 };
@@ -110,0 +110,0 @@ exports.Col.defaultProps = {

dist/components/navigation/burgerMenu.d.ts

 import * as React from "react";
-export interface IBurgerMenu {
-    toggleMenu: () => void;
-    closeMenu: () => void;
-    openMenu: () => void;
-    isOpen: boolean;
-}
 export interface IBurgerMenuProps {
-    buttonIcon?: string;
-    bodySelector?: string;
-    closeOnNavigate?: boolean;
-    burgerButtonHidden?: boolean;
-    onMenuToggle?: (sender: IBurgerMenu) => any;
+    /** Inner content of the menu */
+    content: JSX.Element;
+    /** Does the menu come in over the top, or push the side */
     mode?: "push" | "slide";
-    wrappingComponent?: React.ReactElement;
-    children?: React.ReactElement<IBurgerMenuItemProps> | Array<React.ReactElement<IBurgerMenuItemProps>>;
+    /** Callback which passes the state of the menu */
+    onChange?: (state: "open" | "closed") => void;
+    /** Position of the menu */
+    position?: "left" | "right";
+    /** Icon for the open button */
+    openButtonIcon: string;
+    /** Icon for the close button */
+    closeButtonIcon: string;
+    /** How long the transition takes in ms */
+    transitionTime?: number;
+    /** Hide the open button, so that you can put a custom button in */
+    hideOpenButton?: boolean;
+    /** Hide the close button, so that you can put a custom button in */
+    hideCloseButton?: boolean;
 }
-export declare const BurgerMenu: React.ForwardRefExoticComponent<IBurgerMenuProps & React.RefAttributes<IBurgerMenu>>;
-export interface IBurgerMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    icon?: string;
-    onClick?: () => void;
-    style?: any;
-    delayActionMs?: number;
-    active?: boolean;
+interface IBurgerMenuContext {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    transitioning: boolean;
+    setTransitioning: (transitioning: boolean) => void;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
 }
-export declare const BurgerMenuItem: React.FC<IBurgerMenuItemProps>;
+export declare const BurgerMenuContext: React.Context<IBurgerMenuContext>;
+export declare const BurgerMenu: React.FC<IBurgerMenuProps>;
+export declare const useBurgerMenu: () => {
+    toggle: () => void;
+    transitioning: boolean;
+    open: () => void;
+    close: () => void;
+    isOpen: boolean;
+};
+export {};

dist/components/navigation/burgerMenu.js

@@ -5,99 +5,69 @@ "use strict";
 var React = require("react");
-var ReactDOM = require("react-dom");
-var icon_1 = require("./../display/icon");
-var BurgerMenuRef = function (props, ref) {
-    var bodySelector = props.bodySelector, burgerButtonHidden = props.burgerButtonHidden, buttonIcon = props.buttonIcon, closeOnNavigate = props.closeOnNavigate, mode = props.mode, onMenuToggle = props.onMenuToggle, wrappingComponent = props.wrappingComponent, children = props.children;
-    var appNode;
-    var isOpen = React.useRef(false);
+var async_1 = require("../../utilities/async");
+var icon_1 = require("../display/icon");
+var button_1 = require("../interaction/button");
+var BurgerMenuComponent = function (_a) {
+    var openButtonIcon = _a.openButtonIcon, closeButtonIcon = _a.closeButtonIcon, onChange = _a.onChange, Content = _a.content, position = _a.position, mode = _a.mode, transitionTime = _a.transitionTime, children = _a.children, hideOpenButton = _a.hideOpenButton, hideCloseButton = _a.hideCloseButton;
+    var _b = React.useContext(exports.BurgerMenuContext), isOpen = _b.isOpen, setIsOpen = _b.setIsOpen, transitioning = _b.transitioning, setTransitioning = _b.setTransitioning;
+    var _c = React.useState(0), menuWidth = _c[0], setMenuWidth = _c[1];
+    var menuRef = React.useRef();
     React.useEffect(function () {
-        var selector = bodySelector || "#host";
-        appNode = document.querySelector(selector);
-        if (!appNode) {
-            // tslint:disable-next-line:no-console
-            console.error("Cannot find document node of " + selector);
+        if (onChange) {
+            onChange(isOpen ? "open" : "closed");
         }
-    }, [bodySelector]);
-    var closeMenu = React.useCallback(function () {
-        var mode1 = mode || "push";
-        if (mode1 === "push") {
-            appNode.classList.remove("menu-open");
-            appNode.classList.remove("menu-push");
+    }, [isOpen]);
+    React.useEffect(function () {
+        if (menuRef.current) {
+            setMenuWidth(menuRef.current.clientWidth);
         }
-        else {
-            appNode.classList.remove("menu-open");
-            appNode.classList.remove("menu-slide");
-        }
-        isOpen.current = false;
-        if (onMenuToggle) {
-            onMenuToggle(burgerMenu());
-        }
-    }, [mode, onMenuToggle, appNode]);
-    var openMenu = React.useCallback(function () {
-        var mode1 = mode || "push";
-        if (mode1 === "push") {
-            appNode.classList.add("menu-open");
-            appNode.classList.add("menu-push");
-        }
-        else {
-            appNode.classList.add("menu-open");
-            appNode.classList.add("menu-slide");
-        }
-        isOpen.current = true;
-        if (onMenuToggle) {
-            onMenuToggle(burgerMenu());
-        }
-    }, [mode, onMenuToggle, appNode]);
-    var toggleMenu = React.useCallback(function () {
-        if (!isOpen.current) {
-            openMenu();
-        }
-        else {
-            closeMenu();
-        }
-    }, [openMenu, closeMenu]);
-    var closeNav = React.useCallback(function () {
-        if (closeOnNavigate) {
-            closeMenu();
-        }
-    }, [closeOnNavigate, closeMenu]);
-    var renderMenu = React.useCallback(function () {
-        return React.cloneElement(wrappingComponent || React.createElement(React.Fragment, null), null, React.createElement("div", null,
-            mode === "slide" && React.createElement("div", { className: "burger-blocker", onClick: closeMenu }),
-            React.createElement("nav", { className: "burger-menu" },
-                React.createElement("ul", { className: "burger-menu-list" }, React.Children.map(children, function (c, index) {
-                    return (React.createElement("li", { onClick: closeNav, key: "nav_item_" + index }, c));
-                })))));
-    }, [mode, children, closeMenu, wrappingComponent]);
-    var burgerMenu = React.useCallback(function () {
-        return {
-            openMenu: openMenu,
-            closeMenu: closeMenu,
-            toggleMenu: toggleMenu,
-            isOpen: isOpen.current,
-        };
-    }, [openMenu, closeMenu, toggleMenu, isOpen]);
-    React.useImperativeHandle(ref, burgerMenu, [burgerMenu]);
+    }, [menuRef]);
+    var transition = React.useCallback(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setTransitioning(true);
+                    return [4 /*yield*/, async_1.delay(transitionTime)];
+                case 1:
+                    _a.sent();
+                    setTransitioning(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [setTransitioning, transitionTime]);
+    React.useEffect(function () {
+        transition();
+    }, [isOpen, transitionTime]);
+    var slideTransform = React.useMemo(function () { return (mode === "push" ? { transform: open ? "translateX(" + (position === "left" ? menuWidth : -menuWidth) + "px)" : "translateX(0)" } : {}); }, [menuWidth, isOpen, mode]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { className: "burger-menu-button" + (burgerButtonHidden ? " hidden" : ""), onClick: toggleMenu }, buttonIcon && React.createElement(icon_1.Icon, { icon: buttonIcon })),
-        ReactDOM.createPortal(renderMenu(), document.querySelector(bodySelector || "#host"))));
+        React.createElement("nav", { className: "armstrong-menu", ref: menuRef, "data-open": isOpen, "data-position": position, "data-mode": mode, style: { transition: transitionTime + "ms" }, role: "navigation" },
+            !hideCloseButton && React.createElement(button_1.Button, { className: "armstrong-menu-button close", onClick: function () { return setIsOpen(false); }, "aria-label": "Close the menu" }, closeButtonIcon && React.createElement(icon_1.Icon, { "aria-hidden": true, icon: closeButtonIcon })),
+            React.createElement("div", { className: "armstrong-burger-content" }, Content)),
+        !hideOpenButton && React.createElement(button_1.Button, { "data-position": position, className: "armstrong-menu-button open", onClick: function () { return setIsOpen(true); }, "aria-label": "Open the menu" }, openButtonIcon && React.createElement(icon_1.Icon, { "aria-hidden": true, icon: openButtonIcon })),
+        mode === "slide" && React.createElement("div", { className: "armstrong-menu-overlay", onClick: function () { return setIsOpen(false); }, "aria-label": "Close the menu", "aria-hidden": !open, style: { transition: transitionTime + "ms" }, "data-transition": transitioning ? isOpen ? "in" : "out" : isOpen ? "open" : "closed" }),
+        React.createElement("div", { className: "armstrong-site-content-wrapper", style: tslib_1.__assign(tslib_1.__assign({}, slideTransform), { transition: "transform " + transitionTime + "ms" }) }, children)));
 };
-exports.BurgerMenu = React.forwardRef(BurgerMenuRef);
-exports.BurgerMenuItem = function (props) {
-    var title = props.title, icon = props.icon, onClick = props.onClick, style = props.style, delayActionMs = props.delayActionMs, active = props.active, attrs = tslib_1.__rest(props, ["title", "icon", "onClick", "style", "delayActionMs", "active"]);
-    var handleClick = React.useCallback(function () {
-        if (!onClick) {
-            return;
-        }
-        if (delayActionMs) {
-            window.setTimeout(function () {
-                onClick();
-            }, delayActionMs);
-        }
-        else {
-            onClick();
-        }
-    }, [onClick, delayActionMs]);
-    return (React.createElement("div", tslib_1.__assign({}, attrs, { role: "menuitem", className: "burger-menu-item" + (active ? " active" : ""), style: style, "aria-selected": active || false, onClick: handleClick }),
-        icon && React.createElement(icon_1.Icon, { icon: icon }),
-        title));
+BurgerMenuComponent.defaultProps = {
+    position: "left",
+    mode: "slide",
+    transitionTime: 300
 };
+exports.BurgerMenuContext = React.createContext(undefined);
+exports.BurgerMenu = function (props) {
+    var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = React.useState(false), transitioning = _b[0], setTransitioning = _b[1];
+    var toggle = React.useCallback(function () {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    var open = React.useCallback(function () {
+        setIsOpen(true);
+    }, []);
+    var close = React.useCallback(function () {
+        setIsOpen(false);
+    }, []);
+    return (React.createElement(exports.BurgerMenuContext.Provider, { value: { open: open, setIsOpen: setIsOpen, transitioning: transitioning, setTransitioning: setTransitioning, toggle: toggle, isOpen: isOpen, close: close } },
+        React.createElement(BurgerMenuComponent, tslib_1.__assign({}, props))));
+};
+exports.useBurgerMenu = function () {
+    var _a = React.useContext(exports.BurgerMenuContext), toggle = _a.toggle, transitioning = _a.transitioning, open = _a.open, close = _a.close, isOpen = _a.isOpen;
+    return { toggle: toggle, transitioning: transitioning, open: open, close: close, isOpen: isOpen };
+};

dist/components/navigation/tabControl.d.ts

 import * as React from "react";
 export interface ITabControlProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** (number) The index of the tab selected when the control renders. Defaults to 0 */
+    /** The index of the tab selected when the control renders. Defaults to 0 */
     defaultSelectedIndex?: number;
-    /** (number) The index of the tab selected. Use this if you want a stateless component */
+    /** The index of the tab selected. Use this if you want a stateless component */
     forceSelectedIndex?: number;
-    /** (TabItem[]) The tab items. Controls the header and the content */
+    /** The tab items. Controls the header and the content */
     children?: React.ReactElement<ITabItemProps> | Array<React.ReactElement<ITabItemProps>>;
-    /** ((index: number) => void) Fires when the tab is changed by the user */
+    /** Fires when the tab is changed by the user */
     onTabChanged?: (index: number) => void;
-    /** ('left' | 'right') Wether to align the tabs to the right or left of the header. Defaults to left */
+    /** Wether to align the tabs to the right or left of the header. Defaults to left */
     tabAlignment?: "left" | "right";
@@ -13,0 +13,0 @@ }

dist/hooks/useCalendar.js

@@ -120,4 +120,4 @@ "use strict";
     }
-    var month = tslib_1.__assign({ daysOfWeek: weeks[0].days.map(function (d) { return d.dayOfWeek; }), weeks: weeks }, monthValue, { year: year });
+    var month = tslib_1.__assign(tslib_1.__assign({ daysOfWeek: weeks[0].days.map(function (d) { return d.dayOfWeek; }), weeks: weeks }, monthValue), { year: year });
     return { month: month, seed: seed, previousSeed: previousSeed, nextSeed: nextSeed };
 }

dist/hooks/useInfinitePaging.js

@@ -19,7 +19,7 @@ "use strict";
             var noReturnedItems = !v.data || v.data.length === 0;
-            var items = noReturnedItems ? currentItems : currentItems.concat(v.data);
+            var items = noReturnedItems ? currentItems : tslib_1.__spreadArrays(currentItems, v.data);
             setState({ items: items, nextPageToken: v.nextPageToken, hasFinished: noReturnedItems || !v.nextPageToken, hasData: true, error: undefined });
             setIsFetching(false);
         }).catch(function (error) {
-            setState(tslib_1.__assign({}, state, { error: error }));
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { error: error }));
             setIsFetching(false);
@@ -26,0 +26,0 @@ });

dist/index.d.ts

@@ -10,2 +10,3 @@ export { IInputValueConverter, IValueConverter } from "./components/form/formValueConverters";
 export { DialogProvider, IDialogProviderProps, useDialogProvider } from "./components/display/dialogProvider";
+export { IDataListProps, DataList } from "./components/display/dataList";
 export { ICheckboxInputProps, CheckboxInput, ICheckboxInput } from "./components/form/inputs/checkboxInput";
@@ -38,3 +39,4 @@ export { IRadioInputProps, RadioInput, IRadioInput } from "./components/form/inputs/radioInput";
 export { Icons } from "./utilities/icons";
-export { BurgerMenu, IBurgerMenuProps, BurgerMenuItem, IBurgerMenuItemProps, IBurgerMenu } from "./components/navigation/burgerMenu";
+export { ISidebarProps, Sidebar, useSidebar } from "./components/navigation/sidebar";
+export { IBurgerMenuProps, BurgerMenu, useBurgerMenu } from "./components/navigation/burgerMenu";
 export { TabControl, TabItem, ITabItemProps, ITabControlProps } from "./components/navigation/tabControl";
@@ -44,2 +46,3 @@ import * as ArmstrongConfig from "./config/config";
 export { ArmstrongConfig };
+export { useToast, ToastProvider, IToastNotification, IGlobalToastSettings, DispatchToast, DismissToast, ToastLocation, ToastType, Toast } from "./components/display/toast";
 export { useInfinitePaging, IInfinitePagingResult, IUseInfinitePagingSettings } from "./hooks/useInfinitePaging";
@@ -51,1 +54,2 @@ export { usePaging, IPagingResult, IUsePagingSettings } from "./hooks/usePaging";
 export { useThrottle } from "./hooks/useThrottle";
+export { useMedia } from "./hooks/useMedia";

dist/index.js

@@ -21,2 +21,4 @@ "use strict";
 exports.useDialogProvider = dialogProvider_1.useDialogProvider;
+var dataList_1 = require("./components/display/dataList");
+exports.DataList = dataList_1.DataList;
 // Form
@@ -90,5 +92,8 @@ var checkboxInput_1 = require("./components/form/inputs/checkboxInput");
 // Navigation
+var sidebar_1 = require("./components/navigation/sidebar");
+exports.Sidebar = sidebar_1.Sidebar;
+exports.useSidebar = sidebar_1.useSidebar;
 var burgerMenu_1 = require("./components/navigation/burgerMenu");
 exports.BurgerMenu = burgerMenu_1.BurgerMenu;
-exports.BurgerMenuItem = burgerMenu_1.BurgerMenuItem;
+exports.useBurgerMenu = burgerMenu_1.useBurgerMenu;
 var tabControl_1 = require("./components/navigation/tabControl");
@@ -102,2 +107,7 @@ exports.TabControl = tabControl_1.TabControl;
 exports.ValidationWrapper = validationWrapper_1.ValidationWrapper;
+// Toast
+var toast_1 = require("./components/display/toast");
+exports.useToast = toast_1.useToast;
+exports.ToastProvider = toast_1.ToastProvider;
+exports.Toast = toast_1.Toast;
 // Hooks
@@ -116,1 +126,3 @@ var useInfinitePaging_1 = require("./hooks/useInfinitePaging");
 exports.useThrottle = useThrottle_1.useThrottle;
+var useMedia_1 = require("./hooks/useMedia");
+exports.useMedia = useMedia_1.useMedia;

package.json

 {
   "name": "armstrong-react",
-  "version": "4.0.0-pre20",
+  "version": "4.0.0-pre21",
   "description": "Rocketmakers Armstrong library of React components",
@@ -9,11 +9,11 @@ "main": "./dist/index.js",
   "scripts": {
-    "test": "yarn build-ts && mocha --reporter spec",
+    "test": "npm run build-ts && mocha --reporter spec",
     "build-ts": "tsc --pretty -p source -d",
     "build-scss": "node sass_concat.js",
-    "build": "yarn run build-ts && yarn run build-scss",
+    "build": "npm run build-ts && npm run build-scss",
     "watch-scss": "node sass_copy.js",
     "watch-ts": "tsc -p source -d -w",
-    "watch": "parallelshell -v \"yarn run watch-ts\" \"yarn run watch-scss\"",
+    "watch": "parallelshell -v \"npm run watch-ts\" \"npm run watch-scss\"",
     "lint": "tslint -c tslint.json 'source/**/*.ts{,x}'",
-    "prepublish": "yarn build"
+    "prepublishOnly": "npm run build"
   },
@@ -56,6 +56,6 @@ "repository": {
     "react-test-renderer": "^16.8.6",
-    "ts-loader": "^5.3.3",
+    "ts-loader": "^6.0.4",
     "tslint": "^5.16.0",
-    "typescript": "~3.4.4"
+    "typescript": "~3.6.2"
   }
 }

source/hooks/useThrottle.ts

@@ -24,2 +24,2 @@ import * as React from "react";
   return throttledValue;
-}
+}

source/index.ts

@@ -12,2 +12,3 @@ export { IInputValueConverter, IValueConverter } from "./components/form/formValueConverters";
 export { DialogProvider, IDialogProviderProps, useDialogProvider } from "./components/display/dialogProvider";
+export { IDataListProps, DataList } from "./components/display/dataList";
 
@@ -47,3 +48,4 @@ // Form
 // Navigation
-export { BurgerMenu, IBurgerMenuProps, BurgerMenuItem, IBurgerMenuItemProps, IBurgerMenu } from "./components/navigation/burgerMenu"
+export { ISidebarProps, Sidebar, useSidebar } from "./components/navigation/sidebar"
+export { IBurgerMenuProps, BurgerMenu, useBurgerMenu } from "./components/navigation/burgerMenu"
 export { TabControl, TabItem, ITabItemProps, ITabControlProps } from "./components/navigation/tabControl"
@@ -53,2 +55,4 @@ import * as ArmstrongConfig from "./config/config"
 export { ArmstrongConfig }
+// Toast
+export { useToast, ToastProvider, IToastNotification, IGlobalToastSettings, DispatchToast, DismissToast, ToastLocation, ToastType, Toast } from "./components/display/toast";
 // Hooks
@@ -61,1 +65,2 @@ export { useInfinitePaging, IInfinitePagingResult, IUseInfinitePagingSettings } from "./hooks/useInfinitePaging"
 export { useThrottle } from "./hooks/useThrottle"
+export { useMedia } from "./hooks/useMedia"

source/tsconfig.json

@@ -24,3 +24,6 @@ {
     ]
-  }
+  },
+  "exclude": [
+    "node_modules"
+  ]
 }

tslint.json

@@ -13,3 +13,5 @@ {
     "max-line-length": false,
+    "trailing-comma": false,
     "max-classes-per-file": false,
+    "align": false,
     "member-access": [
@@ -16,0 +18,0 @@ true,

No alert changes

Improved metrics

Total package byte prevSize

974424

increased by9.8%

Number of package files

252

increased by10.04%

Lines of code

20472

increased by7.87%

No dependency changes