@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/Section/index.js

@@ -1,48 +1,16 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "title"];
-import * as React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { Typography } from "../Typography";
-import { Elevation } from "../Elevation";
-var SectionWrapper = /*#__PURE__*/styled("div", {
-  target: "e12inb750",
-  label: "SectionWrapper"
-})({
-  backgroundColor: "var(--mdc-theme-background)",
-  padding: "0 0 25px 0"
-});
-var titleStyle = /*#__PURE__*/css({
-  display: "flex",
-  alignItems: "center",
-  color: "var(--mdc-theme-on-surface)",
-  ".tooltip-content-wrapper": {
-    lineHeight: "100%",
-    svg: {
-      height: 13,
-      color: "var(--mdc-theme-on-surface)"
-    }
-  }
-}, "label:titleStyle;");
-var ElevationContent = /*#__PURE__*/styled("div", {
-  target: "e12inb751",
-  label: "ElevationContent"
-})({
-  padding: 20,
-  backgroundColor: "#fff"
-});
-
-var Section = function Section(_ref) {
-  var children = _ref.children,
-      title = _ref.title,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(SectionWrapper, props, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Typography, {
-    className: titleStyle,
-    use: "overline"
-  }, title)), /*#__PURE__*/React.createElement(Elevation, {
-    z: 2
-  }, /*#__PURE__*/React.createElement(ElevationContent, null, children)));
+import React from "react";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `Section` component or reach out on Slack.
+ */
+const Section = ({
+  children,
+  title,
+  ...props
+}) => {
+  console.warn("The `Section` component is deprecated and will be removed in future releases.");
+  return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", null, children));
 };
+export default Section;
 
-export default Section;
+//# sourceMappingURL=index.js.map

package/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Section","children","title","props","console","warn","createElement"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface SectionProps {\n    title?: string;\n    children: React.ReactNode;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please implement your own `Section` component or reach out on Slack.\n */\nconst Section = ({ children, title, ...props }: SectionProps) => {\n    console.warn(\"The `Section` component is deprecated and will be removed in future releases.\");\n    return (\n        <div {...props}>\n            <div>{title}</div>\n            <div>{children}</div>\n        </div>\n    );\n};\n\nexport default Section;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAoB,CAAC,KAAK;EAC7DC,OAAO,CAACC,IAAI,CAAC,+EAA+E,CAAC;EAC7F,oBACIN,KAAA,CAAAO,aAAA,QAASH,KAAK,eACVJ,KAAA,CAAAO,aAAA,cAAMJ,KAAW,CAAC,eAClBH,KAAA,CAAAO,aAAA,cAAML,QAAc,CACnB,CAAC;AAEd,CAAC;AAED,eAAeD,OAAO","ignoreList":[]}

package/Select/Select.d.ts

