@webiny/ui 5.33.5 → 5.34.0-beta.1

package/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","children","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Menu as BaseMenu,\n    MenuProps as RmwcMenuProps,\n    MenuItem as BaseMenuItem,\n    MenuItemProps as BaseMenuItemProps,\n    MenuSurface,\n    MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n    disabledMenuItem: css({\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    })\n};\n\ntype MenuProps = RmwcMenuProps & {\n    // One or more MenuItem components.\n    children: React.ReactNode;\n\n    // A handler which triggers the menu, eg. button or link.\n    handle?: React.ReactElement;\n\n    // Position the menu to one of anchor corners.\n    // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n    anchor?:\n        | \"bottomEnd\"\n        | \"bottomLeft\"\n        | \"bottomRight\"\n        | \"bottomStart\"\n        | \"topEnd\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"topStart\";\n\n    // Class that will be added to the Menu element.\n    className?: string;\n\n    onOpen?: () => void;\n    onClose?: () => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\ninterface MenuState {\n    menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n    static defaultProps: Partial<MenuProps> = {\n        anchor: \"topStart\"\n    };\n\n    public override state: MenuState = {\n        menuIsOpen: false\n    };\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                renderToPortal={true}\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface open={this.state.menuIsOpen} onClose={this.closeMenu}>\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAQA;;AACA;;;AAEA,IAAMA,KAAK,GAAG;EACVC,gBAAgB,eAAE,IAAAC,YAAA,EAAI;IAClBC,OAAO,EAAE,GADS;IAElBC,aAAa,EAAE;EAFG,CAAJ;AADR,CAAd;;AAwCA;AACA;AACA;IACMC,I;;;;;;;;;;;;;;;wFAKiC;MAC/BC,UAAU,EAAE;IADmB,C;2FAIP,YAAM;MAC9B,MAAKC,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAoC;QAAA,OAAM,MAAKE,KAAL,CAAWC,MAAX,IAAqB,MAAKD,KAAL,CAAWC,MAAX,EAA3B;MAAA,CAApC;IACH,C;4FAE4B,YAAM;MAC/B,MAAKF,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAqC;QAAA,OAAM,MAAKE,KAAL,CAAWE,OAAX,IAAsB,MAAKF,KAAL,CAAWE,OAAX,EAA5B;MAAA,CAArC;IACH,C;uGAEuC,YAAM;MAC1C,oBACI,6BAAC,UAAD;QACI,YAAY,EAAE,MAAKF,KAAL,CAAWG,MAD7B;QAEI,IAAI,EAAE,MAAKC,KAAL,CAAWN,UAFrB;QAGI,SAAS,EAAE,MAAKE,KAAL,CAAWK,SAH1B;QAII,OAAO,EAAE,MAAKC,SAJlB;QAKI,QAAQ,EAAE,MAAKN,KAAL,CAAWO,QALzB;QAMI,cAAc,EAAE;MANpB,GAQK,MAAKP,KAAL,CAAWQ,QARhB,CADJ;IAYH,C;sGAEsC,YAAM;MACzC,IAAQA,QAAR,GAAqB,MAAKR,KAA1B,CAAQQ,QAAR;MACA,oBACI,6BAAC,iBAAD;QAAa,IAAI,EAAE,MAAKJ,KAAL,CAAWN,UAA9B;QAA0C,OAAO,EAAE,MAAKQ;MAAxD,GACK,OAAOE,QAAP,KAAoB,UAApB,GACKA,QAAQ,CAAC;QAAEF,SAAS,EAAE,MAAKA;MAAlB,CAAD,CADb,GAEKE,QAHV,CADJ;IAOH,C;oGAEoC,YAAM;MACvC,OAAOC,KAAK,CAACC,OAAN,CAAc,MAAKV,KAAL,CAAWQ,QAAzB,IACD,MAAKG,oBAAL,EADC,GAED,MAAKC,mBAAL,EAFN;IAGH,C;;;;;;WAED,kBAA0C;MACtC,oBACI,6BAAC,uBAAD;QAAmB,eAAa,KAAKZ,KAAL,CAAW,aAAX;MAAhC,GACK,KAAKa,iBAAL,EADL,EAEK,KAAKb,KAAL,CAAWc,MAAX,iBACGC,cAAA,CAAMC,YAAN,CAAmB,KAAKhB,KAAL,CAAWc,MAA9B,EAAsC;QAAEG,OAAO,EAAE,KAAKC;MAAhB,CAAtC,CAHR,CADJ;IAOH;;;EAzDcH,cAAA,CAAMI,S;;;8BAAnBtB,I,kBACwC;EACtCM,MAAM,EAAE;AAD8B,C;;AA2D9C,IAAMiB,WAAqB,GAAG,SAAxBA,WAAwB,GAAM;EAChC,oBAAO;IAAI,SAAS,EAAC,kBAAd;IAAiC,IAAI,EAAC;EAAtC,EAAP;AACH,CAFD;;;;AAWA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAsC;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC;EAAA,IAAzBjB,SAAyB,QAAzBA,SAAyB;EAAA,IAAXkB,IAAW;EAC5E,oBACI,6BAAC,cAAD,oBACQA,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWnB,SAAX,oCAAyBb,KAAK,CAACC,gBAA/B,EAAkD6B,QAAlD;EAFf,GADJ;AAMH,CAPD"}
+{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Menu as BaseMenu,\n    MenuProps as RmwcMenuProps,\n    MenuItem as BaseMenuItem,\n    MenuItemProps as BaseMenuItemProps,\n    MenuSurface,\n    MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n    disabledMenuItem: css({\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    })\n};\n\ntype MenuProps = RmwcMenuProps & {\n    // One or more MenuItem components.\n    children: React.ReactNode;\n\n    // A handler which triggers the menu, eg. button or link.\n    handle?: React.ReactElement;\n\n    // Position the menu to one of anchor corners.\n    // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n    anchor?:\n        | \"bottomEnd\"\n        | \"bottomLeft\"\n        | \"bottomRight\"\n        | \"bottomStart\"\n        | \"topEnd\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"topStart\";\n\n    // Class that will be added to the Menu element.\n    className?: string;\n\n    onOpen?: () => void;\n    onClose?: () => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\ninterface MenuState {\n    menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n    static defaultProps: Partial<MenuProps> = {\n        anchor: \"topStart\"\n    };\n\n    public override state: MenuState = {\n        menuIsOpen: false\n    };\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                renderToPortal={true}\n                style={{ zIndex: 99 }} // Fixes Menu in Drawers\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface open={this.state.menuIsOpen} onClose={this.closeMenu}>\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAQA;;AACA;;;AAEA,IAAMA,KAAK,GAAG;EACVC,gBAAgB,eAAE,IAAAC,YAAA,EAAI;IAClBC,OAAO,EAAE,GADS;IAElBC,aAAa,EAAE;EAFG,CAAJ;AADR,CAAd;;AAwCA;AACA;AACA;IACMC,I;;;;;;;;;;;;;;;wFAKiC;MAC/BC,UAAU,EAAE;IADmB,C;2FAIP,YAAM;MAC9B,MAAKC,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAoC;QAAA,OAAM,MAAKE,KAAL,CAAWC,MAAX,IAAqB,MAAKD,KAAL,CAAWC,MAAX,EAA3B;MAAA,CAApC;IACH,C;4FAE4B,YAAM;MAC/B,MAAKF,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAqC;QAAA,OAAM,MAAKE,KAAL,CAAWE,OAAX,IAAsB,MAAKF,KAAL,CAAWE,OAAX,EAA5B;MAAA,CAArC;IACH,C;uGAEuC,YAAM;MAC1C,oBACI,6BAAC,UAAD;QACI,YAAY,EAAE,MAAKF,KAAL,CAAWG,MAD7B;QAEI,IAAI,EAAE,MAAKC,KAAL,CAAWN,UAFrB;QAGI,SAAS,EAAE,MAAKE,KAAL,CAAWK,SAH1B;QAII,OAAO,EAAE,MAAKC,SAJlB;QAKI,QAAQ,EAAE,MAAKN,KAAL,CAAWO,QALzB;QAMI,cAAc,EAAE,IANpB;QAOI,KAAK,EAAE;UAAEC,MAAM,EAAE;QAAV,CAPX,CAO2B;;MAP3B,GASK,MAAKR,KAAL,CAAWS,QAThB,CADJ;IAaH,C;sGAEsC,YAAM;MACzC,IAAQA,QAAR,GAAqB,MAAKT,KAA1B,CAAQS,QAAR;MACA,oBACI,6BAAC,iBAAD;QAAa,IAAI,EAAE,MAAKL,KAAL,CAAWN,UAA9B;QAA0C,OAAO,EAAE,MAAKQ;MAAxD,GACK,OAAOG,QAAP,KAAoB,UAApB,GACKA,QAAQ,CAAC;QAAEH,SAAS,EAAE,MAAKA;MAAlB,CAAD,CADb,GAEKG,QAHV,CADJ;IAOH,C;oGAEoC,YAAM;MACvC,OAAOC,KAAK,CAACC,OAAN,CAAc,MAAKX,KAAL,CAAWS,QAAzB,IACD,MAAKG,oBAAL,EADC,GAED,MAAKC,mBAAL,EAFN;IAGH,C;;;;;;WAED,kBAA0C;MACtC,oBACI,6BAAC,uBAAD;QAAmB,eAAa,KAAKb,KAAL,CAAW,aAAX;MAAhC,GACK,KAAKc,iBAAL,EADL,EAEK,KAAKd,KAAL,CAAWe,MAAX,iBACGC,cAAA,CAAMC,YAAN,CAAmB,KAAKjB,KAAL,CAAWe,MAA9B,EAAsC;QAAEG,OAAO,EAAE,KAAKC;MAAhB,CAAtC,CAHR,CADJ;IAOH;;;EA1DcH,cAAA,CAAMI,S;;;8BAAnBvB,I,kBACwC;EACtCM,MAAM,EAAE;AAD8B,C;;AA4D9C,IAAMkB,WAAqB,GAAG,SAAxBA,WAAwB,GAAM;EAChC,oBAAO;IAAI,SAAS,EAAC,kBAAd;IAAiC,IAAI,EAAC;EAAtC,EAAP;AACH,CAFD;;;;AAWA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAsC;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC;EAAA,IAAzBlB,SAAyB,QAAzBA,SAAyB;EAAA,IAAXmB,IAAW;EAC5E,oBACI,6BAAC,cAAD,oBACQA,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWpB,SAAX,oCAAyBb,KAAK,CAACC,gBAA/B,EAAkD8B,QAAlD;EAFf,GADJ;AAMH,CAPD"}

package/Skeleton/README.md

@@ -0,0 +1,21 @@
+# Skeleton
+
+### Additional information
+
+[https://www.npmjs.com/package/react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)
+
+### Description
+
+`Skeleton` component is used to render animated loading skeletons within Webiny.
+
+### Usage
+
+```jsx
+import { Skeleton } from "@webiny/ui/Skeleton";
+
+...
+
+return (
+    <Skeleton />
+)
+```

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { SkeletonProps } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+export declare const Skeleton: (props: SkeletonProps) => ReactElement;

package/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
+
+require("react-loading-skeleton/dist/skeleton.css");
+
+var Skeleton = function Skeleton(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: "var(--mdc-theme-background)",
+    highlightColor: "var(--mdc-theme-surface)"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, props));
+};
+
+exports.Skeleton = Skeleton;

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, { SkeletonProps, SkeletonTheme } from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\nexport const Skeleton = (props: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\"var(--mdc-theme-background)\"}\n            highlightColor={\"var(--mdc-theme-surface)\"}\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAwC;EAC5D,oBACI,6BAAC,mCAAD;IACI,SAAS,EAAE,6BADf;IAEI,cAAc,EAAE;EAFpB,gBAII,6BAAC,6BAAD,EAA0BA,KAA1B,CAJJ,CADJ;AAQH,CATM"}

package/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Skeleton/Skeleton.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Skeleton/README.md"));
+
+var _Skeleton = require("./Skeleton");
+
+var story = (0, _react2.storiesOf)("Components/Skeleton", module);
+story.add("usage", function () {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A simple loading Skeleton, single line"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A loading Skeleton, with 3 lines"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+    count: 3
+  })));
+}, {
+  info: {
+    propTables: [_Skeleton.Skeleton]
+  }
+});

package/Skeleton/Skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Skeleton"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Skeleton/README.md\";\nimport { Skeleton } from \"./Skeleton\";\n\nconst story = storiesOf(\"Components/Skeleton\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple loading Skeleton, single line\"}>\n                    <Skeleton />\n                </StorySandbox>\n                <StorySandbox title={\"A loading Skeleton, with 3 lines\"}>\n                    <Skeleton count={3} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Skeleton] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,kBAAD,OADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,kBAAD;IAAU,KAAK,EAAE;EAAjB,EADJ,CALJ,CADJ;AAWH,CAdL,EAeI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAD;EAAd;AAAR,CAfJ"}

package/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/Skeleton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Skeleton = require("./Skeleton");
+
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Skeleton[key];
+    }
+  });
+});

package/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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;