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

package/Accordion/Accordion.d.ts

@@ -5,7 +5,7 @@ export interface AccordionProps {
     /**
      * Element displayed when accordion is expanded.
      */
-    children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem>[];
+    children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem> | React.ReactElement<typeof AccordionItem>[];
     /**
      * Elevation number, default set to 2
      */

package/Accordion/Accordion.js

@@ -20,11 +20,7 @@ var _emotion = require("emotion");
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _excluded = ["children", "elevation", "className"];
-var listStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-list": {
-    padding: 0
-  }
-}, "label:listStyle;");
+var listStyle = /*#__PURE__*/(0, _emotion.css)("&.mdc-list{padding:0;&.mdc-list--two-line .mdc-list-item{height:48px;padding:8px 20px;}}label:listStyle;");
 
 var Accordion = function Accordion(props) {
   var children = props.children,

package/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["listStyle","css","padding","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n    /**\n     * Element displayed when accordion is expanded.\n     */\n    children: React.ReactElement<typeof ListItem>[] | React.ReactElement<typeof AccordionItem>[];\n\n    /**\n     * Elevation number, default set to 2\n     */\n    elevation?: number;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n}\n\nconst listStyle = css({\n    \"&.mdc-list\": {\n        padding: 0\n    }\n});\n\nconst Accordion: React.FC<AccordionProps> = props => {\n    const { children, elevation = 2, className, ...other } = props;\n    return (\n        <Elevation z={elevation} className={classNames(\"webiny-ui-accordion\", className)}>\n            <List twoLine className={listStyle} {...other}>\n                {children}\n            </List>\n        </Elevation>\n    );\n};\n\nexport { Accordion };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;AAmBA,IAAMA,SAAS,gBAAG,IAAAC,YAAA,EAAI;EAClB,cAAc;IACVC,OAAO,EAAE;EADC;AADI,CAAJ,qBAAlB;;AAMA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,IAAQC,QAAR,GAAyDD,KAAzD,CAAQC,QAAR;EAAA,uBAAyDD,KAAzD,CAAkBE,SAAlB;EAAA,IAAkBA,SAAlB,iCAA8B,CAA9B;EAAA,IAAiCC,SAAjC,GAAyDH,KAAzD,CAAiCG,SAAjC;EAAA,IAA+CC,KAA/C,0CAAyDJ,KAAzD;EACA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAEE,SAAd;IAAyB,SAAS,EAAE,IAAAG,mBAAA,EAAW,qBAAX,EAAkCF,SAAlC;EAApC,gBACI,6BAAC,UAAD;IAAM,OAAO,MAAb;IAAc,SAAS,EAAEP;EAAzB,GAAwCQ,KAAxC,GACKH,QADL,CADJ,CADJ;AAOH,CATD"}
+{"version":3,"names":["listStyle","css","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n    /**\n     * Element displayed when accordion is expanded.\n     */\n    children:\n        | React.ReactElement<typeof ListItem>[]\n        | React.ReactElement<typeof AccordionItem>\n        | React.ReactElement<typeof AccordionItem>[];\n\n    /**\n     * Elevation number, default set to 2\n     */\n    elevation?: number;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n}\n\nconst listStyle = css`\n    &.mdc-list {\n        padding: 0;\n        &.mdc-list--two-line .mdc-list-item {\n            height: 48px;\n            padding: 8px 20px;\n        }\n    }\n`;\n\nconst Accordion: React.FC<AccordionProps> = props => {\n    const { children, elevation = 2, className, ...other } = props;\n    return (\n        <Elevation z={elevation} className={classNames(\"webiny-ui-accordion\", className)}>\n            <List twoLine className={listStyle} {...other}>\n                {children}\n            </List>\n        </Elevation>\n    );\n};\n\nexport { Accordion };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;AAsBA,IAAMA,SAAS,oBAAGC,YAAH,6GAAf;;AAUA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,IAAQC,QAAR,GAAyDD,KAAzD,CAAQC,QAAR;EAAA,uBAAyDD,KAAzD,CAAkBE,SAAlB;EAAA,IAAkBA,SAAlB,iCAA8B,CAA9B;EAAA,IAAiCC,SAAjC,GAAyDH,KAAzD,CAAiCG,SAAjC;EAAA,IAA+CC,KAA/C,0CAAyDJ,KAAzD;EACA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAEE,SAAd;IAAyB,SAAS,EAAE,IAAAG,mBAAA,EAAW,qBAAX,EAAkCF,SAAlC;EAApC,gBACI,6BAAC,UAAD;IAAM,OAAO,MAAb;IAAc,SAAS,EAAEN;EAAzB,GAAwCO,KAAxC,GACKH,QADL,CADJ,CADJ;AAOH,CATD"}

package/Accordion/AccordionItem.d.ts

@@ -1,5 +1,16 @@
+/// <reference types="web" />
 import React from "react";
+import { AccordionItemAction, AccordionItemActions } from "./AccordionItemActions";
+declare const Divider: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, keyof React.HTMLAttributes<HTMLSpanElement>>, object>;
 export interface AccordionItemProps {
+    /**
+     * Can user toggle the accordion item by clicking it? Defaults to `true`.
+     */
+    interactive?: boolean;
+    /**
+     * Actions to show on the right side of the accordion item
+     */
+    actions?: React.ReactElement | null;
     /**
      * Left side icon
      */
@@ -29,5 +40,10 @@ export interface AccordionItemProps {
      */
     iconClassName?: string;
 }
-declare const AccordionItem: React.FC<AccordionItemProps>;
-export { AccordionItem };
+declare type AccordionItem = React.FC<AccordionItemProps> & {
+    Divider: typeof Divider;
+    Actions: typeof AccordionItemActions;
+    Action: typeof AccordionItemAction;
+};
+export declare const AccordionItem: AccordionItem;
+export {};

package/Accordion/AccordionItem.js

@@ -35,48 +35,27 @@ var _roundKeyboard_arrow_down24px = require("./icons/round-keyboard_arrow_down-2
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _AccordionItemActions = require("./AccordionItemActions");
+
 var Content = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eypjd5u0",
-  label: "Content"
-})({
-  width: "100%",
-  borderRight: "1px solid var(--mdc-theme-background)",
-  borderBottom: "1px solid var(--mdc-theme-background)",
-  borderLeft: "1px solid var(--mdc-theme-background)",
-  boxSizing: "border-box"
-});
-var listItem = /*#__PURE__*/(0, _emotion.css)({
-  padding: "15px 20px",
-  cursor: "pointer",
-  borderBottom: "1px solid var(--mdc-theme-background)",
-  "&:last-child": {
-    borderBottom: "none"
-  },
-  ".mdc-list-item__graphic": {
-    marginRight: 20
-  }
-}, "label:listItem;");
+  label: "Content",
+  target: "eypjd5u0"
+})("width:100%;border-right:1px solid var(--mdc-theme-background);border-bottom:1px solid var(--mdc-theme-background);border-left:1px solid var(--mdc-theme-background);box-sizing:border-box;> .mdc-layout-grid{margin:-24px;}");
+var listItem = /*#__PURE__*/(0, _emotion.css)("cursor:pointer;border-bottom:1px solid var(--mdc-theme-background);&:last-child{border-bottom:none;}.mdc-list-item__graphic{margin-right:20px;}label:listItem;");
 var ListItemTitle = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eypjd5u1",
