@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/confirm/confirm.d.ts

@@ -0,0 +1,48 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ConfirmProps {
+    text: string;
+    description: ReactNode;
+    show: boolean;
+    rejectOnEsc: boolean;
+    inProgress: boolean;
+    cancelIsDefault: boolean;
+    confirmLabel: string;
+    rejectLabel: string;
+    onConfirm: ((event: React.MouseEvent<HTMLButtonElement>) => void);
+    onReject: ((event?: React.MouseEvent<HTMLButtonElement>) => void);
+    className?: string | undefined;
+}
+/**
+ * @name Confirm
+ */
+export default class Confirm extends PureComponent<ConfirmProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        show: PropTypes.Requireable<boolean>;
+        rejectOnEsc: PropTypes.Requireable<boolean>;
+        inProgress: PropTypes.Requireable<boolean>;
+        cancelIsDefault: PropTypes.Requireable<boolean>;
+        confirmLabel: PropTypes.Requireable<string>;
+        rejectLabel: PropTypes.Requireable<string>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onReject: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        text: null;
+        description: null;
+        show: boolean;
+        rejectOnEsc: boolean;
+        inProgress: boolean;
+        cancelIsDefault: boolean;
+        confirmLabel: string;
+        rejectLabel: string;
+        onConfirm: () => void;
+        onReject: () => void;
+    };
+    onEscPress: () => void;
+    render(): React.JSX.Element;
+}
+export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/confirm/confirm.js

@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Dialog from '../dialog/dialog';
+import Button from '../button/button';
+import { Content, Header } from '../island/island';
+import Panel from '../panel/panel';
+import styles from './confirm.css';
+/**
+ * @name Confirm
+ */
+export default class Confirm extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        text: PropTypes.string,
+        description: PropTypes.node,
+        show: PropTypes.bool,
+        rejectOnEsc: PropTypes.bool,
+        inProgress: PropTypes.bool,
+        cancelIsDefault: PropTypes.bool,
+        confirmLabel: PropTypes.string,
+        rejectLabel: PropTypes.string,
+        onConfirm: PropTypes.func,
+        onReject: PropTypes.func
+    };
+    static defaultProps = {
+        text: null,
+        description: null,
+        show: false,
+        rejectOnEsc: true,
+        inProgress: false,
+        cancelIsDefault: false,
+        confirmLabel: 'OK',
+        rejectLabel: 'Cancel',
+        onConfirm: () => { },
+        onReject: () => { }
+    };
+    onEscPress = () => {
+        if (this.props.rejectOnEsc) {
+            this.props.onReject();
+        }
+    };
+    render() {
+        const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject } = this.props;
+        return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test="ring-confirm">
+        {text && <Header>{text}</Header>}
+        {description && (<Content>
+            <div className={styles.description}>{description}</div>
+          </Content>)}
+        <Panel>
+          <Button data-test="confirm-ok-button" primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+          <Button data-test="confirm-reject-button" onClick={onReject} disabled={inProgress} primary={cancelIsDefault}>
+            {rejectLabel}
+          </Button>
+        </Panel>
+      </Dialog>);
+    }
+}

package/components/confirm-ng/confirm-ng.js

@@ -0,0 +1,30 @@
+import angular from 'angular';
+
+import confirm from '../confirm-service/confirm-service';
+import MessageBundle from '../message-bundle-ng/message-bundle-ng';
+
+/**
+ * @name Confirm Ng
+ */
+
+const angularModule = angular.module('Ring.confirm', [
+  MessageBundle
+]);
+
+angularModule.service('confirm', function service($q, RingMessageBundle) {
+  return function showConfirm(
+    message, description, actionTitle, cancelTitle,
+    cancelIsDefault, actionFn
+  ) {
+    return $q.when(confirm({
+      text: message,
+      description,
+      confirmLabel: actionTitle || RingMessageBundle.confirmation_ok(),
+      rejectLabel: cancelTitle || RingMessageBundle.confirmation_cancel(),
+      cancelIsDefault,
+      onBeforeConfirm: actionFn
+    }));
+  };
+});
+
+export default angularModule.name;

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

@@ -0,0 +1,43 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import {hideConfirm} from '../confirm-service/confirm-service';
+
+import ConfirmNG from './confirm-ng';
+
+export default {
+  title: 'Legacy Angular/Confirm Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Displays a confirmation prompt.',
+    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
+    a11y: {element: '#storybook-root,*[data-test~=ring-dialog]'}
+  }
+};
+
+export const basic = ({onConfirm, onCancel}) => {
+  angular.
+    module(APP_NAME, [ConfirmNG]).
+    controller('TestCtrl', function controller($scope, confirm) {
+      confirm(
+        'Do you really wish to proceed?',
+        'A description of an action that is about to take place.'
+      ).
+        then(onConfirm).
+        catch(onCancel);
+
+      $scope.$on('$destroy', hideConfirm);
+    });
+
+  return `
+      <div>
+        <div rg-dialog></div>
+        <div ng-controller="TestCtrl"></div>
+      </div>
+    `;
+};
+
+basic.storyName = 'Confirm Ng';
+basic.argTypes = {onConfirm: {}, onCancel: {}};

