@ringcentral/juno 1.12.2 → 1.12.4-beta.5835-b8c3da57

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/Menu/SubMenu/SubMenu.js

@@ -178,7 +178,7 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
             title,
             React.createElement(StyledListItemSecondaryAction, null,
                 React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: ArrowRight }))),
-        React.createElement(RcPopper, __assign({ role: "menu", id: popperId, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body }, restPopperProps, { ref: popperRef, open: open, anchorEl: anchorEl, transition: true, placement: "right-start", modifiers: modifiers, onKeyDown: handlePopperKeyDown, onMouseLeave: handlePopperMouseLeave }), function (_a) {
+        React.createElement(RcPopper, __assign({ role: "menu", id: popperId, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, placement: "right-start" }, restPopperProps, { ref: popperRef, open: open, anchorEl: anchorEl, transition: true, modifiers: modifiers, onKeyDown: handlePopperKeyDown, onMouseLeave: handlePopperMouseLeave }), function (_a) {
             var TransitionProps = _a.TransitionProps;
             return (React.createElement(StyledGrow, __assign({}, TransitionProps, { timeout: "auto" }),
                 React.createElement(RcPaper, null,

package/es6/components/PortalHost/PortalManager/PortalManager.js

@@ -148,7 +148,7 @@ var PortalManager = /** @class */ (function (_super) {
     /**
      * update props by id, equal 'portalController.updateProps(newProps)'
      */
-    PortalManager.prototype.updatePropsByID = function (id, props) {
+    PortalManager.prototype.updatePropsByID = function (id, propsOrHandler) {
         var portal = this.portalStore.get(id);
         if (!(portal === null || portal === void 0 ? void 0 : portal.open)) {
             logInDev({
@@ -157,6 +157,12 @@ var PortalManager = /** @class */ (function (_super) {
             });
             return;
         }
+        var props = (function () {
+            if (typeof propsOrHandler === 'function') {
+                return propsOrHandler(portal.props);
+            }
+            return propsOrHandler;
+        })();
         this.portalStore.addOrUpdate(__assign(__assign({}, portal), { props: props }));
     };
     PortalManager.prototype.onConnected = function () {
@@ -187,8 +193,8 @@ var PortalManager = /** @class */ (function (_super) {
             close: function (feedback) {
                 _this.closeByID(id, feedback);
             },
-            updateProps: function (newProps) {
-                _this.updatePropsByID(id, newProps);
+            updateProps: function (propsOrHandler) {
+                _this.updatePropsByID(id, propsOrHandler);
             },
             data: data,
             get isOpened() {

package/es6/foundation/config.js

@@ -7,11 +7,14 @@ var RcConfig = /** @class */ (function () {
         this._WARNING_FUNCTION = function (message, options) {
             console[(options === null || options === void 0 ? void 0 : options.level) || 'warn'](message);
         };
-        // * get value once when init
-        this._WARNING_IGNORE =
-            ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
-        // * also provide user to set variable from window
-        window.__JUNO__ = this;
+        if (typeof window !== 'undefined') {
+            // SSR support
+            // * get value once when init
+            this._WARNING_IGNORE =
+                ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
+            // * also provide user to set variable from window
+            window.__JUNO__ = this;
+        }
     }
     Object.defineProperty(RcConfig.prototype, "WARNING_IGNORE", {
         get: function () {

package/es6/foundation/contexts/PortalWindowContext.js

@@ -1,6 +1,8 @@
 import { createContext, useContext } from 'react';
 var RcPortalWindowContext = createContext({
-    document: document,
+    document: 
+    // directly access `document` will cause error in next.js
+    typeof globalThis !== 'undefined' ? globalThis.document : window.document,
 });
 var useRcPortalWindowContext = function () { return useContext(RcPortalWindowContext); };
 export { RcPortalWindowContext, useRcPortalWindowContext };

package/es6/foundation/hooks/useAnnouncer/useAnnouncer.js

@@ -3,6 +3,13 @@ import { useId } from '../useId';
 export var visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
 /**
  * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
  */
 export var useAnnouncer = function (id) {
     var _id = useId(id ? "rc-announcer-" + id : 'rc-announcer', !id);

package/es6/foundation/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.js

@@ -56,7 +56,8 @@ export var useKeyboardMoveFocus = function (_a) {
             // * mean that item is disabled, use same direction find next
             else {
                 // * find toIndex is same as current, mean that already find all
-                if (toIndex === Math.max(focusedIndexRef.current, 0)) {
+                if (focusedIndexRef.current !== -1 &&
+                    toIndex === Math.max(focusedIndexRef.current, 0)) {
                     break;
                 }
                 currIndex = toIndex;

package/foundation/config.js

@@ -9,11 +9,14 @@ var RcConfig = /** @class */ (function () {
         this._WARNING_FUNCTION = function (message, options) {
             console[(options === null || options === void 0 ? void 0 : options.level) || 'warn'](message);
         };
-        // * get value once when init
-        this._WARNING_IGNORE =
-            ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
-        // * also provide user to set variable from window
-        window.__JUNO__ = this;
+        if (typeof window !== 'undefined') {
+            // SSR support
+            // * get value once when init
+            this._WARNING_IGNORE =
+                ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
+            // * also provide user to set variable from window
+            window.__JUNO__ = this;
+        }
     }
     Object.defineProperty(RcConfig.prototype, "WARNING_IGNORE", {
         get: function () {

package/foundation/contexts/PortalWindowContext.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var RcPortalWindowContext = react_1.createContext({
-    document: document,
+    document: 
+    // directly access `document` will cause error in next.js
+    typeof globalThis !== 'undefined' ? globalThis.document : window.document,
 });
 exports.RcPortalWindowContext = RcPortalWindowContext;
 var useRcPortalWindowContext = function () { return react_1.useContext(RcPortalWindowContext); };

package/foundation/hooks/useAnnouncer/useAnnouncer.d.ts

@@ -1,5 +1,12 @@
 export declare const visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
 /**
  * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
  */
 export declare const useAnnouncer: (id?: string | undefined) => (message?: string | undefined) => void;

package/foundation/hooks/useAnnouncer/useAnnouncer.js

@@ -5,6 +5,13 @@ var useId_1 = require("../useId");
 exports.visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
 /**
  * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
  */
 exports.useAnnouncer = function (id) {
     var _id = useId_1.useId(id ? "rc-announcer-" + id : 'rc-announcer', !id);

package/foundation/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.js

@@ -58,7 +58,8 @@ exports.useKeyboardMoveFocus = function (_a) {
             // * mean that item is disabled, use same direction find next
             else {
                 // * find toIndex is same as current, mean that already find all
-                if (toIndex === Math.max(focusedIndexRef.current, 0)) {
+                if (focusedIndexRef.current !== -1 &&
+                    toIndex === Math.max(focusedIndexRef.current, 0)) {
                     break;
                 }
                 currIndex = toIndex;