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

package/components/Virtuoso/react-virtuoso/List.d.ts

@@ -75,7 +75,7 @@ export declare const List: React.ForwardRefExoticComponent<{} & {
     rangeChanged?: ((value: import("./interfaces").ListRange | undefined) => void) | undefined;
     itemsRendered?: ((value: import("./listStateSystem").ListItems) => void) | undefined;
     totalListHeightChanged?: ((value: number) => void) | undefined;
-} & Pick<React.HTMLProps<"div">, "key" | "form" | "list" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "cite" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "shape" | "disabled" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "open" | "selected" | "src" | "checked" | "start" | "readOnly" | "required" | "rows" | "autoComplete" | "sizes" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap"> & React.RefAttributes<import("@virtuoso.dev/react-urx").MethodsFromPropMap<import("@virtuoso.dev/urx").SystemSpec<[import("@virtuoso.dev/urx").SystemSpec<[import("@virtuoso.dev/urx").SystemSpec<never[], () => {
+} & Pick<React.HTMLProps<"div">, "key" | "form" | "list" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "cite" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "shape" | "disabled" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "open" | "selected" | "src" | "checked" | "start" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap"> & React.RefAttributes<import("@virtuoso.dev/react-urx").MethodsFromPropMap<import("@virtuoso.dev/urx").SystemSpec<[import("@virtuoso.dev/urx").SystemSpec<[import("@virtuoso.dev/urx").SystemSpec<never[], () => {
     data: import("@virtuoso.dev/urx").StatefulStream<import("./sizeSystem").Data>;
     totalCount: Stream<number>;
     sizeRanges: Stream<import("./sizeSystem").SizeRange[]>;

package/components/Virtuoso/utils/useHighlightScroll.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { IndexLocationWithAlign, ListItem } from 'react-virtuoso';
 declare type UseHighlightScrollParams = {
     /** function to call to scroll to target index */
-    scrollToIndex: (location: number | IndexLocationWithAlign) => void;
+    scrollToIndex: (location: IndexLocationWithAlign) => void;
     /** that scroll container height ref */
     containerHeighRef: React.MutableRefObject<number>;
 };

package/es6/components/Buttons/Button/styles/StyledButton.js

