@ringcentral/juno 1.12.1-beta.5746-a8a4867a → 1.12.3-beta.5828-dc41552f

package/es6/components/Downshift/utils/useDownshift.js

@@ -15,32 +15,38 @@ function stringArrToRegExp(keyToTags) {
 }
 var componentName = 'RcDownshift';
 export var useDownshift = function (_a) {
-    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
+    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focusedProp = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
     var isSelectedFromAutocompleteRef = useRef(false);
+    var isInputValueChangedRef = useRef(false);
     var _e = __read(useControlled({
+        controlled: focusedProp,
+        default: false,
+        name: componentName,
+    }), 2), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = __read(useControlled({
         controlled: openProp,
         default: initialIsOpen || false,
         name: componentName,
-    }), 2), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = __read(useState(false), 2), isTagsFocus = _f[0], setIsTagsFocus = _f[1];
-    var _g = __read(useState(0), 2), activeIndex = _g[0], setActiveIndex = _g[1];
-    var _h = __read(useControlled({
+    }), 2), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = __read(useState(false), 2), isTagsFocus = _g[0], setIsTagsFocus = _g[1];
+    var _h = __read(useState(0), 2), activeIndex = _h[0], setActiveIndex = _h[1];
+    var _j = __read(useControlled({
         controlled: inputValueProp,
         default: '',
         name: componentName,
-    }), 2), inputValue = _h[0], setInputValue = _h[1];
+    }), 2), inputValue = _j[0], setInputValue = _j[1];
     var updateInputValue = function (newValue) {
         onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(newValue);
         setInputValue(newValue);
     };
-    var _j = __read(useControlled({
+    var _k = __read(useControlled({
         controlled: selectedItemsProp,
         default: [],
         name: componentName,
-    }), 2), selectedItems = _j[0], setSelectedItems = _j[1];
+    }), 2), selectedItems = _k[0], setSelectedItems = _k[1];
     var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     var downshiftId = useResultRef(function () { return uniqueId("downshift-"); }).current;
     // * use -2 for us know that is init state, for recalculate defaultHighlightedIndex
