@ringcentral/juno 2.2.0 → 2.3.3

package/es6/components/Table/TableHead/TableHead.js

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import MuiTableHead from '@material-ui/core/TableHead';
+import React, { forwardRef } from 'react';
+import { styled, useThemeProps } from '../../../foundation';
+var _RcTableHead = forwardRef(function (props, ref) {
+    var _a = useThemeProps({ props: props, name: 'RcTableHead' }), children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(MuiTableHead, __assign({}, rest, { ref: ref }), children));
+});
+var RcTableHead = styled(_RcTableHead)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+RcTableHead.displayName = 'RcTableHead';
+export { RcTableHead };
+var templateObject_1;

package/es6/components/Table/TableHead/index.js

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

package/es6/components/Table/TableRow/TableRow.js

@@ -0,0 +1,18 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import React, { forwardRef, useMemo } from 'react';
+import MuiTableRow from '@material-ui/core/TableRow';
+import { combineClasses, styled, useThemeProps, } from '../../../foundation';
+import { TableRowStyle } from './styles';
+import { RcTableRowClasses } from './utils';
+import clsx from 'clsx';
+var _RcTableRow = forwardRef(function (props, ref) {
+    var _a;
+    var _b = useThemeProps({ props: props, name: 'RcTableRow' }), className = _b.className, classesProp = _b.classes, children = _b.children, disabled = _b.disabled, rest = __rest(_b, ["className", "classes", "children", "disabled"]);
+    var classes = useMemo(function () { return combineClasses(RcTableRowClasses, classesProp); }, [classesProp]);
+    return (React.createElement(MuiTableRow, __assign({}, rest, { ref: ref, classes: classes, className: clsx(className, (_a = {}, _a[RcTableRowClasses.disabled] = disabled, _a)) }), children));
+});
+var RcTableRow = styled(_RcTableRow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TableRowStyle);
+RcTableRow.defaultProps = {};
+RcTableRow.displayName = 'RcTableRow';
+export { RcTableRow };
+var templateObject_1;

package/es6/components/Table/TableRow/index.js

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

package/es6/components/Table/TableRow/styles/TableRowStyle.js

@@ -0,0 +1,7 @@
+import { __makeTemplateObject } from "tslib";
+import { css, nonTouchHoverMedia, palette2, setOpacity, } from '../../../../foundation';
+import { RcTableRowClasses } from '../utils';
+export var TableRowStyle = function () {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " {\n      &.", ", &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &.", ", &.", ", &:hover {\n        background-color: unset;\n      }\n    }\n  "], ["\n    ", " {\n      &.", ", &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &.", ", &.", ", &:hover {\n        background-color: unset;\n      }\n    }\n  "])), nonTouchHoverMedia, RcTableRowClasses.hover, setOpacity(palette2('action', 'grayLight'), '08'), RcTableRowClasses.selected, setOpacity(palette2('interactive', 'f01'), '08'), RcTableRowClasses.disabled, RcTableRowClasses.selected, RcTableRowClasses.hover);
+};
+var templateObject_1;

package/es6/components/Table/TableRow/styles/index.js

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

package/es6/components/Table/TableRow/utils/TableRowUtils.js

@@ -0,0 +1,2 @@
+import { RcClasses } from '../../../../foundation';
+export var RcTableRowClasses = RcClasses(['selected', 'hover', 'disabled'], 'RcTableRow');

package/es6/components/Table/TableRow/utils/index.js

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

package/es6/components/Table/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var RcTableContext = createContext({});

package/es6/components/Table/index.js

@@ -0,0 +1,7 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableContainer';
+export * from './TableHead';
+export * from './TableRow';
+export * from './context';

package/es6/components/Tables/TableHead.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import { useThemeProps } from '../../foundation';
 import { StyledTableRow } from './styled';
 import { RcTableHeadCell } from './TableHeadCell';
 import { ORDER_TABLE_BY } from './types';
