@webiny/ui 6.0.0-beta.0 → 6.0.0-rc.1

package/Ripple/Ripple.js

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Ripple = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _ripple = require("@rmwc/ripple");
+import React from "react";
 /**
- * Use Ripple component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
  */
-var Ripple = exports.Ripple = function Ripple(props) {
-  // Let's pass "unbounded" / "primary" / "accent" flags as "type" prop instead.
-  var type = props.type || "surface";
-  return /*#__PURE__*/_react.default.createElement(_ripple.Ripple, Object.assign({}, (0, _defineProperty2.default)({}, type, true), props), props.children);
+const Ripple = props => {
+  console.warn("The `Ripple` component is deprecated and will be removed in future releases.");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 };
+export { Ripple };
 
 //# sourceMappingURL=Ripple.js.map

package/Ripple/Ripple.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_ripple","Ripple","exports","props","type","default","createElement","Object","assign","_defineProperty2","children"],"sources":["Ripple.tsx"],"sourcesContent":["import React from \"react\";\nimport { Ripple as RmwcRipple } from \"@rmwc/ripple\";\n\ninterface Props {\n    // Choose the type of ripple.\n    type?: \"unbounded\" | \"primary\" | \"accent\";\n\n    // Makes the ripple disabled.\n    disabled?: boolean;\n\n    children: React.ReactNode;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Ripple = (props: Props) => {\n    // Let's pass \"unbounded\" / \"primary\" / \"accent\" flags as \"type\" prop instead.\n    const type = props.type || \"surface\";\n\n    return (\n        <RmwcRipple {...{ [type]: true }} {...props}>\n            {props.children}\n        </RmwcRipple>\n    );\n};\n\nexport { Ripple };\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAYA;AACA;AACA;AACA,IAAME,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,SAATA,MAAMA,CAAIE,KAAY,EAAK;EAC7B;EACA,IAAMC,IAAI,GAAGD,KAAK,CAACC,IAAI,IAAI,SAAS;EAEpC,oBACIP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,OAAA,CAAAC,MAAU,EAAAM,MAAA,CAAAC,MAAA,SAAAC,gBAAA,CAAAJ,OAAA,MAAQD,IAAI,EAAG,IAAI,GAAQD,KAAK,GACtCA,KAAK,CAACO,QACC,CAAC;AAErB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Ripple","props","console","warn","createElement","Fragment","children"],"sources":["Ripple.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface Props {\n    // Choose the type of ripple.\n    type?: \"unbounded\" | \"primary\" | \"accent\";\n\n    // Makes the ripple disabled.\n    disabled?: boolean;\n\n    children: React.ReactNode;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n */\nconst Ripple = (props: Props) => {\n    console.warn(\"The `Ripple` component is deprecated and will be removed in future releases.\");\n    return <>{props.children}</>;\n};\n\nexport { Ripple };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAYzB;AACA;AACA;AACA,MAAMC,MAAM,GAAIC,KAAY,IAAK;EAC7BC,OAAO,CAACC,IAAI,CAAC,8EAA8E,CAAC;EAC5F,oBAAOJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGJ,KAAK,CAACK,QAAW,CAAC;AAChC,CAAC;AAED,SAASN,MAAM","ignoreList":[]}

package/Ripple/index.d.ts

@@ -1 +1 @@
-export * from "./Ripple";
+export * from "./Ripple.js";

package/Ripple/index.js

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

package/Ripple/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Ripple","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Ripple\";\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 \"./Ripple.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Scrollbar/Scrollbar.d.ts

@@ -1,11 +1,8 @@
 import React from "react";
-import { ScrollbarProps } from "react-custom-scrollbars";
-interface Props extends ScrollbarProps {
-    style?: React.CSSProperties;
-    [key: string]: any;
-}
+import { type ScrollbarProps } from "@webiny/admin-ui";
 /**
- * Use Scrollbar component to show vertical or horizontal scrollbars.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Scrollbar` component props from the `@webiny/admin-ui` package instead.
  */
-declare const Scrollbar: (props: Props) => React.JSX.Element;
-export { Scrollbar };
+declare const Scrollbar: (props: ScrollbarProps) => React.JSX.Element;
+export { Scrollbar, type ScrollbarProps };