@@ -55,7 +61,7 @@ export var useDownshift = function (_a) {
         ? true
         : undefined;
     var forceUpdate = useForceUpdate();
-    var _k = useSleep(), sleep = _k.sleep, getSleeping = _k.getSleeping;
+    var _l = useSleep(), sleep = _l.sleep, getSleeping = _l.getSleeping;
     var filteredResult = useMemo(function () {
         var getInputValueAsItem = function () {
             var label = inputValue.trim() || '';
@@ -74,6 +80,7 @@ export var useDownshift = function (_a) {
             if (filterOptions) {
                 return filterOptions(items, {
                     inputValue: inputValue,
+                    inputChanged: isInputValueChangedRef.current,
                     getOptionLabel: getOptionLabel,
                     selectedItems: selectedItems,
                 });
@@ -117,16 +124,19 @@ export var useDownshift = function (_a) {
         renderNoOptions,
         selectedItems,
     ]);
-    var _l = useDownshiftGroup({
+    var _m = useDownshiftGroup({
         groupBy: groupBy,
         options: options,
         filteredResult: filteredResult,
         getExpandIconProps: getExpandIconProps,
         groupExpanded: groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
         onGroupExpanded: onGroupExpanded,
+        // TODO: single release for that breaking change
+        // getOptionDisabled,
         groupVariant: groupVariant,
         id: downshiftId,
-    }), groupedResult = _l.groupedResult, handleGroupExpandedChange = _l.handleGroupExpandedChange, optionsGroupList = _l.optionsGroupList;
+    }), groupedResult = _m.groupedResult, handleGroupExpandedChange = _m.handleGroupExpandedChange, optionsGroupList = _m.optionsGroupList;
     var optionItems = groupBy ? groupedResult : filteredResult;
     var freeSoloCount = useMemo(function () { return selectedItems.filter(function (x) { return x.freeSolo; }).length; }, [selectedItems]);
     var handleSelectedItems = function (_selectedItems) {
@@ -168,6 +178,7 @@ export var useDownshift = function (_a) {
     });
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
+        isInputValueChangedRef.current = false;
         // * set to default highlighted
         setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
         if (isOpen) {
@@ -318,6 +329,7 @@ export var useDownshift = function (_a) {
             updateInputValue('');
         }
         isSelectedFromAutocompleteRef.current = false;
+        isInputValueChangedRef.current = false;
         setActiveIndex(-1);
         if (!disableCloseOnSelect) {
             closeMenu(e, 'select-option');
@@ -342,7 +354,7 @@ export var useDownshift = function (_a) {
             event === null || event === void 0 ? void 0 : event.preventDefault();
         },
     }).onKeyFocusedIndexHandle;
-    var _m = useKeyboardMoveFocus({
+    var _o = useKeyboardMoveFocus({
         options: optionItems,
         focusedIndexRef: highlightedIndexRef,
         infinite: true,
@@ -355,7 +367,7 @@ export var useDownshift = function (_a) {
             : function (child) {
                 return !getIsItemCanSelected(child);
             },
-    }), onKeyFocusedIndexHandle = _m.onKeyFocusedIndexHandle, getNextFocusableOption = _m.getNextFocusableOption;
+    }), onKeyFocusedIndexHandle = _o.onKeyFocusedIndexHandle, getNextFocusableOption = _o.getNextFocusableOption;
     var keepHighlightedIndex = function () {
         keepHighlightedIndexRef.current = true;
     };
@@ -530,9 +542,11 @@ export var useDownshift = function (_a) {
                     handleSelectedItems([]);
                 }
                 fromPasteString.current = '';
+                isInputValueChangedRef.current = true;
             },
             onFocus: function (e) {
                 var _a;
+                setIsFocused(true);
                 if (openOnFocus)
                     openMenu(e);
                 // * when autocomplete mode, always select all text when focus
@@ -546,6 +560,7 @@ export var useDownshift = function (_a) {
                 }
             },
             onBlur: function (e) {
+                setIsFocused(false);
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItemFn(optionItems[highlightedIndexRef.current], e);
@@ -796,6 +811,9 @@ export var useDownshift = function (_a) {
         reset: reset,
         forceUpdate: forceUpdate,
         optionsGroupList: optionsGroupList,
+        isFocused: isFocused,
+        id: downshiftId,
+        inputChanged: isInputValueChangedRef.current,
     };
     changeHighlightedIndexReason.current = undefined;
     return resultObj;

package/es6/components/Downshift/utils/useDownshiftGroup.js

@@ -1,33 +1,28 @@
 import { __assign, __read, __spread } from "tslib";
 import { useMemo } from 'react';
-import { combineProps, logInDev, omit, useChange, useEventCallback, useRefState, } from '../../../foundation';
+import { combineProps, logInDev, omit, useDepsChange, useEventCallback, useRefState, } from '../../../foundation';
 export var useDownshiftGroup = function (_a) {
-    var groupBy = _a.groupBy, options = _a.options, filteredResult = _a.filteredResult, getExpandIconProps = _a.getExpandIconProps, groupExpanded = _a.groupExpanded, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, id = _a.id;
+    var groupBy = _a.groupBy, options = _a.options, filteredResult = _a.filteredResult, getExpandIconProps = _a.getExpandIconProps, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, getOptionDisabled = _a.getOptionDisabled, id = _a.id;
     var _b = __read(useRefState({}), 2), groupExpandedMapRef = _b[0], setGroupExpandedMap = _b[1];
     var isTitleGroup = groupVariant === 'normal';
-    useChange(function () {
-        if (typeof groupExpanded === 'object') {
-            setGroupExpandedMap(groupExpanded, false);
-        }
-    }, function () { return groupExpanded; });
-    var handleGroupExpandedChange = function (key) {
+    var handleGroupExpandedChange = function (groupName) {
         var _a;
         var groupExpandedMap = groupExpandedMapRef.current;
         if (typeof groupExpanded === 'boolean') {
             return;
         }
-        var toExpandedState = !groupExpandedMap[key];
-        var newExpandedMap = __assign(__assign({}, groupExpandedMap), (_a = {}, _a[key] = toExpandedState, _a));
+        var toExpandedState = !groupExpandedMap[groupName];
+        var newExpandedMap = __assign(__assign({}, groupExpandedMap), (_a = {}, _a[groupName] = toExpandedState, _a));
         setGroupExpandedMap(newExpandedMap);
         if (onGroupExpanded) {
-            var group = optionsGroupList.find(function (x) { return x.group === key; });
+            var group = optionsGroupList.find(function (x) { return x.group === groupName; });
             if (group) {
                 onGroupExpanded(__assign(__assign({}, omit(group, ['getExpandIconProps'])), { expanded: toExpandedState }), newExpandedMap);
             }
         }
     };
-    var handleExpandIconClick = useEventCallback(function (e, key) {
-        handleGroupExpandedChange(key);
+    var handleExpandIconClick = useEventCallback(function (e, groupName) {
+        handleGroupExpandedChange(groupName);
         e.preventDefault();
         e.stopPropagation();
     });
@@ -37,7 +32,8 @@ export var useDownshiftGroup = function (_a) {
             // used to keep track of key and indexes in the result array
             var indexBy_1 = new Map();
             var warn_1 = false;
-            return filteredResult.reduce(function (acc, option, index) {
+            var afterGroupFn_1 = [];
+            var result = filteredResult.reduce(function (acc, option, index) {
                 var group = groupBy(option);
                 if (acc.length > 0 && acc[acc.length - 1].group === group) {
                     acc[acc.length - 1].options.push(__assign(__assign({}, option), { group: acc[acc.length - 1] }));
@@ -76,41 +72,71 @@ export var useDownshiftGroup = function (_a) {
                     };
                     newGroup_1.options[0].group = newGroup_1;
                     if (isTitleGroup) {
-                        newGroup_1.options.unshift({
+                        var groupTitleOption_1 = {
                             id: id + "-" + group,
                             label: group,
                             disabled: true,
+                            // * here cause by self Type reference
                             group: newGroup_1,
-                        });
+                        };
+                        // push fn to array, do that after all options be add into group
+                        if (getOptionDisabled) {
+                            afterGroupFn_1.push(function () {
+                                groupTitleOption_1.disabled =
+                                    getOptionDisabled(groupTitleOption_1);
+                            });
+                        }
+                        newGroup_1.options.unshift(groupTitleOption_1);
                     }
                     acc.push(newGroup_1);
                 }
                 return acc;
             }, []);
+            afterGroupFn_1.forEach(function (fn) {
+                fn();
+            });
+            return result;
         }
         return [];
     }, [
         filteredResult,
         getExpandIconProps,
+        getOptionDisabled,
         groupBy,
         handleExpandIconClick,
         id,
         isTitleGroup,
         options,
     ]);
+    var initGroupExpandedState = function (expandedState) {
+        if (typeof expandedState === 'object') {
+            setGroupExpandedMap(expandedState, false);
+        }
+        else if (typeof expandedState === 'boolean') {
+            setGroupExpandedMap(optionsGroupList.reduce(function (prev, curr) {
+                prev[curr.group] = expandedState;
+                return prev;
+            }, {}), false);
+        }
+    };
+    useDepsChange(function () {
+        initGroupExpandedState(groupDefaultExpanded);
+    }, []);
+    useDepsChange(function () {
+        initGroupExpandedState(groupExpanded);
+    }, [groupExpanded]);
     var groupExpandedMap = groupExpandedMapRef.current;
     // * speared logic with group, prevent calculate every time.
     var groupedResult = useMemo(function () {
         var addExpandedResult = Object.entries(groupExpandedMap).reduce(function (prev, _a) {
             var _b = __read(_a, 2), key = _b[0], expended = _b[1];
             var group = prev.find(function (x) { return x.group === key; });
-            if (group) {
+            if (group)
                 group.expanded = expended;
-            }
             return prev;
         }, __spread(optionsGroupList));
         return addExpandedResult.reduce(function (prev, curr) {
-            if (typeof groupExpanded === 'boolean' ? groupExpanded : curr.expanded) {
+            if (curr.expanded) {
                 prev.push.apply(prev, __spread(curr.options));
             }
             else {
@@ -118,7 +144,7 @@ export var useDownshiftGroup = function (_a) {
             }
             return prev;
         }, []);
-    }, [groupExpandedMap, optionsGroupList, groupExpanded]);
+    }, [groupExpandedMap, optionsGroupList]);
     return {
         optionsGroupList: optionsGroupList,
         groupedResult: groupedResult,

package/es6/components/Forms/Picker/TimePicker/NumberPicker.js

@@ -105,9 +105,7 @@ var _NumberPicker = forwardRef(function (props, ref) {
         React.createElement(StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
                 onUpdateValue(increaseValue);
             }, symbol: ArrowUpIcon, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),
-        React.createElement(StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, 
-            // * when both disabled that icon can't click into selection view
-            disabled: increaseDisabled && decreaseDisabled, "data-test-automation-id": automationId && automationId + "-text" },
+        React.createElement(StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, "data-test-automation-id": automationId && automationId + "-text" },
             React.createElement(React.Fragment, null, 
             // TODO: that <></> will fix when `RcIconButton` ready
             showValue)),

package/es6/components/Forms/Picker/TimePicker/utils/TimePickerHelper.js

@@ -59,7 +59,7 @@ var getHourAndMinute = function (times) {
     var hour = (times - minute) / ONE_HOUR;
     return {
         hour: hour,
-        minute: minute / ONE_MINUTE,
+        minute: Math.floor(minute / ONE_MINUTE),
     };
 };
 var timestampToDate = function (times) {

package/es6/components/Forms/Select/PlainSelect/PlainSelect.js

@@ -17,9 +17,9 @@ var plainAnchorOrigin = {
     vertical: 'bottom',
 };
 var _RcPlainSelect = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, classes = _a.classes, value = _a.value, renderValue = _a.renderValue, variant = _a.variant, ButtonProps = _a.ButtonProps, innerRef = _a.innerRef, SelectInputProps = _a.SelectInputProps, InputProps = _a.InputProps, disabled = _a.disabled, autoFocus = _a.autoFocus, size = _a.size, virtualize = _a.virtualize, fullWidth = _a.fullWidth, 
+    var children = _a.children, className = _a.className, classes = _a.classes, value = _a.value, renderValue = _a.renderValue, variant = _a.variant, ButtonProps = _a.ButtonProps, innerRef = _a.innerRef, SelectInputProps = _a.SelectInputProps, InputProps = _a.InputProps, disabled = _a.disabled, autoFocus = _a.autoFocus, size = _a.size, virtualize = _a.virtualize, fullWidth = _a.fullWidth, color = _a.color, 
     //
-    IconComponent = _a.IconComponent, onOpenProp = _a.onOpen, onCloseProp = _a.onClose, rest = __rest(_a, ["children", "className", "classes", "value", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "IconComponent", "onOpen", "onClose"]);
+    IconComponent = _a.IconComponent, onOpenProp = _a.onOpen, onCloseProp = _a.onClose, rest = __rest(_a, ["children", "className", "classes", "value", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "color", "IconComponent", "onOpen", "onClose"]);
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
     var display = useMemo(function () {
         var item = children.find(function (child) {
@@ -29,7 +29,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
     }, [children, value]);
     var _renderValue = useCallback(function (value) {
         var _variant = switchVariantToButtonVariant(variant);
-        return (React.createElement(RcButton, __assign({ ref: ref, innerRef: innerRef, disabled: disabled, size: size, fullWidth: fullWidth, autoFocus: autoFocus, variant: _variant, "aria-label": "open menu", "aria-haspopup": "listbox" }, combineProps(defaultButtonProps, ButtonProps)),
+        return (React.createElement(RcButton, __assign({ ref: ref, innerRef: innerRef, disabled: disabled, size: size, color: color, fullWidth: fullWidth, autoFocus: autoFocus, variant: _variant, "aria-label": "open menu", "aria-haspopup": "listbox" }, combineProps(defaultButtonProps, ButtonProps)),
             renderValue ? renderValue(value) : display,
             (IconComponent && React.createElement(IconComponent, { open: open })) || (React.createElement(SelectArrowDownIcon
             // * reset default color
@@ -42,6 +42,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
         ButtonProps,
         IconComponent,
         autoFocus,
+        color,
         disabled,
         display,
         fullWidth,
@@ -81,7 +82,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
         }, onClose: function (e) {
             setOpen(false);
             onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp(e);
-        }, SelectInputProps: _SelectInputProps, InputProps: _InputProps, renderValue: _renderValue, fullWidth: fullWidth }, rest), children));
+        }, SelectInputProps: _SelectInputProps, InputProps: _InputProps, renderValue: _renderValue, fullWidth: fullWidth, color: color }, rest), children));
 });
 /** @release */
 var RcPlainSelect = styled(_RcPlainSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), plainSelectStyle);

package/es6/components/Forms/Select/PlainSelect/styles/StyledSelect.js

@@ -11,9 +11,10 @@ export var plainSelectStyle = function (_a) {
     var variant = _a.variant, disabled = _a.disabled;
     var isText = variant === 'text';
     var isRound = roundVariant.includes(variant);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: auto;\n\n    ", " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ", "\n    }\n  "], ["\n    width: auto;\n\n    ",
+        " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ",
+        "\n    }\n  "])), RcButton /**
     // TODO: cancel button bellow icon margin issue,
-    // TODO: wait RCUI-234 merge below overwrite can be remove
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ", "\n    }\n  "], ["\n    ", " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ",
-        "\n    }\n  "])), RcButton, RcIcon, RcListItemText, RcTextFieldClasses.root, RcPlainSelectInputClasses.root, RcPlainSelectInputClasses.input, RcButton, !disabled && 'auto', spacing(isText ? 4 : 1), spacing(isText ? 1 : 0), isRound && radius('xxl'), SelectArrowDownIcon, spacing(0, 0, 0, isRound ? 0 : 1), isRound && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", ", &.Mui-focusVisible {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "], ["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", ", &.Mui-focusVisible {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "])), spacing(1.5), spacing(1.5), focusVisible, RcPlainSelectTouchRippleClasses.root, opacity('32'), RcPlainSelectTouchRippleClasses.child));
+*/, RcIcon, RcListItemText, RcTextFieldClasses.root, RcPlainSelectInputClasses.root, RcPlainSelectInputClasses.input, RcButton, !disabled && 'auto', spacing(isText ? 4 : 1), spacing(isText ? 1 : 0), isRound && radius('xxl'), SelectArrowDownIcon, spacing(0, 0, 0, isRound ? 0 : 1), isRound && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", ", &.Mui-focusVisible {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "], ["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", ", &.Mui-focusVisible {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "])), spacing(1.5), spacing(1.5), focusVisible, RcPlainSelectTouchRippleClasses.root, opacity('32'), RcPlainSelectTouchRippleClasses.child));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Forms/Select/Select.js

@@ -14,7 +14,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSelect' });
     var children = props.children, onChange = props.onChange, SelectInputPropsProp = props.SelectInputProps, textVariant = props.textVariant, placeholder = props.placeholder, renderValue = props.renderValue, displayEmpty = props.displayEmpty, variant = props.variant, size = props.size, value = props.value, virtualize = props.virtualize, 
     // * below is should pick into TextField props
-    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "SelectInputProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
+    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "SelectInputProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
     var nonValue = value === undefined ||
         value === null ||
         // * if that can't displayEmpty, and that value === '', same as no value
@@ -62,7 +62,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     var valueIsNumber = typeof value === 'number';
     return (React.createElement(RcSelectTextField, { ref: ref, id: id, className: className, 
         // for when that is select type that type will be select onChange, just any for ignore that
-        onChange: onChange, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, value: valueIsNumber ? value : value || '', validate: validate, required: required, fullWidth: fullWidth, disabled: disabled, error: error, InputProps: _InputProps, clearBtn: false, placeholder: placeholder, SelectProps: _SelectProps }, children));
+        onChange: onChange, color: color, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, value: valueIsNumber ? value : value || '', validate: validate, required: required, fullWidth: fullWidth, disabled: disabled, error: error, InputProps: _InputProps, clearBtn: false, placeholder: placeholder, SelectProps: _SelectProps }, children));
 });
 var RcSelect = styled(_RcSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), selectStyle);
 RcSelect.displayName = 'RcSelect';

package/es6/components/Forms/Select/styles/StyledSelect.js

@@ -1,5 +1,5 @@
-import { __makeTemplateObject } from "tslib";
-import { css, fakeBorder, palette2, px, radius, setOpacity, spacing, typography, } from '../../../../foundation';
+import { __assign, __makeTemplateObject } from "tslib";
+import { css, fakeBorder, getParsePaletteColor, palette2, px, radius, setOpacity, spacing, typography, } from '../../../../foundation';
 import { disabledColor, placeholderColor } from '../../TextField/styles';
 import { RcBoxSelectInputClasses, RcBoxSelectInputHeights, RcLineSelectInputClasses, RcSelectClasses, RcSelectInputClasses, RcSelectInputWhenPlaceholderClasses, } from '../utils';
 var boxBackgroundColor = palette2('neutral', 'b03');
@@ -8,23 +8,27 @@ var lineSelectStyle = css(templateObject_1 || (templateObject_1 = __makeTemplate
     var textVariant = _a.textVariant;
     return typography(textVariant || 'subheading1');
 }, setOpacity(palette2('action', 'grayDark'), '08'));
-var boxSelectStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ", ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"], ["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ",
-    ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"])), RcBoxSelectInputClasses.root, function (_a) {
-    var label = _a.label;
-    return label && spacing(5);
-}, function (_a) {
-    var size = _a.size;
-    return px(RcBoxSelectInputHeights[size]);
-}, radius('lg'), boxBackgroundColor, RcBoxSelectInputClasses.disabled, setOpacity(boxActionBackgroundColor, '12'), radius('lg'), fakeBorder({ color: palette2('highContrast') }), RcBoxSelectInputClasses.focused, setOpacity(boxActionBackgroundColor, '16'), fakeBorder({ color: palette2('interactive', 'f01') }), RcBoxSelectInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcBoxSelectInputClasses.disabled, setOpacity(palette2('action', 'grayLight'), '12'), fakeBorder({ color: 'transparent', allowTransparent: true }), RcBoxSelectInputClasses.input, spacing(1.5, 6, 1.5, 2), function (_a) {
-    var textVariant = _a.textVariant;
-    return typography(textVariant || 'body1');
-}, function (_a) {
-    var size = _a.size;
-    // here -12 for make this input height same as container
-    return px(RcBoxSelectInputHeights[size] - 12);
-});
-export var selectStyle = function (_a) {
-    var variant = _a.variant, placeholder = _a.placeholder;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .", " {\n    color: ", ";\n  }\n\n  .", " {\n    .", " {\n      color: ", ";\n    }\n  }\n\n  .", " {\n    .", " {\n      color: ", ";\n    }\n  }\n\n  .", " {\n    color: ", ";\n    &:before {\n      content: ", ";\n      border: none;\n    }\n  }\n\n  .", " {\n    color: ", ";\n    .", " {\n      color: ", ";\n    }\n  }\n\n  ", ";\n  ", ";\n"], ["\n  .", " {\n    color: ", ";\n  }\n\n  .", " {\n    .", " {\n      color: ", ";\n    }\n  }\n\n  .", " {\n    .", " {\n      color: ", ";\n    }\n  }\n\n  .", " {\n    color: ", ";\n    &:before {\n      content: ", ";\n      border: none;\n    }\n  }\n\n  .", " {\n    color: ", ";\n    .", " {\n      color: ", ";\n    }\n  }\n\n  ", ";\n  ", ";\n"])), RcSelectClasses.icon, palette2('neutral', 'f04'), RcSelectInputClasses.focused, RcSelectClasses.icon, palette2('interactive', 'f01'), RcSelectInputClasses.error, RcSelectClasses.icon, palette2('danger', 'f02'), RcSelectInputWhenPlaceholderClasses.input, placeholderColor, "'" + placeholder + "'", RcSelectInputClasses.disabled, disabledColor, RcSelectClasses.icon, disabledColor, variant === 'line' && lineSelectStyle, variant === 'box' && boxSelectStyle);
+var boxSelectStyle = function (_a) {
+    var color = _a.color;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ", ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"], ["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ",
+        ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"])), RcBoxSelectInputClasses.root, function (_a) {
+        var label = _a.label;
+        return label && spacing(5);
+    }, function (_a) {
+        var size = _a.size;
+        return px(RcBoxSelectInputHeights[size]);
+    }, radius('lg'), boxBackgroundColor, RcBoxSelectInputClasses.disabled, setOpacity(boxActionBackgroundColor, '12'), radius('lg'), fakeBorder({ color: palette2('highContrast') }), RcBoxSelectInputClasses.focused, setOpacity(boxActionBackgroundColor, '16'), fakeBorder({ color: color }), RcBoxSelectInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcBoxSelectInputClasses.disabled, setOpacity(palette2('action', 'grayLight'), '12'), fakeBorder({ color: 'transparent', allowTransparent: true }), RcBoxSelectInputClasses.input, spacing(1.5, 6, 1.5, 2), function (_a) {
+        var textVariant = _a.textVariant;
+        return typography(textVariant || 'body1');
+    }, function (_a) {
+        var size = _a.size;
+        // here -12 for make this input height same as container
+        return px(RcBoxSelectInputHeights[size] - 12);
+    });
+};
+export var selectStyle = function (props) {
+    var variant = props.variant, placeholder = props.placeholder, colorProp = props.color;
+    var color = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      &:before {\n        content: ", ";\n        border: none;\n      }\n    }\n\n    .", " {\n      color: ", ";\n      .", " {\n        color: ", ";\n      }\n    }\n\n    ", ";\n    ", ";\n  "], ["\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      &:before {\n        content: ", ";\n        border: none;\n      }\n    }\n\n    .", " {\n      color: ", ";\n      .", " {\n        color: ", ";\n      }\n    }\n\n    ", ";\n    ", ";\n  "])), RcSelectClasses.icon, palette2('neutral', 'f04'), RcSelectInputClasses.focused, RcSelectClasses.icon, color, RcSelectInputClasses.error, RcSelectClasses.icon, palette2('danger', 'f02'), RcSelectInputWhenPlaceholderClasses.input, placeholderColor, "'" + placeholder + "'", RcSelectInputClasses.disabled, disabledColor, RcSelectClasses.icon, disabledColor, variant === 'line' && lineSelectStyle, variant === 'box' && boxSelectStyle(__assign(__assign({}, props), { color: color })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/Forms/TextField/TextField.js

