@webiny/ui 0.0.0-mt-1

package/Tags/Tags.js

@@ -0,0 +1,148 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["validation", "value", "disabled", "onChange", "description"];
+import * as React from "react";
+import { Input } from "../Input";
+import { Chips, Chip } from "../Chips";
+import { css } from "emotion";
+import keycode from "keycode";
+import { ReactComponent as BaselineCloseIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
+import { FormElementMessage } from "../FormElementMessage";
+var tagsStyle = /*#__PURE__*/css({
+  position: "relative",
+  ".mdc-elevation--z1": {
+    position: "absolute",
+    width: "calc(100% - 2px)",
+    left: 1,
+    top: 56,
+    zIndex: 10,
+    maxHeight: 200,
+    overflowY: "scroll",
+    backgroundColor: "var(--mdc-theme-surface)"
+  },
+  ul: {
+    listStyle: "none",
+    width: "100%",
+    padding: 0,
+    li: {
+      padding: 10
+    }
+  }
+}, "label:tagsStyle;");
+export var Tags = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tags, _React$Component);
+
+  var _super = _createSuper(Tags);
+
+  function Tags() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      inputValue: ""
+    });
+
+    return _this;
+  }
+
+  _createClass(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 = _objectWithoutProperties(_this$props, _excluded);
+
+      var inputProps = _objectSpread(_objectSpread({}, otherInputProps), {}, {
+        value: this.state.inputValue,
+        onChange: function onChange(inputValue) {
+          _this2.setState({
+            inputValue: inputValue
+          });
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (!onChange) {
+            return;
+          }
+
+          var newValue = Array.isArray(value) ? _toConsumableArray(value) : [];
+          var inputValue = _this2.state.inputValue || "";
+
+          switch (keycode(e)) {
+            case "enter":
+              if (inputValue) {
+                newValue.push(inputValue);
+                onChange(newValue);
+
+                _this2.setState({
+                  inputValue: ""
+                });
+              }
+
+              break;
+
+            case "backspace":
+              if (newValue.length && !inputValue) {
+                newValue.splice(-1, 1);
+                onChange(newValue);
+                break;
+              }
+
+          }
+        }
+      });
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: tagsStyle
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, inputProps), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/React.createElement(Chips, {
+        disabled: disabled
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Chip, {
+          label: item,
+          trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
+          key: "".concat(item, "-").concat(index),
+          onRemove: function onRemove() {
+            // On removal, let's update the value and call "onChange" callback.
+            if (onChange) {
+              var newValue = _toConsumableArray(value);
+
+              newValue.splice(index, 1);
+              onChange(newValue);
+            }
+          }
+        });
+      })) : null));
+    }
+  }]);
+
+  return Tags;
+}(React.Component);
+
+_defineProperty(Tags, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+export default Tags;

package/Tags/Tags.stories.d.ts

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

package/Tags/Tags.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import readme from "./README.md";
+import { Form } from "@webiny/form";
+import { Tags } from "./Tags";
+var story = storiesOf("Components/Tags", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var disabled = boolean("Disabled", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Single value"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      tags: ["animals", "dogs", "food"]
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "tags"
+    }, /*#__PURE__*/React.createElement(Tags, {
+      label: "Tags",
+      disabled: disabled,
+      description: "Choose your tags"
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                     <Form data={{ tags: ['animals', 'dogs', 'food'] }}>\n                        {({ Bind }) => (\n                            <Bind name=\"tags\">\n                                <Tags\n                                    label=\"Tags\"\n                                    disabled={disabled}\n                                    description=\"Choose your tags\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [Tags]
+  }
+});

package/Tags/icons/baseline-close-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/Tags/index.d.ts

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

package/Tags/index.js

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

package/Tooltip/README.md

@@ -0,0 +1,15 @@
+# Tooltip
+
+### Additional information
+
+<a href="http://react-component.github.io/tooltip/" target="_blank">http://react-component.github.io/tooltip/</a>
+
+### Description
+
+Use `Tooltip` component to display useful messages to users.
+
+### Import
+
+```js
+import { Tooltip } from "@webiny/ui/Tooltip";
+```

package/Tooltip/Tooltip.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import "rc-tooltip/assets/bootstrap_white.css";
+import "./style.scss";
+declare type TooltipProps = {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    trigger?: string;
+    placement?: string;
+    className?: string;
+};
+declare type State = {
+    tooltipIsOpen: boolean;
+};
+/**
+ * Use Tooltip component to display a list of choices, once the handler is triggered.
+ */
+declare class Tooltip extends React.Component<TooltipProps, State> {
+    state: {
+        tooltipIsOpen: boolean;
+    };
+    onVisibleChange: (visible: boolean) => void;
+    render(): JSX.Element;
+}
+export { Tooltip };

package/Tooltip/Tooltip.js

@@ -0,0 +1,60 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import { default as RcTooltip } from "rc-tooltip";
+import "rc-tooltip/assets/bootstrap_white.css";
+import "./style.scss";
+
+/**
+ * Use Tooltip component to display a list of choices, once the handler is triggered.
+ */
+var Tooltip = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tooltip, _React$Component);
+
+  var _super = _createSuper(Tooltip);
+
+  function Tooltip() {
+    var _this;
+
+    _classCallCheck(this, Tooltip);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      tooltipIsOpen: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onVisibleChange", function (visible) {
+      _this.setState({
+        tooltipIsOpen: visible
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(Tooltip, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(RcTooltip, Object.assign({
+        animation: "fade",
+        onVisibleChange: this.onVisibleChange,
+        overlay: this.props.content
+      }, this.props), /*#__PURE__*/React.createElement("span", {
+        className: "webiny-ui-tooltip tooltip-content-wrapper"
+      }, this.props.children));
+    }
+  }]);
+
+  return Tooltip;
+}(React.Component);
+
+export { Tooltip };

package/Tooltip/Tooltip.stories.d.ts

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

package/Tooltip/Tooltip.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./../Tooltip/README.md";
+import { Tooltip } from "./Tooltip";
+var story = storiesOf("Components/Tooltip", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "A simple tooltip, triggered with a button"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement("span", null, "This is a tooltip.")
+  }, /*#__PURE__*/React.createElement("span", null, "Hover to see additional information."))));
+}, {
+  info: {
+    propTables: [Tooltip]
+  }
+});