package/Scrollbar/Scrollbar.js

@@ -1,17 +1,13 @@
-"use strict";
+import React from "react";
+import { Scrollbar as AdminScrollbar } from "@webiny/admin-ui";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Scrollbar = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactCustomScrollbars = require("react-custom-scrollbars");
 /**
- * Use Scrollbar component to show vertical or horizontal scrollbars.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Scrollbar` component props from the `@webiny/admin-ui` package instead.
  */
-var Scrollbar = exports.Scrollbar = function Scrollbar(props) {
-  return /*#__PURE__*/_react.default.createElement(_reactCustomScrollbars.Scrollbars, props);
+const Scrollbar = props => {
+  return /*#__PURE__*/React.createElement(AdminScrollbar, props);
 };
+export { Scrollbar };
 
 //# sourceMappingURL=Scrollbar.js.map

package/Scrollbar/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactCustomScrollbars","Scrollbar","exports","props","default","createElement","Scrollbars"],"sources":["Scrollbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { ScrollbarProps, Scrollbars } from \"react-custom-scrollbars\";\n\ninterface Props extends ScrollbarProps {\n    style?: React.CSSProperties;\n    [key: string]: any;\n}\n\n/**\n * Use Scrollbar component to show vertical or horizontal scrollbars.\n */\nconst Scrollbar = (props: Props) => {\n    return <Scrollbars {...props} />;\n};\n\nexport { Scrollbar };\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAOA;AACA;AACA;AACA,IAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,KAAY,EAAK;EAChC,oBAAON,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACL,sBAAA,CAAAM,UAAU,EAAKH,KAAQ,CAAC;AACpC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Scrollbar","AdminScrollbar","props","createElement"],"sources":["Scrollbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Scrollbar as AdminScrollbar, type ScrollbarProps } from \"@webiny/admin-ui\";\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please find out the new `Scrollbar` component props from the `@webiny/admin-ui` package instead.\n */\nconst Scrollbar = (props: ScrollbarProps) => {\n    return <AdminScrollbar {...props} />;\n};\n\nexport { Scrollbar, type ScrollbarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,IAAIC,cAAc,QAA6B,kBAAkB;;AAEnF;AACA;AACA;AACA;AACA,MAAMD,SAAS,GAAIE,KAAqB,IAAK;EACzC,oBAAOH,KAAA,CAAAI,aAAA,CAACF,cAAc,EAAKC,KAAQ,CAAC;AACxC,CAAC;AAED,SAASF,SAAS","ignoreList":[]}

package/Scrollbar/index.d.ts

@@ -1 +1 @@
-export * from "./Scrollbar";
+export * from "./Scrollbar.js";

package/Scrollbar/index.js

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

package/Scrollbar/index.js.map

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

package/Section/index.d.ts