@@ -15,9 +15,9 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
     // #region outline pick props
-    variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, 
+    variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
-    rest = __rest(props, ["classes", "InputLabelProps", "FormHelperTextProps", "value", "focusOnMount", "selectOnMount", "clearAriaLabel", "autoFocus", "InputProps", "error", "helperText", "defaultValue", "inputRef", "autoSelect", "autoFocusDelay", "clearLabel", "clearButtonProps", "clearBtn", "validate", "onChange", "onBlur", "onFocus", "onClear", "id", "variant", "radius", "size", "align", "textVariant", "gutterBottom"]);
+    rest = __rest(props, ["classes", "InputLabelProps", "FormHelperTextProps", "value", "focusOnMount", "selectOnMount", "clearAriaLabel", "autoFocus", "InputProps", "error", "helperText", "defaultValue", "inputRef", "autoSelect", "autoFocusDelay", "clearLabel", "clearButtonProps", "clearBtn", "validate", "onChange", "onBlur", "onFocus", "onClear", "id", "variant", "radius", "size", "align", "textVariant", "gutterBottom", "color"]);
     var formContext = useRcFormContext();
     var innerRef = useRef();
     var inputRef = useForkRef(inputRefProp, innerRef);

package/es6/components/Forms/TextField/styles/OutlineTextFieldStyle.js

