@ringcentral/juno 2.16.1 → 2.17.0

package/es6/components/Tables/TableHeadCell.js

@@ -1,62 +0,0 @@
-import { __assign } from "tslib";
-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 } 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 (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;
-        if (sortKey === undefined || !sortHandler) {
-            return;
-        }
-        if (sortDirection === ORDER_TABLE_BY.ASC) {
-            sortHandler(ORDER_TABLE_BY.DESC, sortKey);
-        }
-        else {
-            sortHandler(ORDER_TABLE_BY.ASC, sortKey);
-        }
-    };
-    var onKeyDown = useA11yKeyEvent(onClick);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    var shouldSort = function () {
-        var sortHandler = props.sortHandler, sortKey = props.sortKey;
-        return isFunction(sortHandler) && isNumber(sortKey);
-    };
-    var sortDirectionArrow = useMemo(function () {
-        var sortClass = '';
-        switch (sortDirection) {
-            case ORDER_TABLE_BY.ASC:
-                sortClass = SORT_ICON_CLASS.SORT_UP;
-                break;
-            case ORDER_TABLE_BY.DESC:
-                sortClass = SORT_ICON_CLASS.SORT_DOWN;
-                break;
-            default:
-        }
-        if (shouldSort()) {
-            return (React.createElement(StyledSortIconWrapper, { className: sortClass },
-                React.createElement(RcIcon, { symbol: sortDirection === ORDER_TABLE_BY.ASC ? arrowUp : arrowDown, size: "small" })));
-        }
-        return React.createElement(React.Fragment, null);
-    }, [shouldSort, sortDirection]);
-    var ariaSort = __assign({}, (sortDirection !== undefined &&
-        [ORDER_TABLE_BY.ASC, ORDER_TABLE_BY.DESC].includes(sortDirection) && {
-        'aria-sort': ARIA_SORT_VALUES[ORDER_TABLE_BY[sortDirection]],
-    }));
-    var headCellSortProps = __assign({}, (shouldSort() && __assign({ onKeyDown: onKeyDown }, ariaSort)));
-    var cellContentSortProps = __assign({}, (shouldSort() && {
-        role: 'button',
-        onClickCapture: onClick,
-    }));
-    var hasSortKey = sortKey !== undefined;
-    return (React.createElement(StyledTableHeadCell, __assign({ scope: "col", tabIndex: hasSortKey ? 0 : undefined, width: width, hasSortKey: hasSortKey, sortDirection: sortDirection, "data-test-automation-value": automationID, "data-test-automation-class": "table-header-cell" }, headCellSortProps),
-        React.createElement(StyledTableHeadCellContent, __assign({ textAlign: textAlign }, cellContentSortProps),
-            React.createElement(StyledTableHeadText, null, title),
-            sortDirectionArrow)));
-};
-export { RcTableHeadCell };

package/es6/components/Tables/TableRow.js

@@ -1,4 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import { palette2, setOpacity, styled } from '../../foundation';
-export var RcTableRow = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  outline: none;\n\n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  outline: none;\n\n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), palette2('neutral', 'l02'), setOpacity(palette2('action', 'grayLight'), '08'));
-var templateObject_1;

package/es6/components/Tables/index.js

@@ -1,7 +0,0 @@
-export * from './Table';
-export * from './TableHead';
-export * from './TableHeadCell';
-export * from './types';
-export * from './TableRow';
-export * from './TableBodyCellContent';
-export * from './styled';

package/es6/components/Tables/styled.js