@@ -3,5 +3,9 @@ interface SectionProps {
     title?: string;
     children: React.ReactNode;
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `Section` component or reach out on Slack.
+ */
 declare const Section: ({ children, title, ...props }: SectionProps) => React.JSX.Element;
 export default Section;

package/Section/index.js

@@ -1,69 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _Typography = require("../Typography");
-var _Elevation = require("../Elevation");
-var _excluded = ["children", "title"];
-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)."; }
-var SectionWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e12inb751"
-} : {
-  target: "e12inb751",
-  label: "SectionWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "15r7252",
-  styles: "background-color:var(--mdc-theme-background);padding:0 0 25px 0"
-} : {
-  name: "15r7252",
-  styles: "background-color:var(--mdc-theme-background);padding:0 0 25px 0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoiaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJ+L1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gXCJ+L0VsZXZhdGlvblwiO1xuXG5jb25zdCBTZWN0aW9uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKVwiLFxuICAgIHBhZGRpbmc6IFwiMCAwIDI1cHggMFwiXG59KTtcblxuY29uc3QgdGl0bGVTdHlsZSA9IGNzcyh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tc3VyZmFjZSlcIixcbiAgICBcIi50b29sdGlwLWNvbnRlbnQtd3JhcHBlclwiOiB7XG4gICAgICAgIGxpbmVIZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICBzdmc6IHtcbiAgICAgICAgICAgIGhlaWdodDogMTMsXG4gICAgICAgICAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tc3VyZmFjZSlcIlxuICAgICAgICB9XG4gICAgfVxufSk7XG5cbmNvbnN0IEVsZXZhdGlvbkNvbnRlbnQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBhZGRpbmc6IDIwLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCIjZmZmXCJcbn0pO1xuXG5pbnRlcmZhY2UgU2VjdGlvblByb3BzIHtcbiAgICB0aXRsZT86IHN0cmluZztcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5jb25zdCBTZWN0aW9uID0gKHsgY2hpbGRyZW4sIHRpdGxlLCAuLi5wcm9wcyB9OiBTZWN0aW9uUHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8U2VjdGlvbldyYXBwZXIgey4uLnByb3BzfT5cbiAgICAgICAgICAgIDxoND5cbiAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSBjbGFzc05hbWU9e3RpdGxlU3R5bGV9IHVzZT17XCJvdmVybGluZVwifT5cbiAgICAgICAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgICAgIDwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgIDwvaDQ+XG5cbiAgICAgICAgICAgIDxFbGV2YXRpb24gej17Mn0+XG4gICAgICAgICAgICAgICAgPEVsZXZhdGlvbkNvbnRlbnQ+e2NoaWxkcmVufTwvRWxldmF0aW9uQ29udGVudD5cbiAgICAgICAgICAgIDwvRWxldmF0aW9uPlxuICAgICAgICA8L1NlY3Rpb25XcmFwcGVyPlxuICAgICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBTZWN0aW9uO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var titleStyle = (0, _emotion.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)"
-    }
-  }
-});
-var ElevationContent = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e12inb750"
-} : {
-  target: "e12inb750",
-  label: "ElevationContent"
-})(process.env.NODE_ENV === "production" ? {
-  name: "bb8b2n",
-  styles: "padding:20px;background-color:#fff"
-} : {
-  name: "bb8b2n",
-  styles: "padding:20px;background-color:#fff",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QnlCIiwiZmlsZSI6ImluZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwifi9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBFbGV2YXRpb24gfSBmcm9tIFwifi9FbGV2YXRpb25cIjtcblxuY29uc3QgU2VjdGlvbldyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZClcIixcbiAgICBwYWRkaW5nOiBcIjAgMCAyNXB4IDBcIlxufSk7XG5cbmNvbnN0IHRpdGxlU3R5bGUgPSBjc3Moe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLW9uLXN1cmZhY2UpXCIsXG4gICAgXCIudG9vbHRpcC1jb250ZW50LXdyYXBwZXJcIjoge1xuICAgICAgICBsaW5lSGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgc3ZnOiB7XG4gICAgICAgICAgICBoZWlnaHQ6IDEzLFxuICAgICAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLW9uLXN1cmZhY2UpXCJcbiAgICAgICAgfVxuICAgIH1cbn0pO1xuXG5jb25zdCBFbGV2YXRpb25Db250ZW50ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwYWRkaW5nOiAyMCxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwiI2ZmZlwiXG59KTtcblxuaW50ZXJmYWNlIFNlY3Rpb25Qcm9wcyB7XG4gICAgdGl0bGU/OiBzdHJpbmc7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgU2VjdGlvbiA9ICh7IGNoaWxkcmVuLCB0aXRsZSwgLi4ucHJvcHMgfTogU2VjdGlvblByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPFNlY3Rpb25XcmFwcGVyIHsuLi5wcm9wc30+XG4gICAgICAgICAgICA8aDQ+XG4gICAgICAgICAgICAgICAgPFR5cG9ncmFwaHkgY2xhc3NOYW1lPXt0aXRsZVN0eWxlfSB1c2U9e1wib3ZlcmxpbmVcIn0+XG4gICAgICAgICAgICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgICAgICAgICA8L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICA8L2g0PlxuXG4gICAgICAgICAgICA8RWxldmF0aW9uIHo9ezJ9PlxuICAgICAgICAgICAgICAgIDxFbGV2YXRpb25Db250ZW50PntjaGlsZHJlbn08L0VsZXZhdGlvbkNvbnRlbnQ+XG4gICAgICAgICAgICA8L0VsZXZhdGlvbj5cbiAgICAgICAgPC9TZWN0aW9uV3JhcHBlcj5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgU2VjdGlvbjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var Section = function Section(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(SectionWrapper, props, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    className: titleStyle,
-    use: "overline"
-  }, title)), /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-    z: 2
-  }, /*#__PURE__*/_react.default.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));
 };