@@ -1,14 +1,16 @@
 import { __makeTemplateObject } from "tslib";
-import { css, fakeBorder, palette2, px, radius as radiusFn, spacing, typography, } from '../../../../foundation';
+import { css, fakeBorder, getParsePaletteColor, palette2, px, radius as radiusFn, spacing, typography, } from '../../../../foundation';
 import { belowIconButtonSpacing, RcOutlineTextFieldFontStyles, RcOutlineTextFieldHeights, RcOutlineTextFieldInputClasses, RcOutlineTextFieldLabelMargins, RcOutlineTextFieldSpaces, RcTextFieldClasses, } from '../utils';
 export var OutlineTextFieldStyle = function (_a) {
-    var radius = _a.radius, size = _a.size;
+    var radius = _a.radius, size = _a.size, colorProp = _a.color;
     var height = px(RcOutlineTextFieldHeights[size]);
     var _b = RcOutlineTextFieldSpaces[size], inside = _b.inside, outside = _b.outside, insideLeft = _b.insideLeft;
     var labelMargin = RcOutlineTextFieldLabelMargins[size];
     var typographyToken = RcOutlineTextFieldFontStyles[size];
     var currRadius = radiusFn(radius);
+    var borderColor = getParsePaletteColor(colorProp, palette2('neutral', 'l03'));
+    var focusBorderColor = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
     // `-webkit-tap-highlight-color` for cover background color, prevent color be cover by browser
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "])), RcOutlineTextFieldInputClasses.input, typography(typographyToken), belowIconButtonSpacing(spacing(inside)), RcOutlineTextFieldInputClasses.input, spacing(insideLeft || inside), RcTextFieldClasses.root, RcOutlineTextFieldInputClasses.root, spacing(labelMargin), RcOutlineTextFieldInputClasses.root, height, height, palette2('neutral', 'b01'), spacing(outside), currRadius, currRadius, fakeBorder({ color: palette2('neutral', 'l03') }), RcOutlineTextFieldInputClasses.focused, RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b02'), RcOutlineTextFieldInputClasses.focused, fakeBorder({ color: palette2('interactive', 'f01') }), RcOutlineTextFieldInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b03'), fakeBorder({ color: palette2('disabled', 'f02') }));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "])), RcOutlineTextFieldInputClasses.input, typography(typographyToken), belowIconButtonSpacing(spacing(inside)), RcOutlineTextFieldInputClasses.input, spacing(insideLeft || inside), RcTextFieldClasses.root, RcOutlineTextFieldInputClasses.root, spacing(labelMargin), RcOutlineTextFieldInputClasses.root, height, height, palette2('neutral', 'b01'), spacing(outside), currRadius, currRadius, fakeBorder({ color: borderColor }), RcOutlineTextFieldInputClasses.focused, RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b02'), RcOutlineTextFieldInputClasses.focused, fakeBorder({ color: focusBorderColor }), RcOutlineTextFieldInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b03'), fakeBorder({ color: palette2('disabled', 'f02') }));
 };
 var templateObject_1;