@@ -1,22 +1,55 @@
-import * as React from "react";
-import { SelectProps as RmwcSelectProps } from "@rmwc/select";
-import { FormComponentProps } from "../types";
-declare type SelectProps = FormComponentProps & RmwcSelectProps & {
+import React from "react";
+import type { FormComponentProps } from "../types";
+export interface FormattedOption extends Omit<React.AllHTMLAttributes<any>, "label"> {
+    label: React.ReactNode;
+    value?: string;
+    options?: FormattedOption[];
+}
+export interface RmwcSelectProps {
+    /** The value for a controlled select. */
+    value?: string;
+    /** Adds help text to the field */
+    helpText?: React.ReactNode;
+    /** Options accepts flat arrays, value => label maps, and more. See examples for details. */
+    options?: FormattedOption[] | string[] | {
+        [value: string]: string;
+    };
+    /** A label for the form control. */
+    label?: string;
+    /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */
+    placeholder?: string;
+    /** Makes the select outlined. */
+    outlined?: boolean;
+    /** Makes the Select visually invalid. This is sometimes automatically my material-components-web.  */
+    invalid?: boolean;
+    /** Makes the Select disabled.  */
+    disabled?: boolean;
+    /** Makes the Select required.  */
+    required?: boolean;
+    /** Props for the root element. By default, additional props spread to the native select element.  */
+    /** A reference to the native select element. Not applicable when `enhanced` is true. */
+    inputRef?: (ref: HTMLSelectElement | null) => void;
+    /** Add a leading icon. */
+    icon?: React.ReactNode;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+}
+export type SelectProps = FormComponentProps & RmwcSelectProps & {
     label?: string;
     disabled?: boolean;
     description?: string;
     placeholder?: string;
     box?: string;
-    children?: Array<React.ReactElement<"option"> | React.ReactElement<"optgroup">>;
-    rootProps?: Object;
-    className?: string;
-};
-export declare const Select: {
-    (props: SelectProps): JSX.Element;
-    defaultProps: {
-        validation: {
-            isValid: any;
-        };
+    children?: (React.ReactElement<"option"> | React.ReactElement<"optgroup">)[];
+    rootProps?: {
+        [key: string]: any;
     };
+    className?: string;
+    size?: "small" | "medium" | "large";
 };
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Select` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const Select: (props: SelectProps) => React.JSX.Element;
 export default Select;

package/Select/Select.js

@@ -1,60 +1,131 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "description", "validation"];
-import * as React from "react";
-import { Select as RmwcSelect } from "@rmwc/select";
-import { FormElementMessage } from "../FormElementMessage";
-import { css } from "emotion";
-import classNames from "classnames";
-var noLabel = /*#__PURE__*/css({
-  "&.mdc-select": {
-    height: 35,
-    ".mdc-select__native-control": {
-      paddingTop: 0
-    },
-    "&.mdc-select--box": {
-      ".mdc-select__native-control": {
-        height: 35,
-        paddingTop: 5
+import React, { useMemo } from "react";
+import { Select as AdminSelect } from "@webiny/admin-ui";
+/**
+ * TODO verify that this is correct method get all options.
+ */
+const getOptions = initialOptions => {
+  if (!initialOptions) {
+    return [];
+  } else if (Array.isArray(initialOptions)) {
+    const options = [];
+    for (const option of initialOptions) {
+      if (typeof option === "string") {
+        options.push({
+          label: option,
+          value: option
+        });
+        continue;
       }
+      options.push({
+        label: String(option.label),
+        value: option.value,
+        options: getOptions(option.options)
+      });
     }
+    return options;
   }
-}, "label:noLabel;");
+  return Object.keys(initialOptions).map(key => {
+    return {
+      label: initialOptions[key],
+      value: key
+    };
+  });
+};
+
 /**
- * Select component lets users choose a value from given set of options.
+ * Select component lets users to manually build the option list.
  */
+function getChildrenOptions(children) {
+  return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === "option" || child.type === "optgroup")).map(child => {
+    const element = child;
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === "option") {
+      return {
+        value: element.props.value || "",
+        label: element.props.children?.toString() || ""
+      };
+    }
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === "optgroup") {
+      return {
+        label: element.props.label || "",
+        options: getChildrenOptions(element.props.children)
+      };
+    }
+    return null; // This shouldn't be reached
+  }).filter(Boolean);
+}
 
-var skipProps = ["validate"];
-
-var getRmwcProps = function getRmwcProps(props) {
-  var newProps = {};
-  Object.keys(props).filter(function (name) {
-    return !skipProps.includes(name);
-  }).forEach(function (name) {
-    return newProps[name] = props[name];
-  });
+/**
+ * Select component lets users choose a value from given set of options.
+ */
+const skipProps = ["validate", "form"];
+const getRmwcProps = props => {
+  const newProps = {};
+  Object.keys(props).filter(name => !skipProps.includes(name))
+  // @ts-expect-error
+  .forEach(name => newProps[name] = props[name]);
   return newProps;
 };
 
-export var Select = function Select(props) {
-  var value = props.value,
-      description = props.description,
-      validation = props.validation,
-      other = _objectWithoutProperties(props, _excluded);
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Select` component from the `@webiny/admin-ui` package instead.
+ */
+export const Select = props => {
+  const {
+    value: initialValue,
+    ...other
+  } = props;
+  const value = initialValue === null || initialValue === undefined ? "" : initialValue;
+  const options = getOptions(other.options);
+  const childrenOptions = getChildrenOptions(props.children);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSelect, Object.assign({}, getRmwcProps(other), {
-    value: value,
-    className: classNames("webiny-ui-select", props.className, _defineProperty({}, noLabel, !props.label)),
-    onChange: function onChange(e) {
-      props.onChange && props.onChange(e.target.value);
+  // Memoize the label and placeholder values based on the component size.
+  const {
+    label,
+    placeholder
+  } = useMemo(() => {
+    const {
+      size,
+      label,
+      placeholder: placeholderText
+    } = props;
+
+    // If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.
+    const placeholder = placeholderText?.trim() || undefined;
+
+    // For small or medium size, we set only the placeholder, using label as fallback.
+    if (size === "small" || size === "medium") {
+      return {
+        label: undefined,
+        placeholder: placeholder || label
+      };
     }
-  })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-    error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
-};
-Select.defaultProps = {
-  validation: {
-    isValid: null
-  }
+
+    // For other sizes, use the provided label and placeholder.
+    return {
+      label,
+      placeholder
+    };
+  }, [props.label, props.placeholder, props.size]);
+  const size = useMemo(() => {
+    if (props.size === "medium") {
+      return "md";
+    }
+    if (props.size === "large") {
+      return "lg";
+    }
+    return "lg";
+  }, [props.size]);
+  return /*#__PURE__*/React.createElement(AdminSelect, Object.assign({}, getRmwcProps(other), {
+    options: [...options, ...childrenOptions],
+    value: value,
+    label: label,
+    placeholder: placeholder,
+    size: size,
+    onChange: value => props?.onChange?.(value),
+    displayResetAction: false
+  }));
 };
-export default Select;
+export default Select;
+
+//# sourceMappingURL=Select.js.map

package/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Select","AdminSelect","getOptions","initialOptions","Array","isArray","options","option","push","label","value","String","Object","keys","map","key","getChildrenOptions","children","Children","toArray","filter","child","isValidElement","type","element","props","toString","Boolean","skipProps","getRmwcProps","newProps","name","includes","forEach","initialValue","other","undefined","childrenOptions","placeholder","size","placeholderText","trim","createElement","assign","onChange","displayResetAction"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { FormComponentProps } from \"~/types\";\nimport { Select as AdminSelect } from \"@webiny/admin-ui\";\nimport type { SelectOptionDto } from \"@webiny/admin-ui\";\n\nexport interface FormattedOption extends Omit<React.AllHTMLAttributes<any>, \"label\"> {\n    label: React.ReactNode;\n    value?: string;\n    options?: FormattedOption[];\n}\n\nexport interface RmwcSelectProps {\n    /** The value for a controlled select. */\n    value?: string;\n    /** Adds help text to the field */\n    helpText?: React.ReactNode;\n    /** Options accepts flat arrays, value => label maps, and more. See examples for details. */\n    options?:\n        | FormattedOption[]\n        | string[]\n        | {\n              [value: string]: string;\n          };\n    /** A label for the form control. */\n    label?: string;\n    /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */\n    placeholder?: string;\n    /** Makes the select outlined. */\n    outlined?: boolean;\n    /** Makes the Select visually invalid. This is sometimes automatically my material-components-web.  */\n    invalid?: boolean;\n    /** Makes the Select disabled.  */\n    disabled?: boolean;\n    /** Makes the Select required.  */\n    required?: boolean;\n    /** Props for the root element. By default, additional props spread to the native select element.  */\n    // rootProps?: Object;\n    /** A reference to the native select element. Not applicable when `enhanced` is true. */\n    inputRef?: (ref: HTMLSelectElement | null) => void;\n    /** Add a leading icon. */\n    icon?: React.ReactNode;\n    /** Advanced: A reference to the MDCFoundation. */\n    foundationRef?: any;\n}\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: (React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">)[];\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: {\n            [key: string]: any;\n        };\n\n        // A className for the root element.\n        className?: string;\n\n        // Size - small, medium or large\n        size?: \"small\" | \"medium\" | \"large\";\n    };\n\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): SelectOptionDto[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: SelectOptionDto[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: String(option.label),\n                value: option.value,\n                options: getOptions(option.options)\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users to manually build the option list.\n */\nfunction getChildrenOptions(children: React.ReactNode): SelectOptionDto[] {\n    return React.Children.toArray(children)\n        .filter(\n            child =>\n                React.isValidElement(child) &&\n                (child.type === \"option\" || child.type === \"optgroup\")\n        )\n        .map(child => {\n            const element = child as React.ReactElement<{\n                value?: string;\n                label?: string;\n                children?: React.ReactNode;\n            }>;\n\n            if (React.isValidElement(child) && child.type === \"option\") {\n                return {\n                    value: element.props.value || \"\",\n                    label: element.props.children?.toString() || \"\"\n                };\n            }\n\n            if (React.isValidElement(child) && child.type === \"optgroup\") {\n                return {\n                    label: element.props.label || \"\",\n                    options: getChildrenOptions(element.props.children)\n                };\n            }\n\n            return null; // This shouldn't be reached\n        })\n        .filter(Boolean) as SelectOptionDto[];\n}\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-expect-error\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Select` component from the `@webiny/admin-ui` package instead.\n */\nexport const Select = (props: SelectProps) => {\n    const { value: initialValue, ...other } = props;\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const options = getOptions(other.options);\n    const childrenOptions = getChildrenOptions(props.children);\n\n    // Memoize the label and placeholder values based on the component size.\n    const { label, placeholder } = useMemo(() => {\n        const { size, label, placeholder: placeholderText } = props;\n\n        // If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.\n        const placeholder = placeholderText?.trim() || undefined;\n\n        // For small or medium size, we set only the placeholder, using label as fallback.\n        if (size === \"small\" || size === \"medium\") {\n            return {\n                label: undefined,\n                placeholder: placeholder || label\n            };\n        }\n\n        // For other sizes, use the provided label and placeholder.\n        return {\n            label,\n            placeholder\n        };\n    }, [props.label, props.placeholder, props.size]);\n\n    const size = useMemo(() => {\n        if (props.size === \"medium\") {\n            return \"md\";\n        }\n\n        if (props.size === \"large\") {\n            return \"lg\";\n        }\n\n        return \"lg\";\n    }, [props.size]);\n\n    return (\n        <AdminSelect\n            {...getRmwcProps(other)}\n            options={[...options, ...childrenOptions]}\n            value={value}\n            label={label}\n            placeholder={placeholder}\n            size={size}\n            onChange={value => props?.onChange?.(value)}\n            displayResetAction={false}\n        />\n    );\n};\n\nexport default Select;\n"],"mappings":"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","ignoreList":[]}

package/Select/index.js

@@ -1 +1,3 @@
-export * from "./Select";
+export * from "./Select";
+
+//# sourceMappingURL=index.js.map

package/Select/index.js.map

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

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+import React from "react";
+import type { SkeletonProps as AdminSkeletonProps } from "@webiny/admin-ui";
+export interface SkeletonProps extends AdminSkeletonProps {
+    baseColor?: string;
+    highlightColor?: string;
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    inline?: boolean;
+    duration?: number;
+    direction?: "ltr" | "rtl";
+    enableAnimation?: boolean;
+    count?: number;
+    wrapper?: React.FunctionComponent<PropsWithChildren<unknown>>;
+    className?: string;
+    containerClassName?: string;
+    containerTestId?: string;
+    circle?: boolean;
+    style?: CSSProperties;
+    theme?: "dark" | "light";
+}
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Skeleton` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const Skeleton: ({ className, type, size }: SkeletonProps) => React.JSX.Element;

package/Skeleton/Skeleton.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Skeleton as AdminSkeleton } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Skeleton` component from the `@webiny/admin-ui` package instead.
+ */
+export const Skeleton = ({
+  className,
+  type,
+  size
+}) => {
+  return /*#__PURE__*/React.createElement(AdminSkeleton, {
+    className: className,
+    type: type,
+    size: size
+  });
+};
+
+//# sourceMappingURL=Skeleton.js.map

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","AdminSkeleton","className","type","size","createElement"],"sources":["Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { SkeletonProps as AdminSkeletonProps } from \"@webiny/admin-ui\";\nimport { Skeleton as AdminSkeleton } from \"@webiny/admin-ui\";\n\nexport interface SkeletonProps extends AdminSkeletonProps {\n    //SkeletonStyleProps from \"react-loading-skeleton\"\n    baseColor?: string;\n    highlightColor?: string;\n    width?: string | number;\n    height?: string | number;\n    borderRadius?: string | number;\n    inline?: boolean;\n    duration?: number;\n    direction?: \"ltr\" | \"rtl\";\n    enableAnimation?: boolean;\n    // SkeletonProps from \"react-loading-skeleton\"\n    count?: number;\n    wrapper?: React.FunctionComponent<PropsWithChildren<unknown>>;\n    className?: string;\n    containerClassName?: string;\n    containerTestId?: string;\n    circle?: boolean;\n    style?: CSSProperties;\n    // Custom props\n    theme?: \"dark\" | \"light\";\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Skeleton` component from the `@webiny/admin-ui` package instead.\n */\nexport const Skeleton = ({ className, type, size }: SkeletonProps) => {\n    return <AdminSkeleton className={className} type={type} size={size} />;\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,IAAIC,aAAa,QAAQ,kBAAkB;AAyB5D;AACA;AACA;AACA;AACA,OAAO,MAAMD,QAAQ,GAAGA,CAAC;EAAEE,SAAS;EAAEC,IAAI;EAAEC;AAAoB,CAAC,KAAK;EAClE,oBAAOL,KAAA,CAAAM,aAAA,CAACJ,aAAa;IAACC,SAAS,EAAEA,SAAU;IAACC,IAAI,EAAEA,IAAK;IAACC,IAAI,EAAEA;EAAK,CAAE,CAAC;AAC1E,CAAC","ignoreList":[]}

package/Skeleton/index.d.ts

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

package/Skeleton/index.js

@@ -0,0 +1,3 @@
+export * from "./Skeleton";
+
+//# sourceMappingURL=index.js.map

package/Skeleton/index.js.map

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

package/Slider/Slider.d.ts

@@ -1,35 +1,25 @@
-import * as React from "react";
-import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+import React from "react";
+import type { FormComponentProps } from "../types";
+type Props = FormComponentProps & {
     label?: string;
     disabled?: boolean;
     description?: string;
-    min: number | string;
-    max: number | string;
+    min?: number | string;
+    max?: number | string;
     step?: number | string;
     discrete?: boolean;
     displayMarkers?: boolean;
-    onInput?: Function;
+    onInput?: (value: any) => void;
+    readOnly?: boolean;
 };
 /**
- * Slider component lets users choose a value from given range.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Slider` component from the `@webiny/admin-ui` package instead.
  */
 declare class Slider extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
-    onChange: (e: {
-        detail: {
-            value: number;
-        };
-    }) => void;
-    onInput: (e: {
-        detail: {
-            value: number;
-        };
-    }) => void;
-    render(): JSX.Element;
+    onValueCommit: (value: number) => void;
+    onValueChange: (value: number) => void;
+    toFloat: (value: number | string | undefined, defaultValue?: number) => number;
+    render(): React.JSX.Element;
 }
 export default Slider;