-  label: "ListItemTitle"
-})({
-  fontWeight: 600,
-  marginBottom: 5
-});
+  label: "ListItemTitle",
+  target: "eypjd5u1"
+})("font-weight:600;line-height:100%;");
 var ListItemDescription = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eypjd5u2",
-  label: "ListItemDescription"
-})({});
+  label: "ListItemDescription",
+  target: "eypjd5u2"
+})("line-height:100%;");
 var TitleContent = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eypjd5u3",
-  label: "TitleContent"
-})({
-  display: "flex",
-  flexDirection: "column"
-});
-var openedState = /*#__PURE__*/(0, _emotion.css)({
-  backgroundColor: "var(--mdc-theme-on-background)"
-}, "label:openedState;");
+  label: "TitleContent",
+  target: "eypjd5u3"
+})("display:flex;flex-direction:column;");
+var openedState = /*#__PURE__*/(0, _emotion.css)("background-color:var(--mdc-theme-on-background);label:openedState;");
+var nonInteractive = /*#__PURE__*/(0, _emotion.css)("background-color:var(--mdc-theme-surface);label:nonInteractive;");
 var duration = 150;
 var defaultStyle = {
   transition: "all ".concat(duration, "ms ease-in-out"),
@@ -93,42 +72,59 @@ var transitionStyles = {
   entering: {
     opacity: 0,
     height: 0,
-    padding: "20px 20px 20px 65px",
+    padding: "20px",
     pointerEvents: "auto",
     overflow: "initial"
   },
   entered: {
     opacity: 1,
     height: "auto",
-    padding: "20px 20px 20px 65px",
+    padding: "20px",
     pointerEvents: "auto",
     overflow: "initial"
   },
   exiting: {
     height: "auto",
-    padding: "20px 20px 20px 65px",
+    padding: "20px",
     pointerEvents: "auto",
     overflow: "initial"
   }
 };
-
-var AccordionItem = function AccordionItem(props) {
+var Divider = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "Divider",
+  target: "eypjd5u4"
+})("width:1px;margin:0 15px;height:100%;background-color:var(--mdc-theme-on-background);");
+var Actions = /*#__PURE__*/(0, _styled.default)(_List.ListItemMeta, {
+  label: "Actions",
+  target: "eypjd5u5"
+})("display:flex;height:40%;align-items:center;");
+
+var AccordionItemComponent = function AccordionItemComponent(props) {
   var _useState = (0, _react.useState)(props.open ? props.open : false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       open = _useState2[0],
       setState = _useState2[1];
 
+  var _props$interactive = props.interactive,
+      interactive = _props$interactive === void 0 ? true : _props$interactive,
+      actions = props.actions;
   var toggleState = (0, _react.useCallback)(function () {
     setState(!open);
   }, [open]);
+  var onClick = interactive ? toggleState : undefined;
+  var divider = interactive && actions ? /*#__PURE__*/_react.default.createElement(Divider, null) : null;
+  var arrowIcon = interactive ? /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: !open ? /*#__PURE__*/_react.default.createElement(_roundKeyboard_arrow_down24px.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_roundKeyboard_arrow_up24px.ReactComponent, null)
+  }) : null;
   (0, _react.useEffect)(function () {
-    setState(props.open ? true : false);
+    setState(!!props.open);
   }, [props.open]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("webiny-ui-accordion-item", props.className)
   }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
