@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.647469

package/components/input/composite/index.d.ts

@@ -43,7 +43,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/input/currency/index.d.ts

@@ -54,7 +54,6 @@ declare const WmCurrencyStandalone: React.ComponentType<import("../../data/form/
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -152,7 +151,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/default/checkbox/index.d.ts

@@ -41,7 +41,6 @@ declare const WmCheckboxStandalone: React.ComponentType<import("../../../data/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -126,7 +125,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/default/checkboxset/index.d.ts

@@ -63,7 +63,6 @@ declare const WmCheckboxsetStandalone: React.ComponentType<import("../../../data
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -168,7 +167,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/default/radioset/index.d.ts

@@ -59,7 +59,6 @@ declare const WmRadiosetStandalone: React.ComponentType<import("../../../data/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     styles?: React.CSSProperties;
@@ -160,7 +159,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     styles?: React.CSSProperties;
     children?: React.ReactNode;

package/components/input/default/switch/index.d.ts

@@ -54,7 +54,6 @@ declare const WmSwitchStandalone: React.ComponentType<import("../../../data/form
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -151,7 +150,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/epoch/date/components/DatePickerPopover.js

@@ -180,10 +180,11 @@ var DatePickerPopover = function DatePickerPopover(props) {
         }
     }
   };
-  var calendarWidthVar = showweeks ? {
-    "--wm-datepicker-calendar-width": "420px"
-  } : {
-    "--wm-datepicker-calendar-width": "370px"
+  var todayButtonStyle = {
+    "--wm-btn-color": "var(--wm-color-primary)",
+    "--wm-btn-state-layer-color": "var(--wm-color-primary)",
+    background: "none",
+    border: "none"
   };
   return __jsx(_material.Popover, {
     open: open,
@@ -197,22 +198,39 @@ var DatePickerPopover = function DatePickerPopover(props) {
       vertical: "top",
       horizontal: adaptiveposition ? "right" : "left"
     },
-    className: "app-date wm-datepicker-popover",
-    style: calendarWidthVar
+    sx: {
+      "& .MuiPopover-paper": {
+        boxShadow: 3,
+        borderRadius: 1
+      },
+      "& .MuiDateCalendar-root": {
+        width: showweeks ? "420px" : "370px"
+      }
+    },
+    className: "app-date"
   }, __jsx(_material.Paper, {
     elevation: 0,
-    className: "wm-datepicker-popover-paper"
+    sx: {
+      width: "auto",
+      pb: 2,
+      background: "var(--wm-datepicker-background)"
+    }
   }, renderCalendarView(), showbuttonbar && (todaybutton || clearbutton) && __jsx(_material.Box, {
-    className: "wm-datepicker-button-bar"
+    display: "flex",
+    justifyContent: "space-between",
+    px: 2,
+    mt: 1
   }, todaybutton && __jsx(_material.Button, {
     variant: "text",
     onClick: handleTodayClick,
-    className: "btn  today-btn wm-datepicker-bar-btn",
-    disabled: isNavigationDisabled && !(0, _momentTimezone["default"])().isSame((0, _momentTimezone["default"])(getDateObj(restProps.mindate)), "day")
+    className: "btn  today-btn",
+    disabled: isNavigationDisabled && !(0, _momentTimezone["default"])().isSame((0, _momentTimezone["default"])(getDateObj(restProps.mindate)), "day"),
+    style: todayButtonStyle
   }, todaybuttonlabel), clearbutton && __jsx(_material.Button, {
     variant: "text",
     onClick: handleClearClick,
-    className: "btn  clear-btn wm-datepicker-bar-btn"
+    className: "btn  clear-btn",
+    style: todayButtonStyle
   }, clearbuttonlabel))));
 };
 var _default = exports["default"] = DatePickerPopover;

package/components/input/epoch/date/index.d.ts

@@ -37,7 +37,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/input/epoch/datetime/index.d.ts

@@ -37,7 +37,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/input/epoch/datetime/index.js

@@ -16,6 +16,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _BaseDateTime = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/BaseDateTime"));
 var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
 var _utils = require("./utils");
+var _styled = require("./styled");
 var _compare = _interopRequireDefault(require("../../../../core/util/compare"));
 var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
@@ -558,12 +559,25 @@ var WmDateTime = /*#__PURE__*/(0, _react.memo)(function (props) {
     },
     InputLabelProps: {
       shrink: floatinglabel ? undefined : false,
-      className: floatinglabel ? "wm-datetime-input-label" : undefined
+      sx: floatinglabel ? {
+        "&.MuiInputLabel-shrink": {
+          transform: "translate(14px, -9px) scale(0.75)",
+          transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
+        },
+        "&:not(.MuiInputLabel-shrink)": {
+          transform: "translate(14px, 16px) scale(1)",
+          transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
+        },
+        backgroundColor: "white"
+      } : undefined
     },
     inputProps: _objectSpread(_objectSpread({
       accessKey: shortcutkey,
       "aria-invalid": invalidFormat || dateNotInRange,
-      className: "form-control app-textbox display-input wm-datetime-html-input"
+      className: "form-control app-textbox display-input",
+      style: {
+        boxSizing: "inherit"
+      }
     }, disabled ? {
       disabled: true
     } : {}), readonly ? {
@@ -632,15 +646,14 @@ var WmDateTime = /*#__PURE__*/(0, _react.memo)(function (props) {
     showDaysOutsideCurrentMonth: selectfromothermonth,
     slotProps: {
       textField: {
-        className: "wm-datetime-picker-textfield-hidden"
+        style: {
+          display: "none"
+        }
       },
       popper: {
         anchorEl: anchorRef.current,
         placement: adaptiveposition ? "bottom-end" : "bottom-start",
-        className: "wm-datetime-date-picker-popper",
-        style: {
-          "--wm-datetime-calendar-width": showweeks ? "420px" : "370px"
-        }
+        sx: (0, _styled.datePickerSx)(showweeks)
       },
       calendarHeader: {
         format: "MMMM YYYY"
@@ -659,7 +672,7 @@ var WmDateTime = /*#__PURE__*/(0, _react.memo)(function (props) {
           if (action === "today") handleToday();
           if (action === "clear") handleClear();
         },
-        className: "wm-datetime-datepicker-action-bar"
+        sx: _styled.buttonStyles
       }
     },
     views: ["year", "month", "day"],
@@ -675,12 +688,14 @@ var WmDateTime = /*#__PURE__*/(0, _react.memo)(function (props) {
     ampm: showampmbuttons && (datepattern.includes("a") || datepattern.includes("A")),
     slotProps: {
       textField: {
-        className: "wm-datetime-picker-textfield-hidden"
+        style: {
+          display: "none"
+        }
       },
       popper: {
         anchorEl: anchorRef.current,
         placement: adaptiveposition ? "bottom-start" : "bottom-start",
-        className: "wm-datetime-time-picker-popper"
+        sx: (0, _styled.timePickerSx)()
       },
       actionBar: {
         actions: ["accept"]

package/components/input/epoch/datetime/styled.d.ts

@@ -0,0 +1,78 @@
+export declare const datePickerSx: (showweeks: boolean) => {
+    "& .MuiPaper-root": {
+        background: string;
+        padding: string;
+        borderRadius: string;
+    };
+    "& .MuiDateCalendar-root": {
+        width: string;
+    };
+    "& .MuiDayCalendar-header": {
+        justifyContent: string;
+    };
+    "& .MuiDayCalendar-weekNumber": {
+        marginTop: string;
+        textAlign: string;
+    };
+    "& .MuiDayCalendar-slideTransition": {
+        minHeight: string;
+    };
+    "& .MuiDayCalendar-weekNumberLabel": {
+        width: string;
+        padding: string;
+    };
+    "& .MuiTypography-caption": {
+        padding: string;
+    };
+    "& .MuiYearCalendar-root": {
+        width: string;
+    };
+    "& .MuiPickersDay-root.Mui-selected": {
+        backgroundColor: string;
+        color: string;
+        fontWeight: string;
+    };
+    "& .MuiMonthCalendar-button.Mui-selected": {
+        backgroundColor: string;
+        color: string;
+        fontWeight: string;
+    };
+    "& .MuiPickersDay-root.Mui-selected:hover": {
+        backgroundColor: string;
+        color: string;
+    };
+    "& .MuiYearCalendar-button.Mui-selected": {
+        backgroundColor: string;
+        color: string;
+        fontWeight: string;
+    };
+    "& .MuiPickersDay-today": {
+        backgroundColor: string;
+    };
+};
+export declare const timePickerSx: () => {
+    "& .css-1y6l765-MuiPickersLayout-root": {
+        display: string;
+    };
+    "& .MuiPaper-root": {
+        background: string;
+        padding: string;
+        borderRadius: string;
+    };
+    "& .Mui-selected": {
+        backgroundColor: string;
+        color: string;
+    };
+    "& .Mui-selected:hover": {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare const buttonStyles: () => {
+    "& .MuiButton-root": {
+        "--wm-btn-color": string;
+        "--wm-btn-state-layer-color": string;
+        background: string;
+        border: string;
+    };
+};

package/components/input/epoch/datetime/styled.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.timePickerSx = exports.datePickerSx = exports.buttonStyles = void 0;
+var datePickerSx = exports.datePickerSx = function datePickerSx(showweeks) {
+  return {
+    "& .MuiPaper-root": {
+      background: "var(--wm-datepicker-background)",
+      padding: "var(--wm-datepicker-padding)",
+      borderRadius: "var(--wm-datepicker-border-radius)"
+    },
+    "& .MuiDateCalendar-root": {
+      width: showweeks ? "420px" : "370px"
+    },
+    "& .MuiDayCalendar-header": {
+      justifyContent: "space-evenly"
+    },
+    "& .MuiDayCalendar-weekNumber": {
+      marginTop: "10px",
+      textAlign: "center"
+    },
+    "& .MuiDayCalendar-slideTransition": {
+      minHeight: "260px"
+    },
+    "& .MuiDayCalendar-weekNumberLabel": {
+      width: "32px !important",
+      padding: "0px 0px !important"
+    },
+    "& .MuiTypography-caption": {
+      padding: "0px 24px"
+    },
+    "& .MuiYearCalendar-root": {
+      width: "auto"
+    },
+    "& .MuiPickersDay-root.Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color)",
+      fontWeight: "bold"
+    },
+    "& .MuiMonthCalendar-button.Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color)",
+      fontWeight: "bold"
+    },
+    "& .MuiPickersDay-root.Mui-selected:hover": {
+      backgroundColor: "var(--wm-btn-secondary-background)",
+      color: "var(--wm-btn-secondary-color)"
+    },
+    "& .MuiYearCalendar-button.Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color)",
+      fontWeight: "bold"
+    },
+    "& .MuiPickersDay-today": {
+      backgroundColor: "transparent !important"
+    }
+  };
+};
+var timePickerSx = exports.timePickerSx = function timePickerSx() {
+  return {
+    "& .css-1y6l765-MuiPickersLayout-root": {
+      display: "inline-block"
+    },
+    "& .MuiPaper-root": {
+      background: "var(--wm-timepicker-background)",
+      padding: "var(--wm-timepicker-padding)",
+      borderRadius: "var(--wm-timepicker-border-radius)"
+    },
+    "& .Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color) !important"
+    },
+    "& .Mui-selected:hover": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color) !important"
+    }
+  };
+};
+var buttonStyles = exports.buttonStyles = function buttonStyles() {
+  return {
+    "& .MuiButton-root": {
+      "--wm-btn-color": "var(--wm-color-primary)",
+      "--wm-btn-state-layer-color": "var(--wm-color-primary)",
+      background: "none",
+      border: "none"
+    }
+  };
+};

package/components/input/epoch/time/index.d.ts

@@ -37,7 +37,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/input/epoch/time/index.js

@@ -452,7 +452,7 @@ var WmTime = function WmTime(props) {
       popper: {
         anchorEl: anchorRef.current,
         placement: "bottom-start",
-        className: "wm-timepicker-popper"
+        sx: _utils.TIME_PICKER_STYLES
       },
       actionBar: {
         actions: ["accept"]

package/components/input/epoch/time/utils.d.ts

@@ -14,6 +14,23 @@ export declare const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 export declare const READONLY_STYLES: {
     cursor: string;
 };
+export declare const TIME_PICKER_STYLES: {
+    "& .MuiPaper-root": {
+        background: string;
+        padding: string;
+        borderRadius: string;
+        width: string;
+        boxShadow: string;
+    };
+    "& .Mui-selected": {
+        backgroundColor: string;
+        color: string;
+    };
+    "& .Mui-selected:hover": {
+        backgroundColor: string;
+        color: string;
+    };
+};
 export declare function updateListener(name: string | undefined, listener: any, props: any, displayValue: string, timestamp: string | null | undefined, datavalue: string | null | undefined): void;
 export declare function createWidgetEvent(args: {
     type: string;

package/components/input/epoch/time/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.READONLY_STYLES = exports.DEFAULT_TIMEPATTERN = exports.DEFAULT_OUTPUT_FORMAT = exports.DEFAULT_CLASS = void 0;
+exports.TIME_PICKER_STYLES = exports.READONLY_STYLES = exports.DEFAULT_TIMEPATTERN = exports.DEFAULT_OUTPUT_FORMAT = exports.DEFAULT_CLASS = void 0;
 exports.createWidgetEvent = createWidgetEvent;
 exports.formatDisplayTimeValue = formatDisplayTimeValue;
 exports.getSupportedTimeFormats = getSupportedTimeFormats;
@@ -203,6 +203,23 @@ var DEFAULT_OUTPUT_FORMAT = exports.DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 var READONLY_STYLES = exports.READONLY_STYLES = {
   cursor: "not-allowed"
 };
+var TIME_PICKER_STYLES = exports.TIME_PICKER_STYLES = {
+  "& .MuiPaper-root": {
+    background: "var(--wm-timepicker-background)",
+    padding: "var(--wm-timepicker-padding)",
+    borderRadius: "var(--wm-timepicker-border-radius)",
+    width: "auto",
+    boxShadow: "none"
+  },
+  "& .Mui-selected": {
+    backgroundColor: "var(--wm-btn-secondary-background) !important",
+    color: "var(--wm-btn-secondary-color) !important"
+  },
+  "& .Mui-selected:hover": {
+    backgroundColor: "var(--wm-btn-secondary-background) !important",
+    color: "var(--wm-btn-secondary-color) !important"
+  }
+};
 function updateListener(name, listener, props, displayValue, timestamp, datavalue) {
   // Update listener widget display value
 

package/components/input/fileupload/index.d.ts

@@ -67,7 +67,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/input/number/index.d.ts

@@ -49,7 +49,6 @@ declare const WmNumberStandalone: React.ComponentType<import("../../data/form/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -142,7 +141,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/rating/index.d.ts

@@ -71,7 +71,6 @@ declare const WmRatingStandalone: React.ComponentType<import("../../data/form/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -185,7 +184,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/rating/index.js

@@ -106,21 +106,24 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
   var getStarState = (0, _react.useCallback)(function (index) {
     var isActive = isStarActive(index);
     var isHovered = isStarHovered(index);
-    var labelColor = isActive ? iconcolor !== null && iconcolor !== void 0 ? iconcolor : DEFAULT_COLORS.inactive : DEFAULT_COLORS.inactive;
-    var borderColorVar = isHovered ? iconcolor !== null && iconcolor !== void 0 ? iconcolor : "transparent" : "transparent";
-    var starStyle = _objectSpread({
-      "--wm-rating-star-color": labelColor,
-      "--wm-rating-star-border-color": borderColorVar
-    }, iconsize ? {
-      "--wm-rating-star-font-size": iconsize
-    } : {});
     return {
       isActive: isActive,
       isHovered: isHovered,
+      color: isActive ? iconcolor : isHovered ? iconcolor : DEFAULT_COLORS.inactive,
       iconClass: isActive ? activeiconclass : inactiveiconclass,
-      starStyle: starStyle
+      sx: {
+        fontSize: iconsize,
+        opacity: readonly ? 0.5 : 1,
+        pointerEvents: readonly ? "none" : "auto",
+        transition: "all 0.2s ease-in-out",
+        color: isActive ? iconcolor : DEFAULT_COLORS.inactive,
+        borderColor: isHovered ? iconcolor : "transparent",
+        "& .app-icon": {
+          color: "inherit"
+        }
+      }
     };
-  }, [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize]);
+  }, [isStarActive, isStarHovered, iconcolor, activeiconclass, inactiveiconclass, iconsize, readonly]);
 
   // Event handlers
   var invokeOnChange = (0, _react.useCallback)(function (newValue) {
@@ -391,7 +394,7 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
     var _getStarState = getStarState(rate.index),
       isActive = _getStarState.isActive,
       iconClass = _getStarState.iconClass,
-      starStyle = _getStarState.starStyle;
+      sx = _getStarState.sx;
     return __jsx(_Tooltip["default"], {
       key: rate.key,
       title: rate.label,
@@ -408,11 +411,11 @@ var WmRating = /*#__PURE__*/(0, _react.memo)(function (props) {
         return handleMouseOver(rate);
       },
       onMouseLeave: handleMouseLeave,
-      style: starStyle,
-      className: (0, _clsx["default"])("app-icon-container", "wm-rating-star", readonly && "wm-rating-star-readonly", isActive && "active")
+      sx: sx,
+      className: (0, _clsx["default"])("app-icon-container", isActive && "active")
     }, __jsx(_material.Box, {
       component: "i",
-      className: (0, _clsx["default"])("app-icon", "wm-rating-star-icon", iconClass),
+      className: (0, _clsx["default"])("app-icon", iconClass),
       "aria-hidden": "true"
     }), __jsx("input", {
       type: "radio",

package/components/input/select/index.d.ts

@@ -53,7 +53,6 @@ declare const WmSelectStandalone: React.ComponentType<import("../../data/form/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -150,7 +149,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;

package/components/input/select/index.js

@@ -458,7 +458,10 @@ var WmSelect = /*#__PURE__*/_react["default"].memo(function (props) {
   }, placeholder), groupby && transformedDataset ? transformedDataset.map(function (group) {
     return __jsx("optgroup", {
       key: group.key,
-      label: group.key
+      label: group.key,
+      style: {
+        backgroundColor: "rgba(0, 0, 0, .1)"
+      }
     }, group.data.map(function (item) {
       return __jsx("option", {
         key: "".concat(group.key, "-").concat(item.key),

package/components/input/slider/index.d.ts

@@ -45,7 +45,6 @@ declare const WmSliderStandalone: React.ComponentType<import("../../data/form/fo
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -138,7 +137,6 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;