@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/tooltip/tooltip.js

@@ -1,126 +0,0 @@
-import React, { Component, createContext } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Popup from '../popup/popup';
-import { Listeners } from '../global/dom';
-import dataTests from '../global/data-tests';
-import scheduleRAF from '../global/schedule-raf';
-import styles from './tooltip.css';
-const scheduleScroll = scheduleRAF();
-const TooltipContext = createContext(undefined);
-/**
- * @name Tooltip
- */
-export default class Tooltip extends Component {
-    static propTypes = {
-        delay: PropTypes.number,
-        selfOverflowOnly: PropTypes.bool,
-        popupProps: PropTypes.object,
-        title: PropTypes.node,
-        children: PropTypes.node,
-        'data-test': PropTypes.string
-    };
-    static defaultProps = {
-        title: '',
-        selfOverflowOnly: false,
-        popupProps: {}
-    };
-    state = {
-        showPopup: false,
-        showNestedPopup: false
-    };
-    componentDidMount() {
-        if (this.props.title) {
-            this.addListeners();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (!prevProps.title && this.props.title) {
-            this.addListeners();
-        }
-        else if (prevProps.title && !this.props.title) {
-            this.listeners.removeAll();
-        }
-    }
-    componentWillUnmount() {
-        clearTimeout(this.timeout);
-        this.listeners.removeAll();
-    }
-    static PopupProps = Popup.PopupProps;
-    static contextType = TooltipContext;
-    timeout;
-    listeners = new Listeners();
-    containerNode;
-    containerRef = (el) => {
-        this.containerNode = el;
-    };
-    tryToShowPopup = () => {
-        const { delay, title } = this.props;
-        if (!title) {
-            return;
-        }
-        if (delay) {
-            this.timeout = window.setTimeout(this.showPopup, delay);
-        }
-        else {
-            this.showPopup();
-        }
-    };
-    showPopup = () => {
-        if (this.props.selfOverflowOnly) {
-            const { containerNode } = this;
-            // rare cases when containerNode is null are possible;
-            // probably the collision is due to the asynchronous nature of the code,
-            // i.e. this code runs after the component is unmounted,
-            // although at first glance it looks unlikely.
-            if (!containerNode) {
-                return;
-            }
-            // inline element?
-            if (containerNode.clientWidth === 0 && containerNode.clientHeight === 0) {
-                return;
-            }
-            if (containerNode.scrollWidth <= containerNode.clientWidth &&
-                containerNode.scrollHeight <= containerNode.clientHeight) {
-                return;
-            }
-        }
-        this.context?.onNestedTooltipShow();
-        this.setState({ showPopup: true });
-    };
-    hidePopup = () => {
-        clearTimeout(this.timeout);
-        this.context?.onNestedTooltipHide();
-        this.setState({ showPopup: false });
-    };
-    addListeners() {
-        if (this.containerNode != null) {
-            this.listeners.add(this.containerNode, 'mouseover', this.tryToShowPopup);
-            this.listeners.add(this.containerNode, 'mouseout', this.hidePopup);
-        }
-        this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), { passive: true });
-    }
-    popup;
-    popupRef = (el) => {
-        this.popup = el;
-    };
-    onNestedTooltipShow = () => {
-        this.setState({ showNestedPopup: true });
-    };
-    onNestedTooltipHide = () => {
-        this.setState({ showNestedPopup: false });
-    };
-    render() {
-        const { children, 'data-test': dataTest, title, delay, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
-        const ariaProps = typeof title === 'string' && !!title
-            ? { 'aria-label': title, role: 'tooltip' }
-            : {};
-        const { onNestedTooltipShow, onNestedTooltipHide } = this;
-        return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
-        <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
-          {children}
-          <Popup trapFocus={false} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={classNames(styles.tooltip, { [styles.long]: long })} attached={false} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
-        </span>
-      </TooltipContext.Provider>);
-    }
-}

package/components/tooltip-ng/tooltip-ng.css

@@ -1,25 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-:global(.ring-tooltip-ng) {
-  max-width: calc(unit * 50);
-  padding: unit;
-
-  text-align: left;
-}
-
-:global(.ring-tooltip-ng__hint-icon) {
-  position: relative;
-  top: -2px;
-
-  margin-left: unit;
-
-  cursor: pointer;
-
-  color: var(--ring-icon-color);
-}
-
-:global(.ring-tooltip-ng_open .ring-tooltip-ng__hint-icon) {
-  color: var(--ring-link-hover-color);
-}