-    className: (0, _classnames.default)(listItem, (0, _defineProperty2.default)({}, openedState, open), "webiny-ui-accordion-item__list-item"),
-    onClick: toggleState,
+    disabled: !interactive,
+    className: (0, _classnames.default)(listItem, (0, _defineProperty2.default)({}, openedState, open), (0, _defineProperty2.default)({}, nonInteractive, !interactive), "webiny-ui-accordion-item__list-item"),
+    onClick: onClick,
     "data-testid": props["data-testid"]
   }, props.icon && /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: props.icon,
@@ -137,9 +133,7 @@ var AccordionItem = function AccordionItem(props) {
     className: "webiny-ui-accordion-item__title"
   }, /*#__PURE__*/_react.default.createElement(ListItemTitle, null, props.title), props.description && /*#__PURE__*/_react.default.createElement(ListItemDescription, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "body2"
-  }, props.description))), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-    icon: !open ? /*#__PURE__*/_react.default.createElement(_roundKeyboard_arrow_down24px.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_roundKeyboard_arrow_up24px.ReactComponent, null)
-  }))), /*#__PURE__*/_react.default.createElement(_Transition.default, {
+  }, props.description))), /*#__PURE__*/_react.default.createElement(Actions, null, props.actions ? props.actions : null, divider, arrowIcon)), /*#__PURE__*/_react.default.createElement(_Transition.default, {
     in: open,
     timeout: duration
   }, function (state) {
@@ -150,4 +144,9 @@ var AccordionItem = function AccordionItem(props) {
   }));
 };
 
+var AccordionItem = Object.assign(AccordionItemComponent, {
+  Divider: Divider,
+  Action: _AccordionItemActions.AccordionItemAction,
+  Actions: _AccordionItemActions.AccordionItemActions
+});
 exports.AccordionItem = AccordionItem;

