@ringcentral/juno 1.12.4-beta.5847-6a74475d → 1.12.4-beta.5864-e73e0ffc

package/components/Buttons/SplitButton/SplitButton.js

@@ -27,6 +27,7 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
     var innerRef = react_1.useRef(null);
     var splitRef = foundation_1.useForkRef(innerRef, ref);
     var isMenuOpen = !!anchorEl;
+    var isMenuEverOpen = foundation_1.useEver(isMenuOpen);
     var _h = react_1.useMemo(function () {
         var result = foundation_1.combineClasses(utils_1.RcSplitButtonClasses, classesProp);
         return {
@@ -158,7 +159,7 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
             react_1.default.createElement(Button_1.RcButton, tslib_1.__assign({}, _ActionButtonProps)),
             react_1.default.createElement(Button_1.RcButton, tslib_1.__assign({ "aria-haspopup": "listbox" }, _ControlButtonProps),
                 react_1.default.createElement(styles_1.StyledArrowIcon, tslib_1.__assign({ open: isMenuOpen, size: variantIs(['round', 'plainIcon']) ? size : toButtonSize }, ArrowIconProps)))),
-        react_1.default.createElement(Menu_1.RcMenu, tslib_1.__assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children)));
+        isMenuEverOpen && (react_1.default.createElement(Menu_1.RcMenu, tslib_1.__assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children))));
 });
 var RcSplitButton = foundation_1.styled(_RcSplitButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.splitButtonStyle);
 exports.RcSplitButton = RcSplitButton;

package/components/Downshift/Downshift.d.ts

@@ -14,6 +14,8 @@ export interface RcDownshiftRenderOptionState {
     selected: boolean;
     /** that item index */
     index: number;
+    /** sort index in option own group */
+    indexInOwnGroup?: number;
     /** if that item is group title, that have that `expanded` state */
     expanded?: boolean;
     /** if that item is group title, that will have that `expandIconProps` */

package/components/Downshift/SuggestionList/SuggestionList.js

@@ -115,6 +115,8 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         });
         var selected = highlightedIndex === index;
         var resultProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, option), itemProps), { 'aria-setsize': itemCount - (isTitleGroup ? (optionsGroupList === null || optionsGroupList === void 0 ? void 0 : optionsGroupList.length) || 0 : 0), 'aria-posinset': index - (isTitleGroup ? groupIndex : 0), key: itemProps.id });
