@webiny/ui 5.43.2 → 6.0.0-alpha.0

package/Select/Select.js

@@ -1,53 +1,30 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Select = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
-var _react = _interopRequireWildcard(require("react"));
-var _select = require("@rmwc/select");
-var _FormElementMessage = require("../FormElementMessage");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _styled = require("./styled");
-var _excluded = ["value", "description", "validation"];
+import React, { useMemo } from "react";
+import { Select as AdminSelect } from "@webiny/admin-ui";
 /**
  * TODO verify that this is correct method get all options.
  */
-var getOptions = function getOptions(initialOptions) {
+const getOptions = initialOptions => {
   if (!initialOptions) {
     return [];
   } else if (Array.isArray(initialOptions)) {
-    var options = [];
-    var _iterator = (0, _createForOfIteratorHelper2.default)(initialOptions),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var option = _step.value;
-        if (typeof option === "string") {
-          options.push({
-            label: option,
-            value: option
-          });
-          continue;
-        }
+    const options = [];
+    for (const option of initialOptions) {
+      if (typeof option === "string") {
         options.push({
-          label: option.label,
-          value: option.value,
-          options: option.options
+          label: option,
+          value: option
         });
+        continue;
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+      options.push({
+        label: String(option.label),
+        value: option.value,
+        options: getOptions(option.options)
+      });
     }
     return options;
   }
-  return Object.keys(initialOptions).map(function (key) {
+  return Object.keys(initialOptions).map(key => {
     return {
       label: initialOptions[key],
       value: key
@@ -55,75 +32,99 @@ var getOptions = function getOptions(initialOptions) {
   });
 };
 
+/**
+ * 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);
+}
+
 /**
  * Select component lets users choose a value from given set of options.
  */
-var skipProps = ["validate", "form"];
-var getRmwcProps = function getRmwcProps(props) {
-  var newProps = {};
-  Object.keys(props).filter(function (name) {
-    return !skipProps.includes(name);
-  })
+const skipProps = ["validate", "form"];
+const getRmwcProps = props => {
+  const newProps = {};
+  Object.keys(props).filter(name => !skipProps.includes(name))
   // @ts-expect-error
-  .forEach(function (name) {
-    return newProps[name] = props[name];
-  });
+  .forEach(name => newProps[name] = props[name]);
   return newProps;
 };
+
 /**
- * We check for null and undefined in the value because React is complaining about those values.
- * Error says to use the empty string in null/undefined case.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Select` component from the `@webiny/admin-ui` package instead.
  */
-var Select = exports.Select = function Select(props) {
-  var initialValue = props.value,
-    description = props.description,
-    validation = props.validation,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var value = initialValue === null || initialValue === undefined ? "" : initialValue;
-  var _ref = validation || {},
-    validationIsValid = _ref.isValid,
-    validationMessage = _ref.message;
-  var options = getOptions(other.options);
+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);
 
   // Memoize the label and placeholder values based on the component size.
-  var _useMemo = (0, _react.useMemo)(function () {
-      var size = props.size,
-        label = props.label,
-        placeholderText = props.placeholder;
-
-      // If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.
-      var placeholder = placeholderText?.trim() || undefined;
+  const {
+    label,
+    placeholder
+  } = useMemo(() => {
+    const {
+      size,
+      label,
+      placeholder: placeholderText
+    } = props;
 
-      // 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
-        };
-      }
+    // If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.
+    const placeholder = placeholderText?.trim() || undefined;
 
-      // For other sizes, use the provided label and placeholder.
+    // For small or medium size, we set only the placeholder, using label as fallback.
+    if (size === "small" || size === "medium") {
       return {
-        label: label,
-        placeholder: placeholder
+        label: undefined,
+        placeholder: placeholder || label
       };
-    }, [props.label, props.placeholder, props.size]),
-    label = _useMemo.label,
-    placeholder = _useMemo.placeholder;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.Select, Object.assign({}, getRmwcProps(other), {
-    ref: undefined,
-    options: options,
+    }
+
+    // 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,
-    className: (0, _classnames.default)("webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded", _styled.webinySelect, props.size ? "webiny-ui-select--size-".concat(props.size) : null, props.className),
-    onChange: function onChange(e) {
-      props.onChange && props.onChange(e.target.value);
-    }
-  })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    size: size,
+    onChange: value => props?.onChange?.(value)
+  }));
 };
-var _default = exports.default = Select;
+export default Select;
 
 //# sourceMappingURL=Select.js.map

package/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_select","_FormElementMessage","_classnames","_interopRequireDefault","_styled","_excluded","getOptions","initialOptions","Array","isArray","options","_iterator","_createForOfIteratorHelper2","default","_step","s","n","done","option","value","push","label","err","e","f","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","exports","initialValue","description","validation","other","_objectWithoutProperties2","undefined","_ref","validationIsValid","isValid","validationMessage","message","_useMemo","useMemo","size","placeholderText","placeholder","trim","createElement","Fragment","assign","ref","className","classNames","webinySelect","concat","onChange","target","FormElementMessage","error","_default"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport classNames from \"classnames\";\nimport { webinySelect } from \"./styled\";\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\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\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: option.label,\n                value: option.value,\n                options: 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 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 * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select = (props: SelectProps) => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\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    return (\n        <>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                ref={undefined}\n                options={options}\n                value={value}\n                label={label}\n                placeholder={placeholder}\n                className={classNames(\n                    \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n                    webinySelect,\n                    props.size ? `webiny-ui-select--size-${props.size}` : null,\n                    props.className\n                )}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n                    props.onChange && props.onChange(e.target.value);\n                }}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n\nexport default Select;\n"],"mappings":"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","ignoreList":[]}
+{"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"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { Select as AdminSelect } from \"@webiny/admin-ui\";\nimport { 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        />\n    );\n};\n\nexport default Select;\n"],"mappings":"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","ignoreList":[]}

