@ringcentral/juno 2.1.1 → 2.1.2

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/es6/components/Badge/Badge.js

@@ -1,19 +1,41 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useMemo, } from 'react';
+import React, { forwardRef, useMemo, useRef, } from 'react';
 import clsx from 'clsx';
 import MuiBadge from '@material-ui/core/Badge';
 import { capitalize } from '@material-ui/core/utils';
-import { combineProps, styled, useThemeProps, } from '../../foundation';
+import { combineProps, logInDev, styled, useChange, useForkRef, useThemeProps, } from '../../foundation';
 import { RcBox } from '../Box';
 import { RcPresence } from '../Presence';
 import { BadgeStyle } from './styles';
-import { RcBadgeClasses } from './utils';
+import { RcBadgeClasses, useRoundBadgeOffset } from './utils';
 var _RcBadge = forwardRef(function (inProps, ref) {
     var props = 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 = __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
+        useChange(function (prev) {
+            if (!prev)
+                return;
+            logInDev({
+                component: 'RcBadge',
+                message: 'Should not change `overlap` prop after component render',
+                level: 'error',
+            });
+        }, function () { return overlap; });
+    }
+    var innerRef = useRef(null);
+    var badgeRef = 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
+        useRoundBadgeOffset(innerRef);
+    }
     var classes = useMemo(function () { return combineProps(RcBadgeClasses, classesProp); }, [classesProp]);
     var CustomDotBadge = useMemo(function () {
-        var isDot = variant === 'dot';
         return isDot
             ? forwardRef(function (_a, ref) {
                 var OmitChildren = _a.children, rest = __rest(_a, ["children"]);
@@ -27,8 +49,10 @@ var _RcBadge = forwardRef(function (inProps, ref) {
                         React.createElement(DotComponent, __assign({}, applyDotProps))))));
             })
             : undefined;
-    }, [anchorOrigin, children, dotComponent, dotProps, overlap, variant]);
-    return (React.createElement(MuiBadge, __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.createElement(MuiBadge, __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 = styled(_RcBadge)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), BadgeStyle);
 RcBadge.defaultProps = {

package/es6/components/Badge/styles/BadgeStyle.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
 import { css, fakeBorder, getParsePaletteColor, } from '../../../foundation';
-import { RcBadgeClasses } from '../utils';
+import { RcBadgeClasses, roundBadgeMarginKey } from '../utils';
 export var 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 = getParsePaletteColor(borderColor, null, false);
@@ -10,10 +11,10 @@ export var BadgeStyle = function (_a) {
     var manyChar = (['number', 'string'].includes(typeof badgeContent) &&
         ("" + badgeContent).length !== 1) ||
         (max && max > 0 && +badgeContent > max);
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    .", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", ";\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    .", " {\n      color: ", ";\n      background-color: ", ";\n\n      ",
+    return css(templateObject_5 || (templateObject_5 = __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  "])), RcBadgeClasses.badge, getParsePaletteColor(textColor, null, false), getParsePaletteColor(color, null, false), borderColor && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ",
+        "\n    }\n  "])), RcBadgeClasses.badge, overlapRound && "var(" + roundBadgeMarginKey + ")", getParsePaletteColor(textColor, null, false), getParsePaletteColor(color, null, false), borderColor && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ",
         "\n      "])), isStandard
         ? fakeBorder({ color: borderCurrColor, radius: 'round' })
         : css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), borderCurrColor)), isStandard && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "], ["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "])), !manyChar && 0), overlapNone && css(templateObject_4 || (templateObject_4 = __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      "])), RcBadgeClasses.invisible));

package/es6/components/Badge/utils/BadgeUtils.js

@@ -1,2 +1,13 @@
 import { RcClasses } from '../../../foundation';
 export var RcBadgeClasses = RcClasses(['badge', 'invisible'], 'RcBadge');
+export var 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
+ */
+export var getRoundOffset = function (x) {
+    return (x * powBy) / sqrt2;
+};

package/es6/components/Badge/utils/index.js

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

package/es6/components/Badge/utils/useRoundBadgeOffset.js

@@ -0,0 +1,23 @@
+import { __read } from "tslib";
+import { useRef } from 'react';
+import { px, useResizeObserver } from '../../../foundation';
+import { getRoundOffset, roundBadgeMarginKey } from './BadgeUtils';
+/**
+ * modify round badge offset to correct position,
+ * only trigger when host element height change
+ * @param badgeRef badge
+ */
+export var useRoundBadgeOffset = function (badgeRef) {
+    var currHeightRef = useRef(0);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useResizeObserver(badgeRef, function (_a) {
+        var _b = __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 = getRoundOffset(height / 2);
+        element.style.setProperty(roundBadgeMarginKey, px(offset));
+    }, { mode: 'throttle' });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": "RingCentral",
   "license": "MIT",
   "bugs": {