-var _default = exports.default = Section;
+export default Section;
 
 //# sourceMappingURL=index.js.map

package/Section/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_Typography","_Elevation","_excluded","_EMOTION_STRINGIFIED_CSS_ERROR__","SectionWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","titleStyle","css","display","alignItems","color","lineHeight","svg","height","ElevationContent","Section","_ref","children","title","props","_objectWithoutProperties2","createElement","Typography","className","use","Elevation","z","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\nimport { Elevation } from \"~/Elevation\";\n\nconst SectionWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"0 0 25px 0\"\n});\n\nconst titleStyle = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".tooltip-content-wrapper\": {\n        lineHeight: \"100%\",\n        svg: {\n            height: 13,\n            color: \"var(--mdc-theme-on-surface)\"\n        }\n    }\n});\n\nconst ElevationContent = styled(\"div\")({\n    padding: 20,\n    backgroundColor: \"#fff\"\n});\n\ninterface SectionProps {\n    title?: string;\n    children: React.ReactNode;\n}\n\nconst Section = ({ children, title, ...props }: SectionProps) => {\n    return (\n        <SectionWrapper {...props}>\n            <h4>\n                <Typography className={titleStyle} use={\"overline\"}>\n                    {title}\n                </Typography>\n            </h4>\n\n            <Elevation z={2}>\n                <ElevationContent>{children}</ElevationContent>\n            </Elevation>\n        </SectionWrapper>\n    );\n};\n\nexport default Section;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAwC,IAAAI,SAAA;AAAA,SAAAC,iCAAA;AAExC,IAAMC,cAAc,gBAAG,IAAAC,KAAA,CAAAC,OAAA,EAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,CAGnC,CAAC;AAEF,IAAMa,UAAU,GAAG,IAAAC,YAAG,EAAC;EACnBC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,KAAK,EAAE,6BAA6B;EACpC,0BAA0B,EAAE;IACxBC,UAAU,EAAE,MAAM;IAClBC,GAAG,EAAE;MACDC,MAAM,EAAE,EAAE;MACVH,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC;AAEF,IAAMI,gBAAgB,gBAAG,IAAAnB,KAAA,CAAAC,OAAA,EAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,CAGrC,CAAC;AAOF,IAAMsB,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAAoD;EAAA,IAA9CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAKC,KAAK,OAAAC,yBAAA,CAAAxB,OAAA,EAAAoB,IAAA,EAAAxB,SAAA;EACxC,oBACIN,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAC3B,cAAc,EAAKyB,KAAK,eACrBjC,MAAA,CAAAU,OAAA,CAAAyB,aAAA,0BACInC,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAC/B,WAAA,CAAAgC,UAAU;IAACC,SAAS,EAAEjB,UAAW;IAACkB,GAAG,EAAE;EAAW,GAC9CN,KACO,CACZ,CAAC,eAELhC,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAC9B,UAAA,CAAAkC,SAAS;IAACC,CAAC,EAAE;EAAE,gBACZxC,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAACP,gBAAgB,QAAEG,QAA2B,CACvC,CACC,CAAC;AAEzB,CAAC;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAhC,OAAA,GAEamB,OAAO","ignoreList":[]}
+{"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,7 +1,40 @@
 import React from "react";
-import { SelectProps as RmwcSelectProps } from "@rmwc/select";
-import { FormComponentProps } from "../types";
-export declare type SelectProps = FormComponentProps & RmwcSelectProps & {
+import type { FormComponentProps } from "../types.js";
+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;
@@ -15,8 +48,8 @@ export declare type SelectProps = FormComponentProps & RmwcSelectProps & {
     size?: "small" | "medium" | "large";
 };
 /**
- * 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.
  */
 export declare const Select: (props: SelectProps) => React.JSX.Element;
 export default Select;

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,72 +32,100 @@ 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,
-        placeholder = props.placeholder;
+  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),
+    displayResetAction: false
+  }));
 };