package/es6/components/Forms/TextField/styles/TextFieldStyle.js

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from "tslib";
-import { css, isFilled, nonTouchHoverMedia, palette2, px, spacing, typography, } from '../../../../foundation';
+import { css, getParsePaletteColor, isFilled, nonTouchHoverMedia, palette2, px, spacing, typography, } from '../../../../foundation';
 import { RcIconButtonSizes } from '../../../Buttons/IconButton/utils';
 import { belowIconButtonSpacing, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from '../utils';
 import { ClearIconButton } from './ClearIconButton';
@@ -14,13 +14,17 @@ export var RcDefaultTextFieldWidth = '168px';
 var focusWithNotDisabled = "." + RcTextFieldInputClasses.root + ":hover:not(." + RcTextFieldInputClasses.disabled + ")";
 var TextFieldInputHoverFocusStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    display: inline-flex;\n  }\n"], ["\n  ", " {\n    display: inline-flex;\n  }\n"])), ClearIconButton);
 export var clearBtnInactiveStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"], ["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"])), nonTouchHoverMedia, focusWithNotDisabled, TextFieldInputHoverFocusStyle, RcTextFieldInputClasses.focused, TextFieldInputHoverFocusStyle);
-export var TextFieldStyle = function (_a) {
-    var value = _a.value, variant = _a.variant, fullWidth = _a.fullWidth, clearBtn = _a.clearBtn, size = _a.size, textVariant = _a.textVariant, gutterBottom = _a.gutterBottom, align = _a.align;
+export var TextFieldStyle = function (props) {
+    var value = props.value, variant = props.variant, fullWidth = props.fullWidth, clearBtn = props.clearBtn, size = props.size, textVariant = props.textVariant, gutterBottom = props.gutterBottom, align = props.align, colorProp = props.color;
     var showClean = isFilled({ value: value });
+    var color = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
+    var labelRootColor = getParsePaletteColor(colorProp, idleColor);
+    var underlineColor = getParsePaletteColor(colorProp, palette2('neutral', 'f02'));
+    var underlineFocusColor = getParsePaletteColor(colorProp, palette2('neutral', 'f06'));
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "], ["\n    ", ";\n\n    width: ", ";\n\n    ",
         ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      ",
-        ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), belowIconButtonSpacing(spacing(3)), !fullWidth && RcDefaultTextFieldWidth, gutterBottom && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), RcTextFieldClasses.root, spacing(4)), RcTextFieldInputLabelClasses.root, typography('caption2'), idleColor, RcTextFieldInputLabelClasses.focused, palette2('interactive', 'f01'), RcTextFieldInputClasses.root, textColor, ClearIconButton, showClean && clearBtnInactiveStyle, RcTextFieldInputClasses.input, typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, placeholderColor, clearBtn &&
+        ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), belowIconButtonSpacing(spacing(3)), !fullWidth && RcDefaultTextFieldWidth, gutterBottom && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), RcTextFieldClasses.root, spacing(4)), RcTextFieldInputLabelClasses.root, typography('caption2'), labelRootColor, RcTextFieldInputLabelClasses.focused, color, RcTextFieldInputClasses.root, textColor, ClearIconButton, showClean && clearBtnInactiveStyle, RcTextFieldInputClasses.input, typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, placeholderColor, clearBtn &&
         align &&