package/components/confirm-service/confirm-service.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ConfirmAttributes } from '../confirm/confirm';
+import { ControlsHeight } from '../global/controls-height';
+/**
+ * @name Confirm Service
+ */
+export type Props = ConfirmAttributes & {
+    buttonsHeight?: ControlsHeight;
+};
+export declare const containerElement: HTMLDivElement;
+export interface ConfirmServiceParams {
+    text?: string | undefined;
+    description?: ReactNode;
+    cancelIsDefault?: boolean | undefined;
+    confirmLabel?: string | undefined;
+    rejectLabel?: string | undefined;
+    onBeforeConfirm?: (() => void) | undefined;
+    buttonsHeight?: ControlsHeight | undefined;
+}
+export default function confirm({ text, description, confirmLabel, rejectLabel, cancelIsDefault, onBeforeConfirm, buttonsHeight }: ConfirmServiceParams): Promise<void>;
+export declare function hideConfirm(): void;

package/components/confirm-service/confirm-service.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from '../global/react-render-adapter';
+import Confirm from '../confirm/confirm';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
+export const containerElement = document.createElement('div');
+/**
+ * Renders Confirm into virtual node to skip maintaining container
+ */
+function renderConfirm(props) {
+    const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
+    render((<ControlsHeightContext.Provider value={buttonsHeight}>
+      <Confirm {...restProps}/>
+    </ControlsHeightContext.Provider>), containerElement);
+}
+export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight }) {
+    return new Promise((resolve, reject) => {
+        const props = {
+            text,
+            description,
+            confirmLabel,
+            rejectLabel,
+            cancelIsDefault,
+            buttonsHeight,
+            show: true,
+            onConfirm: () => {
+                if (onBeforeConfirm) {
+                    renderConfirm({ ...props, inProgress: true });
+                    return Promise.resolve(onBeforeConfirm()).
+                        then(() => {
+                        renderConfirm({ ...props, show: false });
+                        resolve();
+                    }).
+                        catch(err => {
+                        renderConfirm({ ...props, show: false });
+                        reject(err);
+                    });
+                }
+                renderConfirm({ ...props, show: false });
+                return resolve();
+            },
+            onReject: () => {
+                renderConfirm({ ...props, show: false });
+                reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
+            }
+        };
+        renderConfirm(props);
+    });
+}
+export function hideConfirm() {
+    renderConfirm({ text: '', show: false });
+}

package/components/content-layout/content-layout.css

@@ -0,0 +1,108 @@
+@import "../global/variables.css";
+
+@value unit, extra-small-screen-media, small-screen-media from "../global/global.css";
+@value sidebarWidth: calc(unit * 30);
+
+.contentLayout {
+  position: relative;
+
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.contentLayoutContent {
+  align-self: flex-start;
+  flex-grow: 2;
+
+  width: 100%; /* without this hack IE11 render contentLayoutContent wider than its container */
+  margin: 0 calc(unit * 4);
+}
+
+.sidebarContainer {
+  min-width: sidebarWidth;
+  max-width: sidebarWidth;
+}
+
+.sidebarContainerRight {
+  order: 1;
+}
+
+.sidebar {
+  overflow: auto;
+
+  box-sizing: border-box;
+  min-width: sidebarWidth;
+  max-width: sidebarWidth;
+  height: 100%;
+  padding-right: calc(unit * 2);
+  padding-left: calc(unit * 4);
+}
+
+.sidebarRight {
+  padding-right: calc(unit * 4);
+  padding-left: calc(unit * 2);
+}
+
+.sidebarFixedTop {
+  top: 0;
+  bottom: 0;
+
+  &.sidebarFixedTop {
+    position: fixed;
+  }
+}
+
+.sidebarFixedBottom.sidebarFixedBottom {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+}
+
+.bottomMarker {
+  position: absolute;
+  bottom: 0;
+}
+
+.contentLayoutResponsive {
+  @media extra-small-screen-media, small-screen-media {
+    & .contentLayoutContent {
+      margin: 0 16px;
+    }
+
+    & .sidebar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+
+      box-sizing: content-box;
+      padding: 0 16px;
+    }
+
+    & .sidebarFixedTop {
+      position: fixed;
+    }
+
+    & .sidebarFixedBottom {
+      top: auto;
+    }
+
+    & .sidebarRight {
+      right: 0;
+      left: auto;
+    }
+
+    & .sidebarContainer {
+      min-width: 0;
+      max-width: 0;
+    }
+  }
+
+  @media extra-small-screen-media {
+    & .sidebar {
+      width: 80%;
+      min-width: 0;
+      max-width: none;
+    }
+  }
+}

