@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/button-group/button-group.css

@@ -0,0 +1,236 @@
+@import "../global/variables.css";
+
+@value button, active, primary, button-shadow from "../button/button.css";
+
+:root {
+  --ring-button-group-default-z-index: 1;
+  --ring-button-group-disabled-z-index: 0;
+  --ring-button-group-active-z-index: 2;
+  --ring-button-group-hover-z-index: 3;
+  --ring-button-group-focus-z-index: 4;
+}
+
+.common {
+  display: inline-block;
+
+  white-space: nowrap;
+}
+
+.buttonGroup {
+  composes: common;
+  composes: buttonGroup from "../button-toolbar/button-toolbar.css";
+
+  border-radius: var(--ring-border-radius);
+
+  box-shadow: button-shadow var(--ring-borders-color);
+
+  line-height: normal;
+}
+
+.buttonGroup .button {
+  --ring-button-group-button-border-color: var(--ring-borders-color);
+
+  position: relative;
+
+  transition: none;
+
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset;
+}
+
+.buttonGroup .button[disabled] {
+  --ring-button-group-button-border-color: var(--ring-border-disabled-color);
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before,
+  &::after {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+
+    width: var(--ring-border-radius);
+
+    content: "";
+
+    background-color: var(--ring-disabled-background-color);
+
+    box-shadow: 0 1px var(--ring-border-disabled-color) inset, 0 -1px var(--ring-border-disabled-color) inset;
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    left: calc(var(--ring-border-radius) * -1);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::after {
+    right: calc(var(--ring-border-radius) * -1);
+  }
+}
+
+.buttonGroup > .button:first-child,
+.buttonGroup > :first-child .button {
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, 1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    display: none;
+  }
+}
+
+.buttonGroup > .button:last-child,
+.buttonGroup > :last-child .button {
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, -1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::after {
+    display: none;
+  }
+}
+
+.buttonGroup > .button:only-child,
+.buttonGroup > :only-child .button {
+  box-shadow:
+    0 1px var(--ring-button-group-button-border-color) inset,
+    0 -1px var(--ring-button-group-button-border-color) inset,
+    -1px 0 var(--ring-button-group-button-border-color) inset,
+    1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    display: none;
+  }
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:hover:not(:disabled),
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:active:not(:disabled) {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:focus-visible {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button.active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button:focus-visible.active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.active[disabled] {
+  box-shadow: button-shadow var(--ring-border-selected-disabled-color);
+}
+
+.split {
+  composes: common;
+  composes: buttonGroup from "../button-toolbar/button-toolbar.css";
+
+  position: relative;
+  z-index: 0;
+}
+
+.common button,
+.common .button {
+  border-radius: 0;
+}
+
+.split button,
+.split .button {
+  margin: 0 0 0 -1px;
+}
+
+.caption {
+  composes: font from "../global/global.css";
+
+  margin-right: var(--ring-unit);
+
+  font-size: var(--ring-font-size);
+
+  &:empty {
+    margin-right: 0;
+  }
+}
+
+.common > button:first-child,
+.common > .button:first-child,
+.common > :first-child .button {
+  margin: 0;
+
+  border-top-left-radius: var(--ring-border-radius);
+  border-bottom-left-radius: var(--ring-border-radius);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.common > button:first-child > div:first-child,
+.common > .button:first-child > div:first-child,
+.common > :first-child .button > div:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.common > .button:last-child,
+.common > button:last-child,
+.common > :last-child .button {
+  border-top-right-radius: var(--ring-border-radius);
+  border-bottom-right-radius: var(--ring-border-radius);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.common > .button:last-child > div:first-child,
+.common > button:last-child > div:first-child,
+.common > :last-child .button > div:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.split .primary:not(:last-child) {
+  margin-right: 1px;
+}
+
+.split .primary:not(:first-child) {
+  margin-left: 1px;
+}
+
+.common {
+  & .button {
+    position: relative;
+    z-index: var(--ring-button-group-default-z-index);
+
+    &[disabled] {
+      z-index: var(--ring-button-group-disabled-z-index);
+    }
+
+    &:active {
+      z-index: var(--ring-button-group-active-z-index);
+    }
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    &:hover:not(:disabled) {
+      z-index: var(--ring-button-group-hover-z-index);
+    }
+
+    &:focus {
+      z-index: var(--ring-button-group-focus-z-index);
+    }
+  }
+
+  & .active {
+    z-index: var(--ring-button-group-active-z-index);
+
+    &[disabled] {
+      z-index: var(--ring-button-group-default-z-index);
+    }
+  }
+}

package/components/button-group/button-group.d.ts

@@ -0,0 +1,18 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import Caption from './caption';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
+    split?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Button Group
+ */
+export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}
+export { Caption };

package/components/button-group/button-group.js

@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import Caption from './caption';
+import styles from './button-group.css';
+/**
+ * @name Button Group
+ */
+export default class ButtonGroup extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { className, split, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(split ? styles.split : styles.buttonGroup, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>);
+    }
+}
+export { Caption };

package/components/button-group/caption.d.ts

@@ -0,0 +1,8 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export default class Caption extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}

package/components/button-group/caption.js

@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './button-group.css';
+export default class Caption extends PureComponent {
+    static propTypes = {
+        className: PropTypes.node
+    };
+    render() {
+        const { className } = this.props;
+        const classes = classNames(styles.caption, className);
+        return (<span {...this.props} className={classes}/>);
+    }
+}

package/components/button-set/button-set.css

@@ -0,0 +1,21 @@
+@import "../global/variables.css";
+
+@value button from "../button/button.css";
+
+.buttonSet {
+  position: relative;
+
+  display: inline-block;
+
+  white-space: nowrap;
+
+  font-size: 0;
+
+  & .button {
+    margin: 0 var(--ring-unit) 0 0;
+  }
+
+  & > .button:last-child {
+    margin-right: 0;
+  }
+}

package/components/button-set/button-set.d.ts

@@ -0,0 +1,16 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent<ButtonSetProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/button-set/button-set.js

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import dataTests from '../global/data-tests';
+import styles from './button-set.css';
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, 'data-test': dataTest, children, ...restProps } = this.props;
+        const classes = classNames(styles.buttonSet, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-set', dataTest)} className={classes}>
+        {children}
+      </div>);
+    }
+}

