@webiny/ui 5.23.1 → 5.24.0-beta.0

package/Tabs/Tabs.d.ts

@@ -1,12 +1,16 @@
 import React, { ReactNode } from "react";
-export declare type TabsRenderProps = {
+export interface TabsRenderProps {
     switchTab(tabIndex: number): void;
-};
-export declare type TabsProps = {
+}
+export interface TabsPropsChildrenCallable {
+    (props: TabsRenderProps): ReactNode;
+}
+declare type TabsPropsChildren = TabsPropsChildrenCallable | ReactNode;
+export interface TabsProps {
     /**
      * A collection of tabs that needs to be rendered.
      */
-    children: ((props: TabsRenderProps) => ReactNode) | ReactNode;
+    children: TabsPropsChildren;
     /**
      * Append a class name.
      */
@@ -23,19 +27,21 @@ export declare type TabsProps = {
      * Function to change active tab.
      */
     updateValue?: (index: number) => void;
-};
-declare type State = {
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string;
+}
+interface State {
     activeTabIndex: number;
-};
+}
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
 export declare class Tabs extends React.Component<TabsProps, State> {
-    state: {
-        activeTabIndex: number;
-    };
-    switchTab(activeTabIndex: any): void;
-    renderChildren(children: any, activeIndex: any): JSX.Element;
+    state: State;
+    switchTab(activeTabIndex: number): void;
+    renderChildren(children: React.ReactNode, activeIndex: number): JSX.Element;
     render(): JSX.Element;
 }
 export {};

package/Tabs/Tabs.js

@@ -131,8 +131,8 @@ export var Tabs = /*#__PURE__*/function (_React$Component) {
       var children = this.props.children;
 
       if (typeof this.props.children === "function") {
-        // @ts-ignore
-        children = this.props.children({
+        var childrenCallable = this.props.children;
+        children = childrenCallable({
           switchTab: this.switchTab.bind(this)
         });
       }

package/Tags/Tags.d.ts

@@ -45,14 +45,8 @@ declare type State = {
     inputValue: string;
 };
 export declare class Tags extends React.Component<Props, State> {
-    state: {
-        inputValue: string;
-    };
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
+    state: State;
+    static defaultProps: Partial<Props>;
     render(): JSX.Element;
 }
 export default Tags;

package/Tags/Tags.js

@@ -79,15 +79,18 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
             inputValue: inputValue
           });
         },
-        onKeyDown: function onKeyDown(e) {
+        onKeyDown: function onKeyDown(ev) {
           if (!onChange) {
             return;
           }
 
           var newValue = Array.isArray(value) ? _toConsumableArray(value) : [];
           var inputValue = _this2.state.inputValue || "";
+          /**
+           * We must cast as keycode only works with Event | string type.
+           */
 
-          switch (keycode(e)) {
+          switch (keycode(ev)) {
             case "enter":
               if (inputValue) {
                 newValue.push(inputValue);
@@ -141,7 +144,8 @@ export var Tags = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Tags, "defaultProps", {
   validation: {
-    isValid: null
+    isValid: null,
+    message: null
   }
 });
 

package/Tooltip/Tooltip.d.ts

@@ -1,23 +1,21 @@
 import * as React from "react";
 import "rc-tooltip/assets/bootstrap_white.css";
 import "./style.scss";
-declare type TooltipProps = {
+interface TooltipProps {
     children: React.ReactNode;
     content: React.ReactNode;
     trigger?: string;
     placement?: string;
     className?: string;
-};
-declare type State = {
+}
+interface 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;
-    };
+    state: State;
     onVisibleChange: (visible: boolean) => void;
     render(): JSX.Element;
 }

package/Tooltip/Tooltip.js

@@ -44,7 +44,12 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   _createClass(Tooltip, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(RcTooltip, Object.assign({
+      return /*#__PURE__*/React.createElement(RcTooltip
+      /**
+       * rc-tooltip types do not have animation as prop, but the rc-tooltip lib has.
+       */
+      // @ts-ignore
+      , Object.assign({
         animation: "fade",
         onVisibleChange: this.onVisibleChange,
         overlay: this.props.content

package/TopProgressBar/TopProgressBar.d.ts

@@ -1,15 +1,15 @@
 import * as React from "react";
 import nprogress from "nprogress";
 import "./style.scss";
-export declare type TopProgressBarRender = {
+export interface TopProgressBarRender {
     start: () => void;
     finish: () => void;
-    nprogress: nprogress;
-};
-export declare type TopProgressBarProps = {
+    nprogress: typeof nprogress;
+}
+export interface TopProgressBarProps {
     /**
      * Elements that require top loading bar to be shown.
      */
     children: (params: TopProgressBarRender) => React.ReactElement;
-};
+}
 export declare const TopProgressBar: (props: TopProgressBarProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;

package/Typography/Typography.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "5.23.1",
+	"version": "5.24.0-beta.0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -81,11 +81,16 @@
 		"@storybook/addon-knobs": "^5.0.5",
 		"@storybook/addon-links": "^5.0.5",
 		"@storybook/react": "^5.2.8",
-		"@webiny/cli": "^5.23.1",
-		"@webiny/form": "^5.23.1",
-		"@webiny/project-utils": "^5.23.1",
-		"@webiny/storybook-utils": "^5.23.1",
-		"@webiny/validation": "^5.23.1",
+		"@types/nprogress": "^0.2.0",
+		"@types/rc-tooltip": "^3.7.6",
+		"@types/react-custom-scrollbars": "^4.0.10",
+		"@types/react-transition-group": "^4.4.4",
+		"@types/shortid": "^0.0.29",
+		"@webiny/cli": "^5.24.0-beta.0",
+		"@webiny/form": "^5.24.0-beta.0",
+		"@webiny/project-utils": "^5.24.0-beta.0",
+		"@webiny/storybook-utils": "^5.24.0-beta.0",
+		"@webiny/validation": "^5.24.0-beta.0",
 		"babel-loader": "^8.0.0-beta.6",
 		"babel-plugin-emotion": "^9.2.8",
 		"execa": "^5.0.0",
@@ -133,5 +138,5 @@
 			]
 		}
 	},
-	"gitHead": "a726d09d2647d13e5a4f376cef23463564ef7ca0"
+	"gitHead": "05b90b92bbaf2ef3adf275d008c4641580cf5f42"
 }