package/Select/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Select = require("./Select");
-Object.keys(_Select).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Select[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Select[key];
-    }
-  });
-});
+export * from "./Select";
 
 //# sourceMappingURL=index.js.map

package/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Select","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Select\";\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Select\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Skeleton/Skeleton.d.ts

@@ -1,8 +1,26 @@
-import { ReactElement } from "react";
-import { SkeletonProps as BaseSkeletonProps } from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
-interface SkeletonProps extends BaseSkeletonProps {
+import React, { CSSProperties, PropsWithChildren } from "react";
+import { 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";
 }
-export declare const Skeleton: ({ theme, ...props }: SkeletonProps) => ReactElement;
-export {};
+/**
+ * @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

@@ -1,23 +1,19 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Skeleton = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
-require("react-loading-skeleton/dist/skeleton.css");
-var _excluded = ["theme"];
-var Skeleton = exports.Skeleton = function Skeleton(_ref) {
-  var theme = _ref.theme,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
-    baseColor: theme === "dark" ? "var(--mdc-theme-on-background)" : "var(--mdc-theme-background)",
-    highlightColor: theme === "dark" ? "var(--mdc-theme-background)" : "var(--mdc-theme-surface)"
-  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, props));
+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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactLoadingSkeleton","_interopRequireWildcard","_excluded","Skeleton","exports","_ref","theme","props","_objectWithoutProperties2","default","createElement","SkeletonTheme","baseColor","highlightColor"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, {\n    SkeletonProps as BaseSkeletonProps,\n    SkeletonTheme\n} from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\ninterface SkeletonProps extends BaseSkeletonProps {\n    theme?: \"dark\" | \"light\";\n}\n\nexport const Skeleton = ({ theme, ...props }: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\n                theme === \"dark\" ? \"var(--mdc-theme-on-background)\" : \"var(--mdc-theme-background)\"\n            }\n            highlightColor={\n                theme === \"dark\" ? \"var(--mdc-theme-background)\" : \"var(--mdc-theme-surface)\"\n            }\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAKAA,OAAA;AAAkD,IAAAG,SAAA;AAM3C,IAAMC,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAAE,IAAA,EAAyD;EAAA,IAAnDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAJ,IAAA,EAAAH,SAAA;EACtC,oBACIL,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,qBAAA,CAAAW,aAAa;IACVC,SAAS,EACLN,KAAK,KAAK,MAAM,GAAG,gCAAgC,GAAG,6BACzD;IACDO,cAAc,EACVP,KAAK,KAAK,MAAM,GAAG,6BAA6B,GAAG;EACtD,gBAEDT,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,qBAAA,CAAAS,OAAoB,EAAKF,KAAQ,CACvB,CAAC;AAExB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Skeleton","AdminSkeleton","className","type","size","createElement"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { CSSProperties, PropsWithChildren } from \"react\";\nimport { Skeleton as AdminSkeleton, SkeletonProps as AdminSkeletonProps } 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":"AAAA,OAAOA,KAAK,MAA4C,OAAO;AAC/D,SAASC,QAAQ,IAAIC,aAAa,QAA6C,kBAAkB;AAyBjG;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.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Skeleton = require("./Skeleton");
-Object.keys(_Skeleton).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Skeleton[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Skeleton[key];
-    }
-  });
-});
+export * from "./Skeleton";
 
 //# sourceMappingURL=index.js.map

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Skeleton","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton\";\n"],"mappings":";;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,SAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Slider/Slider.d.ts

@@ -4,8 +4,8 @@ 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;
@@ -13,19 +13,13 @@ type Props = FormComponentProps & {
     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> {
-    onChange: (e: {
-        detail: {
-            value: number;
-        };
-    }) => void;
-    onInput: (e: {
-        detail: {
-            value: number;
-        };
-    }) => void;
+    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 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _slider = require("@rmwc/slider");
-var _FormElementMessage = require("../FormElementMessage");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box
-var Wrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1ll7sdi0"
-} : {
-  target: "e1ll7sdi0",
-  label: "Wrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1y22u0r",
-  styles: "width:100%;.mdc-slider .mdc-slider__thumb-container{left:5px;}"
-} : {
-  name: "1y22u0r",
-  styles: "width:100%;.mdc-slider .mdc-slider__thumb-container{left:5px;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NnQiIsImZpbGUiOiJTbGlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgU2xpZGVyIGFzIFJtd2NTbGlkZXIgfSBmcm9tIFwiQHJtd2Mvc2xpZGVyXCI7XG5pbXBvcnQgeyBGb3JtQ29tcG9uZW50UHJvcHMgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBGb3JtRWxlbWVudE1lc3NhZ2UgfSBmcm9tIFwifi9Gb3JtRWxlbWVudE1lc3NhZ2VcIjtcblxudHlwZSBQcm9wcyA9IEZvcm1Db21wb25lbnRQcm9wcyAmIHtcbiAgICAvLyBDb21wb25lbnQgbGFiZWwuXG4gICAgbGFiZWw/OiBzdHJpbmc7XG5cbiAgICAvLyBJcyBjaGVja2JveCBkaXNhYmxlZD9cbiAgICBkaXNhYmxlZD86IGJvb2xlYW47XG5cbiAgICAvLyBEZXNjcmlwdGlvbiBiZW5lYXRoIHRoZSBzbGlkZXIuXG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG5cbiAgICAvLyBUaGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgU2xpZGVyLlxuICAgIG1pbjogbnVtYmVyIHwgc3RyaW5nO1xuXG4gICAgLy8gVGhlIG1heGltdW0gdmFsdWUgb2YgdGhlIFNsaWRlci5cbiAgICBtYXg6IG51bWJlciB8IHN0cmluZztcblxuICAgIC8vIEEgc3RlcCB0byBxdWFudGl6ZSB2YWx1ZXMgYnkuXG4gICAgc3RlcD86IG51bWJlciB8IHN0cmluZztcblxuICAgIC8vIERpc3BsYXlzIHRoZSBleGFjdCB2YWx1ZSBvZiB0aGUgU2xpZGVyIG9uIHRoZSBrbm9iLlxuICAgIGRpc2NyZXRlPzogYm9vbGVhbjtcblxuICAgIC8vIERpc3BsYXlzIHRoZSBpbmRpdmlkdWFsIHN0ZXAgbWFya2VycyBvbiB0aGUgU2xpZGVyIHRyYWNrLlxuICAgIGRpc3BsYXlNYXJrZXJzPzogYm9vbGVhbjtcblxuICAgIC8vIEZ1bmN0aW9uIHRoYXQgZ2V0cyB0cmlnZ2VyZWQgb24gZWFjaCBpbnB1dC5cbiAgICBvbklucHV0PzogKHZhbHVlOiBhbnkpID0+IHZvaWQ7XG5cbiAgICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG4vLyB3cmFwcGVyIGZpeGVzIGEgYnVnIGluIHNsaWRlciB3aGVyZSB0aGUgc2xpZGVyIGhhbmRsZSBpcyByZW5kZXJlZCBvdXRzaWRlIHRoZSBib3VuZHMgb2YgdGhlIHNsaWRlciBib3hcbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBcIi5tZGMtc2xpZGVyIC5tZGMtc2xpZGVyX190aHVtYi1jb250YWluZXJcIjoge1xuICAgICAgICBsZWZ0OiA1XG4gICAgfVxufSk7XG5cbi8qKlxuICogU2xpZGVyIGNvbXBvbmVudCBsZXRzIHVzZXJzIGNob29zZSBhIHZhbHVlIGZyb20gZ2l2ZW4gcmFuZ2UuXG4gKi9cbmNsYXNzIFNsaWRlciBleHRlbmRzIFJlYWN0LkNvbXBvbmVudDxQcm9wcz4ge1xuICAgIG9uQ2hhbmdlID0gKGU6IHsgZGV0YWlsOiB7IHZhbHVlOiBudW1iZXIgfSB9KSA9PiB7XG4gICAgICAgIHRoaXMucHJvcHMub25DaGFuZ2UgJiYgdGhpcy5wcm9wcy5vbkNoYW5nZShlLmRldGFpbC52YWx1ZSk7XG4gICAgfTtcblxuICAgIG9uSW5wdXQgPSAoZTogeyBkZXRhaWw6IHsgdmFsdWU6IG51bWJlciB9IH0pID0+IHtcbiAgICAgICAgdGhpcy5wcm9wcy5vbklucHV0ICYmIHRoaXMucHJvcHMub25JbnB1dChlLmRldGFpbC52YWx1ZSk7XG4gICAgfTtcblxuICAgIHB1YmxpYyBvdmVycmlkZSByZW5kZXIoKSB7XG4gICAgICAgIGNvbnN0IHsgdmFsdWUsIGxhYmVsLCBkZXNjcmlwdGlvbiwgdmFsaWRhdGlvbiB9ID0gdGhpcy5wcm9wcztcblxuICAgICAgICBsZXQgc2xpZGVyVmFsdWUgPSB2YWx1ZTtcbiAgICAgICAgaWYgKHZhbHVlID09PSBudWxsIHx8IHR5cGVvZiB2YWx1ZSA9PT0gXCJ1bmRlZmluZWRcIikge1xuICAgICAgICAgICAgc2xpZGVyVmFsdWUgPSB0aGlzLnByb3BzLm1pbiB8fCAwO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc3QgeyBpc1ZhbGlkOiB2YWxpZGF0aW9uSXNWYWxpZCwgbWVzc2FnZTogdmFsaWRhdGlvbk1lc3NhZ2UgfSA9IHZhbGlkYXRpb24gfHwge307XG5cbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgICAgICB7bGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cIm1kYy10ZXh0LWZpZWxkLWhlbHBlci10ZXh0IG1kYy10ZXh0LWZpZWxkLWhlbHBlci10ZXh0LS1wZXJzaXN0ZW50XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICl9XG5cbiAgICAgICAgICAgICAgICA8V3JhcHBlcj5cbiAgICAgICAgICAgICAgICAgICAgPFJtd2NTbGlkZXJcbiAgICAgICAgICAgICAgICAgICAgICAgIC8vIEhhZCB0byBhZGQgcmVhZE9ubHkgc28gdGhlIHdhcm5pbmcgZG9lcyBub3QgYXBwZWFyIGluIHRoZSBjb25zb2xlLlxuICAgICAgICAgICAgICAgICAgICAgICAgcmVhZE9ubHk9e3RydWV9XG4gICAgICAgICAgICAgICAgICAgICAgICB7Li4udGhpcy5wcm9wc31cbiAgICAgICAgICAgICAgICAgICAgICAgIHZhbHVlPXtzbGlkZXJWYWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXt0aGlzLm9uQ2hhbmdlfVxuICAgICAgICAgICAgICAgICAgICAgICAgb25JbnB1dD17dGhpcy5vbklucHV0fVxuICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDwvV3JhcHBlcj5cblxuICAgICAgICAgICAgICAgIHt2YWxpZGF0aW9uSXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8Rm9ybUVsZW1lbnRNZXNzYWdlIGVycm9yPnt2YWxpZGF0aW9uTWVzc2FnZX08L0Zvcm1FbGVtZW50TWVzc2FnZT5cbiAgICAgICAgICAgICAgICApfVxuXG4gICAgICAgICAgICAgICAge3ZhbGlkYXRpb25Jc1ZhbGlkICE9PSBmYWxzZSAmJiBkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2U+e2Rlc2NyaXB0aW9ufTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICApO1xuICAgIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgU2xpZGVyO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
+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) {
-  function Slider() {
-    var _this;
-    (0, _classCallCheck2.default)(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 = (0, _callSuper2.default)(this, Slider, [].concat(args));
-    (0, _defineProperty2.default)(_this, "onChange", function (e) {
-      _this.props.onChange && _this.props.onChange(e.detail.value);
-    });
-    (0, _defineProperty2.default)(_this, "onInput", function (e) {
-      _this.props.onInput && _this.props.onInput(e.detail.value);
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(Slider, _React$Component);
-  return (0, _createClass2.default)(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;
-      }
-      var _ref = validation || {},
-        validationIsValid = _ref.isValid,
-        validationMessage = _ref.message;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
-        className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
-      }, label), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_slider.Slider
-      // Had to add readOnly so the warning does not appear in the console.
-      , Object.assign({
-        readOnly: true
-      }, this.props, {
-        value: sliderValue,
-        onChange: this.onChange,
-        onInput: this.onInput
-      }))), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.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;
     }
-  }]);
-}(_react.default.Component);
-var _default = exports.default = Slider;
+    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;
 
 //# sourceMappingURL=Slider.js.map