package/Slider/Slider.js

@@ -1,87 +1,53 @@
-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 { Slider as RmwcSlider } from "@rmwc/slider";
-import styled from "@emotion/styled";
-import { FormElementMessage } from "../FormElementMessage";
-// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box
-var Wrapper = /*#__PURE__*/styled("div", {
-  target: "e1ll7sdi0",
-  label: "Wrapper"
-})({
-  width: "100%",
-  ".mdc-slider .mdc-slider__thumb-container": {
-    left: 5
-  }
-});
+import React from "react";
+import omit from "lodash/omit";
+import { Slider as AdminSlider } from "@webiny/admin-ui";
 /**
- * Slider component lets users choose a value from given range.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Slider` component from the `@webiny/admin-ui` package instead.
  */
-
-var Slider = /*#__PURE__*/function (_React$Component) {
-  _inherits(Slider, _React$Component);
-
-  var _super = _createSuper(Slider);
-
-  function Slider() {
-    var _this;
-
-    _classCallCheck(this, Slider);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+class Slider extends React.Component {
+  onValueCommit = value => {
+    this.props.onChange && this.props.onChange(value);
+  };
+  onValueChange = value => {
+    this.props.onInput && this.props.onInput(value);
+  };
+  toFloat = (value, defaultValue = 0) => {
+    if (!value) {
+      return defaultValue;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
-      _this.props.onChange && _this.props.onChange(e.detail.value);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onInput", function (e) {
-      _this.props.onInput && _this.props.onInput(e.detail.value);
-    });
-
-    return _this;
-  }
-
-  _createClass(Slider, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          value = _this$props.value,
-          label = _this$props.label,
-          description = _this$props.description,
-          validation = _this$props.validation;
-      var sliderValue = value;
-
-      if (value === null || typeof value === "undefined") {
-        sliderValue = this.props.min || 0;
-      }
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
-        className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
-      }, label), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(RmwcSlider, Object.assign({}, this.props, {
-        value: sliderValue,
-        onChange: this.onChange,
-        onInput: this.onInput
-      }))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    // Convert the value to a string before passing it to parseFloat
+    const result = parseFloat(value.toString());
+
+    // Check if the result is a valid number
+    return isNaN(result) ? defaultValue : result;
+  };
+  render() {
+    const {
+      value,
+      label,
+      description,
+      validation
+    } = this.props;
+    let sliderValue = value;
+    if (value === null || typeof value === "undefined") {
+      sliderValue = this.props.min || 0;
     }
-  }]);
-
-  return Slider;
-}(React.Component);
-
-_defineProperty(Slider, "defaultProps", {
-  validation: {
-    isValid: null
+    return /*#__PURE__*/React.createElement(AdminSlider, Object.assign({}, omit(this.props, ["displayMarkers", "discrete", "onInput", "onChange"]), {
+      label: label,
+      min: this.toFloat(this.props.min),
+      max: this.toFloat(this.props.max, 100),
+      step: this.toFloat(this.props.step, 1),
+      value: sliderValue,
+      onValueCommit: this.onValueCommit,
+      onValueChange: this.onValueChange,
+      showTooltip: this.props.discrete,
+      validation: validation,
+      note: description
+    }));
   }
-});
+}
+export default Slider;
 