package/components/content-layout/content-layout.d.ts

@@ -0,0 +1,26 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
+    responsive: boolean;
+    contentClassName?: string | null | undefined;
+}
+/**
+ * @name Content Layout
+ */
+export default class ContentLayout extends Component<ContentLayoutProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+        responsive: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        responsive: boolean;
+    };
+    state: {
+        contentNode: null;
+    };
+    saveContentNode: (contentNode: HTMLElement | null) => void;
+    render(): React.JSX.Element;
+}
+export { default as Sidebar } from './sidebar';

package/components/content-layout/content-layout.js

@@ -0,0 +1,45 @@
+import React, { cloneElement, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Sidebar from './sidebar';
+import styles from './content-layout.css';
+/**
+ * @name Content Layout
+ */
+export default class ContentLayout extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        contentClassName: PropTypes.string,
+        responsive: PropTypes.bool
+    };
+    static defaultProps = {
+        responsive: true
+    };
+    state = {
+        contentNode: null
+    };
+    saveContentNode = (contentNode) => {
+        this.setState({ contentNode });
+    };
+    render() {
+        const { children, className, contentClassName, responsive, ...restProps } = this.props;
+        const classes = classNames(styles.contentLayout, className, {
+            [styles.contentLayoutResponsive]: responsive
+        });
+        const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
+        const childrenArray = React.Children.toArray(children);
+        const sidebarChild = childrenArray.filter((child) => child != null && typeof child === 'object' && 'type' in child && child.type === Sidebar)[0];
+        const sidebar = sidebarChild && cloneElement(sidebarChild, {
+            contentNode: this.state.contentNode
+        });
+        const contentChildren = childrenArray.filter(child => child !== sidebarChild);
+        return (<div {...restProps} className={classes}>
+        {sidebar}
+        <main className={contentClasses} ref={this.saveContentNode}>
+          {contentChildren}
+        </main>
+      </div>);
+    }
+}
+export { default as Sidebar } from './sidebar';

package/components/content-layout/sidebar.d.ts

@@ -0,0 +1,31 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { Waypoint } from 'react-waypoint';
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    right?: boolean | null | undefined;
+    containerClassName?: string | null | undefined;
+    fixedClassName?: string | null | undefined;
+    contentNode?: HTMLElement | null | undefined;
+}
+export default class Sidebar extends Component<SidebarProps> {
+    static propTypes: {
+        right: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        containerClassName: PropTypes.Requireable<string>;
+        fixedClassName: PropTypes.Requireable<string>;
+        contentNode: PropTypes.Requireable<object>;
+    };
+    state: {
+        topIsOutside: boolean;
+        bottomIsOutside: boolean;
+        sidebarVisibleHeight: undefined;
+    };
+    sidebarNode?: HTMLElement | null;
+    handleTopWaypoint: ({ currentPosition }: Waypoint.CallbackArgs) => void;
+    handleBottomWaypoint: ({ currentPosition, waypointTop }: Waypoint.CallbackArgs) => void;
+    shouldUseFixation(): boolean;
+    shouldFixateBottom(): boolean;
+    sidebarRef: (node: HTMLElement | null) => void;
+    render(): React.JSX.Element;
+}