@@ -3,11 +3,13 @@ import { css, fakeBorder, focusVisible, getParsePaletteColor, nonTouchHoverMedia
 import { RcButtonClasses, RcButtonColors, RcButtonHeights, RcButtonIconSpace, RcButtonMinWidths, RcButtonPadding, RcButtonTextColors, RcButtonTypographies, } from '../utils';
 export var buttonColor = function (_a) {
     var color = _a.color;
-    return RcButtonColors[color] || getParsePaletteColor(color);
+    return (typeof color === 'string' && RcButtonColors[color]) ||
+        getParsePaletteColor(color);
 };
 export var plainButtonTextColor = function (_a) {
     var color = _a.color;
-    return RcButtonTextColors[color] || getParsePaletteColor(color);
+    return (typeof color === 'string' && RcButtonTextColors[color]) ||
+        getParsePaletteColor(color);
 };
 export var buttonTextColor = function (props) {
     return paletteContrastText(buttonColor(props));

package/es6/components/Chip/Chip.js

@@ -1,15 +1,17 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo, } from 'react';
 import MuiChip from '@material-ui/core/Chip';
-import { combineClasses, isRcElement, styled, useThemeProps, } from '../../foundation';
+import { combineClasses, isRcElement, omit, styled, useThemeProps, } from '../../foundation';
 import DeleteCircle from '../../icon/DeleteCircle';
 import { RcIconButton } from '../Buttons/IconButton';
 import { ChipStyle } from './styles';
 import { RcChipClasses } from './utils';
+import clsx from 'clsx';
 var _RcChip = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcChip' });
-    var AvatarProp = props.Avatar, deleteTooltip = props.deleteTooltip, deleteAutomationId = props.deleteAutomationId, isError = props.isError, classesProp = props.classes, _a = props.avatar, avatarProp = _a === void 0 ? AvatarProp : _a, _b = props.error, error = _b === void 0 ? isError : _b, id = props.id, label = props.label, disabled = props.disabled, deleteIconProp = props.deleteIcon, deleteIconProps = props.deleteIconProps, tabIndex = props.tabIndex, rest = __rest(props, ["Avatar", "deleteTooltip", "deleteAutomationId", "isError", "classes", "avatar", "error", "id", "label", "disabled", "deleteIcon", "deleteIconProps", "tabIndex"]);
-    var classes = useMemo(function () { return combineClasses(RcChipClasses, classesProp); }, [classesProp]);
+    var AvatarProp = props.Avatar, deleteTooltip = props.deleteTooltip, deleteAutomationId = props.deleteAutomationId, isError = props.isError, classesProp = props.classes, _a = props.avatar, avatarProp = _a === void 0 ? AvatarProp : _a, _b = props.error, error = _b === void 0 ? isError : _b, id = props.id, label = props.label, disabled = props.disabled, deleteIconProp = props.deleteIcon, deleteIconProps = props.deleteIconProps, tabIndex = props.tabIndex, focused = props.focused, color = props.color, className = props.className, rest = __rest(props, ["Avatar", "deleteTooltip", "deleteAutomationId", "isError", "classes", "avatar", "error", "id", "label", "disabled", "deleteIcon", "deleteIconProps", "tabIndex", "focused", "color", "className"]);
+    var combinedClasses = useMemo(function () { return combineClasses(RcChipClasses, classesProp); }, [classesProp]);
+    var classes = useMemo(function () { return omit(combinedClasses, ['focused']); }, [combinedClasses]);
     var deleteIcon = useMemo(function () {
         return deleteIconProp ? (React.cloneElement(deleteIconProp, __assign({ tabIndex: -1 }, deleteIconProps))) : (React.createElement(RcIconButton, __assign({ tabIndex: -1, disabled: disabled, variant: "plain", size: "medium", title: deleteTooltip, color: error ? 'danger.f02' : undefined, "data-test-automation-id": deleteAutomationId, symbol: DeleteCircle }, deleteIconProps)));
     }, [
@@ -35,7 +37,7 @@ var _RcChip = forwardRef(function (inProps, ref) {
         }
         return undefined;
     }, [avatarProp]);
-    return (React.createElement(MuiChip, __assign({ ref: ref, id: id, tabIndex: disabled ? -1 : tabIndex, label: label, disabled: disabled, classes: classes, avatar: avatar, deleteIcon: deleteIcon, "data-test-automation-class": "selected-item", "data-test-automation-value": id ? id : label, "data-is-error": error }, rest)));
+    return (React.createElement(MuiChip, __assign({ ref: ref, id: id, tabIndex: disabled ? -1 : tabIndex, label: label, disabled: disabled, classes: classes, className: clsx(className, focused ? combinedClasses.focused : undefined), avatar: avatar, deleteIcon: deleteIcon, "data-test-automation-class": "selected-item", "data-test-automation-value": id ? id : label, "data-is-error": error }, rest)));
 });
 var RcChip = styled(_RcChip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ChipStyle);
 RcChip.defaultProps = {

package/es6/components/Chip/styles/ChipStyle.js

@@ -1,5 +1,5 @@
 import { __assign, __makeTemplateObject } from "tslib";
-import { css, ellipsis, fakeBorder, focusVisible, focusVisibleColor, nonTouchHoverMedia, palette2, radius, setOpacity, spacing, typography, } from '../../../foundation';
+import { css, ellipsis, fakeBorder, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, radius, setOpacity, spacing, typography, } from '../../../foundation';
 import { disabledColor, textColor } from '../../Forms/TextField/styles';
 import { RcChipClasses } from '../utils';
 var defaultBgColor = palette2('action', 'grayDark');
@@ -8,9 +8,10 @@ function fakePseudoRoundBorder(addOptions) {
     return fakeBorder(__assign({ pseudo: true, radius: 'round' }, addOptions));
 }
 export var ChipStyle = function (props) {
-    var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    border-radius: ", ";\n    ", ";\n\n    ", ";\n    ", ";\n\n    ", " {\n      ", ";\n\n      background-color: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ", ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "], ["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    border-radius: ", ";\n    ", ";\n\n    ", ";\n    ", ";\n\n    ", " {\n      ", ";\n\n      background-color: ",
-        ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ",
-        ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "])), spacing(0.5), palette2('neutral', 'b03'), textColor, radius('round'), ellipsis, typography('body1'), fakePseudoRoundBorder(), focusVisible, fakePseudoRoundBorder({ color: focusVisibleColor }), setOpacity(error ? errorBgColor : defaultBgColor, '08'), nonTouchHoverMedia, setOpacity(defaultBgColor, '12'), setOpacity(defaultBgColor, '16'), setOpacity(defaultBgColor, '24'), RcChipClasses.disabled, disabledColor, error && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:not(.", ") {\n        color: ", ";\n        ", ";\n\n        background-color: ", ";\n\n        ", " {\n          &:hover {\n            background-color: ", ";\n          }\n        }\n\n        &:focus {\n          background-color: ", ";\n        }\n\n        &:active {\n          background-color: ", ";\n        }\n      }\n    "], ["\n      &:not(.", ") {\n        color: ", ";\n        ", ";\n\n        background-color: ", ";\n\n        ", " {\n          &:hover {\n            background-color: ", ";\n          }\n        }\n\n        &:focus {\n          background-color: ", ";\n        }\n\n        &:active {\n          background-color: ", ";\n        }\n      }\n    "])), RcChipClasses.disabled, palette2('danger', 'f02'), fakePseudoRoundBorder({ color: palette2('danger', 'f02') }), palette2('danger', 'b01'), nonTouchHoverMedia, setOpacity(errorBgColor, '08'), setOpacity(errorBgColor, '16'), setOpacity(errorBgColor, '24')), RcChipClasses.avatar, palette2('neutral', 'b01'));
+    var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a, colorProp = props.color;
+    var color = getParsePaletteColor(colorProp, focusVisibleColor);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    border-radius: ", ";\n    ", ";\n\n    ", ";\n    ", ";\n\n    &.", ", ", " {\n      ", ";\n\n      background-color: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", ", &:focus {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ", ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "], ["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    border-radius: ", ";\n    ", ";\n\n    ", ";\n    ", ";\n\n    &.", ", ", " {\n      ", ";\n\n      background-color: ",
+        ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", ", &:focus {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ",
+        ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "])), spacing(0.5), palette2('neutral', 'b03'), textColor, radius('round'), ellipsis, typography('body1'), fakePseudoRoundBorder(), RcChipClasses.focused, focusVisible, fakePseudoRoundBorder({ color: color }), setOpacity(error ? errorBgColor : defaultBgColor, '08'), nonTouchHoverMedia, setOpacity(defaultBgColor, '12'), RcChipClasses.focused, setOpacity(defaultBgColor, '16'), setOpacity(defaultBgColor, '24'), RcChipClasses.disabled, disabledColor, error && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:not(.", ") {\n        color: ", ";\n        ", ";\n\n        background-color: ", ";\n\n        ", " {\n          &:hover {\n            background-color: ", ";\n          }\n        }\n\n        &:focus {\n          background-color: ", ";\n        }\n\n        &:active {\n          background-color: ", ";\n        }\n      }\n    "], ["\n      &:not(.", ") {\n        color: ", ";\n        ", ";\n\n        background-color: ", ";\n\n        ", " {\n          &:hover {\n            background-color: ", ";\n          }\n        }\n\n        &:focus {\n          background-color: ", ";\n        }\n\n        &:active {\n          background-color: ", ";\n        }\n      }\n    "])), RcChipClasses.disabled, palette2('danger', 'f02'), fakePseudoRoundBorder({ color: palette2('danger', 'f02') }), palette2('danger', 'b01'), nonTouchHoverMedia, setOpacity(errorBgColor, '08'), setOpacity(errorBgColor, '16'), setOpacity(errorBgColor, '24')), RcChipClasses.avatar, palette2('neutral', 'b01'));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Chip/utils/ChipUtils.js