package/components/tooltip-ng/tooltip-ng.js

@@ -1,100 +0,0 @@
-import angular from 'angular';
-
-import {createElement} from 'react';
-import classNames from 'classnames';
-
-import {render} from '../global/react-render-adapter';
-import Popup from '../popup/popup';
-
-import './tooltip-ng.css';
-
-/**
- * @name Tooltip Ng
-*/
-
-const OPEN_CLASS = 'ring-tooltip-ng_open';
-
-
-const name = angular.module('Ring.tooltip', []);
-
-name.directive('rgTooltip', function rgTooltipDirective(RgTooltipPopup) {
-  return {
-    restrict: 'A',
-
-    link: function link(scope, iElement, iAttrs) {
-      const element = iElement[0];
-      const getTooltipText = () => {
-        try {
-          return scope.$eval(iAttrs.rgTooltip);
-        } catch (err) {
-          return iAttrs.rgTooltip;
-        }
-      };
-      const popupWrapper = new RgTooltipPopup(element, getTooltipText);
-
-      element.addEventListener('mouseover', () => {
-        popupWrapper.displayTooltip(iAttrs.rgTooltipClass);
-        element.classList.add(OPEN_CLASS);
-      });
-
-      element.addEventListener('mouseout', () => {
-        popupWrapper.hideTooltip();
-        element.classList.remove(OPEN_CLASS);
-      });
-    }
-  };
-});
-
-name.factory('RgTooltipPopup', function RgTooltipPopupDirective() {
-  // eslint-disable-next-line func-names
-  return function (anchorElement, textGetter) {
-    this.wrapperElement = document.createElement('span');
-
-    this.defaultProps = {
-      anchorElement,
-      maxHeight: 400,
-      attached: false,
-      dontCloseOnAnchorClick: true,
-      trapFocus: false
-    };
-
-    this.renderPopup = props => render(
-      createElement(Popup, {
-        ...this.defaultProps,
-        ...props,
-        ref: instance => {
-          if (instance != null) {
-            this.popup = instance;
-          }
-        }
-      }, this.text),
-      this.wrapperElement
-    );
-
-    this.displayTooltip = customClass => {
-      const text = textGetter();
-      if (!text) {
-        return;
-      }
-
-      this.text = text;
-
-      const className = classNames({
-        'ring-tooltip-ng': true
-      }, customClass);
-
-      this.renderPopup({
-        hidden: false,
-        className
-      });
-    };
-
-    this.hideTooltip = () => {
-      this.renderPopup({
-        hidden: true
-      });
-    };
-  };
-});
-
-export default name.name;

package/components/tooltip-ng/tooltip-ng.stories.js

@@ -1,36 +0,0 @@
-import angular from 'angular';
-
-import warningIcon from '@jetbrains/icons/warning';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import IconNG from '../icon-ng/icon-ng';
-
-import TooltipNG from './tooltip-ng';
-
-export default {
-  title: 'Legacy Angular/Tooltip Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Tooltip.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [IconNG, TooltipNG]).controller('testController', function ctrl() {
-    this.warningIcon = warningIcon;
-    this.testMessageWithQuote = "It's a message with a single quotation mark";
-  });
-
-  return `
-      <div ng-controller="testController as ctrl" style="margin: 16px;">
-        Some text that needs an explanation
-        <rg-icon glyph="{{ctrl.warningIcon}}" rg-tooltip="'Test message'"></rg-icon>
-        <rg-icon glyph="{{ctrl.warningIcon}}" rg-tooltip="{{ctrl.testMessageWithQuote}}"></rg-icon>
-        <rg-icon glyph="{{ctrl.warningIcon}}" rg-tooltip="{{ctrl.someUndefinedValue}}"></rg-icon>
-      </div>
-    `;
-};
-
-basic.storyName = 'Tooltip Ng';

package/components/tooltip-ng/tooltip-ng.test.js