package/components/button-toolbar/button-toolbar.css

@@ -0,0 +1,25 @@
+@import "../global/variables.css";
+
+@value button from "../button/button.css";
+
+.buttonToolbar {
+  display: inline-block;
+
+  white-space: nowrap;
+
+  font-size: 0;
+  line-height: 0;
+}
+
+.buttonToolbar > button,
+.buttonToolbar > :global(.ring-button-group),
+.buttonToolbar > .button,
+.buttonToolbar > .buttonGroup,
+.buttonToolbar > .split,
+.buttonToolbar > .buttonToolbar {
+  margin-right: var(--ring-unit);
+}
+
+.buttonToolbar > :last-child {
+  margin-right: 0;
+}

package/components/button-toolbar/button-toolbar.d.ts

@@ -0,0 +1,16 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/button-toolbar/button-toolbar.js

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import styles from './button-toolbar.css';
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.buttonToolbar, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>);
+    }
+}

package/components/caret/caret.d.ts

@@ -0,0 +1,66 @@
+export interface PositionParams {
+    avoidFocus?: boolean | null | undefined;
+}
+export interface Position {
+    startOffset: number;
+    endOffset: number;
+    position: number;
+}
+/**
+ * @name Caret
+ */
+export default class Caret {
+    /**
+     * Line endings RegExp
+     * @type {RegExp}
+     */
+    static returnRE: RegExp;
+    /**
+     * Line endings normalizer
+     * Borrowed from jQuery
+     * @see https://github.com/jquery/jquery/blob/master/src/attributes/val.js
+     * @param value {*}
+     * @return {*}
+     */
+    static normalizeNewlines(value: string | undefined): string | undefined;
+    target: HTMLElement | HTMLInputElement;
+    constructor(target: HTMLElement);
+    isContentEditable(): boolean;
+    /**
+     * Set focus on target if possible
+     */
+    focus(): void;
+    /**
+     * Get absolute caret position index
+     * @return {number}
+     */
+    getAbsolutePosition(node: Node): number;
+    /**
+     * Get caret position index
+     * @param {Object} [params]
+     * @param {boolean} params.avoidFocus
+     * @return {number}
+     */
+    getPosition(params?: PositionParams): number | Position;
+    /**
+     * Get relative position of query
+     * @param  {Node} curNode
+     * @param {number} position
+     * @return {{_correctedPosition: number, _curNode: Node}}
+     */
+    getRelativePosition(curNode: Node, position: number): {
+        _curNode: Node;
+        _correctedPosition: number;
+    };
+    /**
+     * Set caret position index
+     * @param  {number} position
+     * @return {number}
+     */
+    setPosition(position?: Position | number): number | Range | undefined;
+    /**
+     * Get caret position in pixels
+     * @return {number}
+     */
+    getOffset(): number;
+}