-var RcTableHeadView = function (inProps) {
-    var props = useThemeProps({ props: inProps, name: 'RcTableHeadView' });
+var RcTableHeadView = function (props) {
     var columnData = props.columnData, sortMap = props.sortMap, sortHandler = props.sortHandler;
     return (React.createElement("thead", null,
         React.createElement(StyledTableRow, null, columnData.map(function (column) {

package/es6/components/Tables/TableHeadCell.js

@@ -3,12 +3,11 @@ import React, { useMemo } from 'react';
 import isFunction from 'lodash/isFunction';
 import isNumber from 'lodash/isNumber';
 import { JumpToLatest as arrowDown, JumpToUnread as arrowUp, } from '@ringcentral/juno-icon';
-import { useA11yKeyEvent, useThemeProps } from '../../foundation';
+import { useA11yKeyEvent } from '../../foundation';
 import { RcIcon } from '../Icon';
 import { StyledSortIconWrapper, StyledTableHeadCell, StyledTableHeadCellContent, StyledTableHeadText, } from './styled';
 import { ARIA_SORT_VALUES, ORDER_TABLE_BY, SORT_ICON_CLASS, } from './types';
-var RcTableHeadCell = function (inProps) {
-    var props = useThemeProps({ props: inProps, name: 'RcTableHeadCell' });
+var RcTableHeadCell = function (props) {
     var automationID = props.automationID, title = props.title, width = props.width, sortDirection = props.sortDirection, sortKey = props.sortKey, textAlign = props.textAlign;
     var onClick = function () {
         var sortHandler = props.sortHandler, sortKey = props.sortKey, sortDirection = props.sortDirection;

package/es6/components/Tooltip/utils/useTooltipForceHide.js

@@ -1,8 +1,24 @@
 import { __read } from "tslib";
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useRef } from 'react';
-import { useChange, useEventCallback, useEventListener, usePrevious, useRefState, } from '../../../foundation';
+import { logInDev, useChange, useEventCallback, useEventListener, usePrevious, useRefState, } from '../../../foundation';
 export var useTooltipForceHide = function (_a) {
     var tooltipForceHide = _a.tooltipForceHide, openProp = _a.open, onClose = _a.onClose, onOpen = _a.onOpen, ref = _a.ref;
+    if (process.env.NODE_ENV !== 'production') {
+        useChange(function (prev) {
+            // ignore first time
+            if (prev !== undefined) {
+                logInDev({
+                    component: 'RcTooltip',
+                    message: 'Should not change tooltipForceHide between controlled and uncontrolled, tooltipForceHide should always be boolean value',
+                    level: 'error',
+                });
+            }
+        }, function () { return tooltipForceHide === undefined; });
+    }
+    // * when not set tooltipForceHide, always return undefined directly, not bind any event addition
+    if (tooltipForceHide === undefined)
+        return undefined;
     var _b = __read(useRefState(false), 2), openRef = _b[0], setOpen = _b[1];
     var isOverRef = useRef(false);
     var openState = tooltipForceHide ? false : openProp !== null && openProp !== void 0 ? openProp : openRef.current;
@@ -35,14 +51,12 @@ export var useTooltipForceHide = function (_a) {
         setOpen(false);
         onClose === null || onClose === void 0 ? void 0 : onClose(event);
     });
-    return tooltipForceHide !== undefined
-        ? {
-            disableFocusListener: tooltipForceHide,
-            disableHoverListener: tooltipForceHide,
-            disableTouchListener: tooltipForceHide,
-            open: openState,
-            onOpen: handleOpen,
-            onClose: handleClose,
-        }
-        : undefined;
+    return {
+        disableFocusListener: tooltipForceHide,
+        disableHoverListener: tooltipForceHide,
+        disableTouchListener: tooltipForceHide,
+        open: openState,
+        onOpen: handleOpen,
+        onClose: handleClose,
+    };
 };

package/es6/components/index.js

@@ -41,7 +41,7 @@ export * from './Responsive';
 export * from './Snackbar';
 export * from './Stepper';
 export * from './TablePagination';
-export * from './Tables';
+export * from './Table';
 export * from './Tabs';
 export * from './Tag';
 export * from './Text';

package/es6/foundation/hooks/index.js

@@ -2,12 +2,14 @@ export * from './useA11yKeyEvent';
 export * from './useAnnouncer';
 export * from './useAudio';
 export * from './useChange';
+export * from './useControlled';
 export * from './useDebounce';
 export * from './useEventCallback';
 export * from './useEventListener';
 export * from './useEver';
 export * from './useForceUpdate';
 export * from './useForkRef';
+export * from './useGlobalListener';
 export * from './useHiddenTabindex';
 export * from './useId';
 export * from './useInterval';

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

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

package/es6/foundation/hooks/useControlled/useControlled.js

@@ -0,0 +1 @@
+export { useControlled } from '@material-ui/core/utils';

package/es6/foundation/hooks/useEventListener/useEventListener.js

@@ -1,6 +1,6 @@
 import { __read } from "tslib";
 import { useEffect, useRef } from 'react';
-import { isRef } from '../../utils/isRef';
+import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
  * bind event when component mount and auto remove event when destroy.
@@ -26,16 +26,18 @@ export function useEventListener(target) {
     var listener = useEventCallback(cb);
     var cancelRef = useRef(function () { });
     var bindRef = useRef(function () { });
-    var currentRefElm = isRef(target) && target.current;
+    var currentRefElm = getRefElement(target);
     useEffect(function () {
         if (!target)
             return;
-        var elm = isRef(target) ? target.current : target;
-        if (!elm) {
+        var currentElm = getRefElement(target);
+        if (!currentElm) {
             return cancelRef.current;
         }
-        bindRef.current = function () { return elm.addEventListener(key, listener, options); };
-        cancelRef.current = function () { return elm.removeEventListener(key, listener, options); };
+        bindRef.current = function () { return currentElm.addEventListener(key, listener, options); };
+        cancelRef.current = function () {
+            return currentElm.removeEventListener(key, listener, options);
+        };
         bindRef.current();
         return cancelRef.current;
         // eslint-disable-next-line react-hooks/exhaustive-deps

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

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

package/es6/foundation/hooks/useGlobalListener/useGlobalListener.js

@@ -0,0 +1,130 @@
+import { useEffect, useRef } from 'react';
+import { getRefElement, logInDev } from '../../utils';
+import { useEventCallback } from '../useEventCallback';
+export var globalListenerEventMap = new Map();
+/**
+ * create globalListener handler for share one listener event
+ *
+ * @example
+ * ```ts
+ * const globalListener = createGlobalListener('focus', () => { console.log('focus') });
+ * const globalListener2 = createGlobalListener('focus', () => { console.log('focus') });
+ * globalListener.listen();
+ * globalListener2.listen();
+ *
+ * => // that will only create an event listener on window, but every callback will get emit value when event triggered
+ * ```
+ */
+export var createGlobalListener = function (key, listener, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.customKey, customKey = _c === void 0 ? key : _c, _d = _b.target, targetProp = _d === void 0 ? window : _d;
+    var listening = false;
+    var getMapValue = function () { return globalListenerEventMap.get(customKey); };
+    var addListener = function () {
+        if (listening)
+            return;
+        var savedEvent = getMapValue();
+        if (!(savedEvent === null || savedEvent === void 0 ? void 0 : savedEvent.exec)) {
+            var exec = function (e) {
+                var event = getMapValue();
+                event === null || event === void 0 ? void 0 : event.listeners.forEach(function (c) { return c(e); });
+            };
+            globalListenerEventMap.set(customKey, {
+                exec: exec,
+                listeners: new Set([listener]),
+            });
+            var target = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.addEventListener(key, exec);
+        }
+        else {
+            savedEvent.listeners.add(listener);
+        }
+        listening = true;
+    };
+    var removeListener = function () {
+        if (!listening)
+            return;
+        listening = false;
+        var _savedEvent = getMapValue();
+        if (!_savedEvent)
+            return;
+        var listeners = _savedEvent.listeners;
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            var target = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec);
+            globalListenerEventMap.delete(customKey);
+        }
+    };
+    return {
+        /**
+         * bind listener again
+         */
+        listen: function () { return addListener(); },
+        /**
+         * remove listener
+         */
+        remove: function () { return removeListener(); },
+        /**
+         * current listener state
+         */
+        get state() {
+            return {
+                /**
+                 * current listener state count
+                 */
+                get count() {
+                    var _a;
+                    return ((_a = getMapValue()) === null || _a === void 0 ? void 0 : _a.listeners.size) || 0;
+                },
+                /**
+                 * is that be listening
+                 */
+                listening: listening,
+            };
+        },
+    };
+};
+/**
+ * bind global event, when you bind same key event,
+ * that will reuse one event listener and trigger both callback once that listener be triggered.
+ *
+ * also you can control listener with method `listen` and `remove`
+ * and get listener `state` for check listener count number and current listing state.
+ *
+ * - `key` `options` only work when set first time, never change after first render
+ *
+ * @example
+ * ```ts
+ * useGlobalListener('keyup', () => console.log('window key up1'))
+ * useGlobalListener('keyup', () => console.log('window key up2'))
+ * useGlobalListener('keyup', () => console.log('window key up3'))
+ *
+ * => // that will only create an event listener on `window`, but every callback will get emit value when event triggered
+ * ```
+ */
+export function useGlobalListener(key, listener, options) {
+    if (options === void 0) { options = {}; }
+    var _listener = useEventCallback(listener);
+    var globalListener = useRef(createGlobalListener(key, _listener, options)).current;
+    if (process.env.NODE_ENV !== 'production') {
+        var _a = options.customKey, customKey_1 = _a === void 0 ? key : _a, _b = options.target, targetProp_1 = _b === void 0 ? window : _b;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(function () {
+            var target = getRefElement(targetProp_1);
+            if (target !== window && customKey_1 === key) {
+                logInDev({
+                    component: 'useGlobalListener',
+                    message: 'When you custom binding event target, you must custom key for determining different event group',
+                    level: 'error',
+                });
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
+    useEffect(function () {
+        globalListener.listen();
+        return globalListener.remove;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return globalListener;
+}

package/es6/foundation/hooks/useHiddenTabindex/useHiddenTabindex.js

@@ -1,17 +1,18 @@
+import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
  * group hidden logic, when binding events element focus,
  * that hiddenRef will auto be `tabindex={-1}` *
  */
-export var useHiddenTabindex = function (hiddenRef) {
+export var useHiddenTabindex = function (target) {
     var handleFocus = useEventCallback(function () {
-        var hiddenElm = hiddenRef.current;
+        var hiddenElm = getRefElement(target);
         if (hiddenElm && hiddenElm.tabIndex === 0) {
             hiddenElm.tabIndex = -1;
         }
     });
     var handleBlur = useEventCallback(function () {
-        var hiddenElm = hiddenRef.current;
+        var hiddenElm = getRefElement(target);
         if (hiddenElm && hiddenElm.tabIndex === -1) {
             hiddenElm.tabIndex = 0;
         }

package/es6/foundation/hooks/useLongPress/useLongPress.js

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { useA11yKeyEvent } from '../useA11yKeyEvent';
 import { useDebounce } from '../useDebounce';
 import { useEventCallback } from '../useEventCallback';
-import { isElmEqualOrContainRef, useTouchMouseEvent, } from '../useTouchMouseEvent';
+import { isElmEqualOrContain, useTouchMouseEvent, } from '../useTouchMouseEvent';
 /**
  * Provide longPress helper, both `click`/`tab`/`keydown` will trigger event
  *
@@ -30,8 +30,7 @@ export var useLongPress = function (_a, _b, _c) {
     var end = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
         document.removeEventListener('mouseup', onMouseUp);
-        if (!isEmittedRef.current &&
-            isElmEqualOrContainRef(e.target, elmRef)) {
+        if (!isEmittedRef.current && isElmEqualOrContain(e.target, elmRef)) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
         reasonRef.current = 'click';

package/es6/foundation/hooks/useOverflow/useOverflow.js

@@ -1,11 +1,12 @@
 import { useRef } from 'react';
+import { getRefElement } from '../../utils';
 import { useResizeObserver } from '../useResizeObserver';
 /**
  * trigger when overflow state change
  */
 export var useOverflow = function (
 /** target element ref */
-innerRef, 
+target, 
 /** trigger when `ResizeObserver` emit */
 cb, 
 /**
@@ -20,19 +21,21 @@ performance) {
     }; }
     // * not have default value for that can trigger change first time.
     var showRef = useRef();
-    return useResizeObserver(innerRef, function () {
-        if (innerRef.current) {
-            var _a = innerRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            var show = scrollWidth > clientWidth || scrollHeight > clientHeight;
-            if (showRef.current !== show) {
-                showRef.current = show;
-                cb(show, {
-                    scrollWidth: scrollWidth,
-                    clientWidth: clientWidth,
-                    scrollHeight: scrollHeight,
-                    clientHeight: clientHeight,
-                });
-            }
-        }
+    return useResizeObserver(target, function () {
+        var element = getRefElement(target);
+        if (!element)
+            return;
+        var scrollWidth = element.scrollWidth, clientWidth = element.clientWidth, scrollHeight = element.scrollHeight, clientHeight = element.clientHeight;
+        var show = scrollWidth > clientWidth || scrollHeight > clientHeight;
+        if (showRef.current === show)
+            return;
+        // only emit when state change
+        showRef.current = show;
+        cb(show, {
+            scrollWidth: scrollWidth,
+            clientWidth: clientWidth,
+            scrollHeight: scrollHeight,
+            clientHeight: clientHeight,
+        });
     }, performance);
 };

package/es6/foundation/hooks/useResizeObserver/useResizeObserver.js

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import ResizeObserverPolyfill from 'resize-observer-polyfill';
 import { useRcPortalWindowContext } from '../../contexts';
-import { logInDev } from '../../utils';
+import { getRefElement, logInDev } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 import { useResultRef } from '../useResultRef';
 /**
@@ -38,7 +38,7 @@ export var getResizeObserver = function (callback, externalWindow) {
  */
 export var useResizeObserver = function (
 /** target element ref */
-ref, 
+target, 
 /** trigger when `ResizeObserver` emit */
 callback, 
 /** performance options, `mode`, `time`, `ignoreFireWhenObserve` */
@@ -74,8 +74,8 @@ performance) {
         return getResizeObserver(resizeCallback, externalWindow);
     });
     useLayoutEffect(function () {
+        var elm = getRefElement(target);
         var observer = observerRef.current;
-        var elm = ref.current;
         if (!elm) {
             throw new Error('please check element exist before bind resize observer');
         }
@@ -85,6 +85,6 @@ performance) {
         };
         // TODO: wait https://github.com/facebook/react/pull/20477 eslint support to remove this exhaustive-deps comment with support custom hooks
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ref]);
+    }, [target]);
     return observerRef.current;
 };

package/es6/foundation/hooks/useTouchMouseEvent/useTouchMouseEvent.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
  * Provide a utils for switch trigger touch event or mouse event between different device
@@ -72,9 +73,11 @@ export var useTouchMouseEvent = function (_a, _b) {
         onMouseUp: onMouseUp,
     };
 };
-export var isElmEqualOrContainRef = function (elm, elmRef) {
-    var _a;
-    return (elm &&
-        elmRef &&
-        (elmRef.current === elm || ((_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.contains(elm))));
+/**
+ * check is element equal or contains target element
+ */
+export var isElmEqualOrContain = function (sourceTarget, containTarget) {
+    var elm = getRefElement(sourceTarget);
+    var target = getRefElement(containTarget);
+    return elm && target && (target === elm || target.contains(elm));
 };

package/es6/foundation/utils/getRefElement.js

@@ -0,0 +1,13 @@
+import { isRef } from './isRef';
+/**
+ * get element from React ref or callback
+ */
+export var getRefElement = function (ref) {
+    if (typeof ref === 'function') {
+        return ref();
+    }
+    if (isRef(ref)) {
+        return ref.current;
+    }
+    return ref;
+};

package/es6/foundation/utils/index.js

@@ -4,6 +4,7 @@ export * from './classes';
 export * from './clearReactReferencesInNode';
 export * from './combineProps';
 export * from './deepmerge';
+export * from './getRefElement';
 export * from './getScrollbarSize';
 export * from './hasValue';
 export * from './isRcElement';

package/es6/foundation/utils/removeClassName.js

@@ -1,7 +1,8 @@
+import { getRefElement } from './getRefElement';
 /**
  * remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
  *
- * @param elmRef target element reference
+ * @param target target element reference or element or callback
  * @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
  *
  * @example
@@ -16,9 +17,9 @@
  * elm => <div class="efg"></div>
  * ```
  */
-export function removeClassName(elmRef, removeClass, _a) {
+export function removeClassName(target, removeClass, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.scanChildren, scanChildren = _c === void 0 ? false : _c, _d = _b.fullMatch, fullMatch = _d === void 0 ? false : _d;
-    var elm = elmRef.current;
+    var elm = getRefElement(target);
     if (!elm)
         return;
     if (elm.className.includes(removeClass)) {

package/es6/foundation/utils/selectionHandler.js

@@ -1,10 +1,11 @@
+import { getRefElement } from './getRefElement';
 /**
  * get current input element selection position and is that selectRange state
  */
-export function getSelectionPosition(inputRef) {
-    var _a, _b;
-    var currentPosition = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart;
-    var currentPositionEnd = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.selectionEnd;
+export function getSelectionPosition(sourceTarget) {
+    var input = getRefElement(sourceTarget);
+    var currentPosition = input === null || input === void 0 ? void 0 : input.selectionStart;
+    var currentPositionEnd = input === null || input === void 0 ? void 0 : input.selectionEnd;
     var isSelectRange = currentPosition !== currentPositionEnd;
     return {
         isSelectRange: isSelectRange,
@@ -15,8 +16,8 @@ export function getSelectionPosition(inputRef) {
  * set input element selection position position,
  * if you need scroll that into view set `scrollIntoView` as true
  */
-export function setSelectionPosition(inputRef, options) {
-    var elm = inputRef.current;
+export function setSelectionPosition(target, options) {
+    var elm = getRefElement(target);
     if (elm && options.start !== null && options.end !== null) {
         // * use blur and refocus to refocus position into view
         if (options.scrollIntoView)

package/foundation/hooks/index.d.ts

@@ -2,12 +2,14 @@ export * from './useA11yKeyEvent';
 export * from './useAnnouncer';
 export * from './useAudio';
 export * from './useChange';
+export * from './useControlled';
 export * from './useDebounce';
 export * from './useEventCallback';
 export * from './useEventListener';
 export * from './useEver';
 export * from './useForceUpdate';
 export * from './useForkRef';
+export * from './useGlobalListener';
 export * from './useHiddenTabindex';
 export * from './useId';
 export * from './useInterval';

package/foundation/hooks/index.js

@@ -5,12 +5,14 @@ tslib_1.__exportStar(require("./useA11yKeyEvent"), exports);
 tslib_1.__exportStar(require("./useAnnouncer"), exports);
 tslib_1.__exportStar(require("./useAudio"), exports);
 tslib_1.__exportStar(require("./useChange"), exports);
+tslib_1.__exportStar(require("./useControlled"), 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("./useGlobalListener"), exports);
 tslib_1.__exportStar(require("./useHiddenTabindex"), exports);
 tslib_1.__exportStar(require("./useId"), exports);
 tslib_1.__exportStar(require("./useInterval"), exports);

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

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

package/foundation/hooks/useControlled/index.js

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

package/foundation/hooks/useControlled/useControlled.d.ts

@@ -0,0 +1 @@
+export { useControlled } from '@material-ui/core/utils';

package/foundation/hooks/useControlled/useControlled.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("@material-ui/core/utils");
+exports.useControlled = utils_1.useControlled;