@@ -1,3 +1,3 @@
 import { RcClasses } from '../../../foundation';
-var RcChipClasses = RcClasses(['avatar', 'disabled', 'deleteIcon'], 'RcChip');
+var RcChipClasses = RcClasses(['avatar', 'disabled', 'deleteIcon', 'focused'], 'RcChip');
 export { RcChipClasses };

package/es6/components/Dialer/DialPad/index.js

@@ -1,2 +1,4 @@
 export * from './DialPad';
+export * from './utils/useDialKeyboard';
+export * from './utils/useKeyAudio';
 export { RcDialerPadSounds } from './assets';

package/es6/components/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import MuiDialog from '@material-ui/core/Dialog';
-import { combineClasses, combineProps, styled, useRcPortalWindowContext, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { combineClasses, styled, useRcPortalWindowContext, useThemeProps, withDeprecatedCheck, } from '../../foundation';
 import { useUnmountPortalHandler } from '../PortalHost';
 import { DialogStyle } from './styles';
 import { RcDialogClasses } from './utils';
@@ -29,7 +29,7 @@ var _RcDialog = forwardRef(function (inProps, ref) {
     }, [maxWidthProp, size]);
     var contextValue = useMemo(function () { return ({ size: childrenSize }); }, [childrenSize]);
     var onExited = useUnmountPortalHandler(TransitionPropsProp === null || TransitionPropsProp === void 0 ? void 0 : TransitionPropsProp.onExited);
-    var TransitionProps = useMemo(function () { return combineProps({ onExited: onExited }, TransitionPropsProp); }, [TransitionPropsProp, onExited]);
+    var TransitionProps = __assign(__assign({}, TransitionPropsProp), { onExited: onExited });
     return (React.createElement(MuiDialog, __assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps }, rest),
         React.createElement(RcDialogContext.Provider, { value: contextValue }, children)));
 });