package/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["Content","styled","width","borderRight","borderBottom","borderLeft","boxSizing","listItem","css","padding","cursor","marginRight","ListItemTitle","fontWeight","marginBottom","ListItemDescription","TitleContent","display","flexDirection","openedState","backgroundColor","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","entered","exiting","AccordionItem","props","useState","open","setState","toggleState","useCallback","useEffect","classNames","className","icon","iconClassName","title","description","state","children"],"sources":["AccordionItem.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"../List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\n\nconst Content = styled(\"div\")({\n    width: \"100%\",\n    borderRight: \"1px solid var(--mdc-theme-background)\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    borderLeft: \"1px solid var(--mdc-theme-background)\",\n    boxSizing: \"border-box\"\n});\n\nconst listItem = css({\n    padding: \"15px 20px\",\n    cursor: \"pointer\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    \"&:last-child\": {\n        borderBottom: \"none\"\n    },\n    \".mdc-list-item__graphic\": {\n        marginRight: 20\n    }\n});\n\nconst ListItemTitle = styled(\"div\")({\n    fontWeight: 600,\n    marginBottom: 5\n});\n\nconst ListItemDescription = styled(\"div\")({});\n\nconst TitleContent = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\"\n});\n\nconst openedState = css({\n    backgroundColor: \"var(--mdc-theme-on-background)\"\n});\n\nconst duration = 150;\nconst defaultStyle = {\n    transition: `all ${duration}ms ease-in-out`,\n    opacity: 0,\n    height: 0,\n    pointerEvents: \"none\",\n    overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n    entering: {\n        opacity: 0,\n        height: 0,\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nexport interface AccordionItemProps {\n    /**\n     * Left side icon\n     */\n    icon?: React.ReactElement | null;\n\n    /**\n     * Accordion title\n     */\n    title?: React.ReactNode;\n\n    /**\n     * Optional description\n     */\n    description?: string;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n\n    /**\n     * Render item opened by default\n     */\n    open?: boolean;\n    /**\n     * For testing purpose\n     */\n    \"data-testid\"?: string;\n    /**\n     * Append a class name to Icon\n     */\n    iconClassName?: string;\n}\n\nconst AccordionItem: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    useEffect(() => {\n        setState(props.open ? true : false);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={toggleState}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} className={props.iconClassName} />\n                    </ListItemGraphic>\n                )}\n\n                <TitleContent className=\"webiny-ui-accordion-item__title\">\n                    <ListItemTitle>{props.title}</ListItemTitle>\n                    {props.description && (\n                        <ListItemDescription>\n                            <Typography use={\"body2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <ListItemMeta>\n                    <Icon icon={!open ? <DownArrow /> : <UpArrow />} />\n                </ListItemMeta>\n            </ListItem>\n            <Transition in={open} timeout={duration}>\n                {(state: TransitionStylesState) => (\n                    <Content\n                        style={{ ...defaultStyle, ...transitionStyles[state] }}\n                        className=\"webiny-ui-accordion-item__content\"\n                    >\n                        {props.children}\n                    </Content>\n                )}\n            </Transition>\n        </div>\n    );\n};\n\nexport { AccordionItem };\n"],"mappings":"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"}
+{"version":3,"names":["Content","styled","listItem","css","ListItemTitle","ListItemDescription","TitleContent","openedState","nonInteractive","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","padding","entered","exiting","Divider","Actions","ListItemMeta","AccordionItemComponent","props","useState","open","setState","interactive","actions","toggleState","useCallback","onClick","undefined","divider","arrowIcon","useEffect","classNames","className","icon","iconClassName","title","description","state","children","AccordionItem","Object","assign","Action","AccordionItemAction","AccordionItemActions"],"sources":["AccordionItem.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"~/List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\nimport { AccordionItemAction, AccordionItemActions } from \"~/Accordion/AccordionItemActions\";\n\nconst Content = styled.div`\n    width: 100%;\n    border-right: 1px solid var(--mdc-theme-background);\n    border-bottom: 1px solid var(--mdc-theme-background);\n    border-left: 1px solid var(--mdc-theme-background);\n    box-sizing: border-box;\n    > .mdc-layout-grid {\n        margin: -24px;\n    }\n`;\n\nconst listItem = css`\n    cursor: pointer;\n    border-bottom: 1px solid var(--mdc-theme-background);\n    &:last-child {\n        border-bottom: none;\n    }\n    .mdc-list-item__graphic {\n        margin-right: 20px;\n    }\n`;\n\nconst ListItemTitle = styled.div`\n    font-weight: 600;\n    line-height: 100%;\n`;\n\nconst ListItemDescription = styled.div`\n    line-height: 100%;\n`;\n\nconst TitleContent = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nconst openedState = css`\n    background-color: var(--mdc-theme-on-background);\n`;\n\nconst nonInteractive = css`\n    background-color: var(--mdc-theme-surface);\n`;\n\nconst duration = 150;\nconst defaultStyle = {\n    transition: `all ${duration}ms ease-in-out`,\n    opacity: 0,\n    height: 0,\n    pointerEvents: \"none\",\n    overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n    entering: {\n        opacity: 0,\n        height: 0,\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nconst Divider = styled.span`\n    width: 1px;\n    margin: 0 15px;\n    height: 100%;\n    background-color: var(--mdc-theme-on-background);\n`;\n\nconst Actions = styled(ListItemMeta)`\n    display: flex;\n    height: 40%;\n    align-items: center;\n`;\n\nexport interface AccordionItemProps {\n    /**\n     * Can user toggle the accordion item by clicking it? Defaults to `true`.\n     */\n    interactive?: boolean;\n    /**\n     * Actions to show on the right side of the accordion item\n     */\n    actions?: React.ReactElement | null;\n    /**\n     * Left side icon\n     */\n    icon?: React.ReactElement | null;\n\n    /**\n     * Accordion title\n     */\n    title?: React.ReactNode;\n\n    /**\n     * Optional description\n     */\n    description?: string;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n\n    /**\n     * Render item opened by default\n     */\n    open?: boolean;\n    /**\n     * For testing purpose\n     */\n    \"data-testid\"?: string;\n    /**\n     * Append a class name to Icon\n     */\n    iconClassName?: string;\n}\n\nconst AccordionItemComponent: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n    const { interactive = true, actions } = props;\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    const onClick = interactive ? toggleState : undefined;\n    const divider = interactive && actions ? <Divider /> : null;\n    const arrowIcon = interactive ? <Icon icon={!open ? <DownArrow /> : <UpArrow />} /> : null;\n\n    useEffect(() => {\n        setState(!!props.open);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                disabled={!interactive}\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    { [nonInteractive]: !interactive },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={onClick}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} className={props.iconClassName} />\n                    </ListItemGraphic>\n                )}\n\n                <TitleContent className=\"webiny-ui-accordion-item__title\">\n                    <ListItemTitle>{props.title}</ListItemTitle>\n                    {props.description && (\n                        <ListItemDescription>\n                            <Typography use={\"body2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <Actions>\n                    {props.actions ? props.actions : null}\n                    {divider}\n                    {arrowIcon}\n                </Actions>\n            </ListItem>\n            <Transition in={open} timeout={duration}>\n                {(state: TransitionStylesState) => (\n                    <Content\n                        style={{ ...defaultStyle, ...transitionStyles[state] }}\n                        className=\"webiny-ui-accordion-item__content\"\n                    >\n                        {props.children}\n                    </Content>\n                )}\n            </Transition>\n        </div>\n    );\n};\n\ntype AccordionItem = React.FC<AccordionItemProps> & {\n    Divider: typeof Divider;\n    Actions: typeof AccordionItemActions;\n    Action: typeof AccordionItemAction;\n};\n\nexport const AccordionItem: AccordionItem = Object.assign(AccordionItemComponent, {\n    Divider,\n    Action: AccordionItemAction,\n    Actions: AccordionItemActions\n});\n"],"mappings":"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"}

package/Accordion/AccordionItemActions.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const AccordionItemActions: React.FC;
+export interface AccordionItemActionProps {
+    icon: JSX.Element;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare const AccordionItemAction: ({ icon, onClick, disabled }: AccordionItemActionProps) => JSX.Element;

package/Accordion/AccordionItemActions.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionItemActions = exports.AccordionItemAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../Button");
+
+var AccordionItemActions = function AccordionItemActions(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+
+exports.AccordionItemActions = AccordionItemActions;
+
+var AccordionItemAction = function AccordionItemAction(_ref2) {
+  var icon = _ref2.icon,
+      _onClick = _ref2.onClick,
+      disabled = _ref2.disabled;
+  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    disabled: disabled,
+    icon: icon,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      _onClick();
+    }
+  });
+};
+
+exports.AccordionItemAction = AccordionItemAction;

