@webiny/ui 5.23.1-beta.0 → 5.24.0

package/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ListItem } from "../List";
 import { AccordionItem } from "./AccordionItem";
-export declare type AccordionProps = {
+export interface AccordionProps {
     /**
      * Element displayed when accordion is expanded.
      */
@@ -14,6 +14,6 @@ export declare type AccordionProps = {
      * Append a class name
      */
     className?: string;
-};
-declare const Accordion: (props: AccordionProps) => JSX.Element;
+}
+declare const Accordion: React.FC<AccordionProps>;
 export { Accordion };

package/Accordion/AccordionItem.js

@@ -61,6 +61,10 @@ var defaultStyle = {
   pointerEvents: "none",
   overflow: "hidden"
 };
+
+/**
+ * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.
+ */
 var transitionStyles = {
   entering: {
     opacity: 0,

package/AutoComplete/AutoComplete.d.ts

@@ -5,33 +5,22 @@ export declare enum Placement {
     top = "top",
     bottom = "bottom"
 }
-export declare type Props = AutoCompleteBaseProps & {
+export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange"> {
     placement?: Placement;
-    onChange?: (value: any, selection: any) => void;
+    onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
     noResultFound?: Function;
-};
+}
 declare type State = {
     inputValue: string;
 };
 interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: Props["options"];
-    placement: Props["placement"];
+    options: AutoCompleteProps["options"];
+    placement: AutoCompleteProps["placement"];
 }
-declare class AutoComplete extends React.Component<Props, State> {
-    static defaultProps: {
-        valueProp: string;
-        textProp: string;
-        options: any[];
-        placement: Placement;
-        /**
-         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.
-         */
-        renderItem(item: any): JSX.Element;
-    };
-    state: {
-        inputValue: string;
-    };
+declare class AutoComplete extends React.Component<AutoCompleteProps, State> {
+    static defaultProps: Partial<AutoCompleteProps>;
+    state: State;
     /**
      * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
      */

package/AutoComplete/AutoComplete.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _isEqual from "lodash/isEqual";
-var _excluded = ["className", "options", "onChange", "value", "valueProp", "textProp", "onInput", "validation", "placement"],
+var _excluded = ["className", "options", "onChange", "value", "onInput", "validation", "placement"],
     _excluded2 = ["getInputProps", "openMenu"];
 import * as React from "react";
 import Downshift from "downshift";
@@ -204,12 +204,11 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           options = _this$props2.options,
           _onChange = _this$props2.onChange,
           value = _this$props2.value,
-          valueProp = _this$props2.valueProp,
-          textProp = _this$props2.textProp,
           onInput = _this$props2.onInput,
           _this$props2$validati = _this$props2.validation,
           validation = _this$props2$validati === void 0 ? {
-        isValid: null
+        isValid: null,
+        message: null
       } : _this$props2$validati,
           placement = _this$props2.placement,
           otherInputProps = _objectWithoutProperties(_this$props2, _excluded); // Downshift related props.

package/AutoComplete/MultiAutoComplete.d.ts

@@ -1,8 +1,12 @@
 import * as React from "react";
 import { ControllerStateAndHelpers } from "downshift";
 import { AutoCompleteBaseProps } from "./types";
-import { Props } from "./AutoComplete";
-export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
+import { AutoCompleteProps } from "./AutoComplete";
+interface SelectionItem {
+    name: string;
+}
+declare type MultiAutoCompletePropsValue = SelectionItem[];
+export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
      * Prevents adding the same item to the list twice.
      */
@@ -24,7 +28,11 @@ export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
      */
     renderListItemLabel?: Function;
     noResultFound?: Function;
-};
+    /**
+     * Value is an array of strings. But can be undefined.
+     */
+    value?: MultiAutoCompletePropsValue;
+}
 declare type State = {
     inputValue: string;
     multipleSelectionPage: number;
@@ -33,43 +41,19 @@ declare type State = {
     reorderFormValue: string;
 };
 interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: Props["options"];
+    options: AutoCompleteProps["options"];
     unique: boolean;
 }
 export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {
-    static defaultProps: {
-        valueProp: string;
-        textProp: string;
-        unique: boolean;
-        options: any[];
-        useSimpleValues: boolean;
-        useMultipleSelectionList: boolean;
-        /**
-         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderItem(item: any): JSX.Element;
-        /**
-         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderListItemLabel(item: any): any;
-    };
-    state: {
-        inputValue: string;
-        multipleSelectionPage: number;
-        multipleSelectionSearch: string;
-        reorderFormVisible: string;
-        reorderFormValue: string;
-    };
+    static defaultProps: Partial<MultiAutoCompleteProps>;
+    state: State;
     /**
      * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
      */
-    downshift: React.RefObject<any>;
-    assignedValueAfterClearing: {
-        set: boolean;
-        selection: any;
-    };
-    setMultipleSelectionPage: (multipleSelectionPage: any) => void;
-    setMultipleSelectionSearch: (multipleSelectionSearch: any) => void;
+    private downshift;
+    private assignedValueAfterClearing;
+    setMultipleSelectionPage: (multipleSelectionPage: number) => void;
+    setMultipleSelectionSearch: (multipleSelectionSearch: string) => void;
     getOptions(): any[];
     /**
      * Renders options - based on user's input. It will try to match input text with available options.

package/AutoComplete/MultiAutoComplete.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["options", "allowFreeInput", "useSimpleValues", "unique", "value", "onChange", "valueProp", "textProp", "onInput", "validation", "useMultipleSelectionList", "description"],
+var _excluded = ["unique", "value", "onChange", "onInput", "validation", "useMultipleSelectionList", "description"],
     _excluded2 = ["getInputProps", "openMenu"];
 import * as React from "react";
 import Downshift from "downshift";
@@ -466,18 +466,14 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
 
       var props = this.props,
           _this$props3 = this.props,
-          rawOptions = _this$props3.options,
-          allowFreeInput = _this$props3.allowFreeInput,
-          useSimpleValues = _this$props3.useSimpleValues,
           unique = _this$props3.unique,
           value = _this$props3.value,
           _onChange = _this$props3.onChange,
-          valueProp = _this$props3.valueProp,
-          textProp = _this$props3.textProp,
           onInput = _this$props3.onInput,
           _this$props3$validati = _this$props3.validation,
           validation = _this$props3$validati === void 0 ? {
-        isValid: null
+        isValid: null,
+        message: null
       } : _this$props3$validati,
           useMultipleSelectionList = _this$props3.useMultipleSelectionList,
           description = _this$props3.description,
@@ -487,7 +483,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(autoCompleteStyle, props.className)
       }, /*#__PURE__*/React.createElement(Downshift, {
-        defaultSelectedItem: null // @ts-ignore
+        defaultSelectedItem: null // @ts-ignore there is no className on Downshift
         ,
         className: autoCompleteStyle,
         itemToString: function itemToString(item) {

package/AutoComplete/utils.d.ts

@@ -1,9 +1,15 @@
-declare type Props = {
+interface Option {
+    aliases?: string[];
+    index?: number;
+    name?: string;
+    [key: string]: any;
+}
+interface Props {
     useSimpleValues?: boolean;
     valueProp?: string;
     textProp?: string;
-};
-export declare const getOptionValue: (option: any, props: Props) => any;
-export declare const getOptionText: (option: any, props: Props) => any;
-export declare const findInAliases: (option: any, search?: string) => any;
+}
+export declare const getOptionValue: (option: Option | string, props: Props) => string | undefined;
+export declare const getOptionText: (option: Option | string, props: Props) => string | undefined;
+export declare const findInAliases: (option: Option, search?: string) => boolean;
 export {};

package/AutoComplete/utils.js

@@ -13,7 +13,7 @@ export var getOptionText = function getOptionText(option, props) {
   return option;
 };
 export var findInAliases = function findInAliases(option, search) {
-  return option.aliases.some(function (alias) {
+  return (option.aliases || []).some(function (alias) {
     return alias.toLowerCase().includes(search.toLowerCase());
   });
 };

package/Button/Button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FabProps } from "@rmwc/fab";
 import { IconProps } from "../Icon/Icon";
 import { SyntheticEvent } from "react";
-export declare type ButtonProps = {
+export interface ButtonProps {
     flat?: boolean;
     small?: boolean;
     onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;
@@ -14,28 +14,28 @@ export declare type ButtonProps = {
         [key: string]: any;
     };
     "data-testid"?: string;
-};
+}
 /**
  * Shows a default button, used typically when action is not of high priority.
  * @param props
  * @returns {*}
  * @constructor
  */
-export declare const ButtonDefault: (props: ButtonProps) => JSX.Element;
+export declare const ButtonDefault: React.FC<ButtonProps>;
 /**
  * Shows primary button, eg. for submitting forms.
  * @param props
  * @returns {*}
  * @constructor
  */
-export declare const ButtonPrimary: (props: ButtonProps) => JSX.Element;
+export declare const ButtonPrimary: React.FC<ButtonProps>;
 /**
  * Shows a secondary button - eg. for doing a reset on a form.
  * @param props
  * @returns {*}
  * @constructor
  */
-export declare const ButtonSecondary: (props: ButtonProps) => JSX.Element;
+export declare const ButtonSecondary: React.FC<ButtonProps>;
 export declare type ButtonFloatingProps = ButtonProps & FabProps & {
     label?: React.ReactNode;
     icon?: React.ReactNode;
@@ -48,11 +48,11 @@ export declare type ButtonFloatingProps = ButtonProps & FabProps & {
  * @returns {*}
  * @constructor
  */
-export declare const ButtonFloating: (props: ButtonFloatingProps) => JSX.Element;
+export declare const ButtonFloating: React.FC<ButtonFloatingProps>;
 /**
  * Shows an icon, suitable to be shown inside of a button.
  * @param props
  * @returns {*}
  * @constructor
  */
-export declare const ButtonIcon: (props: IconProps) => JSX.Element;
+export declare const ButtonIcon: React.FC<IconProps>;

package/Checkbox/Checkbox.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+interface Props extends FormComponentProps {
     label?: React.ReactNode;
     disabled?: boolean;
-    onClick?: Function;
+    onClick?: (value: boolean) => void;
     indeterminate?: boolean;
     description?: string;
-};
+}
 /**
  * Single Checkbox component can be used to store simple boolean values.
  *
@@ -14,11 +14,7 @@ declare type Props = FormComponentProps & {
  * In that case, each Checkbox component must receive value and onChange callback via props.
  */
 declare class Checkbox extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
+    static defaultProps: Partial<Props>;
     onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }

package/Checkbox/Checkbox.js

@@ -69,7 +69,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Checkbox, "defaultProps", {
   validation: {
-    isValid: null
+    isValid: null,
+    message: null
   }
 });
 

package/CodeEditor/CodeEditor.d.ts

@@ -11,11 +11,7 @@ declare type Props = FormComponentProps & {
  * CodeEditor component can be used to store simple boolean values.
  */
 declare class CodeEditor extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
+    static defaultProps: Partial<Props>;
     onChange: (value: string) => void;
     render(): JSX.Element;
 }

package/CodeEditor/CodeEditor.js

@@ -81,7 +81,8 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(CodeEditor, "defaultProps", {
   validation: {
-    isValid: null
+    isValid: null,
+    message: null
   }
 });
 

package/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { ColorResult } from "react-color";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & {
     label?: string;
@@ -12,14 +13,10 @@ declare class ColorPicker extends React.Component<Props> {
     state: {
         showColorPicker: boolean;
     };
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
+    static defaultProps: Partial<Props>;
     handleClick: () => void;
     handleClose: () => void;
-    handleChange: (color: any) => void;
+    handleChange: (color: ColorResult) => void;
     render(): JSX.Element;
 }
 export { ColorPicker };

package/ColorPicker/ColorPicker.js

@@ -133,7 +133,8 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(ColorPicker, "defaultProps", {
   validation: {
-    isValid: null
+    isValid: null,
+    message: null
   }
 });
 

package/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 interface ChildrenRenderProp {
-    showConfirmation: (onAccept?: Function, onCancel?: Function) => any;
+    showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;
 }
 interface ConfirmationCallbacks {
     onAccept: Function;

package/ConfirmationDialog/withConfirmation.d.ts

@@ -3,7 +3,7 @@ declare type ConfirmationProps = {
     title?: React.ReactNode;
     message?: React.ReactNode;
 };
-declare type WithConfirmationParams = (props: any) => ConfirmationProps;
+declare type WithConfirmationParams = (props: Record<string, any>) => ConfirmationProps;
 export declare type WithConfirmationProps = {
     showConfirmation: (confirm: Function, cancel: Function) => void;
 };

package/Dialog/Dialog.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import { DialogProps as RmwcDialogProps, DialogOnCloseEventT, DialogContentProps as RmwcDialogContentProps, DialogTitleProps as RmwcDialogTitleProps, DialogActionsProps as RmwcDialogActionsProps, DialogButtonProps as RmwcDialogButtonProps } from "@rmwc/dialog";
 export declare type DialogOnClose = (event: DialogOnCloseEventT) => void;
 export declare type DialogProps = RmwcDialogProps & {
-    children: any;
     className?: string;
     style?: React.CSSProperties;
     open?: boolean;
@@ -11,7 +10,7 @@ export declare type DialogProps = RmwcDialogProps & {
 };
 export declare class Dialog extends React.Component<DialogProps> {
     container?: Element;
-    constructor(props: any);
+    constructor(props: DialogProps);
     render(): React.ReactPortal;
 }
 export declare type DialogTitleProps = RmwcDialogTitleProps & {

package/DynamicFieldset/Fieldset.d.ts

@@ -1,14 +1,27 @@
 import * as React from "react";
+interface ChildrenRenderPropRowCallableParams {
+    index: number;
+    data: Record<string, any>;
+}
+interface ChildrenRenderPropRowCallable {
+    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;
+}
+interface ChildrenRenderPropHeaderCallable {
+    (): React.ReactNode;
+}
+interface ChildrenRenderPropEmptyCallable {
+    (): React.ReactNode;
+}
 interface ChildrenRenderProp {
     actions: {
         add: Function;
         remove: Function;
     };
-    header: Function;
-    row: Function;
-    empty: Function;
+    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;
+    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
+    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;
 }
-declare type FieldsetProps = {
+interface FieldsetProps {
     value?: Array<Object>;
     description?: string;
     validation?: {
@@ -17,12 +30,9 @@ declare type FieldsetProps = {
     };
     onChange?: Function;
     children: (props: ChildrenRenderProp) => React.ReactNode;
-};
+}
 declare class Fieldset extends React.Component<FieldsetProps> {
-    static defaultProps: {
-        value: any[];
-        description: any;
-    };
+    static defaultProps: Partial<FieldsetProps>;
     header: React.ReactNode;
     rows: React.ReactNode;
     empty: React.ReactNode;
@@ -32,9 +42,9 @@ declare class Fieldset extends React.Component<FieldsetProps> {
     };
     removeData: (index: number) => void;
     addData: (index?: number) => void;
-    renderHeader: (cb: () => React.ReactNode) => void;
-    renderRow: (cb: (params: Object) => React.ReactNode) => void;
-    renderEmpty: (cb: () => React.ReactNode) => void;
+    renderHeader: (cb: () => React.ReactNode) => React.ReactNode;
+    renderRow: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
+    renderEmpty: (cb: () => React.ReactNode) => React.ReactNode;
     renderComponent(): {};
     render(): JSX.Element;
 }

package/DynamicFieldset/Fieldset.js

@@ -78,6 +78,7 @@ var Fieldset = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderHeader", function (cb) {
       _this.header = cb();
+      return null;
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderRow", function (cb) {
@@ -90,10 +91,12 @@ var Fieldset = /*#__PURE__*/function (_React$Component) {
           index: index
         }));
       });
+      return null;
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderEmpty", function (cb) {
       _this.empty = cb();
+      return null;
     });
 
     return _this;

package/Helpers/ClassNames.d.ts

@@ -6,5 +6,5 @@
  * @param {*} propList
  * @param {*} appendClasses
  */
-declare const getClasses: (propList: any, appendClasses: any) => any;
+declare const getClasses: (propList: Record<string, any>, appendClasses: string[] | string) => Record<string, any>;
 export { getClasses };

package/Icon/Icon.d.ts

@@ -3,7 +3,7 @@ export declare type IconProps = {
     /**
      * SvgComponent containing the svg icon
      */
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement;
     /**
      * Optional onclick handler
      */
@@ -16,9 +16,6 @@ export declare type IconProps = {
 };
 /**
  * Use Icon component to display an icon.
- * @param props
- * @returns {*}
- * @constructor
  */
-declare const Icon: (props: IconProps) => 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>)>;
+declare const Icon: React.FC<IconProps>;
 export { Icon };

package/Icon/Icon.js

@@ -10,9 +10,6 @@ var webinyIcon = /*#__PURE__*/css({}, {
 }, "label:webinyIcon;");
 /**
  * Use Icon component to display an icon.
- * @param props
- * @returns {*}
- * @constructor
  */
 
 var Icon = function Icon(props) {

package/ImageEditor/ImageEditor.d.ts

@@ -1,47 +1,45 @@
 import * as React from "react";
-import { ImageEditorTool } from "./toolbar/types";
-export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
-declare type RenderPropArgs = {
+import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
+interface RenderPropArgs {
     render: Function;
     getCanvasDataUrl: () => string;
     activeTool?: ImageEditorTool;
     applyActiveTool: Function;
     cancelActiveTool: Function;
-};
-declare type Props = {
+}
+interface PropsOptions {
+    autoEnable: boolean;
+}
+interface Props {
     src: string;
     tools: ToolbarTool[];
     options?: {
-        [key: string]: any;
+        flip: PropsOptions;
+        filter: PropsOptions;
+        crop: PropsOptions;
+        rotate: PropsOptions;
     };
     onToolActivate?: Function;
     onToolDeactivate?: Function;
     children?: (props: RenderPropArgs) => React.ReactNode;
-};
-declare type State = {
-    tool?: {
-        [key: string]: any;
-    };
+}
+interface State {
+    tool?: ImageEditorTool;
     src: string;
-};
+}
 declare class ImageEditor extends React.Component<Props, State> {
-    static defaultProps: {
-        tools: string[];
-    };
-    state: {
-        tool: any;
-        src: string;
-    };
-    canvas: React.RefObject<unknown>;
-    image: any;
+    static defaultProps: Partial<Props>;
+    state: State;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image: HTMLImageElement;
     componentDidMount(): void;
     updateCanvas: () => void;
-    activateTool: (tool: string | ImageEditorTool) => void;
+    activateTool: (tool: ToolbarTool | ImageEditorTool) => void;
     deactivateTool: () => void;
     getCanvasDataUrl: () => string;
     applyActiveTool: () => Promise<void>;
     cancelActiveTool: () => Promise<void>;
-    getToolOptions: (tool: ImageEditorTool) => any;
+    getToolOptions: (tool: ImageEditorTool) => {};
     render(): {};
 }
 export { ImageEditor };