package/es6/components/Downshift/Downshift.js

@@ -1,6 +1,6 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { combineClasses, combineProps, omit, styled, useEventCallback, useForkRef, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { combineClasses, combineProps, getParsePaletteColor, omit, styled, useEventCallback, useForkRef, useTheme, useThemeProps, withDeprecatedCheck, } from '../../foundation';
 import ArrowDown from '../../icon/ArrowDown';
 import ArrowUp from '../../icon/ArrowUp';
 import { RcChip } from '../Chip';
@@ -11,7 +11,8 @@ import { RcSuggestionList } from './SuggestionList';
 import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
 var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDownshift' });
-    var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose"]);
+    var theme = useTheme();
+    var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, groupDefaultExpanded = props.groupDefaultExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, focused = props.focused, color = props.color, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupDefaultExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose", "focused", "color"]);
     var _y = __read(useState('bottom'), 2), position = _y[0], setPosition = _y[1];
     var innerInputRef = useRef(null);
     var textFieldRef = useRef(null);
@@ -23,6 +24,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
     var _z = useDownshift({
+        focused: focused,
         open: openProp,
         variant: variant,
         onOpen: onOpen,
@@ -34,6 +36,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         inputValue: inputValueProp,
         getOptionDisabled: getOptionDisabled,
         groupExpanded: groupVariant === 'normal' ? true : groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
         getExpandIconProps: getExpandIconProps,
         options: suggestionItems || options,
         freeSolo: freeSolo,
@@ -59,7 +62,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.selectedItems, highlightedIndex = _z.highlightedIndex, getToggleButtonProps = _z.getToggleButtonProps, getTagProps = _z.getTagProps, getTagListBoxProps = _z.getTagListBoxProps, getMenuProps = _z.getMenuProps, getPopperProps = _z.getPopperProps, getInputProps = _z.getInputProps, getInputAriaProps = _z.getInputAriaProps, getLabelProps = _z.getLabelProps, getItemProps = _z.getItemProps, isOpen = _z.isOpen, inputValue = _z.inputValue, isTagsFocus = _z.isTagsFocus, activeIndex = _z.activeIndex, setActiveIndex = _z.setActiveIndex, setHighlightedIndex = _z.setHighlightedIndex, onInputChange = _z.onInputChange, keepHighlightedIndex = _z.keepHighlightedIndex, changeHighlightedIndexReason = _z.changeHighlightedIndexReason, closeMenu = _z.closeMenu, openMenu = _z.openMenu, reset = _z.reset, getClearButtonProps = _z.getClearButtonProps, noOptionItem = _z.noOptionItem, getNoOptionsProps = _z.getNoOptionsProps, isKeepHighlightedIndex = _z.isKeepHighlightedIndex;
+    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.selectedItems, highlightedIndex = _z.highlightedIndex, getToggleButtonProps = _z.getToggleButtonProps, getTagProps = _z.getTagProps, getTagListBoxProps = _z.getTagListBoxProps, getMenuProps = _z.getMenuProps, getPopperProps = _z.getPopperProps, getInputProps = _z.getInputProps, getInputAriaProps = _z.getInputAriaProps, getLabelProps = _z.getLabelProps, getItemProps = _z.getItemProps, isOpen = _z.isOpen, inputValue = _z.inputValue, isTagsFocus = _z.isTagsFocus, activeIndex = _z.activeIndex, setActiveIndex = _z.setActiveIndex, setHighlightedIndex = _z.setHighlightedIndex, onInputChange = _z.onInputChange, keepHighlightedIndex = _z.keepHighlightedIndex, changeHighlightedIndexReason = _z.changeHighlightedIndexReason, closeMenu = _z.closeMenu, openMenu = _z.openMenu, reset = _z.reset, getClearButtonProps = _z.getClearButtonProps, noOptionItem = _z.noOptionItem, getNoOptionsProps = _z.getNoOptionsProps, isKeepHighlightedIndex = _z.isKeepHighlightedIndex, isFocused = _z.isFocused;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _0 = getInputProps(), onBlur = _0.onBlur, InputProps = __rest(_0, ["onBlur"]);
     var helperText = isNew
@@ -85,6 +88,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         }
     }
     var toTextFieldRef = useForkRef(textFieldRef, ref);
+    var colorHex = useMemo(function () { return (color ? getParsePaletteColor(color)({ theme: theme }) : undefined); }, [color, theme]);
     var startAdornment = (function () {
         if (variant === 'autocomplete') {
             return undefined;
@@ -99,7 +103,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
             if (selectedItem.error) {
                 oneOfTagError = true;
             }
-            return tagProps;
+            return __assign(__assign({}, tagProps), { color: colorHex });
         };
         return renderTags
             ? renderTags(selectedItems, getCustomizedTagProps)
@@ -120,9 +124,14 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                     } })));
             });
     })();