@@ -1,38 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import { css, fakeBorder, focusVisibleShadowStyle, focusWithin, palette2, spacing, styled, } from '../../foundation';
-import { COLUMN_TEXT_ALIGN, ORDER_TABLE_BY, TABLE_BORDER_TYPE, TABLE_STICKY_TYPE, TABLE_TYPE, } from './types';
-var TableWrapper = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n\n  background-color: ", ";\n  &.", " {\n    border-radius: 4px;\n    border: 1px solid ", ";\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n\n  background-color: ", ";\n  &.", " {\n    border-radius: 4px;\n    border: 1px solid ", ";\n  }\n"])), palette2('neutral', 'b01'), TABLE_BORDER_TYPE.BORDERED, palette2('neutral', 'l02'));
-var StyledTable = styled('table')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: 100%;\n  display: table;\n  /* scroll when viewport is less than 960px including the 332px from left navs */\n  min-width: ", ";\n\n  @media only screen and (max-width: ", ") {\n    table-layout: auto;\n  }\n\n  &.", " th {\n    position: sticky;\n    top: 0;\n  }\n\n  thead {\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    position: sticky;\n    top: 0;\n    display: table-header-group;\n    z-index: 5;\n  }\n\n  tbody {\n    display: table-row-group;\n  }\n\n  tr {\n    display: table-row;\n    padding-left: ", ";\n\n    th,\n    td {\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      box-sizing: border-box;\n      vertical-align: middle;\n    }\n    td:first-child {\n      padding-left: ", ";\n      margin-left: -", ";\n    }\n    td:not(:first-child) {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    height: 40px;\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    height: 52px;\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    height: 64px;\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    padding: ", ";\n    height: auto;\n  }\n"], ["\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: 100%;\n  display: table;\n  /* scroll when viewport is less than 960px including the 332px from left navs */\n  min-width: ", ";\n\n  @media only screen and (max-width: ", ") {\n    table-layout: auto;\n  }\n\n  &.", " th {\n    position: sticky;\n    top: 0;\n  }\n\n  thead {\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    position: sticky;\n    top: 0;\n    display: table-header-group;\n    z-index: 5;\n  }\n\n  tbody {\n    display: table-row-group;\n  }\n\n  tr {\n    display: table-row;\n    padding-left: ", ";\n\n    th,\n    td {\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      box-sizing: border-box;\n      vertical-align: middle;\n    }\n    td:first-child {\n      padding-left: ", ";\n      margin-left: -", ";\n    }\n    td:not(:first-child) {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    height: 40px;\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    height: 52px;\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    height: 64px;\n  }\n\n  &.", " tr td {\n    overflow: hidden;\n    padding: ", ";\n    height: auto;\n  }\n"])), spacing(157), spacing(157), TABLE_STICKY_TYPE.STICKY, palette2('neutral', 'l02'), spacing(4), spacing(4), spacing(4), spacing(4), spacing(4), TABLE_TYPE.MODAL, TABLE_TYPE.CARD, TABLE_TYPE.FULL, TABLE_TYPE.AUTO, spacing(3, 4));
-var StyledTableRow = styled('tr')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 25px;\n  display: table-row;\n  font-size: 12px;\n  text-align: left;\n  vertical-align: middle;\n"], ["\n  height: 25px;\n  display: table-row;\n  font-size: 12px;\n  text-align: left;\n  vertical-align: middle;\n"])));
-var StyledSortIconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-left: 8px;\n  padding-right: 8px;\n  vertical-align: middle;\n  display: inline-flex;\n\n  & path {\n    fill: ", ";\n  }\n"], ["\n  padding-left: 8px;\n  padding-right: 8px;\n  vertical-align: middle;\n  display: inline-flex;\n\n  & path {\n    fill: ", ";\n  }\n"])), palette2('neutral', 'f04'));
-var StyledTableHeadText = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: auto;\n"], ["\n  text-overflow: ellipsis;\n  overflow: auto;\n"])));
-var StyledTableHeadCell = styled('th')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  user-select: none;\n  text-align: left;\n  background-color: ", ";\n  z-index: 100;\n  line-height: 32px;\n  width: ", ";\n  padding-top: 0;\n  padding-bottom: 0;\n  display: table-cell;\n  white-space: nowrap;\n  overflow: hidden;\n\n  & > div {\n    border: 1px solid inherit;\n    padding-left: ", ";\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n\n  ", "\n"], ["\n  color: ",
-    ";\n  user-select: none;\n  text-align: left;\n  background-color: ",
-    ";\n  z-index: 100;\n  line-height: 32px;\n  width: ", ";\n  padding-top: 0;\n  padding-bottom: 0;\n  display: table-cell;\n  white-space: nowrap;\n  overflow: hidden;\n\n  & > div {\n    border: 1px solid inherit;\n    padding-left: ", ";\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n\n  ",
-    "\n"])), function (props) {
-    return props.sortDirection === ORDER_TABLE_BY.NONE
-        ? palette2('neutral', 'f06')
-        : palette2('interactive', 'f01');
-}, function (props) {
-    return props.sortDirection === ORDER_TABLE_BY.NONE
-        ? palette2('neutral', 'b02')
-        : palette2('neutral', 'b03');
-}, function (props) { return props.width; }, spacing(4), function (_a) {
-    var hasSortKey = _a.hasSortKey;
-    return hasSortKey && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", " {\n        background-color: ", ";\n        ", ";\n        cursor: pointer;\n        outline: none;\n      }\n      position: relative;\n      ", ";\n    "], ["\n      ", " {\n        background-color: ", ";\n        ", ";\n        cursor: pointer;\n        outline: none;\n      }\n      position: relative;\n      ", ";\n    "])), focusWithin, palette2('neutral', 'b03'), fakeBorder(), focusVisibleShadowStyle());
-});
-var StyledTableHeadCellContent = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  flex-direction: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n\n  flex-direction: ",
-    ";\n  padding-left: ",
-    ";\n  padding-right: ",
-    ";\n"])), function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign === COLUMN_TEXT_ALIGN.RIGHT ? 'row-reverse' : 'row';
-}, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign === COLUMN_TEXT_ALIGN.RIGHT ? 0 : spacing(4);
-}, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign === COLUMN_TEXT_ALIGN.RIGHT ? spacing(4) : 0;
-});
-export { TableWrapper, StyledTable, StyledTableRow, StyledSortIconWrapper, StyledTableHeadCell, StyledTableHeadText, StyledTableHeadCellContent, };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/es6/components/Tables/types.js

