@webiny/ui 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.97a151f74d

package/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["Dialog","props","container","document","getElementById","createElement","setAttribute","body","appendChild","children","ReactDOM","createPortal","getClasses","React","Component","DialogTitle","DialogContent","DialogActions","DialogButton","DialogCancel","DialogAccept"],"sources":["Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n    Dialog as RmwcDialog,\n    DialogProps as RmwcDialogProps,\n    DialogOnCloseEventT,\n    DialogContent as RmwcDialogContent,\n    DialogContentProps as RmwcDialogContentProps,\n    DialogTitle as RmwcDialogTitle,\n    DialogTitleProps as RmwcDialogTitleProps,\n    DialogActions as RmwcDialogActions,\n    DialogActionsProps as RmwcDialogActionsProps,\n    DialogButton as RmwcDialogButton,\n    DialogButtonProps as RmwcDialogButtonProps\n} from \"@rmwc/dialog\";\nimport { getClasses } from \"~/Helpers\";\n\nexport type DialogOnClose = (event: DialogOnCloseEventT) => void;\n\nexport interface DialogProps extends RmwcDialogProps {\n    className?: string;\n\n    // Component's custom in-line styles.\n    style?: React.CSSProperties;\n\n    // If true, dialog will be permanently fixed inside of a view (works for temporary and persistent modes).\n    open?: boolean;\n\n    onClose?: (evt: DialogOnCloseEventT) => void;\n\n    preventOutsideDismiss?: boolean;\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n    container: HTMLElement;\n\n    constructor(props: DialogProps) {\n        super(props);\n        /**\n         * We can safely cast\n         */\n        this.container = document.getElementById(\"dialog-container\") as HTMLElement;\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"dialog-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const { children, ...props } = this.props;\n        const container = this.container;\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <RmwcDialog {...getClasses(props, \"webiny-ui-dialog\")}>{children}</RmwcDialog>,\n            container\n        );\n    }\n}\n\nexport interface DialogTitleProps extends RmwcDialogTitleProps {\n    /**\n     * Title text.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n}\n\n/**\n * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.\n */\nexport const DialogTitle: React.FC<DialogTitleProps> = props => (\n    <RmwcDialogTitle {...getClasses(props, \"webiny-ui-dialog__title\")} />\n);\n\nexport type DialogContentProps = RmwcDialogContentProps & {\n    /**\n     * Dialog content.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    className?: string;\n};\n\n/**\n * A simple component for showing dialog's body.\n */\nexport const DialogContent: React.FC<DialogContentProps> = props => (\n    <RmwcDialogContent {...getClasses(props, \"webiny-ui-dialog__content\")} />\n);\n\nexport interface DialogActionsProps extends RmwcDialogActionsProps {\n    /**\n     * Action buttons.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions: React.FC<DialogActionsProps> = props => (\n    <RmwcDialogActions {...getClasses(props, \"webiny-ui-dialog__actions\")} />\n);\n\ninterface DialogButtonProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n\n    className?: string;\n}\n\n/**\n * Use this to show a simple button.\n */\nexport const DialogButton: React.FC<DialogButtonProps> = props => (\n    <RmwcDialogButton {...getClasses(props, \"webiny-ui-dialog__button\")} />\n);\n\ninterface DialogCancelProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogCancel: React.FC<DialogCancelProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--cancel\")}\n            action=\"close\"\n            data-testid=\"dialog-cancel\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n\ninterface DialogAcceptProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogAccept: React.FC<DialogAcceptProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--accept\")}\n            action=\"accept\"\n            data-testid=\"dialog-accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAaA;;;;IAkBaA,M;;;;;EAGT,gBAAYC,KAAZ,EAAgC;IAAA;;IAAA;IAC5B,0BAAMA,KAAN;IACA;AACR;AACA;;IAJoC;IAK5B,MAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,kBAAxB,CAAjB;;IAEA,IAAI,CAAC,MAAKF,SAAV,EAAqB;MACjB,MAAKA,SAAL,GAAiBC,QAAQ,CAACE,aAAT,CAAuB,KAAvB,CAAjB;;MACA,MAAKH,SAAL,CAAeI,YAAf,CAA4B,IAA5B,EAAkC,kBAAlC;;MACA,IAAMJ,SAAS,GAAG,MAAKA,SAAvB;MACAC,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;IACH;;IAZ2B;EAa/B;;;;WAED,kBAAyB;MACrB,kBAA+B,KAAKD,KAApC;MAAA,IAAQQ,QAAR,eAAQA,QAAR;MAAA,IAAqBR,KAArB;MACA,IAAMC,SAAS,GAAG,KAAKA,SAAvB,CAFqB,CAIrB;;MACA,oBAAOQ,iBAAA,CAASC,YAAT,eACH,6BAAC,cAAD,EAAgB,IAAAC,mBAAA,EAAWX,KAAX,EAAkB,kBAAlB,CAAhB,EAAwDQ,QAAxD,CADG,EAEHP,SAFG,CAAP;IAIH;;;EA3BuBW,cAAA,CAAMC,S;;;;AAqClC;AACA;AACA;AACO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,CAAAd,KAAK;EAAA,oBACxD,6BAAC,mBAAD,EAAqB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,yBAAlB,CAArB,CADwD;AAAA,CAArD;;;;AAaP;AACA;AACA;AACO,IAAMe,aAA2C,GAAG,SAA9CA,aAA8C,CAAAf,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2BAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;;AAcP;AACA;AACA;AACO,IAAMgB,aAA2C,GAAG,SAA9CA,aAA8C,CAAAhB,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2BAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;;AAaP;AACA;AACA;AACO,IAAMiB,YAAyC,GAAG,SAA5CA,YAA4C,CAAAjB,KAAK;EAAA,oBAC1D,6BAAC,oBAAD,EAAsB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,0BAAlB,CAAtB,CAD0D;AAAA,CAAvD;;;;AAWP;AACA;AACA;AACO,IAAMkB,YAAyC,GAAG,SAA5CA,YAA4C,CAAAlB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAD,oBACQ,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2DAAlB,CADR;IAEI,MAAM,EAAC,OAFX;IAGI,eAAY;EAHhB,IAKKA,KAAK,CAACQ,QALX,CADJ;AASH,CAVM;;;;AAmBP;AACA;AACA;AACO,IAAMW,YAAyC,GAAG,SAA5CA,YAA4C,CAAAnB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAD,oBACQ,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2DAAlB,CADR;IAEI,MAAM,EAAC,QAFX;IAGI,eAAY;EAHhB,IAKKA,KAAK,CAACQ,QALX,CADJ;AASH,CAVM"}
+{"version":3,"names":["Dialog","props","container","document","getElementById","createElement","setAttribute","body","appendChild","children","ReactDOM","createPortal","getClasses","React","Component","DialogTitle","DialogContent","addMargin","css","DialogActions","DialogButton","DialogCancel","DialogAccept"],"sources":["Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n    Dialog as RmwcDialog,\n    DialogProps as RmwcDialogProps,\n    DialogOnCloseEventT,\n    DialogContent as RmwcDialogContent,\n    DialogContentProps as RmwcDialogContentProps,\n    DialogTitle as RmwcDialogTitle,\n    DialogTitleProps as RmwcDialogTitleProps,\n    DialogActions as RmwcDialogActions,\n    DialogActionsProps as RmwcDialogActionsProps,\n    DialogButton as RmwcDialogButton,\n    DialogButtonProps as RmwcDialogButtonProps\n} from \"@rmwc/dialog\";\nimport { css } from \"emotion\";\nimport { getClasses } from \"~/Helpers\";\n\nexport type DialogOnClose = (event: DialogOnCloseEventT) => void;\n\nexport interface DialogProps extends RmwcDialogProps {\n    className?: string;\n\n    // Component's custom in-line styles.\n    style?: React.CSSProperties;\n\n    // If true, dialog will be permanently fixed inside of a view (works for temporary and persistent modes).\n    open?: boolean;\n\n    onClose?: (evt: DialogOnCloseEventT) => void;\n\n    preventOutsideDismiss?: boolean;\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n    container: HTMLElement;\n\n    constructor(props: DialogProps) {\n        super(props);\n        /**\n         * We can safely cast\n         */\n        this.container = document.getElementById(\"dialog-container\") as HTMLElement;\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"dialog-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const { children, ...props } = this.props;\n        const container = this.container;\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <RmwcDialog {...getClasses(props, \"webiny-ui-dialog\")}>{children}</RmwcDialog>,\n            container\n        );\n    }\n}\n\nexport interface DialogTitleProps extends RmwcDialogTitleProps {\n    /**\n     * Title text.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n}\n\n/**\n * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.\n */\nexport const DialogTitle: React.FC<DialogTitleProps> = props => (\n    <RmwcDialogTitle {...getClasses(props, \"webiny-ui-dialog__title\")} />\n);\n\nexport type DialogContentProps = RmwcDialogContentProps & {\n    /**\n     * Dialog content.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    className?: string;\n};\n\n/**\n * A simple component for showing dialog's body.\n */\nexport const DialogContent: React.FC<DialogContentProps> = props => (\n    <RmwcDialogContent {...getClasses(props, \"webiny-ui-dialog__content\")} />\n);\n\nexport interface DialogActionsProps extends RmwcDialogActionsProps {\n    /**\n     * Action buttons.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\nconst addMargin = css`\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions: React.FC<DialogActionsProps> = props => (\n    <RmwcDialogActions {...getClasses(props, [addMargin, \"webiny-ui-dialog__actions\"])} />\n);\n\ninterface DialogButtonProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n\n    className?: string;\n}\n\n/**\n * Use this to show a simple button.\n */\nexport const DialogButton: React.FC<DialogButtonProps> = props => (\n    <RmwcDialogButton {...getClasses(props, \"webiny-ui-dialog__button\")} />\n);\n\ninterface DialogCancelProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogCancel: React.FC<DialogCancelProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--cancel\")}\n            action=\"close\"\n            data-testid=\"dialog-cancel\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n\ninterface DialogAcceptProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogAccept: React.FC<DialogAcceptProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--accept\")}\n            action=\"accept\"\n            data-testid=\"dialog-accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAaA;;AACA;;;;IAkBaA,M;;;;;EAGT,gBAAYC,KAAZ,EAAgC;IAAA;;IAAA;IAC5B,0BAAMA,KAAN;IACA;AACR;AACA;;IAJoC;IAK5B,MAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,kBAAxB,CAAjB;;IAEA,IAAI,CAAC,MAAKF,SAAV,EAAqB;MACjB,MAAKA,SAAL,GAAiBC,QAAQ,CAACE,aAAT,CAAuB,KAAvB,CAAjB;;MACA,MAAKH,SAAL,CAAeI,YAAf,CAA4B,IAA5B,EAAkC,kBAAlC;;MACA,IAAMJ,SAAS,GAAG,MAAKA,SAAvB;MACAC,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;IACH;;IAZ2B;EAa/B;;;;WAED,kBAAyB;MACrB,kBAA+B,KAAKD,KAApC;MAAA,IAAQQ,QAAR,eAAQA,QAAR;MAAA,IAAqBR,KAArB;MACA,IAAMC,SAAS,GAAG,KAAKA,SAAvB,CAFqB,CAIrB;;MACA,oBAAOQ,iBAAA,CAASC,YAAT,eACH,6BAAC,cAAD,EAAgB,IAAAC,mBAAA,EAAWX,KAAX,EAAkB,kBAAlB,CAAhB,EAAwDQ,QAAxD,CADG,EAEHP,SAFG,CAAP;IAIH;;;EA3BuBW,cAAA,CAAMC,S;;;;AAqClC;AACA;AACA;AACO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,CAAAd,KAAK;EAAA,oBACxD,6BAAC,mBAAD,EAAqB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,yBAAlB,CAArB,CADwD;AAAA,CAArD;;;;AAaP;AACA;AACA;AACO,IAAMe,aAA2C,GAAG,SAA9CA,aAA8C,CAAAf,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2BAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;AAcP,IAAMgB,SAAS,oBAAGC,YAAH,0DAAf;AAMA;AACA;AACA;;AACO,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C,CAAAlB,KAAK;EAAA,oBAC5D,6BAAC,qBAAD,EAAuB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,CAACgB,SAAD,EAAY,2BAAZ,CAAlB,CAAvB,CAD4D;AAAA,CAAzD;;;;AAaP;AACA;AACA;AACO,IAAMG,YAAyC,GAAG,SAA5CA,YAA4C,CAAAnB,KAAK;EAAA,oBAC1D,6BAAC,oBAAD,EAAsB,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,0BAAlB,CAAtB,CAD0D;AAAA,CAAvD;;;;AAWP;AACA;AACA;AACO,IAAMoB,YAAyC,GAAG,SAA5CA,YAA4C,CAAApB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAD,oBACQ,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2DAAlB,CADR;IAEI,MAAM,EAAC,OAFX;IAGI,eAAY;EAHhB,IAKKA,KAAK,CAACQ,QALX,CADJ;AASH,CAVM;;;;AAmBP;AACA;AACA;AACO,IAAMa,YAAyC,GAAG,SAA5CA,YAA4C,CAAArB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAD,oBACQ,IAAAW,mBAAA,EAAWX,KAAX,EAAkB,2DAAlB,CADR;IAEI,MAAM,EAAC,QAFX;IAGI,eAAY;EAHhB,IAKKA,KAAK,CAACQ,QALX,CADJ;AASH,CAVM"}

package/Input/Input.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { TextFieldProps } from "@rmwc/textfield";
 import { FormComponentProps } from "../types";
 import { ReactElement } from "react";
-export declare type InputProps = FormComponentProps & TextFieldProps & {
+export declare type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
     autoComplete?: string;
     rawOnChange?: boolean;
     autoFocus?: boolean;

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinyInputStyles","css","Input","e","props","onChange","rawOnChange","target","value","validate","onBlur","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","inputValue","validationIsValid","isValid","validationMessage","message","pick","rmwcProps","key","onKeyDown","rest","Boolean","undefined","classNames","React","Component"],"sources":["Input.tsx"],"sourcesContent":["import React from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps = FormComponentProps &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n            transform: translateY(-106%) scale(0.75);\n        }\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\nexport class Input extends React.Component<InputProps> {\n    static defaultProps: InputProps = {\n        rawOnChange: false\n    };\n\n    // IconProps directly passed to RMWC\n    static rmwcProps = [\n        \"label\",\n        \"type\",\n        \"step\",\n        \"disabled\",\n        \"readOnly\",\n        \"placeholder\",\n        \"outlined\",\n        \"onKeyDown\",\n        \"onKeyPress\",\n        \"onKeyUp\",\n        \"onFocus\",\n        \"rootProps\",\n        \"fullwidth\",\n        \"inputRef\",\n        \"className\",\n        \"maxLength\",\n        \"characterCount\"\n    ];\n\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { onChange, rawOnChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        // @ts-ignore\n        onChange(rawOnChange ? e : e.target.value);\n    };\n\n    onBlur = async (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { validate, onBlur } = this.props;\n        if (validate) {\n            // Since we are accessing event in an async operation, we need to persist it.\n            // See https://reactjs.org/docs/events.html#event-pooling.\n            e.persist();\n            await validate();\n        }\n        onBlur && onBlur(e);\n    };\n\n    public override render() {\n        const {\n            autoFocus,\n            value,\n            label,\n            description,\n            placeholder,\n            rows,\n            validation,\n            icon,\n            trailingIcon,\n            onEnter,\n            ...props\n        } = this.props;\n\n        let inputValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            inputValue = \"\";\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <TextField\n                    {...pick(props, Input.rmwcProps)}\n                    onKeyDown={(e, ...rest) => {\n                        if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                            onEnter();\n                        }\n\n                        if (typeof props.onKeyDown === \"function\") {\n                            return props.onKeyDown(e, ...rest);\n                        }\n                    }}\n                    autoFocus={autoFocus}\n                    textarea={Boolean(rows)}\n                    value={inputValue}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    label={label}\n                    icon={icon}\n                    placeholder={(!label && placeholder) || undefined}\n                    trailingIcon={trailingIcon}\n                    rows={this.props.rows}\n                    className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                    data-testid={props[\"data-testid\"]}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["webinyInputStyles","css","Input","e","props","onChange","rawOnChange","target","value","validate","onBlur","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","inputValue","validationIsValid","isValid","validationMessage","message","pick","rmwcProps","key","onKeyDown","rest","Boolean","undefined","classNames","React","Component"],"sources":["Input.tsx"],"sourcesContent":["import React from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n            transform: translateY(-106%) scale(0.75);\n        }\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\nexport class Input extends React.Component<InputProps> {\n    static defaultProps: InputProps = {\n        rawOnChange: false\n    };\n\n    // IconProps directly passed to RMWC\n    static rmwcProps = [\n        \"label\",\n        \"type\",\n        \"step\",\n        \"disabled\",\n        \"readOnly\",\n        \"placeholder\",\n        \"outlined\",\n        \"onKeyDown\",\n        \"onKeyPress\",\n        \"onKeyUp\",\n        \"onFocus\",\n        \"rootProps\",\n        \"fullwidth\",\n        \"inputRef\",\n        \"className\",\n        \"maxLength\",\n        \"characterCount\"\n    ];\n\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { onChange, rawOnChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        // @ts-ignore\n        onChange(rawOnChange ? e : e.target.value);\n    };\n\n    onBlur = async (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { validate, onBlur } = this.props;\n        if (validate) {\n            // Since we are accessing event in an async operation, we need to persist it.\n            // See https://reactjs.org/docs/events.html#event-pooling.\n            e.persist();\n            await validate();\n        }\n        onBlur && onBlur(e);\n    };\n\n    public override render() {\n        const {\n            autoFocus,\n            value,\n            label,\n            description,\n            placeholder,\n            rows,\n            validation,\n            icon,\n            trailingIcon,\n            onEnter,\n            ...props\n        } = this.props;\n\n        let inputValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            inputValue = \"\";\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <TextField\n                    {...pick(props, Input.rmwcProps)}\n                    onKeyDown={(e, ...rest) => {\n                        if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                            onEnter();\n                        }\n\n                        if (typeof props.onKeyDown === \"function\") {\n                            return props.onKeyDown(e, ...rest);\n                        }\n                    }}\n                    autoFocus={autoFocus}\n                    textarea={Boolean(rows)}\n                    value={inputValue}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    label={label}\n                    icon={icon}\n                    placeholder={(!label && placeholder) || undefined}\n                    trailingIcon={trailingIcon}\n                    rows={this.props.rows}\n                    className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                    data-testid={props[\"data-testid\"]}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n"],"mappings":"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"}

package/Switch/Switch.d.ts

@@ -2,7 +2,7 @@
 import React from "react";
 import { SwitchProps } from "@rmwc/switch";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & SwitchProps & {
+declare type Props = Omit<SwitchProps, "value"> & FormComponentProps<boolean> & {
     description?: string;
     className?: string;
 };

package/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"names":["Switch","e","props","onChange","target","checked","value","description","validation","validationIsValid","isValid","validationMessage","message","getClasses","pick","rmwcProps","Boolean","React","Component"],"sources":["Switch.tsx"],"sourcesContent":["import React from \"react\";\nimport { Switch as RmwcSwitch, SwitchProps } from \"@rmwc/switch\";\nimport { FormComponentProps } from \"~/types\";\nimport pick from \"lodash/pick\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { getClasses } from \"~/Helpers\";\n\ntype Props = FormComponentProps &\n    SwitchProps & {\n        // Description beneath the switch.\n        description?: string;\n\n        // Optional class name.\n        className?: string;\n    };\n\n/**\n * Switch component can be used to store simple boolean values.\n */\nclass Switch extends React.Component<Props> {\n    static rmwcProps = [\"id\", \"disabled\", \"checked\", \"label\", \"rootProps\", \"className\"];\n\n    onChange = (e: React.SyntheticEvent<HTMLElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, description, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcSwitch\n                    {...getClasses({ ...pick(this.props, Switch.rmwcProps) }, \"webiny-ui-switch\")}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AAWA;AACA;AACA;IACMA,M;;;;;;;;;;;;;;;2FAGS,UAACC,CAAD,EAA0C;MACjD,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAA2C,KAAKH,KAAhD;MAAA,IAAQI,KAAR,eAAQA,KAAR;MAAA,IAAeC,WAAf,eAAeA,WAAf;MAAA,IAA4BC,UAA5B,eAA4BA,UAA5B;;MAEA,WAAmEA,UAAU,IAAI,EAAjF;MAAA,IAAiBC,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD,oBACQ,IAAAC,mBAAA,kCAAgB,IAAAC,aAAA,EAAK,KAAKZ,KAAV,EAAiBF,MAAM,CAACe,SAAxB,CAAhB,GAAsD,kBAAtD,CADR;QAEI,OAAO,EAAEC,OAAO,CAACV,KAAD,CAFpB;QAGI,QAAQ,EAAE,KAAKH;MAHnB,GADJ,EAOKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CARR,EAWKF,iBAAiB,KAAK,KAAtB,IAA+BF,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAZR,CADJ;IAiBH;;;EA7BgBU,cAAA,CAAMC,S;;;8BAArBlB,M,eACiB,CAAC,IAAD,EAAO,UAAP,EAAmB,SAAnB,EAA8B,OAA9B,EAAuC,WAAvC,EAAoD,WAApD,C"}
+{"version":3,"names":["Switch","e","props","onChange","target","checked","value","description","validation","validationIsValid","isValid","validationMessage","message","getClasses","pick","rmwcProps","Boolean","React","Component"],"sources":["Switch.tsx"],"sourcesContent":["import React from \"react\";\nimport { Switch as RmwcSwitch, SwitchProps } from \"@rmwc/switch\";\nimport { FormComponentProps } from \"~/types\";\nimport pick from \"lodash/pick\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { getClasses } from \"~/Helpers\";\n\ntype Props = Omit<SwitchProps, \"value\"> &\n    FormComponentProps<boolean> & {\n        // Description beneath the switch.\n        description?: string;\n\n        // Optional class name.\n        className?: string;\n    };\n\n/**\n * Switch component can be used to store simple boolean values.\n */\nclass Switch extends React.Component<Props> {\n    static rmwcProps = [\"id\", \"disabled\", \"checked\", \"label\", \"rootProps\", \"className\"];\n\n    onChange = (e: React.SyntheticEvent<HTMLElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, description, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcSwitch\n                    {...getClasses({ ...pick(this.props, Switch.rmwcProps) }, \"webiny-ui-switch\")}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AAWA;AACA;AACA;IACMA,M;;;;;;;;;;;;;;;2FAGS,UAACC,CAAD,EAA0C;MACjD,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAA2C,KAAKH,KAAhD;MAAA,IAAQI,KAAR,eAAQA,KAAR;MAAA,IAAeC,WAAf,eAAeA,WAAf;MAAA,IAA4BC,UAA5B,eAA4BA,UAA5B;;MAEA,WAAmEA,UAAU,IAAI,EAAjF;MAAA,IAAiBC,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD,oBACQ,IAAAC,mBAAA,kCAAgB,IAAAC,aAAA,EAAK,KAAKZ,KAAV,EAAiBF,MAAM,CAACe,SAAxB,CAAhB,GAAsD,kBAAtD,CADR;QAEI,OAAO,EAAEC,OAAO,CAACV,KAAD,CAFpB;QAGI,QAAQ,EAAE,KAAKH;MAHnB,GADJ,EAOKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CARR,EAWKF,iBAAiB,KAAK,KAAtB,IAA+BF,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAZR,CADJ;IAiBH;;;EA7BgBU,cAAA,CAAMC,S;;;8BAArBlB,M,eACiB,CAAC,IAAD,EAAO,UAAP,EAAmB,SAAnB,EAA8B,OAA9B,EAAuC,WAAvC,EAAoD,WAApD,C"}

package/Tabs/Tab.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { TabProps as RmwcTabProps } from "@rmwc/tabs";
 export declare type TabProps = RmwcTabProps & {
+    visible?: boolean;
     tag?: string;
     /**
      * Is tab disabled?

package/Tabs/Tab.js

@@ -21,8 +21,11 @@ var Tab = /*#__PURE__*/_react.default.memo(function (props) {
   var tabsContext = (0, _react.useContext)(_Tabs.TabsContext);
   var idRef = (0, _react.useRef)(_shortid.default.generate());
   (0, _react.useEffect)(function () {
+    var _props$visible;
+
     tabsContext.addTab((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-      id: idRef.current
+      id: idRef.current,
+      visible: (_props$visible = props.visible) !== null && _props$visible !== void 0 ? _props$visible : true
     }));
   }, [props]);
   (0, _react.useEffect)(function () {

package/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tab","React","memo","props","tabsContext","useContext","TabsContext","idRef","useRef","shortid","generate","useEffect","addTab","id","current","removeTab","displayName"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { TabProps as RmwcTabProps } from \"@rmwc/tabs\";\nimport shortid from \"shortid\";\nimport { TabsContext } from \"./Tabs\";\n\nexport type TabProps = RmwcTabProps & {\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\nexport const Tab: React.FC<TabProps> = React.memo(props => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(shortid.generate());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n});\n\nTab.displayName = \"Tab\";\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAkBO,IAAMA,GAAuB,gBAAGC,cAAA,CAAMC,IAAN,CAAW,UAAAC,KAAK,EAAI;EACvD,IAAMC,WAAW,GAAG,IAAAC,iBAAA,EAAWC,iBAAX,CAApB;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOC,gBAAA,CAAQC,QAAR,EAAP,CAAd;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACZP,WAAW,CAAEQ,MAAb,6DAAyBT,KAAzB;MAAgCU,EAAE,EAAEN,KAAK,CAACO;IAA1C;EACH,CAFD,EAEG,CAACX,KAAD,CAFH;EAIA,IAAAQ,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACT,OAAOP,WAAW,CAAEW,SAAb,CAAuBR,KAAK,CAACO,OAA7B,CAAP;IACH,CAFD;EAGH,CAJD,EAIG,EAJH;EAMA,OAAO,IAAP;AACH,CAfsC,CAAhC;;;AAiBPd,GAAG,CAACgB,WAAJ,GAAkB,KAAlB"}
+{"version":3,"names":["Tab","React","memo","props","tabsContext","useContext","TabsContext","idRef","useRef","shortid","generate","useEffect","addTab","id","current","visible","removeTab","displayName"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { TabProps as RmwcTabProps } from \"@rmwc/tabs\";\nimport shortid from \"shortid\";\nimport { TabsContext } from \"./Tabs\";\n\nexport type TabProps = RmwcTabProps & {\n    visible?: boolean;\n\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\nexport const Tab: React.FC<TabProps> = React.memo(props => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(shortid.generate());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n});\n\nTab.displayName = \"Tab\";\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAoBO,IAAMA,GAAuB,gBAAGC,cAAA,CAAMC,IAAN,CAAW,UAAAC,KAAK,EAAI;EACvD,IAAMC,WAAW,GAAG,IAAAC,iBAAA,EAAWC,iBAAX,CAApB;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOC,gBAAA,CAAQC,QAAR,EAAP,CAAd;EAEA,IAAAC,gBAAA,EAAU,YAAM;IAAA;;IACZP,WAAW,CAAEQ,MAAb,6DAAyBT,KAAzB;MAAgCU,EAAE,EAAEN,KAAK,CAACO,OAA1C;MAAmDC,OAAO,oBAAEZ,KAAK,CAACY,OAAR,2DAAmB;IAA7E;EACH,CAFD,EAEG,CAACZ,KAAD,CAFH;EAIA,IAAAQ,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACT,OAAOP,WAAW,CAAEY,SAAb,CAAuBT,KAAK,CAACO,OAA7B,CAAP;IACH,CAFD;EAGH,CAJD,EAIG,EAJH;EAMA,OAAO,IAAP;AACH,CAfsC,CAAhC;;;AAiBPd,GAAG,CAACiB,WAAJ,GAAkB,KAAlB"}

package/Tabs/Tabs.d.ts

@@ -32,6 +32,7 @@ interface TabsContext {
 export declare const TabsContext: React.Context<TabsContext | undefined>;
 export interface TabsImperativeApi {
     switchTab(index: number): void;
+    getActiveIndex(): number;
 }
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.

package/Tabs/Tabs.js

@@ -51,6 +51,9 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, []);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
+      getActiveIndex: function getActiveIndex() {
+        return activeIndex;
+      },
       switchTab: function switchTab(tabIndex) {
         activateTabIndex(tabIndex);
       }
@@ -85,6 +88,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       props.onActivate && props.onActivate(evt.detail.index);
     }
   }, tabs.map(function (item) {
+    if (!item.visible) {
+      return null;
+    }
+
     var style = item.style || {};
 
     if (item.disabled) {
@@ -101,7 +108,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     } : {}), item.label);
   }));
 
-  var content = tabs.map(function (tab, index) {
+  var content = tabs.filter(Boolean).map(function (tab, index) {
     if (activeIndex === index) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","style","Object","assign","icon","label","content","children","display","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","filter","classNames","className","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, {\n    createContext,\n    forwardRef,\n    PropsWithChildren,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState\n} from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport type TabsProps = PropsWithChildren<{\n    /**\n     * Append a class name.\n     */\n    className?: string;\n\n    /**\n     * Callback to execute when a tab is changed.\n     */\n    onActivate?: (index: number) => void;\n\n    /**\n     * Active tab index value.\n     */\n    value?: number;\n\n    /**\n     * Function to change active tab.\n     */\n    updateValue?: (index: number) => void;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}>;\n\nconst disabledStyles: Record<string, string | number> = {\n    opacity: 0.5,\n    pointerEvents: \"none\"\n};\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\ninterface TabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nexport const TabsContext = createContext<TabsContext | undefined>(undefined);\n\nexport interface TabsImperativeApi {\n    switchTab(index: number): void;\n}\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = forwardRef<TabsImperativeApi | undefined, TabsProps>((props, ref) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = props.value !== undefined ? props.value : activeTabIndex;\n\n    const activateTabIndex = useCallback((index: number) => {\n        if (typeof props.updateValue === \"function\") {\n            props.updateValue(index);\n            return;\n        }\n\n        setActiveIndex(index);\n    }, []);\n\n    useImperativeHandle(ref, () => ({\n        switchTab(tabIndex: number) {\n            activateTabIndex(tabIndex);\n        }\n    }));\n\n    /**\n     * This effect will make sure that disabled tabs automatically switch to the first tab.\n     */\n    useEffect(() => {\n        if (tabs[activeIndex]?.disabled) {\n            activateTabIndex(0);\n        }\n    });\n\n    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n    const tabBar = (\n        <TabBar\n            key={tabs.map(tab => tab.id).join(\";\")}\n            className=\"webiny-ui-tabs__tab-bar\"\n            activeTabIndex={activeIndex}\n            onActivate={evt => {\n                if (typeof props.updateValue === \"function\") {\n                    props.updateValue(evt.detail.index);\n                } else {\n                    setActiveIndex(evt.detail.index);\n                }\n                props.onActivate && props.onActivate(evt.detail.index);\n            }}\n        >\n            {tabs.map(item => {\n                const style = item.style || {};\n                if (item.disabled) {\n                    Object.assign(style, disabledStyles);\n                }\n\n                return (\n                    <RmwcTab\n                        tag={\"div\"}\n                        style={style}\n                        key={item.id}\n                        data-testid={item[\"data-testid\"]}\n                        {...(item.icon ? { icon: item.icon } : {})}\n                    >\n                        {item.label}\n                    </RmwcTab>\n                );\n            })}\n        </TabBar>\n    );\n\n    const content = tabs.map((tab, index) => {\n        if (activeIndex === index) {\n            return <div key={index}>{tab.children}</div>;\n        } else {\n            return (\n                <div key={index} style={{ display: \"none\" }}>\n                    {tab.children}\n                </div>\n            );\n        }\n    });\n\n    const context: TabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n            {tabBar}\n            <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n        </div>\n    );\n});\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}
+{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","style","Object","assign","icon","label","content","filter","Boolean","children","display","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","classNames","className","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, {\n    createContext,\n    forwardRef,\n    PropsWithChildren,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState\n} from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport type TabsProps = PropsWithChildren<{\n    /**\n     * Append a class name.\n     */\n    className?: string;\n\n    /**\n     * Callback to execute when a tab is changed.\n     */\n    onActivate?: (index: number) => void;\n\n    /**\n     * Active tab index value.\n     */\n    value?: number;\n\n    /**\n     * Function to change active tab.\n     */\n    updateValue?: (index: number) => void;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}>;\n\nconst disabledStyles: Record<string, string | number> = {\n    opacity: 0.5,\n    pointerEvents: \"none\"\n};\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\ninterface TabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nexport const TabsContext = createContext<TabsContext | undefined>(undefined);\n\nexport interface TabsImperativeApi {\n    switchTab(index: number): void;\n    getActiveIndex(): number;\n}\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = forwardRef<TabsImperativeApi | undefined, TabsProps>((props, ref) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = props.value !== undefined ? props.value : activeTabIndex;\n\n    const activateTabIndex = useCallback((index: number) => {\n        if (typeof props.updateValue === \"function\") {\n            props.updateValue(index);\n            return;\n        }\n\n        setActiveIndex(index);\n    }, []);\n\n    useImperativeHandle(ref, () => ({\n        getActiveIndex() {\n            return activeIndex;\n        },\n        switchTab(tabIndex: number) {\n            activateTabIndex(tabIndex);\n        }\n    }));\n\n    /**\n     * This effect will make sure that disabled tabs automatically switch to the first tab.\n     */\n    useEffect(() => {\n        if (tabs[activeIndex]?.disabled) {\n            activateTabIndex(0);\n        }\n    });\n\n    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n    const tabBar = (\n        <TabBar\n            key={tabs.map(tab => tab.id).join(\";\")}\n            className=\"webiny-ui-tabs__tab-bar\"\n            activeTabIndex={activeIndex}\n            onActivate={evt => {\n                if (typeof props.updateValue === \"function\") {\n                    props.updateValue(evt.detail.index);\n                } else {\n                    setActiveIndex(evt.detail.index);\n                }\n                props.onActivate && props.onActivate(evt.detail.index);\n            }}\n        >\n            {tabs.map(item => {\n                if (!item.visible) {\n                    return null;\n                }\n\n                const style = item.style || {};\n                if (item.disabled) {\n                    Object.assign(style, disabledStyles);\n                }\n\n                return (\n                    <RmwcTab\n                        tag={\"div\"}\n                        style={style}\n                        key={item.id}\n                        data-testid={item[\"data-testid\"]}\n                        {...(item.icon ? { icon: item.icon } : {})}\n                    >\n                        {item.label}\n                    </RmwcTab>\n                );\n            })}\n        </TabBar>\n    );\n\n    const content = tabs.filter(Boolean).map((tab, index) => {\n        if (activeIndex === index) {\n            return <div key={index}>{tab.children}</div>;\n        } else {\n            return (\n                <div key={index} style={{ display: \"none\" }}>\n                    {tab.children}\n                </div>\n            );\n        }\n    });\n\n    const context: TabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n            {tabBar}\n            <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n        </div>\n    );\n});\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}

package/Tags/Tags.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormComponentProps } from "../types";
-declare type TagsProps = FormComponentProps & {
+interface TagsProps extends FormComponentProps {
     /**
      * Component label.
      */
@@ -22,12 +22,9 @@ declare type TagsProps = FormComponentProps & {
      */
     className?: string;
     /**
-     * Default structure of value, an object consisting of "id" and "name" keys. Different keys can be set using "valueProp" and "textProp" props.
+     * A list of tags.
      */
-    value?: {
-        id: string;
-        name: string;
-    };
+    value?: string[];
     /**
      * Callback that gets executed on change of input value.
      */
@@ -40,14 +37,10 @@ declare type TagsProps = FormComponentProps & {
      * Automatically focus on the tags input.
      */
     autoFocus?: boolean;
-};
-interface TagsState {
-    inputValue: string;
-}
-export declare class Tags extends React.Component<TagsProps, TagsState> {
-    state: {
-        inputValue: string;
-    };
-    render(): JSX.Element;
+    /**
+     * Protected tags cannot be removed by the user.
+     */
+    protectedTags?: string[];
 }
+export declare const Tags: React.FC<TagsProps>;
 export default Tags;

package/Tags/Tags.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,33 +15,25 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _emotion = require("emotion");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _keycode = _interopRequireDefault(require("keycode"));
 
-var _react = _interopRequireDefault(require("react"));
+var _minimatch = _interopRequireDefault(require("minimatch"));
 
 var _Input = require("../Input");
 
 var _Chips = require("../Chips");
 
-var _emotion = require("emotion");
-
-var _keycode = _interopRequireDefault(require("keycode"));
-
 var _baselineClose24px = require("./icons/baseline-close-24px.svg");
 
 var _FormElementMessage = require("../FormElementMessage");
 
-var _excluded = ["validation", "value", "disabled", "onChange", "description"];
+var _excluded = ["validation", "value", "disabled", "onChange", "description", "protectedTags"];
 var tagsStyle = /*#__PURE__*/(0, _emotion.css)({
   position: "relative",
   ".mdc-elevation--z1": {
@@ -62,110 +56,87 @@ var tagsStyle = /*#__PURE__*/(0, _emotion.css)({
   }
 }, "label:tagsStyle;");
 
-var Tags = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Tags, _React$Component);
-
-  var _super = (0, _createSuper2.default)(Tags);
-
-  function Tags() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Tags);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      inputValue: ""
+var Tags = function Tags(props) {
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var validation = props.validation,
+      value = props.value,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      description = props.description,
+      _props$protectedTags = props.protectedTags,
+      protectedTags = _props$protectedTags === void 0 ? [] : _props$protectedTags,
+      otherInputProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isProtected = (0, _react.useCallback)(function (tag) {
+    return protectedTags.some(function (pattern) {
+      return (0, _minimatch.default)(tag, pattern);
     });
-    return _this;
-  }
-
-  (0, _createClass2.default)(Tags, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          validation = _this$props.validation,
-          value = _this$props.value,
-          disabled = _this$props.disabled,
-          onChange = _this$props.onChange,
-          description = _this$props.description,
-          otherInputProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherInputProps), {}, {
-        value: this.state.inputValue,
-        onChange: function onChange(inputValue) {
-          _this2.setState({
-            inputValue: inputValue
-          });
-        },
-        onKeyDown: function onKeyDown(ev) {
-          if (!onChange) {
-            return;
+  }, [protectedTags]);
+  var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherInputProps), {}, {
+    value: inputValue,
+    onChange: function onChange(inputValue) {
+      setInputValue(inputValue);
+    },
+    onKeyDown: function onKeyDown(ev) {
+      if (!onChange) {
+        return;
+      }
+
+      var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+      /**
+       * We must cast as keycode only works with Event | string type.
+       */
+
+      switch ((0, _keycode.default)(ev)) {
+        case "enter":
+          if (inputValue) {
+            newValue.push(inputValue);
+            onChange(newValue);
+            setInputValue("");
           }
 
-          var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
-          var inputValue = _this2.state.inputValue || "";
-          /**
-           * We must cast as keycode only works with Event | string type.
-           */
-
-          switch ((0, _keycode.default)(ev)) {
-            case "enter":
-              if (inputValue) {
-                newValue.push(inputValue);
-                onChange(newValue);
-
-                _this2.setState({
-                  inputValue: ""
-                });
-              }
-
-              break;
+          break;
 
-            case "backspace":
-              if (newValue.length && !inputValue) {
-                newValue.splice(-1, 1);
-                onChange(newValue);
-                break;
-              }
-
-          }
-        }
-      });
-
-      var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: tagsStyle
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
-        disabled: disabled
-      }, value.map(function (item, index) {
-        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
-          label: item,
-          trailingIcon: /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
-          key: "".concat(item, "-").concat(index),
-          onRemove: function onRemove() {
-            // On removal, let's update the value and call "onChange" callback.
-            if (onChange) {
-              var newValue = (0, _toConsumableArray2.default)(value);
-              newValue.splice(index, 1);
-              onChange(newValue);
-            }
+        case "backspace":
+          if (newValue.length && !inputValue) {
+            newValue.splice(-1, 1);
+            onChange(newValue);
+            break;
           }
-        });
-      })) : null));
+
+      }
     }
-  }]);
-  return Tags;
-}(_react.default.Component);
+  });
+
+  var _ref = validation || {},
+      validationIsValid = _ref.isValid,
+      validationMessage = _ref.message;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: tagsStyle
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
+    disabled: disabled
+  }, value.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
+      label: item,
+      trailingIcon: isProtected(item) ? null : /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
+      key: "".concat(item, "-").concat(index),
+      onRemove: function onRemove() {
+        // On removal, let's update the value and call "onChange" callback.
+        if (onChange) {
+          var newValue = (0, _toConsumableArray2.default)(value);
+          newValue.splice(index, 1);
+          onChange(newValue);
+        }
+      }
+    });
+  })) : null));
+};
 
 exports.Tags = Tags;
 var _default = Tags;