-export default Slider;
+//# sourceMappingURL=Slider.js.map

package/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","omit","Slider","AdminSlider","Component","onValueCommit","value","props","onChange","onValueChange","onInput","toFloat","defaultValue","result","parseFloat","toString","isNaN","render","label","description","validation","sliderValue","min","createElement","Object","assign","max","step","showTooltip","discrete","note"],"sources":["Slider.tsx"],"sourcesContent":["import React from \"react\";\nimport omit from \"lodash/omit\";\nimport { Slider as AdminSlider } from \"@webiny/admin-ui\";\nimport type { FormComponentProps } from \"~/types\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: string;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // Description beneath the slider.\n    description?: string;\n\n    // The minimum value of the Slider.\n    min?: number | string;\n\n    // The maximum value of the Slider.\n    max?: number | string;\n\n    // A step to quantize values by.\n    step?: number | string;\n\n    // Displays the exact value of the Slider on the knob.\n    discrete?: boolean;\n\n    // Displays the individual step markers on the Slider track.\n    displayMarkers?: boolean;\n\n    // Function that gets triggered on each input.\n    onInput?: (value: any) => void;\n\n    readOnly?: boolean;\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Slider` component from the `@webiny/admin-ui` package instead.\n */\nclass Slider extends React.Component<Props> {\n    onValueCommit = (value: number) => {\n        this.props.onChange && this.props.onChange(value);\n    };\n\n    onValueChange = (value: number) => {\n        this.props.onInput && this.props.onInput(value);\n    };\n\n    toFloat = (value: number | string | undefined, defaultValue = 0): number => {\n        if (!value) {\n            return defaultValue;\n        }\n\n        // Convert the value to a string before passing it to parseFloat\n        const result = parseFloat(value.toString());\n\n        // Check if the result is a valid number\n        return isNaN(result) ? defaultValue : result;\n    };\n\n    public override render() {\n        const { value, label, description, validation } = this.props;\n\n        let sliderValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            sliderValue = this.props.min || 0;\n        }\n\n        return (\n            <AdminSlider\n                {...omit(this.props, [\"displayMarkers\", \"discrete\", \"onInput\", \"onChange\"])}\n                label={label}\n                min={this.toFloat(this.props.min)}\n                max={this.toFloat(this.props.max, 100)}\n                step={this.toFloat(this.props.step, 1)}\n                value={sliderValue}\n                onValueCommit={this.onValueCommit}\n                onValueChange={this.onValueChange}\n                showTooltip={this.props.discrete}\n                validation={validation}\n                note={description}\n            />\n        );\n    }\n}\n\nexport default Slider;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,IAAI,MAAM,aAAa;AAC9B,SAASC,MAAM,IAAIC,WAAW,QAAQ,kBAAkB;AAkCxD;AACA;AACA;AACA;AACA,MAAMD,MAAM,SAASF,KAAK,CAACI,SAAS,CAAQ;EACxCC,aAAa,GAAIC,KAAa,IAAK;IAC/B,IAAI,CAACC,KAAK,CAACC,QAAQ,IAAI,IAAI,CAACD,KAAK,CAACC,QAAQ,CAACF,KAAK,CAAC;EACrD,CAAC;EAEDG,aAAa,GAAIH,KAAa,IAAK;IAC/B,IAAI,CAACC,KAAK,CAACG,OAAO,IAAI,IAAI,CAACH,KAAK,CAACG,OAAO,CAACJ,KAAK,CAAC;EACnD,CAAC;EAEDK,OAAO,GAAGA,CAACL,KAAkC,EAAEM,YAAY,GAAG,CAAC,KAAa;IACxE,IAAI,CAACN,KAAK,EAAE;MACR,OAAOM,YAAY;IACvB;;IAEA;IACA,MAAMC,MAAM,GAAGC,UAAU,CAACR,KAAK,CAACS,QAAQ,CAAC,CAAC,CAAC;;IAE3C;IACA,OAAOC,KAAK,CAACH,MAAM,CAAC,GAAGD,YAAY,GAAGC,MAAM;EAChD,CAAC;EAEeI,MAAMA,CAAA,EAAG;IACrB,MAAM;MAAEX,KAAK;MAAEY,KAAK;MAAEC,WAAW;MAAEC;IAAW,CAAC,GAAG,IAAI,CAACb,KAAK;IAE5D,IAAIc,WAAW,GAAGf,KAAK;IACvB,IAAIA,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,WAAW,EAAE;MAChDe,WAAW,GAAG,IAAI,CAACd,KAAK,CAACe,GAAG,IAAI,CAAC;IACrC;IAEA,oBACItB,KAAA,CAAAuB,aAAA,CAACpB,WAAW,EAAAqB,MAAA,CAAAC,MAAA,KACJxB,IAAI,CAAC,IAAI,CAACM,KAAK,EAAE,CAAC,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;MAC3EW,KAAK,EAAEA,KAAM;MACbI,GAAG,EAAE,IAAI,CAACX,OAAO,CAAC,IAAI,CAACJ,KAAK,CAACe,GAAG,CAAE;MAClCI,GAAG,EAAE,IAAI,CAACf,OAAO,CAAC,IAAI,CAACJ,KAAK,CAACmB,GAAG,EAAE,GAAG,CAAE;MACvCC,IAAI,EAAE,IAAI,CAAChB,OAAO,CAAC,IAAI,CAACJ,KAAK,CAACoB,IAAI,EAAE,CAAC,CAAE;MACvCrB,KAAK,EAAEe,WAAY;MACnBhB,aAAa,EAAE,IAAI,CAACA,aAAc;MAClCI,aAAa,EAAE,IAAI,CAACA,aAAc;MAClCmB,WAAW,EAAE,IAAI,CAACrB,KAAK,CAACsB,QAAS;MACjCT,UAAU,EAAEA,UAAW;MACvBU,IAAI,EAAEX;IAAY,EACrB,CAAC;EAEV;AACJ;AAEA,eAAejB,MAAM","ignoreList":[]}

package/Slider/index.js

@@ -1 +1,3 @@
-export { default as Slider } from "./Slider";
+export { default as Slider } from "./Slider";
+
+//# sourceMappingURL=index.js.map

package/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Slider"],"sources":["index.ts"],"sourcesContent":["export { default as Slider } from \"./Slider\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM","ignoreList":[]}