+        var indexInOwnGroup = resultProps.indexInOwnGroup;
+        delete resultProps.indexInOwnGroup;
         // * when item is not disabled, that should check outside is that disabled
         if (!resultProps.freeSolo && !resultProps.disabled && getOptionDisabled) {
             resultProps.disabled = getOptionDisabled(option);
@@ -123,6 +125,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             inputValue: inputValue,
             selected: selected,
             index: index,
+            indexInOwnGroup: indexInOwnGroup,
         };
         if (renderGroup && isGroupTitle) {
             return renderGroup(resultProps, tslib_1.__assign(tslib_1.__assign({}, state), { expanded: (_e = option.group) === null || _e === void 0 ? void 0 : _e.expanded, expandIconProps: expandIconProps }));

package/components/Downshift/utils/useDownshiftGroup.js

@@ -38,7 +38,8 @@ exports.useDownshiftGroup = function (_a) {
             var result = filteredResult.reduce(function (acc, option, index) {
                 var group = groupBy(option);
                 if (acc.length > 0 && acc[acc.length - 1].group === group) {
-                    acc[acc.length - 1].options.push(tslib_1.__assign(tslib_1.__assign({}, option), { group: acc[acc.length - 1] }));
+                    var currGroup = acc[acc.length - 1];
+                    acc[acc.length - 1].options.push(tslib_1.__assign(tslib_1.__assign({}, option), { group: currGroup, indexInOwnGroup: currGroup.options.length - 1 }));
                 }
                 else {
                     if (process.env.NODE_ENV !== 'production') {
@@ -55,7 +56,7 @@ exports.useDownshiftGroup = function (_a) {
                         key: index,
                         index: index,
                         group: group,
-                        options: [tslib_1.__assign({}, option)],
+                        options: [tslib_1.__assign(tslib_1.__assign({}, option), { indexInOwnGroup: 0 })],
                         expanded: false,
                         getExpandIconProps: function (additionExpandIconProps) {
                             return newGroup_1.options.length > 1

package/es6/components/Buttons/SplitButton/SplitButton.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useMemo, useRef, useState, } from 'react';
 import clsx from 'clsx';
-import { checkDefaultPrevented, combineClasses, combineProps, logInDev, omit, styled, useEventCallback, useForkRef, useTheme, useThemeProps, } from '../../../foundation';
+import { checkDefaultPrevented, combineClasses, combineProps, logInDev, omit, styled, useEver, useEventCallback, useForkRef, useTheme, useThemeProps, } from '../../../foundation';
 import { RcMenu } from '../../Menu/Menu';
 import { RcButton } from '../Button';
 import { RcButtonGroup } from '../ButtonGroup';
@@ -25,6 +25,7 @@ var _RcSplitButton = forwardRef(function (inProps, ref) {
     var innerRef = useRef(null);
     var splitRef = useForkRef(innerRef, ref);
     var isMenuOpen = !!anchorEl;
+    var isMenuEverOpen = useEver(isMenuOpen);
     var _h = useMemo(function () {
         var result = combineClasses(RcSplitButtonClasses, classesProp);
         return {
@@ -156,7 +157,7 @@ var _RcSplitButton = forwardRef(function (inProps, ref) {
             React.createElement(RcButton, __assign({}, _ActionButtonProps)),
             React.createElement(RcButton, __assign({ "aria-haspopup": "listbox" }, _ControlButtonProps),
                 React.createElement(StyledArrowIcon, __assign({ open: isMenuOpen, size: variantIs(['round', 'plainIcon']) ? size : toButtonSize }, ArrowIconProps)))),
-        React.createElement(RcMenu, __assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children)));
+        isMenuEverOpen && (React.createElement(RcMenu, __assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children))));
 });
 var RcSplitButton = styled(_RcSplitButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), splitButtonStyle);
 RcSplitButton.displayName = 'RcSplitButton';

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

@@ -113,6 +113,8 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         });
         var selected = highlightedIndex === index;
         var resultProps = __assign(__assign(__assign({}, option), itemProps), { 'aria-setsize': itemCount - (isTitleGroup ? (optionsGroupList === null || optionsGroupList === void 0 ? void 0 : optionsGroupList.length) || 0 : 0), 'aria-posinset': index - (isTitleGroup ? groupIndex : 0), key: itemProps.id });
+        var indexInOwnGroup = resultProps.indexInOwnGroup;
+        delete resultProps.indexInOwnGroup;
         // * when item is not disabled, that should check outside is that disabled
         if (!resultProps.freeSolo && !resultProps.disabled && getOptionDisabled) {
             resultProps.disabled = getOptionDisabled(option);
@@ -121,6 +123,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
             inputValue: inputValue,
             selected: selected,
             index: index,
+            indexInOwnGroup: indexInOwnGroup,
         };
         if (renderGroup && isGroupTitle) {
             return renderGroup(resultProps, __assign(__assign({}, state), { expanded: (_e = option.group) === null || _e === void 0 ? void 0 : _e.expanded, expandIconProps: expandIconProps }));

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

@@ -36,7 +36,8 @@ export var useDownshiftGroup = function (_a) {
             var result = filteredResult.reduce(function (acc, option, index) {
                 var group = groupBy(option);
                 if (acc.length > 0 && acc[acc.length - 1].group === group) {
-                    acc[acc.length - 1].options.push(__assign(__assign({}, option), { group: acc[acc.length - 1] }));
+                    var currGroup = acc[acc.length - 1];
+                    acc[acc.length - 1].options.push(__assign(__assign({}, option), { group: currGroup, indexInOwnGroup: currGroup.options.length - 1 }));
                 }
                 else {
                     if (process.env.NODE_ENV !== 'production') {
@@ -53,7 +54,7 @@ export var useDownshiftGroup = function (_a) {
                         key: index,
                         index: index,
                         group: group,
-                        options: [__assign({}, option)],
+                        options: [__assign(__assign({}, option), { indexInOwnGroup: 0 })],
                         expanded: false,
                         getExpandIconProps: function (additionExpandIconProps) {
                             return newGroup_1.options.length > 1

package/es6/foundation/hooks/index.js

@@ -5,6 +5,7 @@ export * from './useChange';
 export * from './useDebounce';
 export * from './useEventCallback';
 export * from './useEventListener';
+export * from './useEver';
 export * from './useForceUpdate';
 export * from './useForkRef';
 export * from './useHiddenTabindex';

package/es6/foundation/hooks/useEver/index.js

@@ -0,0 +1 @@
+export * from './useEver';

package/es6/foundation/hooks/useEver/useEver.js

@@ -0,0 +1,30 @@
+import { useRef } from 'react';
+var defaultEverTargetValue = function (value) { return !!value; };
+/**
+ * that value ever to be `you want value`
+ * Return true when the value ever to be `you want value` once.
+ *
+ * @example
+ * ```ts
+ * // once that isOpen is true, that result will always be `true`
+ * const isEverOpen = useEver(isOpen);
+ *
+ * const isEverToBe2 = useEver(count, (val) => val === 2);
+ * ```
+ */
+export var useEver = function (
+/** to be checked value */
+value, 
+/**
+ * value ever to be callback, default when value to be exited.
+ *
+ * @default (value) => !!value
+ */
+targetValue) {
+    if (targetValue === void 0) { targetValue = defaultEverTargetValue; }
+    var result = useRef(false);
+    if (!result.current) {
+        result.current = targetValue(value);
+    }
+    return result.current;
+};

package/foundation/hooks/index.d.ts

@@ -5,6 +5,7 @@ export * from './useChange';
 export * from './useDebounce';
 export * from './useEventCallback';
 export * from './useEventListener';
+export * from './useEver';
 export * from './useForceUpdate';
 export * from './useForkRef';
 export * from './useHiddenTabindex';

package/foundation/hooks/index.js

@@ -8,6 +8,7 @@ tslib_1.__exportStar(require("./useChange"), exports);
 tslib_1.__exportStar(require("./useDebounce"), exports);
 tslib_1.__exportStar(require("./useEventCallback"), exports);
 tslib_1.__exportStar(require("./useEventListener"), exports);
+tslib_1.__exportStar(require("./useEver"), exports);
 tslib_1.__exportStar(require("./useForceUpdate"), exports);
 tslib_1.__exportStar(require("./useForkRef"), exports);
 tslib_1.__exportStar(require("./useHiddenTabindex"), exports);

package/foundation/hooks/useEver/index.d.ts

@@ -0,0 +1 @@
+export * from './useEver';

package/foundation/hooks/useEver/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useEver"), exports);

package/foundation/hooks/useEver/useEver.d.ts

@@ -0,0 +1,13 @@
+/**
+ * that value ever to be `you want value`
+ * Return true when the value ever to be `you want value` once.
+ *
+ * @example
+ * ```ts
+ * // once that isOpen is true, that result will always be `true`
+ * const isEverOpen = useEver(isOpen);
+ *
+ * const isEverToBe2 = useEver(count, (val) => val === 2);
+ * ```
+ */
+export declare const useEver: <T>(value: T, targetValue?: (value: T) => boolean) => boolean;

package/foundation/hooks/useEver/useEver.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var defaultEverTargetValue = function (value) { return !!value; };
+/**
+ * that value ever to be `you want value`
+ * Return true when the value ever to be `you want value` once.
+ *
+ * @example
+ * ```ts
+ * // once that isOpen is true, that result will always be `true`
+ * const isEverOpen = useEver(isOpen);
+ *
+ * const isEverToBe2 = useEver(count, (val) => val === 2);
+ * ```
+ */
+exports.useEver = function (
+/** to be checked value */
+value, 
+/**
+ * value ever to be callback, default when value to be exited.
+ *
+ * @default (value) => !!value
+ */
+targetValue) {
+    if (targetValue === void 0) { targetValue = defaultEverTargetValue; }
+    var result = react_1.useRef(false);
+    if (!result.current) {
+        result.current = targetValue(value);
+    }
+    return result.current;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "1.12.4-beta.5847-6a74475d",
+  "version": "1.12.4-beta.5864-e73e0ffc",
   "main": "./index.js",
   "module": "./es6/index.js",
   "author": "RingCentral",