@ringcentral/juno 2.1.1 → 2.3.0

package/README.md

@@ -1,9 +1,8 @@
 # Juno
 
 [![NPM version](https://img.shields.io/npm/v/@ringcentral/juno/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno)
-[![NPM beta version](https://img.shields.io/npm/v/@ringcentral/juno/beta.svg)](https://www.npmjs.com/package/@ringcentral/juno?activeTab=versions)
 
-[![NPM version](https://img.shields.io/npm/v/@ringcentral/juno-icon/beta.svg)](https://www.npmjs.com/package/@ringcentral/juno-icon)
+[![NPM version](https://img.shields.io/npm/v/@ringcentral/juno-icon/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno-icon)
 
 Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.
 

package/components/Animations/Highlight/Highlight.d.ts

@@ -11,7 +11,7 @@ declare type RcHighlightProps = {
     /** that animation easing */
     easing?: string;
     /** that trigger highlight action ref */
-    action: React.MutableRefObject<() => void>;
+    action?: React.Ref<() => void>;
     /** background color when highlight */
     backgroundColor?: RcPaletteProp;
 } & RcBaseProps<TransitionProps, 'in' | 'timeout'>;
@@ -29,7 +29,7 @@ declare const RcHighlight: React.ForwardRefExoticComponent<{
     /** that animation easing */
     easing?: string | undefined;
     /** that trigger highlight action ref */
-    action: React.MutableRefObject<() => void>;
+    action?: ((instance: (() => void) | null) => void) | React.RefObject<() => void> | null | undefined;
     /** background color when highlight */
     backgroundColor?: (string & Record<never, never>) | "action.grayDark" | "action.grayLight" | "action.primary" | "avatar.ash" | "avatar.blueberry" | "avatar.brass" | "avatar.global" | "avatar.gold" | "avatar.lake" | "avatar.oasis" | "avatar.pear" | "avatar.persimmon" | "avatar.sage" | "avatar.tomato" | "content.brand" | "danger.b01" | "danger.b02" | "danger.b03" | "danger.b04" | "danger.f01" | "danger.f02" | "danger.f11" | "dialHeader.avatarBg" | "dialHeader.avatarIcon" | "dialHeader.bg" | "dialHeader.focusBorder" | "dialHeader.icon" | "dialHeader.text" | "dialHeader.textHint" | "disabled.b01" | "disabled.f01" | "disabled.f02" | "header.bgLeft" | "header.bgOverlay" | "header.bgOverlayDisabled" | "header.bgRight" | "header.border" | "header.divider" | "header.fabBg" | "header.fabIcon" | "header.focusBorder" | "header.icon" | "header.iconDisabled" | "header.text" | "header.textHint" | "highContrast" | "highlight.b01" | "highlight.b02" | "highlight.b03" | "highlight.f01" | "highlight.f02" | "informative.b01" | "informative.f01" | "informative.f02" | "interactive.b01" | "interactive.b02" | "interactive.f01" | "label.black02" | "label.blue01" | "label.blue02" | "label.green01" | "label.green02" | "label.orange01" | "label.orange02" | "label.purple01" | "label.purple02" | "label.red01" | "label.red02" | "label.teal01" | "label.teal02" | "label.yellow01" | "label.yellow02" | "nav.b01" | "nav.b02" | "nav.bookmark" | "nav.ctlDefault" | "nav.ctlSelected" | "nav.f01" | "nav.f02" | "nav.f03" | "nav.f04" | "nav.iconDefault" | "nav.iconSelected" | "nav.line" | "nav.mention" | "nav.menuBg" | "nav.menuText" | "neutral.b01" | "neutral.b02" | "neutral.b03" | "neutral.b04" | "neutral.b05" | "neutral.b06" | "neutral.elevation" | "neutral.f01" | "neutral.f02" | "neutral.f03" | "neutral.f04" | "neutral.f05" | "neutral.f06" | "neutral.f07" | "neutral.f11" | "neutral.l01" | "neutral.l02" | "neutral.l03" | "neutral.l04" | "neutral.transparent" | "presence.available" | "presence.busy" | "presence.invisible" | "subAction" | "success.b01" | "success.b02" | "success.b03" | "success.b04" | "success.b05" | "success.f01" | "success.f02" | "success.f11" | "tab.default" | "tab.selected" | "umi.bg" | "umi.mentioned" | "umi.text" | "warning.b01" | "warning.b02" | "warning.b03" | "warning.f01" | "warning.f02" | "warning.f11" | string[] | import("../../../foundation/styles/newPalette").PaletteReturnType | undefined;
 } & Pick<import("@material-ui/core/transitions").TransitionProps, "style" | "mountOnEnter" | "unmountOnExit" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "appear" | "enter" | "exit"> & React.RefAttributes<any>>;

package/components/Badge/Badge.d.ts

@@ -11,8 +11,17 @@ declare type RcBadgeProps = {
     borderColor?: RcPaletteKeys;
     /** The component used for the root node. Either a string to use a HTML element or a component. */
     component?: ElementType;
-    /** Wrapped shape the badge should overlap */
-    overlap?: UnionPick<NonNullable<ComponentProps<typeof MuiBadge>['overlap']>, 'circular' | 'rectangular'> | 'none';
+    /**
+     * Wrapped shape the badge should overlap
+     * - `circular`: for circular children
+     * - `rectangular`: for rectangular children
+     * - `round`: for round radius rectangular children, like
+     * ```jsx
+     * <RcButton radius="round">click</RcButton>
+     * ```
+     * - `none`: not do any overlap on that badge
+     */
+    overlap?: UnionPick<NonNullable<ComponentProps<typeof MuiBadge>['overlap']>, 'circular' | 'rectangular'> | 'none' | 'round';
     /**
      * Custom dot render Component in `dot` mode
      * if you don't want any dot, you can set `null`

package/components/Badge/Badge.js

@@ -13,9 +13,31 @@ var utils_2 = require("./utils");
 var _RcBadge = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcBadge' });
     var classesProp = props.classes, children = props.children, overlap = props.overlap, color = props.color, variant = props.variant, textColor = props.textColor, anchorOrigin = props.anchorOrigin, borderColor = props.borderColor, component = props.component, dotComponent = props.dotComponent, dotProps = props.dotProps, rest = tslib_1.__rest(props, ["classes", "children", "overlap", "color", "variant", "textColor", "anchorOrigin", "borderColor", "component", "dotComponent", "dotProps"]);
+    // * should never change overlap
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useChange(function (prev) {
+            if (!prev)
+                return;
+            foundation_1.logInDev({
+                component: 'RcBadge',
+                message: 'Should not change `overlap` prop after component render',
+                level: 'error',
+            });
+        }, function () { return overlap; });
+    }
+    var innerRef = react_1.useRef(null);
+    var badgeRef = foundation_1.useForkRef(innerRef, ref);
+    var isRound = overlap === 'round';
+    var isDot = variant === 'dot';
+    var notPassOverlapToMui = overlap !== 'none' && !isRound;
+    // overlap will never change in production mode
+    if (isRound) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        utils_2.useRoundBadgeOffset(innerRef);
+    }
     var classes = react_1.useMemo(function () { return foundation_1.combineProps(utils_2.RcBadgeClasses, classesProp); }, [classesProp]);
     var CustomDotBadge = react_1.useMemo(function () {
-        var isDot = variant === 'dot';
         return isDot
             ? react_1.forwardRef(function (_a, ref) {
                 var OmitChildren = _a.children, rest = tslib_1.__rest(_a, ["children"]);
@@ -29,8 +51,10 @@ var _RcBadge = react_1.forwardRef(function (inProps, ref) {
                         react_1.default.createElement(DotComponent, tslib_1.__assign({}, applyDotProps))))));
             })
             : undefined;
-    }, [anchorOrigin, children, dotComponent, dotProps, overlap, variant]);
-    return (react_1.default.createElement(Badge_1.default, tslib_1.__assign({}, rest, { variant: variant, anchorOrigin: anchorOrigin, component: (component || CustomDotBadge), overlap: overlap !== 'none' ? overlap : undefined, ref: ref, classes: classes }), children));
+    }, [isDot, dotProps, overlap, anchorOrigin, children, dotComponent]);
+    return (react_1.default.createElement(Badge_1.default, tslib_1.__assign({}, rest, { variant: variant, anchorOrigin: anchorOrigin, component: (component || CustomDotBadge), 
+        // TODO: that as any for ts v3.8 still not support pick variable out of if check
+        overlap: notPassOverlapToMui ? overlap : undefined, ref: badgeRef, classes: classes }), children));
 });
 var RcBadge = foundation_1.styled(_RcBadge)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.BadgeStyle);
 exports.RcBadge = RcBadge;

package/components/Badge/styles/BadgeStyle.js

@@ -5,6 +5,7 @@ var foundation_1 = require("../../../foundation");
 var utils_1 = require("../utils");
 exports.BadgeStyle = function (_a) {
     var badgeContent = _a.badgeContent, overlap = _a.overlap, variant = _a.variant, textColor = _a.textColor, borderColor = _a.borderColor, max = _a.max, color = _a.color;
+    var overlapRound = overlap === 'round';
     var overlapNone = overlap === 'none';
     var isStandard = variant !== 'dot';
     var borderCurrColor = foundation_1.getParsePaletteColor(borderColor, null, false);
@@ -12,10 +13,10 @@ exports.BadgeStyle = function (_a) {
     var manyChar = (['number', 'string'].includes(typeof badgeContent) &&
         ("" + badgeContent).length !== 1) ||
         (max && max > 0 && +badgeContent > max);
-    return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    .", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", ";\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    .", " {\n      color: ", ";\n      background-color: ", ";\n\n      ",
+    return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    .", " {\n      margin: ", ";\n      color: ", ";\n      background-color: ", ";\n\n      ", ";\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    .", " {\n      margin: ", ";\n      color: ", ";\n      background-color: ", ";\n\n      ",
         ";\n\n      ",
         "\n\n      ",
-        "\n    }\n  "])), utils_1.RcBadgeClasses.badge, foundation_1.getParsePaletteColor(textColor, null, false), foundation_1.getParsePaletteColor(color, null, false), borderColor && foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n        ", "\n      "], ["\n        ",
+        "\n    }\n  "])), utils_1.RcBadgeClasses.badge, overlapRound && "var(" + utils_1.roundBadgeMarginKey + ")", foundation_1.getParsePaletteColor(textColor, null, false), foundation_1.getParsePaletteColor(color, null, false), borderColor && foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n        ", "\n      "], ["\n        ",
         "\n      "])), isStandard
         ? foundation_1.fakeBorder({ color: borderCurrColor, radius: 'round' })
         : foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), borderCurrColor)), isStandard && foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "], ["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "])), !manyChar && 0), overlapNone && foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n        position: unset;\n        transform: unset;\n\n        &.", " {\n          transform: scale(0);\n        }\n      "], ["\n        position: unset;\n        transform: unset;\n\n        &.", " {\n          transform: scale(0);\n        }\n      "])), utils_1.RcBadgeClasses.invisible));

package/components/Badge/utils/BadgeUtils.d.ts

@@ -1 +1,8 @@
 export declare const RcBadgeClasses: Partial<import("../../../foundation").UnitMap<import("@material-ui/core").BadgeClassKey, any>>;
+export declare const roundBadgeMarginKey = "--badge-round-margin";
+/**
+ * a circle inside square, that diagonal of a square to circle distance to be the round offset.
+ * @param x that circle r
+ * @returns the distance of that offset
+ */
+export declare const getRoundOffset: (x: number) => number;

package/components/Badge/utils/BadgeUtils.js

@@ -2,3 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var foundation_1 = require("../../../foundation");
 exports.RcBadgeClasses = foundation_1.RcClasses(['badge', 'invisible'], 'RcBadge');
+exports.roundBadgeMarginKey = '--badge-round-margin';
+var sqrt2 = Math.sqrt(2);
+var powBy = sqrt2 - 1; // 0.292893218813452
+/**
+ * a circle inside square, that diagonal of a square to circle distance to be the round offset.
+ * @param x that circle r
+ * @returns the distance of that offset
+ */
+exports.getRoundOffset = function (x) {
+    return (x * powBy) / sqrt2;
+};

package/components/Badge/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './BadgeUtils';
+export * from './useRoundBadgeOffset';

package/components/Badge/utils/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./BadgeUtils"), exports);
+tslib_1.__exportStar(require("./useRoundBadgeOffset"), exports);

package/components/Badge/utils/useRoundBadgeOffset.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * modify round badge offset to correct position,
+ * only trigger when host element height change
+ * @param badgeRef badge
+ */
+export declare const useRoundBadgeOffset: (badgeRef: React.RefObject<HTMLElement>) => void;

package/components/Badge/utils/useRoundBadgeOffset.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var foundation_1 = require("../../../foundation");
+var BadgeUtils_1 = require("./BadgeUtils");
+/**
+ * modify round badge offset to correct position,
+ * only trigger when host element height change
+ * @param badgeRef badge
+ */
+exports.useRoundBadgeOffset = function (badgeRef) {
+    var currHeightRef = react_1.useRef(0);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    foundation_1.useResizeObserver(badgeRef, function (_a) {
+        var _b = tslib_1.__read(_a, 1), badgeObsEntry = _b[0];
+        var height = badgeObsEntry.contentRect.height;
+        var element = badgeObsEntry.target;
+        if (currHeightRef.current === height)
+            return;
+        currHeightRef.current = height;
+        var offset = BadgeUtils_1.getRoundOffset(height / 2);
+        element.style.setProperty(BadgeUtils_1.roundBadgeMarginKey, foundation_1.px(offset));
+    }, { mode: 'throttle' });
+};

package/components/Chip/Chip.d.ts

@@ -40,8 +40,26 @@ declare type RcChipProps = {
     /** @deprecated should use `error` */
     isError?: boolean;
 } & RcBaseProps<ComponentProps<typeof MuiChip>, 'color' | 'size' | 'icon'> & RcChipClassProp;
-declare const RcChip: import("styled-components").StyledComponentClass<Pick<RcChipProps, "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "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" | "label" | "slot" | "title" | "classes" | "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" | "variant" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "backgroundColor" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & React.RefAttributes<any>, import("../../foundation").RcTheme, Pick<Pick<RcChipProps, "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "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" | "label" | "slot" | "title" | "classes" | "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" | "variant" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "backgroundColor" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "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" | "label" | "slot" | "title" | "classes" | "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" | "variant" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "backgroundColor" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & {
-    theme?: import("../../foundation").RcTheme | undefined;
-}>;
+interface RcChipTypeMap<D extends React.ElementType = 'div'> {
+    props: RcChipProps;
+    defaultComponent: D;
+}
+declare const RcChip: (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & string & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & number & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & false & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & import("styled-components").Styles & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & import("styled-components").Keyframes & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & import("styled-components").StyledComponentClass<any, any, any> & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & import("styled-components").InterpolationFunction<import("styled-components").ThemedStyledProps<RcChipProps, import("../../foundation").RcTheme>> & React.FunctionComponent<RcChipProps>) | (import("@material-ui/core/OverridableComponent").OverridableComponent<RcChipTypeMap<"div"> & {
+    classKey: "";
+}> & readonly (string | number | false | import("styled-components").Styles | import("styled-components").Keyframes | import("styled-components").StyledComponentClass<any, any, any> | import("styled-components").InterpolationFunction<import("styled-components").ThemedStyledProps<RcChipProps, import("../../foundation").RcTheme>> | readonly import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<RcChipProps, import("../../foundation").RcTheme>>[] | null | undefined)[] & React.FunctionComponent<RcChipProps>);
 export { RcChip };
 export type { RcChipProps };

package/components/Chip/Chip.js

@@ -48,7 +48,7 @@ var _RcChip = react_1.forwardRef(function (inProps, ref) {
     });
     return (react_1.default.createElement(Chip_1.default, tslib_1.__assign({ ref: chipRef, id: id, tabIndex: disabled ? -1 : tabIndex, label: label, disabled: disabled, classes: classes, className: clsx_1.default(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 = foundation_1.styled(_RcChip)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.ChipStyle);
+var RcChip = foundation_1.overridableStyled(_RcChip)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.ChipStyle);
 exports.RcChip = RcChip;
 RcChip.defaultProps = {
     tabIndex: 0,

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var utils_1 = require("@material-ui/core/utils");
 var foundation_1 = require("../../../../foundation");
 var DownshiftUtils_1 = require("../../utils/DownshiftUtils");
 var useDownshiftGroup_1 = require("../../utils/useDownshiftGroup");
@@ -14,7 +13,7 @@ var componentName = 'useSuggestionList';
 exports.useSuggestionList = function (_a) {
     var id = _a.id, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DownshiftUtils_1.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, processFilteredResult = _a.processFilteredResult;
     var isTitleMode = groupVariant === 'normal';
-    var _c = tslib_1.__read(utils_1.useControlled({
+    var _c = tslib_1.__read(foundation_1.useControlled({
         controlled: inputValueProp,
         default: '',
         name: componentName,

package/components/Downshift/utils/useDownshift.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var utils_1 = require("@material-ui/core/utils");
 var foundation_1 = require("../../../foundation");
 var useSuggestionList_1 = require("../SuggestionList/utils/useSuggestionList");
 var DownshiftUtils_1 = require("./DownshiftUtils");
@@ -13,12 +12,12 @@ exports.useDownshift = function (_a) {
     var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DownshiftUtils_1.DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DownshiftUtils_1.DEFAULT_KEY_TO_CHIPS : _c, filterOptionsProp = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focused = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
     var downshiftId = foundation_1.useId('downshift', true);
-    var _e = tslib_1.__read(utils_1.useControlled({
+    var _e = tslib_1.__read(foundation_1.useControlled({
         controlled: focused,
         default: false,
         name: DownshiftUtils_1.downshiftComponentName,
     }), 2), inputFocused = _e[0], setInputFocused = _e[1];
-    var _f = tslib_1.__read(utils_1.useControlled({
+    var _f = tslib_1.__read(foundation_1.useControlled({
         controlled: openProp,
         default: initialIsOpen || false,
         name: DownshiftUtils_1.downshiftComponentName,

package/components/Downshift/utils/useDownshiftTag.js

@@ -4,7 +4,6 @@ var tslib_1 = require("tslib");
 var react_1 = require("react");
 var isString_1 = tslib_1.__importDefault(require("lodash/isString"));
 var uniqueId_1 = tslib_1.__importDefault(require("lodash/uniqueId"));
-var utils_1 = require("@material-ui/core/utils");
 var foundation_1 = require("../../../foundation");
 var DownshiftUtils_1 = require("./DownshiftUtils");
 var DOWNSHIFT_ID_TOKEN = 'rc-chip-';
@@ -13,7 +12,7 @@ exports.useDownshiftTag = function (_a) {
     var downshiftId = _a.id, _b = _a.value, selectedItemsProp = _b === void 0 ? [] : _b, onSelectChange = _a.onChange, variant = _a.variant, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? DownshiftUtils_1.DEFAULT_GET_OPTION_LABEL : _c, onInputChangeProp = _a.onInputChange, wrapperRef = _a.wrapperRef, inputRef = _a.inputRef, freeSolo = _a.freeSolo, maxFreeSolo = _a.maxFreeSolo, keyToTags = _a.keyToTags, onMaxFreeSolo = _a.onMaxFreeSolo, multiple = _a.multiple, labelProp = _a.label, required = _a.required, disabled = _a.disabled, getStopCreateFreeSolo = _a.getStopCreateFreeSolo, onReset = _a.onReset;
     var isAutocomplete = variant === 'autocomplete';
     var isSelectedFromAutocompleteRef = react_1.useRef(false);
-    var _d = tslib_1.__read(utils_1.useControlled({
+    var _d = tslib_1.__read(foundation_1.useControlled({
         controlled: selectedItemsProp,
         default: [],
         name: DownshiftUtils_1.downshiftComponentName,

package/components/Forms/Picker/DatePicker/DatePicker.js

@@ -4,15 +4,14 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var moment_1 = tslib_1.__importDefault(require("moment"));
 var moment_2 = tslib_1.__importDefault(require("@date-io/moment"));
-var utils_1 = require("@material-ui/core/utils");
 var pickers_1 = require("@material-ui/pickers");
 var date_utils_1 = require("@material-ui/pickers/_helpers/date-utils");
 var juno_icon_1 = require("@ringcentral/juno-icon");
 var foundation_1 = require("../../../../foundation");
-var utils_2 = require("../utils");
+var utils_1 = require("../utils");
 var Calendar_1 = require("./Calendar");
-var utils_3 = require("./utils");
-exports.RcDatePickerClasses = utils_3.RcDatePickerClasses;
+var utils_2 = require("./utils");
+exports.RcDatePickerClasses = utils_2.RcDatePickerClasses;
 var defaultMinDate = new Date('1900-01-01');
 var defaultMaxDate = new Date('2100-01-01');
 var DEFAULT_FORMAT = 'MM/DD/YYYY';
@@ -21,7 +20,7 @@ exports.DEFAULT_FORMAT = DEFAULT_FORMAT;
 var InnerRcDatePicker = react_1.forwardRef(function (props, ref) {
     var date = props.date, _a = props.value, value = _a === void 0 ? date : _a, onChange = props.onChange, formatString = props.formatString, locale = props.locale, todayButtonText = props.todayButtonText, minDateProp = props.minDate, maxDateProp = props.maxDate, min = props.min, max = props.max, disableFuture = props.disableFuture, disablePast = props.disablePast, loadingIndicator = props.loadingIndicator, onMonthChange = props.onMonthChange, renderDay = props.renderDay, disabled = props.disabled, shouldDisableDateProp = props.shouldDisableDate, size = props.size, onClose = props.onClose, onClear = props.onClear, classes = props.classes, PopoverPropsProp = props.PopoverProps, screenReaderProps = props.screenReaderProps, rest = tslib_1.__rest(props, ["date", "value", "onChange", "formatString", "locale", "todayButtonText", "minDate", "maxDate", "min", "max", "disableFuture", "disablePast", "loadingIndicator", "onMonthChange", "renderDay", "disabled", "shouldDisableDate", "size", "onClose", "onClear", "classes", "PopoverProps", "screenReaderProps"]);
     var utils = pickers_1.useUtils();
-    var _b = tslib_1.__read(utils_1.useControlled({
+    var _b = tslib_1.__read(foundation_1.useControlled({
         controlled: value,
         default: null,
         name: 'RcDatePicker',
@@ -35,7 +34,7 @@ var InnerRcDatePicker = react_1.forwardRef(function (props, ref) {
         max: moment_1.default(maxDate || defaultMaxDate),
     }); }, [minDate, maxDate]);
     var getInvalidateDateInRange = foundation_1.useEventCallback(function (day) {
-        return utils_3.invalidateDateInRange(day, { dateRange: dateRange, now: utils.date(), disableFuture: disableFuture, disablePast: disablePast }, utils);
+        return utils_2.invalidateDateInRange(day, { dateRange: dateRange, now: utils.date(), disableFuture: disableFuture, disablePast: disablePast }, utils);
     });
     var shouldDisableDate = foundation_1.useEventCallback(function (day) {
         return (Boolean(getInvalidateDateInRange(day)) ||
@@ -68,8 +67,8 @@ var InnerRcDatePicker = react_1.forwardRef(function (props, ref) {
     var PopoverProps = react_1.useMemo(function () {
         return foundation_1.combineProps({
             classes: foundation_1.combineClasses({
-                root: utils_3.RcDatePickerClasses.popover,
-                paper: utils_3.RcDatePickerClasses.popoverPaper,
+                root: utils_2.RcDatePickerClasses.popover,
+                paper: utils_2.RcDatePickerClasses.popoverPaper,
             }, {
                 root: classes === null || classes === void 0 ? void 0 : classes.popover,
                 paper: classes === null || classes === void 0 ? void 0 : classes.popoverPaper,
@@ -78,7 +77,7 @@ var InnerRcDatePicker = react_1.forwardRef(function (props, ref) {
         }, PopoverPropsProp);
     }, [PopoverPropsProp, classes, onClose]);
     var calendarClasses = react_1.useMemo(function () {
-        return foundation_1.combineClasses(foundation_1.omit(utils_3.RcDatePickerClasses, ['popover', 'popoverPaper']), foundation_1.omit(classes, ['popover', 'popoverPaper']));
+        return foundation_1.combineClasses(foundation_1.omit(utils_2.RcDatePickerClasses, ['popover', 'popoverPaper']), foundation_1.omit(classes, ['popover', 'popoverPaper']));
     }, [classes]);
     var handleChange = function (toDate, fromUserSelect) {
         var _a;
@@ -108,8 +107,8 @@ var InnerRcDatePicker = react_1.forwardRef(function (props, ref) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (react_1.default.createElement(utils_2.PickerTextField, tslib_1.__assign({ ref: ref, action: actionRef, onClear: handleClear, PopoverProps: PopoverProps, value: textFiledValue, disabled: disabled, ActionSymbol: juno_icon_1.DateBorder }, rest),
-        react_1.default.createElement(utils_3.ScreenReaderProvider, { screenReaderProps: screenReaderProps },
+    return (react_1.default.createElement(utils_1.PickerTextField, tslib_1.__assign({ ref: ref, action: actionRef, onClear: handleClear, PopoverProps: PopoverProps, value: textFiledValue, disabled: disabled, ActionSymbol: juno_icon_1.DateBorder }, rest),
+        react_1.default.createElement(utils_2.ScreenReaderProvider, { screenReaderProps: screenReaderProps },
             react_1.default.createElement(Calendar_1.Calendar, { size: size, classes: calendarClasses, date: nowDate, dateRange: dateRange, handleDaySelect: handleDaySelect, disableFuture: disableFuture, disablePast: disablePast, loadingIndicator: loadingIndicator, onMonthChange: onMonthChange, renderDay: renderDay, shouldDisableDate: shouldDisableDate, getInvalidateDateInRange: getInvalidateDateInRange, todayButtonText: todayButtonText, formatString: formatString }))));
 });
 var _RcDatePicker = react_1.forwardRef(function (inProps, ref) {

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var core_1 = require("@material-ui/core");
 var foundation_1 = require("../../../../foundation");
 var Buttons_1 = require("../../../Buttons");
 var Menu_1 = require("../../../Menu");
@@ -24,7 +23,7 @@ var _RcPlainSelect = react_1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, classes = _a.classes, valueProp = _a.value, defaultValue = _a.defaultValue, 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, onChangeProp = _a.onChange, rest = tslib_1.__rest(_a, ["children", "className", "classes", "value", "defaultValue", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "color", "IconComponent", "onOpen", "onClose", "onChange"]);
-    var _b = tslib_1.__read(core_1.useControlled({
+    var _b = tslib_1.__read(foundation_1.useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: displayName,

package/components/Table/Table.d.ts

@@ -0,0 +1,14 @@
+import MuiTable from '@material-ui/core/Table';
+import { RcBaseProps } from '../../foundation';
+import React, { ComponentProps } from 'react';
+import { RcTableSize } from './types';
+declare type RcTableProps = {
+    /**
+     * Allows TableCells to inherit size of the Table.
+     */
+    size?: RcTableSize;
+} & RcBaseProps<ComponentProps<typeof MuiTable>, 'size'>;
+declare const RcTable: import("styled-components").StyledComponentClass<Pick<RcTableProps, "key" | "className" | "color" | "id" | "lang" | "style" | "width" | "role" | "tabIndex" | "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" | "slot" | "summary" | "title" | "classes" | "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" | "innerRef" | "padding" | "cellPadding" | "cellSpacing" | "stickyHeader"> & React.RefAttributes<any>, import("../../foundation").RcTheme, Pick<Pick<RcTableProps, "key" | "className" | "color" | "id" | "lang" | "style" | "width" | "role" | "tabIndex" | "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" | "slot" | "summary" | "title" | "classes" | "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" | "innerRef" | "padding" | "cellPadding" | "cellSpacing" | "stickyHeader"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "id" | "lang" | "style" | "width" | "role" | "tabIndex" | "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" | "slot" | "summary" | "title" | "classes" | "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" | "innerRef" | "padding" | "cellPadding" | "cellSpacing" | "stickyHeader"> & {
+    theme?: import("../../foundation").RcTheme | undefined;
+}>;
+export { RcTable, RcTableProps };

package/components/Table/Table.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var Table_1 = tslib_1.__importDefault(require("@material-ui/core/Table"));
+var foundation_1 = require("../../foundation");
+var react_1 = tslib_1.__importStar(require("react"));
+var context_1 = require("./context");
+var _RcTable = react_1.forwardRef(function (props, ref) {
+    var _a = foundation_1.useThemeProps({ props: props, name: 'RcTable' }), children = _a.children, size = _a.size, rest = tslib_1.__rest(_a, ["children", "size"]);
+    var tableContextValue = react_1.useMemo(function () { return ({ size: size }); }, [size]);
+    return (react_1.default.createElement(Table_1.default, tslib_1.__assign({}, rest, { ref: ref }),
+        react_1.default.createElement(context_1.RcTableContext.Provider, { value: tableContextValue }, children)));
+});
+var RcTable = foundation_1.styled(_RcTable)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+exports.RcTable = RcTable;
+RcTable.displayName = 'RcTable';
+var templateObject_1;