package/components/content-layout/sidebar.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Waypoint } from 'react-waypoint';
+import styles from './content-layout.css';
+const ABOVE = 'above';
+const INSIDE = 'inside';
+export default class Sidebar extends Component {
+    static propTypes = {
+        right: PropTypes.bool,
+        children: PropTypes.node,
+        className: PropTypes.string,
+        containerClassName: PropTypes.string,
+        fixedClassName: PropTypes.string,
+        contentNode: PropTypes.object
+    };
+    state = {
+        topIsOutside: true,
+        bottomIsOutside: true,
+        sidebarVisibleHeight: undefined
+    };
+    sidebarNode;
+    handleTopWaypoint = ({ currentPosition }) => {
+        this.setState({ topIsOutside: currentPosition === ABOVE });
+    };
+    handleBottomWaypoint = ({ currentPosition, waypointTop }) => {
+        this.setState({
+            sidebarVisibleHeight: waypointTop,
+            bottomIsOutside: currentPosition !== INSIDE
+        });
+    };
+    shouldUseFixation() {
+        const { contentNode } = this.props;
+        const { sidebarNode } = this;
+        if (!contentNode || !sidebarNode) {
+            return false;
+        }
+        return contentNode.offsetHeight >= sidebarNode.offsetHeight;
+    }
+    shouldFixateBottom() {
+        const { topIsOutside, bottomIsOutside } = this.state;
+        return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
+    }
+    sidebarRef = (node) => {
+        this.sidebarNode = node;
+    };
+    render() {
+        const { right, children, className, containerClassName, fixedClassName, contentNode, ...restProps } = this.props;
+        const { topIsOutside, bottomIsOutside, sidebarVisibleHeight } = this.state;
+        const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
+        const shouldFixateBottom = this.shouldFixateBottom();
+        const containerClasses = classNames(styles.sidebarContainer, containerClassName, {
+            [styles.sidebarContainerRight]: right
+        });
+        const classes = classNames(styles.sidebar, className, {
+            [styles.sidebarRight]: right,
+            [styles.sidebarFixedTop]: shouldFixateTop,
+            [styles.sidebarFixedBottom]: shouldFixateBottom,
+            [fixedClassName ?? '']: shouldFixateTop || shouldFixateBottom
+        });
+        const style = {
+            maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined
+        };
+        return (<aside className={containerClasses} ref={this.sidebarRef}>
+        <Waypoint onEnter={this.handleTopWaypoint} onLeave={this.handleTopWaypoint}/>
+
+        <div {...restProps} style={style} className={classes}>
+          {children}
+        </div>
+
+        <div className={styles.bottomMarker}>
+          <Waypoint onEnter={this.handleBottomWaypoint} onLeave={this.handleBottomWaypoint}/>
+        </div>
+      </aside>);
+    }
+}

package/components/contenteditable/contenteditable.d.ts

@@ -0,0 +1,47 @@
+import React, { Component, HTMLAttributes, Ref } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name ContentEditable
+ */
+declare function noop(): void;
+export interface ContentEditableBaseProps extends HTMLAttributes<HTMLElement> {
+    disabled: boolean;
+    onComponentUpdate: ((prevProps: ContentEditableBaseProps) => void);
+    inputRef?: Ref<HTMLDivElement> | null | undefined;
+    __html: string;
+}
+declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
+    static propTypes: {
+        __html: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        componentDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onComponentUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        disabled: boolean;
+        tabIndex: number;
+        onInput: typeof noop;
+        onComponentUpdate: typeof noop;
+    };
+    shouldComponentUpdate(nextProps: ContentEditableBaseProps): boolean;
+    componentDidUpdate(prevProps: ContentEditableBaseProps): void;
+    render(): React.JSX.Element;
+}
+type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
+export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
+declare const ContentEditable: {
+    ({ children, ...props }: ContentEditableProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        componentDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onComponentUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+    };
+};
+export default ContentEditable;

package/components/contenteditable/contenteditable.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { renderToStaticMarkup } from 'react-dom/server';
+/**
+ * @name ContentEditable
+ */
+function noop() { }
+const commonPropTypes = {
+    disabled: PropTypes.bool,
+    tabIndex: PropTypes.number,
+    componentDidUpdate: PropTypes.func,
+    onComponentUpdate: PropTypes.func,
+    className: PropTypes.string,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+class ContentEditableBase extends Component {
+    static propTypes = {
+        ...commonPropTypes,
+        __html: PropTypes.string
+    };
+    static defaultProps = {
+        disabled: false,
+        tabIndex: 0,
+        onInput: noop,
+        onComponentUpdate: noop
+    };
+    shouldComponentUpdate(nextProps) {
+        return nextProps.disabled !== this.props.disabled ||
+            nextProps.__html !== this.props.__html;
+    }
+    componentDidUpdate(prevProps) {
+        this.props.onComponentUpdate(prevProps);
+    }
+    render() {
+        const { __html, onComponentUpdate, disabled, tabIndex, inputRef, ...props } = this.props;
+        return (<div {...props} ref={inputRef} 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        disabled={disabled} role="textbox" tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
+    }
+}
+const ContentEditable = ({ children, ...props }) => <ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>;
+ContentEditable.propTypes = {
+    ...commonPropTypes,
+    children: PropTypes.node
+};
+export default ContentEditable;

package/components/control-label/control-label.css

@@ -0,0 +1,23 @@
+.label {
+  display: block;
+
+  margin-bottom: calc(var(--ring-unit) * 0.5);
+}
+
+.formLabel {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.secondaryLabel {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.disabledLabel {
+  color: var(--ring-disabled-color);
+}

package/components/control-label/control-label.d.ts

@@ -0,0 +1,11 @@
+import React, { LabelHTMLAttributes } from 'react';
+export declare enum LabelType {
+    SECONDARY = "secondary",
+    FORM = "form"
+}
+interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    type?: LabelType;
+}
+export declare const ControlLabel: React.FC<ControlLabelProps>;
+export default ControlLabel;