@@ -1,69 +0,0 @@
-/* global inject */
-/* eslint-disable angular/no-angular-mock */
-
-import angular from 'angular';
-import 'angular-mocks';
-
-import Tooltip from './tooltip-ng';
-
-describe('Tooltip Ng', () => {
-  const INNER_TEXT = 'test foo';
-  let RgTooltipPopup;
-  let element;
-  let popupWrapper;
-  let innerTextGetter;
-
-  beforeEach(angular.mock.module(Tooltip));
-
-  beforeEach(inject(_RgTooltipPopup_ => {
-    RgTooltipPopup = _RgTooltipPopup_;
-    innerTextGetter = sandbox.spy(() => INNER_TEXT);
-  }));
-
-  beforeEach(() => {
-    const container = document.createElement('div');
-    element = document.createElement('div');
-    container.appendChild(element);
-    popupWrapper = new RgTooltipPopup(element, innerTextGetter);
-  });
-
-  it('Should open popup', () => {
-    popupWrapper.displayTooltip();
-
-    popupWrapper.popup.props.hidden.should.be.false;
-  });
-
-  it('Should set ring-tooltip-ng class for popup', () => {
-    popupWrapper.displayTooltip();
-    const popup = popupWrapper.popup.popup;
-
-    popup.should.have.class('ring-tooltip-ng');
-  });
-
-  it('Should set custom class for popup', () => {
-    popupWrapper.displayTooltip('custom-class');
-    const popup = popupWrapper.popup.popup;
-
-    popup.should.have.class('custom-class');
-  });
-
-  it('Should display message inside', () => {
-    popupWrapper.displayTooltip();
-    popupWrapper.popup.popup.should.have.text(INNER_TEXT);
-  });
-
-  it('Should recalculate text on each opening', () => {
-    popupWrapper.displayTooltip();
-    popupWrapper.hideTooltip();
-    popupWrapper.displayTooltip();
-
-    innerTextGetter.should.been.calledTwice;
-  });
-
-  it('Should close popup', () => {
-    popupWrapper.displayTooltip();
-    popupWrapper.hideTooltip();
-
-    popupWrapper.popup.isVisible().should.be.false;
-  });
-});

package/components/user-agreement/service.d.ts

@@ -1,67 +0,0 @@
-import { UserAgreementAttrs, UserAgreementTranslations } from './user-agreement';
-export declare const showMessage = "userAgreementShow";
-export declare const hideMessage = "userAgreementHide";
-export interface Consent {
-    accepted?: boolean | null | undefined;
-    majorVersion?: number | null | undefined;
-    minorVersion?: number | null | undefined;
-}
-export interface ConsentResponse {
-    guest?: boolean | null | undefined;
-    endUserAgreementConsent?: Consent | null | undefined;
-}
-export interface Agreement {
-    text: string;
-    enabled?: boolean | null | undefined;
-    majorVersion?: number | null | undefined;
-    minorVersion?: number | null | undefined;
-    requiredForREST?: boolean | null | undefined;
-}
-export interface UserAgreementServiceTranslations extends UserAgreementTranslations {
-    reviewNow: string;
-}
-export interface UserAgreementServiceConfig {
-    getUserAgreement: () => Promise<Agreement | null | undefined> | Agreement | null | undefined;
-    getUserConsent: () => Promise<ConsentResponse> | ConsentResponse;
-    setUserConsent: () => Promise<Consent> | Consent;
-    interval?: number | null | undefined;
-    translations?: UserAgreementServiceTranslations | undefined;
-    onDialogShow?: (() => void) | null | undefined;
-    onDialogHide?: (() => void) | null | undefined;
-    onRemindLater?: (() => void) | null | undefined;
-    onAccept?: (() => void) | null | undefined;
-    onDecline?: (() => void) | null | undefined;
-}
-export default class UserAgreementService {
-    config: UserAgreementServiceConfig;
-    constructor(config: UserAgreementServiceConfig);
-    private _dialogPromise;
-    private _alertPromise;
-    tabId: number;
-    interval: number;
-    container: HTMLDivElement;
-    storage: import("../storage/storage").StorageInterface;
-    checkingPromise: Promise<[Agreement, Consent]> | null;
-    guest: boolean | null | undefined;
-    userAgreement: Agreement;
-    userConsent: Consent;
-    intervalId?: number;
-    startChecking: () => void;
-    stopChecking: () => void;
-    onStorageEvent: (event: StorageEvent) => void;
-    private _notifyAboutShowing;
-    private _notifyAboutHiding;
-    getUserAgreement: () => Promise<Agreement>;
-    getUserConsent: () => Promise<Consent>;
-    checkConsentAndShowDialog: (withoutNotifications?: boolean) => Promise<unknown>;
-    checkConsent: () => Promise<boolean | null | undefined>;
-    alertKey?: string | number | null;
-    showAlert: (withoutNotifications?: boolean) => Promise<unknown>;
-    hideAlert: (withoutNotifications?: boolean) => void;
-    showDialog: (withoutNotifications?: boolean, preview?: boolean, restOptions?: Partial<UserAgreementAttrs>) => Promise<unknown>;
-    hideDialog: (withoutNotifications?: boolean) => void;
-    showDialogOrAlert: (withoutNotifications?: boolean, preview?: boolean, restOptions?: Partial<UserAgreementAttrs>) => Promise<unknown>;
-    hideDialogAndAlert: (withoutNotifications?: boolean) => void;
-    onAccept: () => Promise<void>;
-    onDecline: () => void;
-}