package/Accordion/AccordionItemActions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AccordionItemActions","children","AccordionItemAction","icon","onClick","disabled","e","stopPropagation"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\n\nexport const AccordionItemActions: React.FC = ({ children }) => {\n    return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n    icon: JSX.Element;\n    onClick: () => void;\n    disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {\n    return (\n        <IconButton\n            disabled={disabled}\n            icon={icon}\n            onClick={e => {\n                e.stopPropagation();\n                onClick();\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,oBAA8B,GAAG,SAAjCA,oBAAiC,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;EAC5D,oBAAO,4DAAGA,QAAH,CAAP;AACH,CAFM;;;;AAUA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,QAA2D;EAAA,IAAxDC,IAAwD,SAAxDA,IAAwD;EAAA,IAAlDC,QAAkD,SAAlDA,OAAkD;EAAA,IAAzCC,QAAyC,SAAzCA,QAAyC;EAC1F,oBACI,6BAAC,kBAAD;IACI,QAAQ,EAAEA,QADd;IAEI,IAAI,EAAEF,IAFV;IAGI,OAAO,EAAE,iBAAAG,CAAC,EAAI;MACVA,CAAC,CAACC,eAAF;;MACAH,QAAO;IACV;EANL,EADJ;AAUH,CAXM"}