-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","placeholder","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 } = props;\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":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,mBAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAwC,IAAAM,SAAA;AAkCxC;AACA;AACA;AACA,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,cAAsC,EAAwB;EAC9E,IAAI,CAACA,cAAc,EAAE;IACjB,OAAO,EAAE;EACb,CAAC,MAAM,IAAIC,KAAK,CAACC,OAAO,CAACF,cAAc,CAAC,EAAE;IACtC,IAAMG,OAA0B,GAAG,EAAE;IAAC,IAAAC,SAAA,OAAAC,2BAAA,CAAAC,OAAA,EACjBN,cAAc;MAAAO,KAAA;IAAA;MAAnC,KAAAH,SAAA,CAAAI,CAAA,MAAAD,KAAA,GAAAH,SAAA,CAAAK,CAAA,IAAAC,IAAA,GAAqC;QAAA,IAA1BC,MAAM,GAAAJ,KAAA,CAAAK,KAAA;QACb,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;UAC5BR,OAAO,CAACU,IAAI,CAAC;YACTC,KAAK,EAAEH,MAAM;YACbC,KAAK,EAAED;UACX,CAAC,CAAC;UACF;QACJ;QACAR,OAAO,CAACU,IAAI,CAAC;UACTC,KAAK,EAAEH,MAAM,CAACG,KAAK;UACnBF,KAAK,EAAED,MAAM,CAACC,KAAK;UACnBT,OAAO,EAAEQ,MAAM,CAACR;QACpB,CAAC,CAAC;MACN;IAAC,SAAAY,GAAA;MAAAX,SAAA,CAAAY,CAAA,CAAAD,GAAA;IAAA;MAAAX,SAAA,CAAAa,CAAA;IAAA;IACD,OAAOd,OAAO;EAClB;EACA,OAAOe,MAAM,CAACC,IAAI,CAACnB,cAAc,CAAC,CAACoB,GAAG,CAAC,UAAAC,GAAG,EAAI;IAC1C,OAAO;MACHP,KAAK,EAAEd,cAAc,CAACqB,GAAG,CAAC;MAC1BT,KAAK,EAAES;IACX,CAAC;EACL,CAAC,CAAC;AACN,CAAC;;AAED;AACA;AACA;AACA,IAAMC,SAAS,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC;AAEtC,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAkB,EAA2C;EAC/E,IAAMC,QAA8C,GAAG,CAAC,CAAC;EACzDP,MAAM,CAACC,IAAI,CAACK,KAAK,CAAC,CACbE,MAAM,CAAC,UAAAC,IAAI;IAAA,OAAI,CAACL,SAAS,CAACM,QAAQ,CAACD,IAAI,CAAC;EAAA;EACzC;EAAA,CACCE,OAAO,CAAC,UAACF,IAAS;IAAA,OAAMF,QAAQ,CAACE,IAAI,CAAC,GAAGH,KAAK,CAACG,IAAI,CAAC;EAAA,CAAC,CAAC;EAE3D,OAAOF,QAAQ;AACnB,CAAC;AACD;AACA;AACA;AACA;AACO,IAAMK,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,SAATA,MAAMA,CAAIN,KAAkB,EAAK;EAC1C,IAAeQ,YAAY,GAAwCR,KAAK,CAAhEZ,KAAK;IAAgBqB,WAAW,GAA2BT,KAAK,CAA3CS,WAAW;IAAEC,UAAU,GAAeV,KAAK,CAA9BU,UAAU;IAAKC,KAAK,OAAAC,yBAAA,CAAA9B,OAAA,EAAKkB,KAAK,EAAA1B,SAAA;EAExE,IAAMc,KAAK,GAAGoB,YAAY,KAAK,IAAI,IAAIA,YAAY,KAAKK,SAAS,GAAG,EAAE,GAAGL,YAAY;EAErF,IAAAM,IAAA,GAAmEJ,UAAU,IAAI,CAAC,CAAC;IAAlEK,iBAAiB,GAAAD,IAAA,CAA1BE,OAAO;IAA8BC,iBAAiB,GAAAH,IAAA,CAA1BI,OAAO;EAE3C,IAAMvC,OAAO,GAAGJ,UAAU,CAACoC,KAAK,CAAChC,OAAO,CAAC;;EAEzC;EACA,IAAAwC,QAAA,GAA+B,IAAAC,cAAO,EAAC,YAAM;MACzC,IAAQC,IAAI,GAAyBrB,KAAK,CAAlCqB,IAAI;QAAE/B,KAAK,GAAkBU,KAAK,CAA5BV,KAAK;QAAEgC,WAAW,GAAKtB,KAAK,CAArBsB,WAAW;;MAEhC;MACA,IAAID,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,QAAQ,EAAE;QACvC,OAAO;UACH/B,KAAK,EAAEuB,SAAS;UAChBS,WAAW,EAAEA,WAAW,IAAIhC;QAChC,CAAC;MACL;;MAEA;MACA,OAAO;QACHA,KAAK,EAALA,KAAK;QACLgC,WAAW,EAAXA;MACJ,CAAC;IACL,CAAC,EAAE,CAACtB,KAAK,CAACV,KAAK,EAAEU,KAAK,CAACsB,WAAW,EAAEtB,KAAK,CAACqB,IAAI,CAAC,CAAC;IAhBxC/B,KAAK,GAAA6B,QAAA,CAAL7B,KAAK;IAAEgC,WAAW,GAAAH,QAAA,CAAXG,WAAW;EAkB1B,oBACIxD,MAAA,CAAAgB,OAAA,CAAAyC,aAAA,CAAAzD,MAAA,CAAAgB,OAAA,CAAA0C,QAAA,qBACI1D,MAAA,CAAAgB,OAAA,CAAAyC,aAAA,CAACtD,OAAA,CAAAqC,MAAU,EAAAZ,MAAA,CAAA+B,MAAA,KACH1B,YAAY,CAACY,KAAK,CAAC;IACvBe,GAAG,EAAEb,SAAU;IACflC,OAAO,EAAEA,OAAQ;IACjBS,KAAK,EAAEA,KAAM;IACbE,KAAK,EAAEA,KAAM;IACbgC,WAAW,EAAEA,WAAY;IACzBK,SAAS,EAAE,IAAAC,mBAAU,EACjB,yDAAyD,EACzDC,oBAAY,EACZ7B,KAAK,CAACqB,IAAI,6BAAAS,MAAA,CAA6B9B,KAAK,CAACqB,IAAI,IAAK,IAAI,EAC1DrB,KAAK,CAAC2B,SACV,CAAE;IACFI,QAAQ,EAAE,SAAAA,SAACvC,CAAuC,EAAK;MACnDQ,KAAK,CAAC+B,QAAQ,IAAI/B,KAAK,CAAC+B,QAAQ,CAACvC,CAAC,CAACwC,MAAM,CAAC5C,KAAK,CAAC;IACpD;EAAE,EACL,CAAC,EAED2B,iBAAiB,KAAK,KAAK,iBACxBjD,MAAA,CAAAgB,OAAA,CAAAyC,aAAA,CAACrD,mBAAA,CAAA+D,kBAAkB;IAACC,KAAK;EAAA,GAAEjB,iBAAsC,CACpE,EAEAF,iBAAiB,KAAK,KAAK,IAAIN,WAAW,iBACvC3C,MAAA,CAAAgB,OAAA,CAAAyC,aAAA,CAACrD,mBAAA,CAAA+D,kBAAkB,QAAExB,WAAgC,CAE3D,CAAC;AAEX,CAAC;AAAC,IAAA0B,QAAA,GAAA5B,OAAA,CAAAzB,OAAA,GAEawB,MAAM","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","displayResetAction"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { FormComponentProps } from \"~/types.js\";\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.d.ts

@@ -1 +1 @@
-export * from "./Select";
+export * from "./Select.js";