@selfcommunity/react-ui 0.7.0-alpha.36 → 0.7.0-alpha.360

package/lib/esm/shared/StickyBox/index.js

@@ -0,0 +1,354 @@
+/**
+ * Sticky Boxes with sensible behaviour if the content is bigger than the viewport.
+ *
+ * Use as a Component:
+ *
+ * import StickyBox from "shared/StickyBox";
+ *
+ * const Page = () => (
+ *   <div className="row">
+ *     <StickyBox offsetTop={20} offsetBottom={20}>
+ *       <div>Sidebar</div>
+ *     </StickyBox>
+ *     <div>Content</div>
+ *   </div>
+ * );
+ *
+ * Or via the useStickyBox hook
+ * import {useStickyBox} from "shared/StickyBox";
+ *
+ * const Page = () => {
+ * const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})
+ *   <div className="row">
+ *   <aside ref={stickyRef}>
+ *   <div>Sidebar</div>
+ * </aside>
+ * <div>Content</div>
+ * </div>
+ * };
+ *
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+/**
+ * getScrollParent
+ * @param node
+ */
+const getScrollParent = (node) => {
+    let parent = node;
+    while ((parent = parent.parentElement)) {
+        const overflowYVal = getComputedStyle(parent, null).getPropertyValue('overflow-y');
+        if (parent === document.body)
+            return window;
+        if (overflowYVal === 'auto' || overflowYVal === 'scroll')
+            return parent;
+    }
+    return window;
+};
+/**
+ * offsetTill
+ * @param node
+ * @param target
+ */
+const offsetTill = (node, target) => {
+    let current = node;
+    let offset = 0;
+    // If target is not an offsetParent itself, subtract its offsetTop and set correct target
+    if (target.firstChild && target.firstChild.offsetParent !== target) {
+        offset += node.offsetTop - target.offsetTop;
+        target = node.offsetParent;
+        offset += -node.offsetTop;
+    }
+    do {
+        offset += current.offsetTop;
+        current = current.offsetParent;
+    } while (current && current !== target);
+    return offset;
+};
+/**
+ * getParentNode
+ * @param node
+ */
+const getParentNode = (node) => {
+    let currentParent = node.parentNode;
+    while (currentParent) {
+        const style = getComputedStyle(currentParent, null);
+        if (style.getPropertyValue('display') !== 'contents')
+            break;
+        currentParent = currentParent.parentNode;
+    }
+    return currentParent || window;
+};
+/**
+ * Check CSS 'sticky' compatibility
+ */
+let stickyProp = null;
+if (typeof CSS !== 'undefined' && CSS.supports) {
+    if (CSS.supports('position', 'sticky'))
+        stickyProp = 'sticky';
+    else if (CSS.supports('position', '-webkit-sticky'))
+        stickyProp = '-webkit-sticky';
+}
+/**
+ * Inspired by https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
+ */
+let passiveArg = false;
+try {
+    let opts = Object.defineProperty({}, 'passive', {
+        // eslint-disable-next-line getter-return
+        get() {
+            passiveArg = { passive: true };
+        }
+    });
+    window.addEventListener('testPassive', null, opts);
+    window.removeEventListener('testPassive', null, opts);
+    // eslint-disable-next-line no-empty
+}
+catch (e) { }
+/**
+ * registerNode
+ * @param node
+ * @param offsetTop
+ * @param offsetBottom
+ * @param bottom
+ */
+const registerNode = (node, { offsetTop, offsetBottom, bottom }) => {
+    const scrollPane = getScrollParent(node);
+    let latestScrollY = scrollPane === window ? window.scrollY : scrollPane.scrollTop;
+    const unsubs = [];
+    let mode, offset, nodeHeight, naturalTop, parentHeight, scrollPaneOffset, viewPortHeight;
+    const getCurrentOffset = () => {
+        if (mode === 'relative')
+            return offset;
+        if (mode === 'stickyTop') {
+            return Math.max(0, scrollPaneOffset + latestScrollY - naturalTop + offsetTop);
+        }
+        if (mode === 'stickyBottom') {
+            return Math.max(0, scrollPaneOffset + latestScrollY + viewPortHeight - (naturalTop + nodeHeight + offsetBottom));
+        }
+    };
+    const changeToStickyBottomIfBoxTooLow = (scrollY) => {
+        if (scrollY + scrollPaneOffset + viewPortHeight >= naturalTop + nodeHeight + offset + offsetBottom) {
+            changeMode('stickyBottom');
+        }
+    };
+    const changeMode = (newMode) => {
+        mode = newMode;
+        if (newMode === 'relative') {
+            node.style.position = 'relative';
+            if (bottom) {
+                const nextBottom = Math.max(0, parentHeight - nodeHeight - offset);
+                node.style.bottom = `${nextBottom}px`;
+            }
+            else {
+                node.style.top = `${offset}px`;
+            }
+        }
+        else {
+            node.style.position = stickyProp;
+            if (newMode === 'stickyBottom') {
+                if (bottom) {
+                    node.style.bottom = `${offsetBottom}px`;
+                }
+                else {
+                    node.style.top = `${viewPortHeight - nodeHeight - offsetBottom}px`;
+                }
+            }
+            else {
+                // stickyTop
+                if (bottom) {
+                    node.style.bottom = `${viewPortHeight - nodeHeight - offsetBottom}px`;
+                }
+                else {
+                    node.style.top = `${offsetTop}px`;
+                }
+            }
+        }
+        offset = getCurrentOffset();
+    };
+    const initial = () => {
+        if (bottom) {
+            if (mode !== 'stickyBottom')
+                changeMode('stickyBottom');
+        }
+        else {
+            if (mode !== 'stickyTop')
+                changeMode('stickyTop');
+        }
+    };
+    const addListener = (element, event, handler, passive) => {
+        element.addEventListener(event, handler, passive);
+        unsubs.push(() => element.removeEventListener(event, handler));
+    };
+    const handleScroll = () => {
+        const scrollY = scrollPane === window ? window.scrollY : scrollPane.scrollTop;
+        if (scrollY === latestScrollY)
+            return;
+        if (nodeHeight + offsetTop + offsetBottom <= viewPortHeight) {
+            // Just make it sticky if node smaller than viewport
+            initial();
+            latestScrollY = scrollY;
+            return;
+        }
+        const scrollDelta = scrollY - latestScrollY;
+        offset = getCurrentOffset();
+        if (scrollDelta > 0) {
+            // scroll down
+            if (mode === 'stickyTop') {
+                if (scrollY + scrollPaneOffset + offsetTop > naturalTop) {
+                    if (scrollY + scrollPaneOffset + viewPortHeight <= naturalTop + nodeHeight + offset + offsetBottom) {
+                        changeMode('relative');
+                    }
+                    else {
+                        changeMode('stickyBottom');
+                    }
+                }
+            }
+            else if (mode === 'relative') {
+                changeToStickyBottomIfBoxTooLow(scrollY);
+            }
+        }
+        else {
+            // scroll up
+            if (mode === 'stickyBottom') {
+                if (scrollPaneOffset + scrollY + viewPortHeight < naturalTop + parentHeight + offsetBottom) {
+                    if (scrollPaneOffset + scrollY + offsetTop >= naturalTop + offset) {
+                        changeMode('relative');
+                    }
+                    else {
+                        changeMode('stickyTop');
+                    }
+                }
+            }
+            else if (mode === 'relative') {
+                if (scrollPaneOffset + scrollY + offsetTop < naturalTop + offset) {
+                    changeMode('stickyTop');
+                }
+            }
+        }
+        latestScrollY = scrollY;
+    };
+    const handleWindowResize = () => {
+        viewPortHeight = window.innerHeight;
+        scrollPaneOffset = 0;
+        handleScroll();
+    };
+    const handleScrollPaneResize = () => {
+        viewPortHeight = scrollPane.offsetHeight;
+        if (process.env.NODE_ENV !== 'production' && viewPortHeight === 0) {
+            console.warn(`react-sticky-box's scroll pane has a height of 0. This seems odd. Please check this node:`, scrollPane);
+        }
+        // Only applicable if scrollPane is an offsetParent
+        if (scrollPane.firstChild.offsetParent === scrollPane) {
+            scrollPaneOffset = scrollPane.getBoundingClientRect().top;
+        }
+        else {
+            scrollPaneOffset = 0;
+        }
+        handleScroll();
+    };
+    const handleParentNodeResize = () => {
+        const parentNode = getParentNode(node);
+        const computedParentStyle = getComputedStyle(parentNode, null);
+        const parentPaddingTop = parseInt(computedParentStyle.getPropertyValue('padding-top'), 10);
+        const parentPaddingBottom = parseInt(computedParentStyle.getPropertyValue('padding-bottom'), 10);
+        const verticalParentPadding = parentPaddingTop + parentPaddingBottom;
+        naturalTop = offsetTill(parentNode, scrollPane) + parentPaddingTop + scrollPaneOffset;
+        const oldParentHeight = parentHeight;
+        parentHeight = parentNode.getBoundingClientRect().height - verticalParentPadding;
+        if (mode === 'relative') {
+            if (bottom) {
+                changeMode('relative');
+            }
+            else {
+                // If parent height decreased...
+                if (oldParentHeight > parentHeight) {
+                    changeToStickyBottomIfBoxTooLow(latestScrollY);
+                }
+            }
+        }
+        if (oldParentHeight !== parentHeight && mode === 'relative') {
+            latestScrollY = Number.POSITIVE_INFINITY;
+            handleScroll();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const handleNodeResize = ({ initial: initialArg } = {}) => {
+        const prevHeight = nodeHeight;
+        nodeHeight = node.getBoundingClientRect().height;
+        if (!initialArg && prevHeight !== nodeHeight) {
+            if (nodeHeight + offsetTop + offsetBottom <= viewPortHeight) {
+                // Just make it sticky if node smaller than viewport
+                mode = undefined;
+                initial();
+                return;
+            }
+            else {
+                const diff = prevHeight - nodeHeight;
+                const lowestPossible = parentHeight - nodeHeight;
+                const nextOffset = Math.min(lowestPossible, getCurrentOffset() + (bottom ? diff : 0));
+                offset = Math.max(0, nextOffset);
+                if (!bottom || mode !== 'stickyBottom')
+                    changeMode('relative');
+            }
+        }
+    };
+    const addResizeObserver = (n, handler) => {
+        const ro = new ResizeObserver(handler);
+        ro.observe(n);
+        unsubs.push(() => ro.disconnect());
+    };
+    addListener(scrollPane, 'scroll', handleScroll, passiveArg);
+    addListener(scrollPane, 'mousewheel', handleScroll, passiveArg);
+    if (scrollPane === window) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        addListener(window, 'resize', handleWindowResize);
+        handleWindowResize();
+    }
+    else {
+        addResizeObserver(scrollPane, handleScrollPaneResize);
+        handleScrollPaneResize();
+    }
+    addResizeObserver(getParentNode(node), handleParentNodeResize);
+    handleParentNodeResize();
+    addResizeObserver(node, handleNodeResize);
+    handleNodeResize({ initial: true });
+    initial();
+    return () => unsubs.forEach((fn) => fn());
+};
+/**
+ * useStickyBox
+ * @param offsetTop
+ * @param offsetBottom
+ * @param bottom
+ */
+export const useStickyBox = ({ offsetTop = 0, offsetBottom = 0, bottom = false } = {}) => {
+    const [node, setNode] = useState(null);
+    const argRef = useRef({ offsetTop, offsetBottom, bottom });
+    useEffect(() => {
+        argRef.current = { offsetTop, offsetBottom, bottom };
+    });
+    useEffect(() => {
+        if (!node)
+            return;
+        return registerNode(node, argRef.current);
+    }, [node]);
+    return setNode;
+};
+/**
+ * StickyBox component
+ * @param offsetTop
+ * @param offsetBottom
+ * @param bottom
+ * @param children
+ * @param className
+ * @param style
+ * @constructor
+ */
+const StickyBox = ({ offsetTop, offsetBottom, bottom, children, className, style }) => {
+    const ref = useStickyBox({ offsetTop, offsetBottom, bottom });
+    return (React.createElement("div", { className: className, style: style, ref: ref }, children));
+};
+export default StickyBox;

package/lib/esm/shared/TagChip/index.d.ts

@@ -76,4 +76,3 @@ export interface TagChipProps {
     ellipsis?: boolean;
 }
 export default function TagChip(props: TagChipProps): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/TagChip/index.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import Chip from '@mui/material/Chip';
 import classNames from 'classnames';
@@ -45,4 +35,3 @@ export default function TagChip(props) {
      */
     return (React.createElement(Root, Object.assign({ className: classNames(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
 }
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/Tags/index.d.ts

@@ -46,4 +46,3 @@ export interface TagsProps {
     [p: string]: any;
 }
 export default function Tags(props: TagsProps): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/Tags/index.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
@@ -120,7 +110,7 @@ export default function Tags(props) {
      * Renders component
      */
     return (React.createElement(React.Fragment, null, tags.length && (React.createElement(React.Fragment, null, type === TagsComponentType.POPPER ? (React.createElement(TagsPopperRoot, Object.assign({}, rest),
-        React.createElement(Icon, { ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true" }, "local_offer"),
+        React.createElement(Icon, { ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true" }, "label"),
         React.createElement(TagsPopper, { open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
                 {
                     name: 'preventOverflow',
@@ -140,4 +130,3 @@ export default function Tags(props) {
         React.createElement(StackList, { spacing: 1, direction: rest.direction ? rest.direction : 'column' }, tags.map((tag) => (React.createElement(ItemList, { key: tag.id },
             React.createElement(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps))))))))))));
 }
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/UrlTextField/index.d.ts

@@ -1,4 +1,3 @@
 import { TextFieldProps } from '@mui/material';
 declare const UrlTextField: (props: TextFieldProps) => JSX.Element;
 export default UrlTextField;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/UrlTextField/index.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { TextField } from '@mui/material';
@@ -47,4 +37,3 @@ const UrlTextField = (props) => {
     return React.createElement(Root, Object.assign({}, rest, { onChange: handleChange, error: Boolean(errorMsg) || error, helperText: errorMsg || helperText }));
 };
 export default UrlTextField;
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/UserAvatar/UserAvatar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BadgeProps } from '@mui/material';
+export interface UserAvatarProps extends BadgeProps {
+    className?: string;
+    children?: React.ReactNode;
+    hide: boolean;
+    smaller?: boolean;
+}
+export default function UserAvatar(inProps: UserAvatarProps): JSX.Element;

package/lib/esm/shared/UserAvatar/UserAvatar.js

@@ -0,0 +1,35 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Badge, Avatar } from '@mui/material';
+import classNames from 'classnames';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
+const PREFIX = 'SCUserAvatar';
+const classes = {
+    root: `${PREFIX}-root`,
+    badgeContent: `${PREFIX}-badge-content`,
+    badgeContentSmaller: `${PREFIX}-badge-content-xs`
+};
+const Root = styled(Badge, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+export default function UserAvatar(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, children = null, hide = false, smaller = false } = props, rest = __rest(props, ["className", "children", "hide", "smaller"]);
+    // PREFERENCES
+    const scPreferences = useSCPreferences();
+    const preferences = useMemo(() => {
+        const _preferences = {};
+        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
+        return _preferences;
+    }, [scPreferences.preferences]);
+    return (React.createElement(Root, Object.assign({ classes: { root: classNames(className, classes.root) }, invisible: hide, overlap: "circular", anchorOrigin: { vertical: 'top', horizontal: 'right' }, showZero: !preferences, badgeContent: React.createElement(Avatar, { className: classNames(classes.badgeContent, { [classes.badgeContentSmaller]: smaller }), alt: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL], src: preferences[SCPreferences.STAFF_STAFF_BADGE_ICON] }) }, rest), children));
+}

package/lib/esm/shared/UserAvatar/index.d.ts

@@ -0,0 +1,3 @@
+import UserAvatar, { UserAvatarProps } from './UserAvatar';
+export default UserAvatar;
+export { UserAvatarProps };

package/lib/esm/shared/UserAvatar/index.js

@@ -0,0 +1,2 @@
+import UserAvatar from './UserAvatar';
+export default UserAvatar;

package/lib/esm/shared/UserDeletedSnackBar/UserDeletedSnackBar.d.ts

@@ -0,0 +1,7 @@
+import { SnackbarProps } from '@mui/material';
+export interface UserDeletedSnackBarProps extends SnackbarProps {
+    className?: string;
+    open: boolean;
+    handleClose: () => void;
+}
+export default function UserDeletedSnackBar(inProps: UserDeletedSnackBarProps): JSX.Element;

package/lib/esm/shared/UserDeletedSnackBar/UserDeletedSnackBar.js

@@ -0,0 +1,30 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Snackbar, Alert } from '@mui/material';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+const PREFIX = 'SCUserDeletedSnackBar';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Snackbar, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+export default function UserDeletedSnackBar(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = false, handleClose } = props, rest = __rest(props, ["className", "open", "handleClose"]);
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root), open: open, autoHideDuration: 3000, onClose: handleClose, anchorOrigin: {
+            vertical: 'top',
+            horizontal: 'center'
+        } }, rest),
+        React.createElement(Alert, { severity: "info", onClose: handleClose },
+            React.createElement(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }))));
+}

package/lib/esm/shared/UserDeletedSnackBar/index.d.ts

@@ -0,0 +1,3 @@
+import UserDeletedSnackBar, { UserDeletedSnackBarProps } from './UserDeletedSnackBar';
+export default UserDeletedSnackBar;
+export { UserDeletedSnackBarProps };

package/lib/esm/shared/UserDeletedSnackBar/index.js

@@ -0,0 +1,2 @@
+import UserDeletedSnackBar from './UserDeletedSnackBar';
+export default UserDeletedSnackBar;

package/lib/esm/shared/UsernameTextField/index.d.ts

@@ -1,4 +1,9 @@
 import { TextFieldProps } from '@mui/material';
-declare const UsernameTextField: (props: TextFieldProps) => JSX.Element;
+export declare type UsernameTextFieldProps = {
+    /**
+     * Allows the field to accept an email format as well
+     */
+    allowEmail?: boolean;
+} & TextFieldProps;
+declare const UsernameTextField: (props: UsernameTextFieldProps) => JSX.Element;
 export default UsernameTextField;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/UsernameTextField/index.js

@@ -1,23 +1,17 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { TextField } from '@mui/material';
 import { defineMessages, useIntl } from 'react-intl';
-import { USERNAME_REGEX } from '../../constants/Account';
+import { EMAIL_REGEX, USERNAME_REGEX } from '../../constants/Account';
 const messages = defineMessages({
     usernameError: {
         id: 'ui.common.error.username',
         defaultMessage: 'ui.common.error.username'
+    },
+    usernameOrEmail: {
+        id: 'ui.common.error.usernameOrEmail',
+        defaultMessage: 'ui.common.error.usernameOrEmail'
     }
 });
 const PREFIX = 'SCUsernameTextField';
@@ -28,15 +22,25 @@ const Root = styled(TextField, {
 })(({ theme }) => ({}));
 const UsernameTextField = (props) => {
     // PROPS
-    const { onChange, error = false, helperText = null } = props, rest = __rest(props, ["onChange", "error", "helperText"]);
+    const { onChange, error = false, allowEmail = false, helperText = null } = props, rest = __rest(props, ["onChange", "error", "allowEmail", "helperText"]);
     // STATE
     const [errorMsg, setErrorMsg] = useState(null);
     // HOOKS
     const intl = useIntl();
     // HANDLERS
     const handleChange = (event) => {
-        if (event.target.value && !USERNAME_REGEX.test(event.target.value)) {
-            setErrorMsg(intl.formatMessage(messages.usernameError));
+        if (event.target.value) {
+            if (allowEmail &&
+                ((event.target.value.includes('@') && !EMAIL_REGEX.test(event.target.value)) ||
+                    (!event.target.value.includes('@') && !USERNAME_REGEX.test(event.target.value)))) {
+                setErrorMsg(intl.formatMessage(messages.usernameOrEmail));
+            }
+            else if (!allowEmail && !USERNAME_REGEX.test(event.target.value)) {
+                setErrorMsg(intl.formatMessage(messages.usernameError));
+            }
+            else if (error !== null) {
+                setErrorMsg(null);
+            }
         }
         else if (error !== null) {
             setErrorMsg(null);
@@ -47,4 +51,3 @@ const UsernameTextField = (props) => {
     return React.createElement(Root, Object.assign({}, rest, { onChange: handleChange, error: Boolean(errorMsg) || error, helperText: errorMsg || helperText }));
 };
 export default UsernameTextField;
-//# sourceMappingURL=index.js.map

package/lib/esm/shared/VirtualizedScroller/VirtualScrollerChild.d.ts

@@ -8,4 +8,3 @@ declare const VirtualScrollChild: ({ children, onHeightChange }: {
     onHeightChange: any;
 }) => JSX.Element;
 export default VirtualScrollChild;
-//# sourceMappingURL=VirtualScrollerChild.d.ts.map

package/lib/esm/shared/VirtualizedScroller/VirtualScrollerChild.js

@@ -26,4 +26,3 @@ const VirtualScrollChild = ({ children, onHeightChange }) => {
     return React.createElement("div", { ref: ref }, children);
 };
 export default VirtualScrollChild;
-//# sourceMappingURL=VirtualScrollerChild.js.map

package/lib/esm/shared/VirtualizedScroller/VirtualizedScroller.d.ts

@@ -5,6 +5,8 @@ import { VirtualScrollerCommonOptions } from 'virtual-scroller';
  * VirtualizedScrollerCommonProps Interface
  */
 export interface VirtualizedScrollerCommonProps extends VirtualScrollerCommonOptions<HTMLElement, any>, React.HTMLAttributes<HTMLElement> {
+    scrollableContainer?: any;
+    getScrollableContainer?: () => Element;
 }
 /**
  * VirtualizedScrollerProps Interface
@@ -78,4 +80,3 @@ export interface VirtualizedScrollerProps extends VirtualizedScrollerCommonProps
  * Set window['VirtualScrollerDebug'] = true; to output debug messages to console.
  */
 export default function VirtualizedScroller(props: any): JSX.Element;
-//# sourceMappingURL=VirtualizedScroller.d.ts.map