@@ -1,41 +0,0 @@
-var TABLE_BORDER_TYPE;
-(function (TABLE_BORDER_TYPE) {
-    TABLE_BORDER_TYPE["BORDERED"] = "table-bordered";
-    TABLE_BORDER_TYPE["NONE"] = "";
-})(TABLE_BORDER_TYPE || (TABLE_BORDER_TYPE = {}));
-var TABLE_STICKY_TYPE;
-(function (TABLE_STICKY_TYPE) {
-    TABLE_STICKY_TYPE["STICKY"] = "table-sticky";
-    TABLE_STICKY_TYPE["NONE"] = "";
-})(TABLE_STICKY_TYPE || (TABLE_STICKY_TYPE = {}));
-var TABLE_TYPE;
-(function (TABLE_TYPE) {
-    TABLE_TYPE["AUTO"] = "table-auto";
-    TABLE_TYPE["MODAL"] = "table-modal";
-    TABLE_TYPE["CARD"] = "table-card";
-    TABLE_TYPE["FULL"] = "table-full";
-})(TABLE_TYPE || (TABLE_TYPE = {}));
-var COLUMN_TEXT_ALIGN;
-(function (COLUMN_TEXT_ALIGN) {
-    COLUMN_TEXT_ALIGN["LEFT"] = "left";
-    COLUMN_TEXT_ALIGN["RIGHT"] = "right";
-})(COLUMN_TEXT_ALIGN || (COLUMN_TEXT_ALIGN = {}));
-var ORDER_TABLE_BY;
-(function (ORDER_TABLE_BY) {
-    ORDER_TABLE_BY[ORDER_TABLE_BY["ASC"] = 0] = "ASC";
-    ORDER_TABLE_BY[ORDER_TABLE_BY["DESC"] = 1] = "DESC";
-    ORDER_TABLE_BY[ORDER_TABLE_BY["NONE"] = 2] = "NONE";
-})(ORDER_TABLE_BY || (ORDER_TABLE_BY = {}));
-var ARIA_SORT_VALUES;
-(function (ARIA_SORT_VALUES) {
-    ARIA_SORT_VALUES["ASC"] = "ascending";
-    ARIA_SORT_VALUES["DESC"] = "descending";
-    ARIA_SORT_VALUES["NONE"] = "none";
-    ARIA_SORT_VALUES["OTHER"] = "other";
-})(ARIA_SORT_VALUES || (ARIA_SORT_VALUES = {}));
-var SORT_ICON_CLASS;
-(function (SORT_ICON_CLASS) {
-    SORT_ICON_CLASS["SORT_UP"] = "icon-sort-up";
-    SORT_ICON_CLASS["SORT_DOWN"] = "icon-sort-down";
-})(SORT_ICON_CLASS || (SORT_ICON_CLASS = {}));
-export { ARIA_SORT_VALUES, COLUMN_TEXT_ALIGN, ORDER_TABLE_BY, SORT_ICON_CLASS, TABLE_BORDER_TYPE, TABLE_STICKY_TYPE, TABLE_TYPE, };

package/es6/components/Text/TextWithEllipsis.js

@@ -1,19 +0,0 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import React, { forwardRef } from 'react';
-import { Typography as MuiTypography } from '@material-ui/core';
-import { ellipsis, useDeprecatedLog } from '../../foundation';
-import styled from '../../foundation/styled-components';
-var _RcTextWithEllipsis = forwardRef(function (props, ref) {
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useDeprecatedLog({
-            component: 'RcTextWithEllipsis',
-            message: 'should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull`',
-        });
-    }
-    return React.createElement(MuiTypography, __assign({}, props, { ref: ref }));
-});
-/** @deprecated should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull` */
-var RcTextWithEllipsis = styled(_RcTextWithEllipsis)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  flex: 1 1 auto;\n"], ["\n  ", ";\n  flex: 1 1 auto;\n"])), ellipsis());
-export { RcTextWithEllipsis };
-var templateObject_1;