-        align !== 'left' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), px(RcIconButtonSizes[size])), RcTextFieldInputClasses.underline, palette2('neutral', 'f02'), nonTouchHoverMedia, RcTextFieldInputClasses.disabled, palette2('neutral', 'f06'), palette2('interactive', 'f01'), RcTextFieldInputClasses.error, errorColor, RcTextFieldInputClasses.disabled, disabledColor, disabledColor, disabledColor, disabledColor, RcTextFieldFormHelperTextClasses.root, typography('caption1'), idleColor, RcTextFieldFormHelperTextClasses.error, RcTextFieldInputLabelClasses.error, errorTextColor, RcTextFieldFormHelperTextClasses.disabled, RcTextFieldInputLabelClasses.disabled, disabledColor, variant === 'outline' && OutlineTextFieldStyle);
+        align !== 'left' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), px(RcIconButtonSizes[size])), RcTextFieldInputClasses.underline, underlineColor, nonTouchHoverMedia, RcTextFieldInputClasses.disabled, underlineFocusColor, color, RcTextFieldInputClasses.error, errorColor, RcTextFieldInputClasses.disabled, disabledColor, disabledColor, disabledColor, disabledColor, RcTextFieldFormHelperTextClasses.root, typography('caption1'), idleColor, RcTextFieldFormHelperTextClasses.error, RcTextFieldInputLabelClasses.error, errorTextColor, RcTextFieldFormHelperTextClasses.disabled, RcTextFieldInputLabelClasses.disabled, disabledColor, variant === 'outline' && OutlineTextFieldStyle);
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/es6/components/Forms/Textarea/Textarea.js