package/Tooltip/index.d.ts

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

package/Tooltip/index.js

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

package/Tooltip/style.scss

@@ -0,0 +1,97 @@
+// Ensures we have a "solid" child for the tooltip.
+// Will take height / width of its child element, making it easier for the tooltip to be applied.
+.tooltip-content-wrapper {
+  display: inline-block;
+}
+
+.rc-tooltip {
+  opacity: 1;
+  max-width: 250px;
+}
+
+.rc-tooltip-arrow {
+  //display: none;
+}
+
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  border-top-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  border-right-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  border-left-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  border-bottom-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-inner {
+  min-height: auto;
+  background-color: var(--mdc-theme-secondary);
+  border: none;
+  color: var(--mdc-theme-on-secondary);
+  border-radius: 0;
+
+  font-family: var(--mdc-typography-font-family);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-size: 0.75rem;
+  line-height: 125%;
+  font-weight: 500;
+  letter-spacing: 0.16667em;
+  text-decoration: none;
+  text-transform: uppercase;
+  text-align: center;
+  font-weight: 600;
+}
+
+.rc-tooltip.rc-tooltip-fade-enter {
+  display: block;
+  opacity: 0;
+}
+
+.rc-tooltip.rc-tooltip-fade-enter.rc-tooltip-fade-enter-active {
+  opacity: 1;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  transition: opacity 0.2s;
+}
+
+.rc-tooltip.rc-tooltip-fade-leave {
+  opacity: 0;
+}
+
+.rc-tooltip.rc-tooltip-fade-enter.rc-tooltip-fade-lave-active {
+  opacity: 0;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  transition: opacity 0.2s;
+}
+
+.example-enter {
+  opacity: 0.01;
+}
+
+.example-enter.example-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
+.example-leave {
+  opacity: 1;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}