package/components/user-agreement/service.js

@@ -1,241 +0,0 @@
-import React from 'react';
-import { render, unmountComponentAtNode } from '../global/react-render-adapter';
-import Storage from '../storage/storage';
-import alertService from '../alert-service/alert-service';
-import Link from '../link/link';
-import Alert from '../alert/alert';
-import Group from '../group/group';
-import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
-import UserAgreement from './user-agreement';
-const GUEST_SESSION_KEY = 'end-user-agreement-consent';
-const ONE_HOUR = 60 * 60 * 1000; // eslint-disable-line @typescript-eslint/no-magic-numbers
-const storageKey = 'userAgreementKey';
-export const showMessage = 'userAgreementShow';
-export const hideMessage = 'userAgreementHide';
-const DEFAULT_CONSENT = {
-    accepted: false,
-    majorVersion: 0,
-    minorVersion: 0
-};
-const DEFAULT_AGREEMENT = {
-    enabled: false,
-    majorVersion: 0,
-    minorVersion: 0,
-    requiredForREST: false,
-    text: ''
-};
-export default class UserAgreementService {
-    config;
-    constructor(config) {
-        if (!config) {
-            throw new Error('Please pass a config to UserAgreementService');
-        }
-        if (!config.getUserAgreement) {
-            throw new Error('Please pass a "getUserAgreement" option to UserAgreementService');
-        }
-        if (!config.getUserConsent) {
-            throw new Error('Please pass a "getUserConsent" option to UserAgreementService');
-        }
-        if (!config.setUserConsent) {
-            throw new Error('Please pass a "setUserConsent" option to UserAgreementService');
-        }
-        this.config = config;
-        this.interval = config.interval || this.interval;
-    }
-    _dialogPromise = null;
-    _alertPromise = null;
-    tabId = Math.random();
-    interval = ONE_HOUR;
-    container = document.createElement('div');
-    storage = new Storage();
-    checkingPromise = null;
-    guest = false;
-    userAgreement = DEFAULT_AGREEMENT;
-    userConsent = DEFAULT_CONSENT;
-    intervalId;
-    startChecking = () => {
-        this.intervalId = window.setInterval(this.checkConsentAndShowDialog, this.interval);
-        window.addEventListener('storage', this.onStorageEvent);
-        this.checkConsentAndShowDialog();
-    };
-    stopChecking = () => {
-        clearInterval(this.intervalId);
-        window.removeEventListener('storage', this.onStorageEvent);
-        this.hideDialog();
-    };
-    onStorageEvent = (event) => {
-        if (event.key === storageKey && event.newValue != null) {
-            const { tabId, command } = JSON.parse(event.newValue);
-            if (tabId !== this.tabId) {
-                if (command === showMessage) {
-                    this.checkConsentAndShowDialog(true);
-                }
-                else if (command === hideMessage) {
-                    this.hideDialogAndAlert(true);
-                }
-            }
-        }
-    };
-    _notifyAboutShowing = () => {
-        localStorage.setItem(storageKey, JSON.stringify({ command: showMessage, tabId: this.tabId }));
-    };
-    _notifyAboutHiding = () => {
-        localStorage.setItem(storageKey, JSON.stringify({ command: hideMessage, tabId: this.tabId }));
-    };
-    getUserAgreement = async () => {
-        this.userAgreement = await this.config.getUserAgreement() || DEFAULT_AGREEMENT;
-        return this.userAgreement;
-    };
-    getUserConsent = async () => {
-        const { guest, endUserAgreementConsent } = await this.config.getUserConsent();
-        this.guest = guest;
-        if (guest) {
-            this.userConsent = await this.storage.get(GUEST_SESSION_KEY) || this.userConsent;
-        }
-        else {
-            this.userConsent = endUserAgreementConsent || this.userConsent;
-        }
-        return this.userConsent;
-    };
-    checkConsentAndShowDialog = async (withoutNotifications) => {
-        if (await this.checkConsent()) {
-            return this.hideDialogAndAlert(withoutNotifications);
-        }
-        else {
-            return this.showDialogOrAlert(withoutNotifications);
-        }
-    };
-    checkConsent = async () => {
-        if (!this.checkingPromise) {
-            this.checkingPromise = Promise.all([
-                this.getUserAgreement(),
-                this.getUserConsent()
-            ]);
-        }
-        const [userAgreement, userConsent] = await this.checkingPromise;
-        this.checkingPromise = null;
-        const { enabled, majorVersion: actualVersion } = userAgreement;
-        const { accepted, majorVersion: acceptedVersion } = userConsent;
-        return !enabled || (accepted && actualVersion === acceptedVersion);
-    };
-    alertKey;
-    showAlert = (withoutNotifications) => {
-        if (this._alertPromise) {
-            return this._alertPromise;
-        }
-        this._alertPromise = new Promise((resolve, reject) => {
-            const { userAgreement, reviewNow, remindLater } = (this.config.translations || {});
-            const onRemind = () => {
-                this.hideDialogAndAlert(withoutNotifications);
-                reject('Postponed');
-            };
-            const onReview = async () => {
-                await this.showDialog(true, false, { onRemindLater: onRemind });
-                this.hideAlert(withoutNotifications);
-                resolve();
-            };
-            const message = (<Group>
-          <span>{userAgreement || 'User Agreement'}</span>
-          <Link onClick={onReview} data-test="review">{reviewNow || 'Review now'}</Link>
-          <Link onClick={onRemind} data-test="later">{remindLater || 'Remind me later'}</Link>
-        </Group>);
-            this.alertKey = alertService.addAlert(message, Alert.Type.WARNING, 0, { closeable: false });
-        });
-        if (!withoutNotifications) {
-            this._notifyAboutShowing();
-        }
-        return this._alertPromise;
-    };
-    hideAlert = (withoutNotifications) => {
-        const { onRemindLater } = this.config;
-        alertService.remove(this.alertKey);
-        this.alertKey = null;
-        this._alertPromise = null;
-        if (onRemindLater) {
-            onRemindLater();
-        }
-        if (!withoutNotifications) {
-            this._notifyAboutHiding();
-        }
-    };
-    showDialog = (withoutNotifications, preview = false, restOptions) => {
-        const { translations, onDialogShow } = this.config;
-        const { text } = this.userAgreement;
-        const show = true;
-        if (!this._dialogPromise) {
-            this._dialogPromise = new Promise((resolve, reject) => {
-                const onAccept = async () => {
-                    await this.onAccept();
-                    resolve();
-                };
-                const onDecline = async () => {
-                    await this.onDecline();
-                    reject();
-                };
-                const onClose = this.hideDialogAndAlert;
-                const props = {
-                    text,
-                    show,
-                    onAccept,
-                    onDecline,
-                    onClose,
-                    translations,
-                    preview, ...restOptions
-                };
-                render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-              <UserAgreement {...props}/>
-            </ControlsHeightContext.Provider>), this.container);
-                if (onDialogShow) {
-                    onDialogShow();
-                }
-            });
-            if (!withoutNotifications) {
-                this._notifyAboutShowing();
-            }
-        }
-        return this._dialogPromise;
-    };
-    hideDialog = (withoutNotifications) => {
-        const { onDialogHide } = this.config;
-        unmountComponentAtNode(this.container);
-        if (onDialogHide) {
-            onDialogHide();
-            this._dialogPromise = null;
-            if (!withoutNotifications) {
-                this._notifyAboutHiding();
-            }
-        }
-    };
-    showDialogOrAlert = (withoutNotifications, preview, restOptions) => {
-        if (this.guest && !this.userAgreement.requiredForREST) {
-            return this.showAlert(withoutNotifications);
-        }
-        return this.showDialog(withoutNotifications, preview, restOptions);
-    };
-    hideDialogAndAlert = (withoutNotifications) => {
-        this.hideAlert(withoutNotifications);
-        this.hideDialog(withoutNotifications);
-    };
-    onAccept = async () => {
-        const { setUserConsent, onAccept } = this.config;
-        if (this.guest) {
-            const { majorVersion, minorVersion } = this.userAgreement;
-            this.userConsent = { majorVersion, minorVersion, accepted: true };
-            await this.storage.set(GUEST_SESSION_KEY, this.userConsent);
-        }
-        else {
-            this.userConsent = await setUserConsent();
-        }
-        this.hideDialog();
-        if (onAccept) {
-            onAccept();
-        }
-    };
-    onDecline = () => {
-        const { onDecline } = this.config;
-        this.hideDialog();
-        if (onDecline) {
-            onDecline();
-        }
-    };
-}