package/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare type AlertType = "success" | "info" | "warning" | "danger";
-interface AlertProps {
+export interface AlertProps {
     title: string;
     type: AlertType;
     children?: React.ReactNode;

package/Alert/Alert.js

@@ -25,7 +25,7 @@ var alertStyles = /*#__PURE__*/(0, _emotion.css)({
     marginBottom: 5
   },
   ".webiny-ui-alert__message": {
-    lineHeight: "100%",
+    lineHeight: "120%",
     fontSize: 14,
     color: "var(--mdc-theme-on-surface)"
   },

package/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"names":["alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"sources":["Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\n\nconst alertStyles = css({\n    borderLeft: \"3px solid red\",\n    margin: \"5px 0 15px 0\",\n    padding: \"2px 0 2px 10px\",\n    \".webiny-ui-alert__title\": {\n        fontWeight: 600,\n        lineHeight: \"150%\",\n        color: \"var(--mdc-theme-on-surface)\",\n        marginBottom: 5\n    },\n    \".webiny-ui-alert__message\": {\n        lineHeight: \"100%\",\n        fontSize: 14,\n        color: \"var(--mdc-theme-on-surface)\"\n    },\n    \"&.webiny-ui-alert--success\": {\n        borderColor: \"#21CEAF\"\n    },\n    \"&.webiny-ui-alert--info\": {\n        borderColor: \"#29A9DB\"\n    },\n    \"&.webiny-ui-alert--warning\": {\n        borderColor: \"#F45C3C\"\n    },\n    \"&.webiny-ui-alert--danger\": {\n        borderColor: \"#E4495C\"\n    }\n});\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\ninterface AlertProps {\n    // Alert title.\n    title: string;\n\n    // Alert type.\n    type: AlertType;\n\n    // Alert message.\n    children?: React.ReactNode;\n\n    // CSS class name\n    className?: string;\n\n    // Style object\n    style?: React.CSSProperties;\n}\n\n/**\n * Use Alert component to display user's avatar.\n */\nconst Alert: React.FC<AlertProps> = props => {\n    const { title, type, children, ...rest } = props;\n\n    return (\n        <div {...rest} className={alertStyles + \" webiny-ui-alert webiny-ui-alert--\" + type}>\n            <p className={\"webiny-ui-alert__title\"}>{title}</p>\n            <p className={\"webiny-ui-alert__message\"}>{children}</p>\n        </div>\n    );\n};\n\nexport { Alert };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;AAEA,IAAMA,WAAW,gBAAG,IAAAC,YAAA,EAAI;EACpBC,UAAU,EAAE,eADQ;EAEpBC,MAAM,EAAE,cAFY;EAGpBC,OAAO,EAAE,gBAHW;EAIpB,2BAA2B;IACvBC,UAAU,EAAE,GADW;IAEvBC,UAAU,EAAE,MAFW;IAGvBC,KAAK,EAAE,6BAHgB;IAIvBC,YAAY,EAAE;EAJS,CAJP;EAUpB,6BAA6B;IACzBF,UAAU,EAAE,MADa;IAEzBG,QAAQ,EAAE,EAFe;IAGzBF,KAAK,EAAE;EAHkB,CAVT;EAepB,8BAA8B;IAC1BG,WAAW,EAAE;EADa,CAfV;EAkBpB,2BAA2B;IACvBA,WAAW,EAAE;EADU,CAlBP;EAqBpB,8BAA8B;IAC1BA,WAAW,EAAE;EADa,CArBV;EAwBpB,6BAA6B;IACzBA,WAAW,EAAE;EADY;AAxBT,CAAJ,uBAApB;;AAgDA;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IAAQC,KAAR,GAA2CD,KAA3C,CAAQC,KAAR;EAAA,IAAeC,IAAf,GAA2CF,KAA3C,CAAeE,IAAf;EAAA,IAAqBC,QAArB,GAA2CH,KAA3C,CAAqBG,QAArB;EAAA,IAAkCC,IAAlC,0CAA2CJ,KAA3C;EAEA,oBACI,sDAASI,IAAT;IAAe,SAAS,EAAEhB,WAAW,GAAG,oCAAd,GAAqDc;EAA/E,iBACI;IAAG,SAAS,EAAE;EAAd,GAAyCD,KAAzC,CADJ,eAEI;IAAG,SAAS,EAAE;EAAd,GAA2CE,QAA3C,CAFJ,CADJ;AAMH,CATD"}
+{"version":3,"names":["alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"sources":["Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\n\nconst alertStyles = css({\n    borderLeft: \"3px solid red\",\n    margin: \"5px 0 15px 0\",\n    padding: \"2px 0 2px 10px\",\n    \".webiny-ui-alert__title\": {\n        fontWeight: 600,\n        lineHeight: \"150%\",\n        color: \"var(--mdc-theme-on-surface)\",\n        marginBottom: 5\n    },\n    \".webiny-ui-alert__message\": {\n        lineHeight: \"120%\",\n        fontSize: 14,\n        color: \"var(--mdc-theme-on-surface)\"\n    },\n    \"&.webiny-ui-alert--success\": {\n        borderColor: \"#21CEAF\"\n    },\n    \"&.webiny-ui-alert--info\": {\n        borderColor: \"#29A9DB\"\n    },\n    \"&.webiny-ui-alert--warning\": {\n        borderColor: \"#F45C3C\"\n    },\n    \"&.webiny-ui-alert--danger\": {\n        borderColor: \"#E4495C\"\n    }\n});\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\nexport interface AlertProps {\n    // Alert title.\n    title: string;\n\n    // Alert type.\n    type: AlertType;\n\n    // Alert message.\n    children?: React.ReactNode;\n\n    // CSS class name\n    className?: string;\n\n    // Style object\n    style?: React.CSSProperties;\n}\n\n/**\n * Use Alert component to display user's avatar.\n */\nconst Alert: React.FC<AlertProps> = props => {\n    const { title, type, children, ...rest } = props;\n\n    return (\n        <div {...rest} className={alertStyles + \" webiny-ui-alert webiny-ui-alert--\" + type}>\n            <p className={\"webiny-ui-alert__title\"}>{title}</p>\n            <p className={\"webiny-ui-alert__message\"}>{children}</p>\n        </div>\n    );\n};\n\nexport { Alert };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;AAEA,IAAMA,WAAW,gBAAG,IAAAC,YAAA,EAAI;EACpBC,UAAU,EAAE,eADQ;EAEpBC,MAAM,EAAE,cAFY;EAGpBC,OAAO,EAAE,gBAHW;EAIpB,2BAA2B;IACvBC,UAAU,EAAE,GADW;IAEvBC,UAAU,EAAE,MAFW;IAGvBC,KAAK,EAAE,6BAHgB;IAIvBC,YAAY,EAAE;EAJS,CAJP;EAUpB,6BAA6B;IACzBF,UAAU,EAAE,MADa;IAEzBG,QAAQ,EAAE,EAFe;IAGzBF,KAAK,EAAE;EAHkB,CAVT;EAepB,8BAA8B;IAC1BG,WAAW,EAAE;EADa,CAfV;EAkBpB,2BAA2B;IACvBA,WAAW,EAAE;EADU,CAlBP;EAqBpB,8BAA8B;IAC1BA,WAAW,EAAE;EADa,CArBV;EAwBpB,6BAA6B;IACzBA,WAAW,EAAE;EADY;AAxBT,CAAJ,uBAApB;;AAgDA;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IAAQC,KAAR,GAA2CD,KAA3C,CAAQC,KAAR;EAAA,IAAeC,IAAf,GAA2CF,KAA3C,CAAeE,IAAf;EAAA,IAAqBC,QAArB,GAA2CH,KAA3C,CAAqBG,QAArB;EAAA,IAAkCC,IAAlC,0CAA2CJ,KAA3C;EAEA,oBACI,sDAASI,IAAT;IAAe,SAAS,EAAEhB,WAAW,GAAG,oCAAd,GAAqDc;EAA/E,iBACI;IAAG,SAAS,EAAE;EAAd,GAAyCD,KAAzC,CADJ,eAEI;IAAG,SAAS,EAAE;EAAd,GAA2CE,QAA3C,CAFJ,CADJ;AAMH,CATD"}

package/Button/Button.d.ts

@@ -4,16 +4,45 @@ import { FabProps } from "@rmwc/fab";
 import { IconProps } from "../Icon/Icon";
 import { SyntheticEvent } from "react";
 export interface ButtonProps {
+    /**
+     * Make button flat (only applicable to Primary button).
+     */
     flat?: boolean;
+    /**
+     * Make button smaller.
+     */
     small?: boolean;
-    onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;
+    /**
+     * Returning `any` allows us to pass callbacks to the button without worrying about their
+     * specific return types. Buttons don't use return values from callbacks, so we don't have to worry
+     * about their return types at all.
+     */
+    onClick?: (event: React.MouseEvent<any, MouseEvent>) => any;
+    /**
+     * Label and optionally an icon (using Button.Icon component).
+     */
     children?: React.ReactNode;
+    /**
+     * Show ripple effect on button click.
+     */
     ripple?: boolean;
+    /**
+     * Additional button class name.
+     */
     className?: string;
+    /**
+     * Is button disabled?
+     */
     disabled?: boolean;
+    /**
+     * Additional inline styles.
+     */
     style?: {
         [key: string]: any;
     };
+    /**
+     * ID of the element for testing purposes.
+     */
     "data-testid"?: string;
 }
 /**

package/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\nexport interface ButtonProps {\n    // Make button flat (only applicable to Primary button).\n    flat?: boolean;\n\n    // Make button smaller.\n    small?: boolean;\n\n    // onClick handler.\n    onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n    // Label and optionally an icon (using Button.Icon component).\n    children?: React.ReactNode;\n\n    // Show ripple effect on button click. Default: true\n    ripple?: boolean;\n\n    className?: string;\n\n    disabled?: boolean;\n\n    style?: { [key: string]: any };\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n    const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n    return (\n        <RmwcButton.Button\n            style={style}\n            disabled={disabled}\n            dense={small}\n            onClick={onClick}\n            ripple={ripple}\n            className={classNames(\"webiny-ui-button\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        flat = false,\n        ripple = true,\n        style = {},\n        className = null\n    } = props;\n    return (\n        <RmwcButton.Button\n            raised={!flat}\n            dense={small}\n            disabled={disabled}\n            unelevated={flat}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        ripple = true,\n        className = null,\n        style = {}\n    } = props;\n\n    return (\n        <RmwcButton.Button\n            disabled={disabled}\n            outlined\n            dense={small}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\n                \"webiny-ui-button webiny-ui-button--secondary\",\n                webinyButtonStyles,\n                className\n            )}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n    FabProps & {\n        label?: React.ReactNode;\n        icon?: React.ReactNode;\n        onMouseDown?: (e: SyntheticEvent) => void;\n        onMouseUp?: (e: SyntheticEvent) => void;\n    };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n    const {\n        disabled,\n        label,\n        icon,\n        onClick,\n        small = false,\n        ripple = true,\n        className = null,\n        ...rest\n    } = props;\n    return (\n        <Fab\n            data-testid={props[\"data-testid\"]}\n            disabled={disabled}\n            mini={small}\n            onClick={onClick}\n            label={label}\n            ripple={ripple}\n            icon={icon}\n            className={classNames(\"webiny-ui-button--floating\", className)}\n            {...rest}\n        />\n    );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}
+{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\n\nexport interface ButtonProps {\n    /**\n     * Make button flat (only applicable to Primary button).\n     */\n    flat?: boolean;\n\n    /**\n     * Make button smaller.\n     */\n    small?: boolean;\n\n    /**\n     * Returning `any` allows us to pass callbacks to the button without worrying about their\n     * specific return types. Buttons don't use return values from callbacks, so we don't have to worry\n     * about their return types at all.\n     */\n    onClick?: (event: React.MouseEvent<any, MouseEvent>) => any;\n\n    /**\n     * Label and optionally an icon (using Button.Icon component).\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Show ripple effect on button click.\n     */\n    ripple?: boolean;\n\n    /**\n     * Additional button class name.\n     */\n    className?: string;\n\n    /**\n     * Is button disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional inline styles.\n     */\n    style?: { [key: string]: any };\n\n    /**\n     * ID of the element for testing purposes.\n     */\n    \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n    const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n    return (\n        <RmwcButton.Button\n            style={style}\n            disabled={disabled}\n            dense={small}\n            onClick={onClick}\n            ripple={ripple}\n            className={classNames(\"webiny-ui-button\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        flat = false,\n        ripple = true,\n        style = {},\n        className = null\n    } = props;\n    return (\n        <RmwcButton.Button\n            raised={!flat}\n            dense={small}\n            disabled={disabled}\n            unelevated={flat}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        ripple = true,\n        className = null,\n        style = {}\n    } = props;\n\n    return (\n        <RmwcButton.Button\n            disabled={disabled}\n            outlined\n            dense={small}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\n                \"webiny-ui-button webiny-ui-button--secondary\",\n                webinyButtonStyles,\n                className\n            )}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n    FabProps & {\n        label?: React.ReactNode;\n        icon?: React.ReactNode;\n        onMouseDown?: (e: SyntheticEvent) => void;\n        onMouseUp?: (e: SyntheticEvent) => void;\n    };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n    const {\n        disabled,\n        label,\n        icon,\n        onClick,\n        small = false,\n        ripple = true,\n        className = null,\n        ...rest\n    } = props;\n    return (\n        <Fab\n            data-testid={props[\"data-testid\"]}\n            disabled={disabled}\n            mini={small}\n            onClick={onClick}\n            label={label}\n            ripple={ripple}\n            icon={icon}\n            className={classNames(\"webiny-ui-button--floating\", className)}\n            {...rest}\n        />\n    );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}

package/DataTable/DataTable.d.ts

@@ -15,6 +15,8 @@ interface Props<T> {
     data: T[];
     onSelectRow?: (rows: T[] | []) => void;
     loadingInitial?: boolean;
+    stickyColumns?: number;
+    stickyRows?: number;
 }
-export declare const DataTable: <T>({ data, columns, onSelectRow, loadingInitial }: Props<T>) => JSX.Element;
+export declare const DataTable: <T>({ columns, data, loadingInitial, onSelectRow, stickyColumns, stickyRows }: Props<T>) => JSX.Element;
 export {};

package/DataTable/DataTable.js

@@ -106,10 +106,12 @@ var defineData = function defineData(data, loadingInitial) {
 };
 
 var DataTable = function DataTable(_ref3) {
-  var data = _ref3.data,
-      columns = _ref3.columns,
+  var columns = _ref3.columns,
+      data = _ref3.data,
+      loadingInitial = _ref3.loadingInitial,
       onSelectRow = _ref3.onSelectRow,
-      loadingInitial = _ref3.loadingInitial;
+      stickyColumns = _ref3.stickyColumns,
+      stickyRows = _ref3.stickyRows;
 
   var _React$useState = _react.default.useState({}),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -134,7 +136,10 @@ var DataTable = function DataTable(_ref3) {
       onSelectRow(dataSelected);
     }
   }, [rowSelection]);
-  return /*#__PURE__*/_react.default.createElement(_styled.Table, null, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableContent, null, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHead, null, table.getHeaderGroups().map(function (headerGroup) {
+  return /*#__PURE__*/_react.default.createElement(_styled.Table, {
+    stickyColumns: stickyColumns,
+    stickyRows: stickyRows
+  }, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableContent, null, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHead, null, table.getHeaderGroups().map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
       key: headerGroup.id
     }, headerGroup.headers.map(function (header) {

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","DataTable","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","state","enableRowSelection","onRowSelectionChange","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","columnDef","isPlaceholder","flexRender","getContext","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport { flexRender, getCoreRowModel, useReactTable, ColumnDef } from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\ninterface Props<T> {\n    /*\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                meta\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\n                              />\n                          ),\n                      cell: ({ row }) => (\n                          <Checkbox\n                              indeterminate={row.getIsSomeSelected()}\n                              value={row.getIsSelected()}\n                              onChange={row.getToggleSelectedHandler()}\n                          />\n                      ),\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      }\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nexport const DataTable = <T,>({ data, columns, onSelectRow, loadingInitial }: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        state: {\n            rowSelection\n        },\n        enableRowSelection: !!onSelectRow,\n        onRowSelectionChange: setRowSelection\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\n\n    return (\n        <Table>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(header => (\n                                <DataTableHeadCell\n                                    key={header.id}\n                                    {...header.column.columnDef.meta}\n                                >\n                                    {header.isPlaceholder\n                                        ? null\n                                        : flexRender(\n                                              header.column.columnDef.header,\n                                              header.getContext()\n                                          )}\n                                </DataTableHeadCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","DataTable","stickyColumns","stickyRows","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","state","enableRowSelection","onRowSelectionChange","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","columnDef","isPlaceholder","flexRender","getContext","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport { flexRender, getCoreRowModel, useReactTable, ColumnDef } from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\ninterface Props<T> {\n    /*\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /*\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /*\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                meta\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\n                              />\n                          ),\n                      cell: ({ row }) => (\n                          <Checkbox\n                              indeterminate={row.getIsSomeSelected()}\n                              value={row.getIsSelected()}\n                              onChange={row.getToggleSelectedHandler()}\n                          />\n                      ),\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      }\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nexport const DataTable = <T,>({\n    columns,\n    data,\n    loadingInitial,\n    onSelectRow,\n    stickyColumns,\n    stickyRows\n}: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        state: {\n            rowSelection\n        },\n        enableRowSelection: !!onSelectRow,\n        onRowSelectionChange: setRowSelection\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(header => (\n                                <DataTableHeadCell\n                                    key={header.id}\n                                    {...header.column.columnDef.meta}\n                                >\n                                    {header.isPlaceholder\n                                        ? null\n                                        : flexRender(\n                                              header.column.columnDef.header,\n                                              header.getContext()\n                                          )}\n                                </DataTableHeadCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}

package/DataTable/styled.d.ts

@@ -1 +1,2 @@
-export declare const Table: import("@emotion/styled-base").StyledComponent<{}, Pick<{}, never>, object>;
+import { DataTableProps } from "@rmwc/data-table";
+export declare const Table: import("@emotion/styled-base").StyledComponent<{}, DataTableProps, object>;

package/DataTable/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,KAAK,oBAAGC,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,mFAAX"}
+{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)<DataTableProps>`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,KAAK,oBAAGC,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,mFAAX"}

package/Dialog/Dialog.js

@@ -27,6 +27,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _dialog = require("@rmwc/dialog");
 
+var _emotion = require("emotion");
+
 var _Helpers = require("../Helpers");
 
 var _excluded = ["children"];
@@ -93,12 +95,13 @@ var DialogContent = function DialogContent(props) {
 };
 
 exports.DialogContent = DialogContent;
-
+var addMargin = /*#__PURE__*/(0, _emotion.css)("button:last-of-type{margin-left:8px;}label:addMargin;");
 /**
  * Can be used to show accept and cancel buttons.
  */
+
 var DialogActions = function DialogActions(props) {
-  return /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__actions"));
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, (0, _Helpers.getClasses)(props, [addMargin, "webiny-ui-dialog__actions"]));
 };
 
 exports.DialogActions = DialogActions;