package/es6/components/TextWithHighlight/TextWithHighlight.js

@@ -1,18 +0,0 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import React from 'react';
-import { palette2, useDeprecatedLog } from '../../foundation';
-import styled from '../../foundation/styled-components';
-var StyledSpan = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  background-color: ", ";\n  a {\n    color: inherit;\n  }\n"], ["\n  color: ", ";\n  background-color: ", ";\n  a {\n    color: inherit;\n  }\n"])), palette2('highlight', 'f01'), palette2('highlight', 'b02'));
-/** @deprecated should not use that, just use RcText with `highlight` */
-var RcTextWithHighlight = function (props) {
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useDeprecatedLog({
-            component: 'RcTextWithHighlight',
-            message: 'should not use that, just use RcText with `highlight`',
-        });
-    }
-    return React.createElement(StyledSpan, __assign({ className: "highlight-term" }, props));
-};
-export { RcTextWithHighlight };
-var templateObject_1;

package/es6/components/TextWithHighlight/index.js

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

package/es6/components/TextWithLink/TextWithLink.js

@@ -1,29 +0,0 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { memo } from 'react';
-import MuiTypography from '@material-ui/core/Typography';
-import { palette2, typography, useDeprecatedLog } from '../../foundation';
-import styled from '../../foundation/styled-components';
-import { RcLink } from '../Link';
-var TipsText = styled(MuiTypography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  && {\n    color: ", ";\n    ", ";\n    * {\n      ", ";\n    }\n  }\n"], ["\n  && {\n    color: ", ";\n    ", ";\n    * {\n      ", ";\n    }\n  }\n"])), palette2('neutral', 'f04'), typography('caption1'), typography('caption1'));
-/** @deprecated please don't use that component, just use RcText and RcLink directly */
-var RcTextWithLink = memo(function (props) {
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useDeprecatedLog({
-            component: 'RcTextWithLink',
-            message: "please don't use that component, just use `RcText` and RcLink directly",
-        });
-    }
-    var text = props.text, linkText = props.linkText, onClick = props.onClick, TypographyProps = props.TypographyProps, RcLinkProps = props.RcLinkProps;
-    var textProps;
-    if (TypographyProps) {
-        var innerRef = TypographyProps.innerRef, rest = __rest(TypographyProps, ["innerRef"]);
-        textProps = rest;
-    }
-    return (React.createElement(TipsText, __assign({}, textProps),
-        text,
-        React.createElement(RcLink, __assign({ handleOnClick: onClick }, RcLinkProps), linkText)));
-});
-RcTextWithLink.displayName = 'RcTextWithLink';
-export { RcTextWithLink };
-var templateObject_1;

package/es6/components/TextWithLink/index.js

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

package/es6/components/TextWithTooltip/TextWithTooltip.js

@@ -1,33 +0,0 @@
-import { __makeTemplateObject, __read } from "tslib";
-import React, { useRef, useState } from 'react';
-import { getParsePaletteColor, palette2, styled, useDeprecatedLog, } from '../../foundation';
-var StyledText = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ",
-    ";\n"])), function (_a) {
-    var textColor = _a.textColor;
-    return getParsePaletteColor(textColor, palette2('neutral', 'f06'));
-});
-/** @deprecated please don't use that component, just use `RcText` with `title` directly */
-var RcTextWithTooltip = function (props) {
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useDeprecatedLog({
-            component: 'RcTextWithTooltip',
-            message: "please don't use that component, just use `RcText` with `title` directly",
-        });
-    }
-    var tooltip = props.tooltip, children = props.children, _a = props.textColor, textColor = _a === void 0 ? ['neutral', 'f06'] : _a;
-    var ref = useRef(null);
-    var _b = __read(useState(false), 2), showTooltip = _b[0], setShowTooltip = _b[1];
-    var onMouseOver = function () {
-        var span = ref.current;
-        if (span && span.parentElement) {
-            var _a = span.parentElement, scrollHeight = _a.scrollHeight, scrollWidth = _a.scrollWidth, clientHeight = _a.clientHeight, clientWidth = _a.clientWidth;
-            setShowTooltip(scrollWidth > clientWidth || scrollHeight > clientHeight);
-        }
-    };
-    var toolTipText = typeof children === 'string' ? children : tooltip || '';
-    return (React.createElement("span", { title: showTooltip ? toolTipText : '', onMouseOver: onMouseOver, ref: ref },
-        React.createElement(StyledText, { textColor: textColor }, children)));
-};
-export { RcTextWithTooltip };
-var templateObject_1;

package/es6/components/TextWithTooltip/index.js

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