package/Tags/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","inputValue","props","validation","value","disabled","onChange","description","otherInputProps","inputProps","state","setState","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index","React","Component"],"sources":["Tags.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { SyntheticEvent } from \"react\";\n\ntype TagsProps = FormComponentProps & {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Default structure of value, an object consisting of \"id\" and \"name\" keys. Different keys can be set using \"valueProp\" and \"textProp\" props.\n     */\n    value?: { id: string; name: string };\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n};\n\ninterface TagsState {\n    inputValue: string;\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport class Tags extends React.Component<TagsProps, TagsState> {\n    public override state = {\n        inputValue: \"\"\n    };\n\n    public override render() {\n        const { validation, value, disabled, onChange, description, ...otherInputProps } =\n            this.props;\n\n        const inputProps: InputProps = {\n            ...otherInputProps,\n            value: this.state.inputValue,\n            onChange: (inputValue: string) => {\n                this.setState({ inputValue });\n            },\n            onKeyDown: (ev: SyntheticEvent) => {\n                if (!onChange) {\n                    return;\n                }\n\n                const newValue = Array.isArray(value) ? [...value] : [];\n                const inputValue = this.state.inputValue || \"\";\n                /**\n                 * We must cast as keycode only works with Event | string type.\n                 */\n                switch (keycode(ev as unknown as Event)) {\n                    case \"enter\":\n                        if (inputValue) {\n                            newValue.push(inputValue);\n                            onChange(newValue);\n                            this.setState({ inputValue: \"\" });\n                        }\n                        break;\n                    case \"backspace\":\n                        if (newValue.length && !inputValue) {\n                            newValue.splice(-1, 1);\n                            onChange(newValue);\n                            break;\n                        }\n                }\n            }\n        };\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={tagsStyle}>\n                <div>\n                    <Input {...inputProps} />\n\n                    {validationIsValid === false && (\n                        <FormElementMessage error>{validationMessage}</FormElementMessage>\n                    )}\n                    {validationIsValid !== false && description && (\n                        <FormElementMessage>{description}</FormElementMessage>\n                    )}\n\n                    {Array.isArray(value) && value.length ? (\n                        <Chips disabled={disabled}>\n                            {value.map((item, index) => (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={<BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            ))}\n                        </Chips>\n                    ) : null}\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default Tags;\n"],"mappings":"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"}
+{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","props","useState","inputValue","setInputValue","validation","value","disabled","onChange","description","protectedTags","otherInputProps","isProtected","useCallback","tag","some","pattern","minimatch","inputProps","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index"],"sources":["Tags.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useState } from \"react\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport minimatch from \"minimatch\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"~/Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * A list of tags.\n     */\n    value?: string[];\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n\n    /**\n     * Protected tags cannot be removed by the user.\n     */\n    protectedTags?: string[];\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport const Tags: React.FC<TagsProps> = props => {\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const {\n        validation,\n        value,\n        disabled,\n        onChange,\n        description,\n        protectedTags = [],\n        ...otherInputProps\n    } = props;\n\n    const isProtected = useCallback(\n        (tag: string) => protectedTags.some(pattern => minimatch(tag, pattern)),\n        [protectedTags]\n    );\n\n    const inputProps: InputProps<string> = {\n        ...otherInputProps,\n        value: inputValue,\n        onChange: inputValue => {\n            setInputValue(inputValue);\n        },\n        onKeyDown: (ev: SyntheticEvent) => {\n            if (!onChange) {\n                return;\n            }\n\n            const newValue = Array.isArray(value) ? [...value] : [];\n\n            /**\n             * We must cast as keycode only works with Event | string type.\n             */\n            switch (keycode(ev as unknown as Event)) {\n                case \"enter\":\n                    if (inputValue) {\n                        newValue.push(inputValue);\n                        onChange(newValue);\n                        setInputValue(\"\");\n                    }\n                    break;\n                case \"backspace\":\n                    if (newValue.length && !inputValue) {\n                        newValue.splice(-1, 1);\n                        onChange(newValue);\n                        break;\n                    }\n            }\n        }\n    };\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <div className={tagsStyle}>\n            <div>\n                <Input {...inputProps} />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(value) && value.length ? (\n                    <Chips disabled={disabled}>\n                        {value.map((item, index) => {\n                            return (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={isProtected(item) ? null : <BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            );\n                        })}\n                    </Chips>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TypographyProps as RmwcTypographyProps } from "@rmwc/typography";
-export interface TypographyProps extends RmwcTypographyProps {
+interface TypographyProps extends RmwcTypographyProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
@@ -10,4 +10,4 @@ export interface TypographyProps extends RmwcTypographyProps {
  * Use Ripple component to display a list of choices, once the handler is triggered.
  */
 declare const Typography: React.FC<TypographyProps>;
-export { Typography };
+export { Typography, TypographyProps };

package/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"names":["Typography","props","children"],"sources":["Typography.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Typography as RwmcTypography,\n    TypographyProps as RmwcTypographyProps\n} from \"@rmwc/typography\";\n\nexport interface TypographyProps extends RmwcTypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    tag?: string;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Typography: React.FC<TypographyProps> = props => {\n    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;\n};\n\nexport { Typography };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAYA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,oBAAO,6BAAC,sBAAD,EAAoBA,KAApB,EAA4BA,KAAK,CAACC,QAAlC,CAAP;AACH,CAFD"}
+{"version":3,"names":["Typography","props","children"],"sources":["Typography.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Typography as RwmcTypography,\n    TypographyProps as RmwcTypographyProps\n} from \"@rmwc/typography\";\n\ninterface TypographyProps extends RmwcTypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    tag?: string;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Typography: React.FC<TypographyProps> = props => {\n    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;\n};\n\nexport { Typography, TypographyProps };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAYA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,oBAAO,6BAAC,sBAAD,EAAoBA,KAApB,EAA4BA,KAAK,CAACC,QAAlC,CAAP;AACH,CAFD"}