+    var isDownshiftFocused = focused !== null && focused !== void 0 ? focused : (isTagsFocus || isFocused ? true : undefined);
     var endAdornment = (toggleButton || clearBtn) && (React.createElement(EndAdornment, null,
         clearBtn && (React.createElement(ClearIconButton, __assign({}, getClearButtonProps(clearButtonProps)))),
-        toggleButton && (React.createElement(ArrowDownButton, __assign({ variant: "plain", "aria-hidden": true, color: error ? 'danger.f02' : 'neutral.f04', size: "large", symbol: isOpen ? ArrowUp : ArrowDown }, getToggleButtonProps(ToggleButtonProps))))));
+        toggleButton && (React.createElement(ArrowDownButton, __assign({ variant: "plain", "aria-hidden": true, color: isDownshiftFocused
+                ? color || 'interactive.f01'
+                : error
+                    ? 'danger.f02'
+                    : 'neutral.f04', size: "large", symbol: isOpen ? ArrowUp : ArrowDown }, getToggleButtonProps(ToggleButtonProps))))));
     var _1 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = __rest(_a, ["classes"]);
         var toClasses = combineClasses(classes, RcDownshiftInputClasses);
@@ -154,7 +163,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.update();
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(StyledTextField, __assign({ renderInput: renderInput, hasTags: hasTags, ref: toTextFieldRef, inputRef: inputRef, "data-test-automation-id": automationId, fullWidth: fullWidth, placeholder: !hasTags ? placeholder : undefined, label: label, focused: isTagsFocus ? true : undefined, disabled: disabled, required: required, 
+        React.createElement(StyledTextField, __assign({ renderInput: renderInput, hasTags: hasTags, ref: toTextFieldRef, inputRef: inputRef, "data-test-automation-id": automationId, fullWidth: fullWidth, placeholder: !hasTags ? placeholder : undefined, label: label, focused: isDownshiftFocused, disabled: disabled, required: required, color: color, 
             // * if below one of tag is error, that main downshift default will be error
             error: error !== null && error !== void 0 ? error : oneOfTagError, FormHelperTextProps: FormHelperTextProps, InputProps: TextFieldInputProps, helperText: helperText }, combineProps({
             InputLabelProps: getLabelProps(),
@@ -286,5 +295,5 @@ var RcDownshift = styled(withDeprecatedCheck(_RcDownshift, [
 RcDownshift.defaultProps = {};
 RcDownshift.displayName = 'RcDownshift';
 var ExportType = RcDownshift;
-export { ExportType as RcDownshift, RcDownshiftDefaultFilterOptions };
+export { ExportType as RcDownshift, RcDownshiftDefaultFilterOptions, RcDownshiftInput, };
 var templateObject_1;

package/es6/components/Downshift/SuggestionList/SuggestionList.js

@@ -6,7 +6,7 @@ import ArrowDown2 from '../../../icon/ArrowDown2';
 import { RcBox } from '../../Box';
 import { RcIconButton } from '../../Buttons/IconButton';
 import { RcMenuItem } from '../../Menu/MenuItem';
-import { StyledMenuListPadding } from '../../VirtualizedMenu/styles';
+import { menuListBoundaryPadding, StyledMenuListPadding, } from '../../VirtualizedMenu/styles';
 import { useDynamicHeight, useHighlightScroll, Virtuoso, } from '../../Virtuoso';
 import { SuggestionListStyle } from './styles';
 import { RcSuggestionListClasses } from './utils';
@@ -45,8 +45,13 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
+                    if (location.index === 0 && padding !== undefined) {
+                        location = __assign(__assign({}, location), { offset: -(typeof padding === 'number'
+                                ? padding
+                                : menuListBoundaryPadding) });
+                    }
                     (_a = vlRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(location);
-                    toIndex = typeof location === 'number' ? location : location.index;
+                    toIndex = location.index;
                     return [4 /*yield*/, sleep(0)];
                 case 1:
                     _c.sent();
@@ -139,12 +144,13 @@ var SuggestionList = forwardRef(function (inProps, ref) {
             expandIconProps && (React.createElement(RcIconButton, __assign({}, expandIconProps, { symbol: ArrowDown2 })))));
     };
     var PaddingComponent = useMemo(function () {
-        return padding !== undefined
+        var paddingValue = padding !== undefined && itemCount > 0
             ? typeof padding === 'number'
-                ? function () { return React.createElement(StyledMenuListPadding, { height: padding }); }
-                : StyledMenuListPadding
-            : undefined;
-    }, [padding]);
+                ? padding
+                : menuListBoundaryPadding
+            : 0;
+        return function () { return React.createElement(StyledMenuListPadding, { height: paddingValue }); };
+    }, [itemCount, padding]);
     var components = useMemo(function () {
         return __assign({ List: List, Header: PaddingComponent, Footer: PaddingComponent }, componentsProp);
     }, [componentsProp, PaddingComponent]);

package/es6/components/Downshift/SuggestionList/utils/index.js

@@ -1 +1,2 @@
 export * from './SuggestionListUtils';
+export * from './useSuggestionList';

package/es6/components/Downshift/SuggestionList/utils/useSuggestionList.js

@@ -0,0 +1,237 @@
+import { __read, __rest } from "tslib";
+import { useMemo, useRef } from 'react';
+import uniqueId from 'lodash/uniqueId';
+import { useControlled } from '@material-ui/core/utils';
+import { combineProps, useForceUpdate, useKeyboardMoveFocus, useResultRef, } from '../../../../foundation';
+import { DEFAULT_GET_OPTION_LABEL, isItemCanSelected, } from '../../utils';
+import { useDownshiftGroup } from '../../utils/useDownshiftGroup';
+var DEFAULT_HIGHLIGHTED_INDEX = -1;
+var componentName = 'useSuggestionList';
+/**
+ * provide suggestion list with search function and expandable group with virtualized list
+ */
+export var useSuggestionList = function (_a) {
+    var inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, onInputChangeProp = _a.onInputChange, inputRef = _a.inputRef, onKeyDownProp = _a.onKeyDown, onSelect = _a.onSelect, onClear = _a.onClear, getOptionDisabled = _a.getOptionDisabled, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps;
+    var _c = __read(useControlled({
+        controlled: inputValueProp,
+        default: '',
+        name: componentName,
+    }), 2), inputValue = _c[0], setInputValue = _c[1];
+    var updateInputValue = function (newValue) {
+        onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(newValue);
+        setInputValue(newValue);
+    };
+    var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    var suggestionListId = useResultRef(function () {
+        return uniqueId("suggestion-list-");
+    }).current;
+    // * use -2 for us know that is init state, for recalculate defaultHighlightedIndex
+    var highlightedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
+    var changeHighlightedIndexReason = useRef();
+    var forceUpdate = useForceUpdate();
+    var filteredResult = useMemo(function () {
+        var getFilteredItems = function (items) {
+            if (filterOptions) {
+                return filterOptions(items, {
+                    inputValue: inputValue,
+                    getOptionLabel: getOptionLabel,
+                    selectedItems: [],
+                });
+            }
+            return items;
+        };
+        // * only when isOpen calculate the filtered result
+        var results = getFilteredItems(options);
+        return results;
+    }, [filterOptions, getOptionLabel, inputValue, options]);
+    var _d = useDownshiftGroup({
+        groupBy: groupBy,
+        options: options,
+        filteredResult: filteredResult,
+        getExpandIconProps: getExpandIconProps,
+        groupExpanded: groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
+        onGroupExpanded: onGroupExpanded,
+        groupVariant: groupVariant,
+        getOptionDisabled: getOptionDisabled,
+        id: suggestionListId,
+    }), groupedResult = _d.groupedResult, handleGroupExpandedChange = _d.handleGroupExpandedChange, optionsGroupList = _d.optionsGroupList;
+    var optionItems = groupBy ? groupedResult : filteredResult;
+    var setHighlightedIndex = function (index, _a) {
+        var _b = _a.reRender, reRender = _b === void 0 ? false : _b, reason = _a.reason;
+        changeHighlightedIndexReason.current = reason;
+        if (highlightedIndexRef.current !== index) {
+            highlightedIndexRef.current = index;
+            if (reRender)
+                forceUpdate();
+        }
+    };
+    var handleInputChange = function (newValue) {
+        if (inputValue !== newValue) {
+            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
+            updateInputValue(newValue);
+        }
+        return false;
+    };
+    var getIsItemCanSelected = function (item) {
+        return ((!!item && item.freeSolo) ||
+            (isItemCanSelected(item) && !(getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(item))));
+    };
+    var selectItemFn = function (e, selectedItem) {
+        if (getIsItemCanSelected(selectedItem)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, selectedItem);
+            return true;
+        }
+        return false;
+    };
+    var resetState = function () {
+        if (inputRef.current && inputRef.current.value.length > 0) {
+            updateInputValue('');
+        }
+    };
+    var reset = function (isFocus) {
+        resetState();
+        onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp('');
+        if (isFocus)
+            focusInput();
+    };
+    var onKeyFocusedIndexHandle = useKeyboardMoveFocus({
+        options: optionItems,
+        focusedIndexRef: highlightedIndexRef,
+        infinite: true,
+        onFocusedIndexChange: function (event, toIndex) {
+            setHighlightedIndex(toIndex, { reason: 'keyboard', reRender: true });
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        },
+        getOptionDisabled: disabledItemsHighlightable
+            ? undefined
+            : function (child) {
+                return !getIsItemCanSelected(child);
+            },
+    }).onKeyFocusedIndexHandle;
+    var getItemProps = function (_a) {
+        var item = _a.item, index = _a.index, itemRest = __rest(_a, ["item", "index"]);
+        return combineProps({
+            id: suggestionListId + "-option-" + index,
+            role: 'option',
+            onClick: function (e) {
+                selectItemFn(e, item);
+            },
+            onMouseDown: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            onMouseOver: function () {
+                if (highlightedIndexRef.current !== index) {
+                    setHighlightedIndex(index, { reason: 'mouse', reRender: true });
+                }
+            },
+        }, itemRest);
+    };
+    var getInputProps = function (props) {
+        return combineProps({
+            id: suggestionListId + "-input",
+            autoComplete: 'off',
+            onChange: function (e) {
+                var changeValue = e.target.value;
+                handleInputChange(changeValue);
+            },
+            onKeyDown: function (e) {
+                var _a;
+                onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e, highlightedIndexRef.current);
+                var highlightedIndex = highlightedIndexRef.current;
+                switch (e.key) {
+                    case 'F10':
+                        if (e.shiftKey) {
+                            var currOption = optionItems[highlightedIndex];
+                            var currentGroup = currOption.group;
+                            if (currentGroup && currentGroup.options.length > 1) {
+                                handleGroupExpandedChange(currentGroup.group);
+                            }
+                        }
+                        break;
+                    case 'Enter':
+                        if (e.which === 229)
+                            return;
+                        if (highlightedIndex !== DEFAULT_HIGHLIGHTED_INDEX) {
+                            var currOption = optionItems[highlightedIndex];
+                            var isGroupTitle = currOption === ((_a = currOption.group) === null || _a === void 0 ? void 0 : _a.options[0]);
+                            if (isGroupTitle) {
+                                var onClick = currOption.group.getExpandIconProps().onClick;
+                                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                            }
+                            else {
+                                selectItemFn(e, currOption);
+                            }
+                            e.stopPropagation();
+                        }
+                        // always preventDefault for not inset all enter into textarea
+                        e.preventDefault();
+                        break;
+                    default:
+                        onKeyFocusedIndexHandle(e);
+                        break;
+                }
+            },
+        }, props);
+    };
+    var getInputAriaProps = function (props) {
+        return combineProps({
+            // * provide for when container click focus on input
+            onContainerClick: focusInput,
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            // TODO
+            'aria-expanded': true,
+            'aria-haspopup': true,
+            'aria-owns': suggestionListId + "-menu",
+            'aria-activedescendant': highlightedIndexRef.current > -1
+                ? suggestionListId + "-option-" + highlightedIndexRef.current
+                : undefined,
+        }, props);
+    };
+    var getLabelProps = function (props) {
+        return combineProps({
+            htmlFor: suggestionListId + "-input",
+            id: suggestionListId + "-label",
+        }, props);
+    };
+    var getMenuProps = function (restMenuProps) {
+        return combineProps({
+            'aria-labelledby': suggestionListId + "-label",
+            id: suggestionListId + "-menu",
+            role: 'listbox',
+        }, restMenuProps);
+    };
+    var getClearButtonProps = function (props) {
+        return combineProps({
+            id: suggestionListId + "-clear-button",
+            onClick: function (e) {
+                onClear === null || onClear === void 0 ? void 0 : onClear(e);
+                reset(true);
+            },
+        }, props);
+    };
+    var resultObj = {
+        focusInput: focusInput,
+        getClearButtonProps: getClearButtonProps,
+        getLabelProps: getLabelProps,
+        getMenuProps: getMenuProps,
+        getInputProps: getInputProps,
+        getInputAriaProps: getInputAriaProps,
+        getItemProps: getItemProps,
+        highlightedIndex: highlightedIndexRef.current,
+        optionItems: optionItems,
+        inputValue: inputValue,
+        onInputChange: handleInputChange,
+        setHighlightedIndex: setHighlightedIndex,
+        changeHighlightedIndexReason: changeHighlightedIndexReason.current,
+        reset: reset,
+        forceUpdate: forceUpdate,
+        optionsGroupList: optionsGroupList,
+        /** current suggestion list id */
+        id: suggestionListId,
+    };
+    changeHighlightedIndexReason.current = undefined;
+    return resultObj;
+};

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

@@ -9,14 +9,32 @@ export var isItemCanSelected = function (item) {
 export var DEFAULT_KEY_TO_CHIPS = [';', ',', '\\n'];
 export var DEFAULT_LIMIT_CHIPS = 20;
 export var DEFAULT_GET_OPTION_LABEL = function (item) {
-    return item.label || '';
+    return (item === null || item === void 0 ? void 0 : item.label) || '';
 };
 export var RcDownshiftDefaultRenderNoOptions = function (getNoOptionsProps) {
     return (React.createElement(RcMenuItem, __assign({ component: "div" }, getNoOptionsProps()), "No Options"));
 };
+/**
+ * default downshift filter options method, use with `variant="tags"`
+ *
+ * - filter options by input value and selected items
+ */
 export var RcDownshiftDefaultFilterOptions = function (options, _a) {
     var inputValue = _a.inputValue, getOptionLabel = _a.getOptionLabel, selectedItems = _a.selectedItems;
     return options.filter(function (item) {
         return selectedItems.indexOf(item) < 0 && (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''));
     });
 };
+/**
+ * default downshift filter options method, use with `variant="autocomplete"`
+ *
+ * - when open menu and not change value, that will return whole options
+ * - only filter options by input value when have input value changed
+ */
+export var RcAutocompleteDefaultFilterOptions = function (options, _a) {
+    var inputValue = _a.inputValue, getOptionLabel = _a.getOptionLabel, inputChanged = _a.inputChanged;
+    if (!inputChanged) {
+        return options;
+    }
+    return options.filter(function (item) { return getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''); });
+};