@@ -6,18 +6,23 @@ import { TextareaStyle } from './styles';
 import { RcTextareaInputClasses } from './utils';
 var _RcTextarea = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcTextarea' });
-    var classes = props.classes, InputPropsProp = props.InputProps, rest = __rest(props, ["classes", "InputProps"]);
+    var classes = props.classes, InputPropsProp = props.InputProps, rowsProp = props.rows, minRows = props.minRows, maxRows = props.maxRows, rest = __rest(props, ["classes", "InputProps", "rows", "minRows", "maxRows"]);
     var InputProps = useMemo(function () {
         return combineProps({
             classes: RcTextareaInputClasses,
         }, InputPropsProp);
     }, [InputPropsProp]);
-    return (React.createElement(RcTextField, __assign({}, rest, { multiline: true, InputProps: InputProps, clearBtn: false, ref: ref })));
+    var rows = rowsProp;
+    // when have minRows and maxRows, not set rows to Mui
+    if (minRows || maxRows) {
+        rows = undefined;
+    }
+    return (React.createElement(RcTextField, __assign({}, rest, { rows: rows, minRows: minRows, maxRows: maxRows, multiline: true, InputProps: InputProps, clearBtn: false, ref: ref })));
 });
 /** @release */
 var RcTextarea = styled(_RcTextarea)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TextareaStyle);
 RcTextarea.defaultProps = {
-    minRows: 3,
+    rows: 3,
 };
 RcTextarea.displayName = 'RcTextarea';
 export { RcTextarea };

package/es6/components/Icon/assets/icon-Description.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>Description</title>
+<path d="M19.25 24c0.414 0 0.75 0.448 0.75 1s-0.336 1-0.75 1h-16.5c-0.414 0-0.75-0.448-0.75-1s0.336-1 0.75-1h16.5zM28.833 15c0.644 0 1.167 0.448 1.167 1s-0.522 1-1.167 1h-25.667c-0.644 0-1.167-0.448-1.167-1s0.522-1 1.167-1h25.667zM28.833 6c0.644 0 1.167 0.448 1.167 1s-0.522 1-1.167 1h-25.667c-0.644 0-1.167-0.448-1.167-1s0.522-1 1.167-1h25.667z"></path>
+</svg>