package/TopAppBar/README.md

@@ -0,0 +1,20 @@
+# TopAppBar
+
+### Design
+
+<a href="https://material.io/design/components/app-bars-top.html" target="_blank">https://material.io/design/components/app-bars-top.html</a>
+
+### Description
+
+Use `TopAppBar` component to display title, navigation or additional actions for your app.
+
+### Import
+
+```js
+import {
+  TopAppBar,
+  TopAppBarSection,
+  TopAppBarActionItem,
+  TopAppBarTitle
+} from "@webiny/ui/TopAppBar";
+```

package/TopAppBar/TopAppBar.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { TopAppBarProps as RmwcTopAppBarProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarProps = RmwcTopAppBarProps & {
+    /**
+     * Element children
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    /**
+     * CSS class name
+     */
+    className?: string;
+    /**
+     * Style object
+     */
+    style?: React.CSSProperties;
+};
+declare const TopAppBar: (props: TopAppBarProps) => JSX.Element;
+export { TopAppBar };

package/TopAppBar/TopAppBar.js

@@ -0,0 +1,13 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import * as React from "react";
+import { TopAppBar as RmwcTopAppBar, TopAppBarRow } from "@rmwc/top-app-bar";
+
+var TopAppBar = function TopAppBar(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RmwcTopAppBar, rest, /*#__PURE__*/React.createElement(TopAppBarRow, null, children));
+};
+
+export { TopAppBar };

package/TopAppBar/TopAppBar.stories.d.ts

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

package/TopAppBar/TopAppBar.stories.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./../TopAppBar/README.md";
+import { withKnobs, text } from "@storybook/addon-knobs";
+import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./icons/baseline-autorenew-24px.svg";
+import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./icons/baseline-cloud_done-24px.svg";
+import { ReactComponent as EnvelopeIcon } from "@svgr/webpack!./icons/baseline-email-24px.svg";
+import { ReactComponent as MenuIcon } from "@svgr/webpack!./icons/baseline-menu-24px.svg";
+import { TopAppBar, TopAppBarSection, TopAppBarNavigationIcon, TopAppBarTitle, TopAppBarActionItem } from "./index";
+var story = storiesOf("Components/TopAppBar", module);
+story.addDecorator(withKnobs);
+/**
+ * Top app bar is by default rendered with "position: fixed", which then messes up the presentation.
+ * For demonstration purposes, we had to switch to absolute positioning.
+ */
+
+var appendedCssOverrides = false;
+
+var appendCssOverrides = function appendCssOverrides() {
+  if (appendedCssOverrides) {
+    return;
+  }
+
+  appendedCssOverrides = true;
+  var css = ".top-app-bar-storybook .mdc-top-app-bar { position: relative; top: 0 !important }\n                .top-app-bar-storybook .mdc-top-app-bar img { background: none; }",
+      head = document.head || document.getElementsByTagName("head")[0],
+      style = document.createElement("style");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(css));
+  head.appendChild(style);
+};
+
+story.add("usage", function () {
+  appendCssOverrides();
+  var title = text("title", "Webiny");
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement("div", {
+    className: "top-app-bar-storybook"
+  }, /*#__PURE__*/React.createElement(TopAppBar, null, /*#__PURE__*/React.createElement(TopAppBarSection, {
+    alignStart: true
+  }, /*#__PURE__*/React.createElement(TopAppBarNavigationIcon, {
+    icon: /*#__PURE__*/React.createElement(MenuIcon, null)
+  }), /*#__PURE__*/React.createElement(TopAppBarTitle, null, title)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+    alignEnd: true
+  }, /*#__PURE__*/React.createElement(TopAppBarActionItem, {
+    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
+  }), /*#__PURE__*/React.createElement(TopAppBarActionItem, {
+    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
+  }), /*#__PURE__*/React.createElement(TopAppBarActionItem, {
+    icon: /*#__PURE__*/React.createElement(EnvelopeIcon, null)
+  }))))));
+}, {
+  info: {
+    propTables: [TopAppBar, TopAppBarSection, TopAppBarNavigationIcon, TopAppBarTitle, TopAppBarActionItem]
+  }
+});

package/TopAppBar/TopAppBarActionItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarActionItemProps as RmwcTopAppBarActionItemProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarActionItemProps = RmwcTopAppBarActionItemProps;
+declare const TopAppBarActionItem: (props: TopAppBarActionItemProps) => JSX.Element;
+export { TopAppBarActionItem };

package/TopAppBar/TopAppBarActionItem.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { TopAppBarActionItem as RmwcTopAppBarActionItem } from "@rmwc/top-app-bar";
+
+var TopAppBarActionItem = function TopAppBarActionItem(props) {
+  return /*#__PURE__*/React.createElement(RmwcTopAppBarActionItem, props);
+};
+
+export { TopAppBarActionItem };

package/TopAppBar/TopAppBarNavigationIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarNavigationIconProps = RmwcTopAppBarNavigationIconProps;
+declare const TopAppBarNavigationIcon: (props: TopAppBarNavigationIconProps) => JSX.Element;
+export { TopAppBarNavigationIcon };

package/TopAppBar/TopAppBarNavigationIcon.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon } from "@rmwc/top-app-bar";
+
+var TopAppBarNavigationIcon = function TopAppBarNavigationIcon(props) {
+  return /*#__PURE__*/React.createElement(RmwcTopAppBarNavigationIcon, props);
+};
+
+export { TopAppBarNavigationIcon };

package/TopAppBar/TopAppBarPrimary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarProps } from "./TopAppBar";
+export declare type TopAppBarPrimaryProps = TopAppBarProps;
+declare const TopAppBarPrimary: (props: TopAppBarPrimaryProps) => JSX.Element;
+export { TopAppBarPrimary };

package/TopAppBar/TopAppBarPrimary.js

@@ -0,0 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import * as React from "react";
+import { TopAppBar } from "./TopAppBar";
+
+var TopAppBarPrimary = function TopAppBarPrimary(props) {
+  var children = props.children,
+      other = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(TopAppBar, Object.assign({}, other, {
+    className: "primary"
+  }), children);
+};
+
+export { TopAppBarPrimary };

package/TopAppBar/TopAppBarSecondary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarProps } from "./TopAppBar";
+export declare type TopAppBarSecondaryProps = TopAppBarProps;
+declare const TopAppBarSecondary: (props: TopAppBarSecondaryProps) => JSX.Element;
+export { TopAppBarSecondary };

package/TopAppBar/TopAppBarSecondary.js

@@ -0,0 +1,17 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["style", "children"];
+import * as React from "react";
+import { TopAppBar } from "./TopAppBar";
+
+var TopAppBarSecondary = function TopAppBarSecondary(props) {
+  var _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      children = props.children,
+      other = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(TopAppBar, Object.assign({}, other, {
+    style: style
+  }), children);
+};
+
+export { TopAppBarSecondary };

package/TopAppBar/TopAppBarSection.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { TopAppBarSectionProps as RmwcTopAppBarSectionProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {
+    /**
+     * Element children
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    /**
+     * Style object.
+     */
+    style?: React.CSSProperties;
+    /**
+     * CSS class name.
+     */
+    className?: string;
+};
+declare const TopAppBarSection: (props: TopAppBarSectionProps) => JSX.Element;
+export { TopAppBarSection };

package/TopAppBar/TopAppBarSection.js

@@ -0,0 +1,13 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import * as React from "react";
+import { TopAppBarSection as RmwcTopAppBarSection } from "@rmwc/top-app-bar";
+
+var TopAppBarSection = function TopAppBarSection(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RmwcTopAppBarSection, rest, children);
+};
+
+export { TopAppBarSection };

package/TopAppBar/TopAppBarTitle.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { TopAppBarTitleProps as RmwcTopAppBarTitleProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarTitleProps = RmwcTopAppBarTitleProps & {
+    /**
+     * Element children
+     */
+    children: React.ReactNode[] | React.ReactNode;
+};
+declare const TopAppBarTitle: (props: TopAppBarTitleProps) => JSX.Element;
+export { TopAppBarTitle };