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

package/components/radio/radio.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value radio-size: calc(2 * unit);
-
 .radio {
   position: relative;
 
@@ -30,15 +27,15 @@
   flex-shrink: 0;
 
   box-sizing: border-box;
-  width: radio-size;
-  height: radio-size;
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
 
   user-select: none;
   transition: border-color var(--ring-ease), box-shadow var(--ring-ease);
   pointer-events: none;
 
   border: 1px solid var(--ring-borders-color);
-  border-radius: unit;
+  border-radius: var(--ring-unit);
   background-color: var(--ring-content-background-color);
 
   &::after {
@@ -46,8 +43,8 @@
     top: 3px;
     left: 3px;
 
-    width: unit;
-    height: unit;
+    width: var(--ring-unit);
+    height: var(--ring-unit);
 
     content: "";
 
@@ -57,7 +54,7 @@
 
     opacity: 0;
 
-    border-radius: calc(unit / 2);
+    border-radius: calc(var(--ring-unit) / 2);
     background-color: var(--ring-main-color);
   }
 }
@@ -119,7 +116,7 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   line-height: var(--ring-line-height);
 }

package/components/select/select-popup.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .filterWithTags {
   overflow: hidden;
 
-  margin: calc(unit * 2) unit 0;
+  margin: calc(var(--ring-unit) * 2) var(--ring-unit) 0;
   padding: 3px;
 
   text-align: left;
@@ -42,45 +40,59 @@
   width: 0;
 }
 
+.popup {
+  overscroll-behavior: contain;
+}
+
 .filterWrapper {
   position: relative;
 
   display: flex;
 
   margin: 0;
-  padding-right: unit;
-  padding-left: calc(unit * 5.5);
+  padding-right: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) * 5.5);
 
   border-bottom: 1px solid var(--ring-borders-color);
 
   [dir="rtl"] & {
-    padding-right: calc(unit * 5.5);
-    padding-left: unit;
+    padding-right: calc(var(--ring-unit) * 5.5);
+    padding-left: var(--ring-unit);
   }
 }
 
 .filterIcon {
   position: absolute;
   top: 7px;
-  left: calc(unit * 2);
+  left: calc(var(--ring-unit) * 2);
 
   color: var(--ring-icon-color);
 
   [dir="rtl"] & {
-    right: calc(unit * 2);
+    right: calc(var(--ring-unit) * 2);
     left: auto;
   }
 }
 
 .bottomLine {
   text-align: center;
+
+  &.bottomLineOverItem {
+    position: relative;
+
+    z-index: var(--ring-fixed-z-index);
+
+    margin-top: -36px;
+
+    background-color: var(--ring-content-background-color);
+  }
 }
 
 .message {
   display: inline-block;
 
-  margin: unit 0;
-  padding: 0 calc(2 * unit);
+  margin: var(--ring-unit) 0;
+  padding: 0 calc(2 * var(--ring-unit));
 }
 
 .selectAll {

package/components/select/select.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button-shadow from "../button/button.css";
 
 .select {
@@ -29,12 +28,12 @@
   }
 
   .toolbar & {
-    height: calc(4 * unit);
-    margin: unit 0;
+    height: calc(4 * var(--ring-unit));
+    margin: var(--ring-unit) 0;
   }
 
   &.buttonSpaced {
-    padding: 0 calc(2 * unit);
+    padding: 0 calc(2 * var(--ring-unit));
   }
 }
 
@@ -63,8 +62,8 @@
 
   display: inline-block;
 
-  width: calc(2 * unit);
-  height: calc(2 * unit);
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
   margin: 0 4px;
 
   background-repeat: no-repeat;
@@ -80,15 +79,15 @@
 }
 
 .sizeS {
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  width: calc(unit * 30);
+  width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  width: calc(unit * 50);
+  width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {
@@ -113,7 +112,7 @@
 
   box-sizing: border-box;
   width: 100%;
-  height: calc(unit * 4 + 1px);
+  height: calc(var(--ring-unit) * 4 + 1px);
   padding: 0 0 3px;
 
   cursor: pointer;
@@ -157,10 +156,10 @@
   display: block;
 
   width: 100%;
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   text-align: left;
-  vertical-align: calc(0 - unit);
+  vertical-align: calc(var(--ring-unit) * -1);
 }
 
 .buttonValue:focus-visible {
@@ -216,8 +215,8 @@
 }
 
 .popup {
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 40);
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 40);
 }
 
 .chevron.chevron {

package/components/select/select.d.ts

@@ -272,32 +272,5 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
 export type SingleSelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SingleSelectProps<T>>;
 export type MultipleSelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, MultipleSelectProps<T>>;
 export type SelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>;
-export declare const RerenderableSelect: {
-    new (props: SelectProps<unknown>): {
-        _propsCache: SelectProps<unknown> & React.RefAttributes<unknown>;
-        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        setState<K extends keyof SelectState<unknown>>(state: SelectState<unknown> | ((prevState: Readonly<SelectState<unknown>>, props: Readonly<SelectProps<unknown>>) => SelectState<unknown> | Pick<SelectState<unknown>, K> | null) | Pick<SelectState<unknown>, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): React.ReactNode;
-        readonly props: Readonly<SelectProps<unknown>>;
-        state: Readonly<SelectState<unknown>>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<SelectProps<unknown>>, nextState: Readonly<SelectState<unknown>>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<SelectProps<unknown>>, prevState: Readonly<SelectState<unknown>>): any;
-        componentDidUpdate?(prevProps: Readonly<SelectProps<unknown>>, prevState: Readonly<SelectState<unknown>>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<SelectProps<unknown>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<SelectProps<unknown>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<SelectProps<unknown>>, nextState: Readonly<SelectState<unknown>>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<SelectProps<unknown>>, nextState: Readonly<SelectState<unknown>>, nextContext: any): void;
-    };
-};
+export declare const RerenderableSelect: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<Select<unknown>>>;
 export {};

package/components/select/select.js

@@ -181,46 +181,46 @@ function isSameSelected(prevSelected, selected) {
 export default class Select extends Component {
     static defaultProps = {
         data: [],
-        filter: false,
+        filter: false, // enable filter (not in INPUT modes)
         filterIcon: null,
         filterRef: noop,
-        multiple: false,
-        clear: false,
-        loading: false,
-        disabled: false,
+        multiple: false, // multiple can be an object - see demo for more information
+        clear: false, // enable clear button that clears the "selected" state
+        loading: false, // show a loading indicator while data is loading
+        disabled: false, // disable select
         type: Type.BUTTON,
         size: Size.M,
-        targetElement: null,
-        hideSelected: false,
-        allowAny: false,
-        hideArrow: false,
+        targetElement: null, // element to bind the popup to (select BUTTON or INPUT by default)
+        hideSelected: false, // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
+        allowAny: false, // INPUT mode: allows any value to be entered
+        hideArrow: false, // hide dropdown arrow icon
         showPopup: false,
-        maxHeight: 600,
+        maxHeight: 600, // height of the options list, including the filter and the 'Add' button
         directions: [
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
             Popup.PopupProps.Directions.BOTTOM_LEFT,
             Popup.PopupProps.Directions.TOP_LEFT,
             Popup.PopupProps.Directions.TOP_RIGHT
         ],
-        selected: null,
-        label: null,
-        selectedLabel: null,
-        inputPlaceholder: '',
-        hint: null,
+        selected: null, // current selection (item / array of items)
+        label: null, // BUTTON or INPUT label (nothing selected)
+        selectedLabel: null, // BUTTON or INPUT label (something selected)
+        inputPlaceholder: '', // Placeholder for input modes
+        hint: null, // hint text to display under the list
         shortcutsEnabled: false,
         onBeforeOpen: noop,
         onLoadMore: noop,
         onOpen: noop,
         onClose: noop,
-        onFilter: noop,
+        onFilter: noop, // search string as first argument
         onFocus: noop,
         onBlur: noop,
         onKeyDown: noop,
-        onSelect: noop,
-        onDeselect: noop,
-        onOutsideClick: noop,
-        onChange: noop,
-        onAdd: noop,
+        onSelect: noop, // single + multi
+        onDeselect: noop, // multi
+        onOutsideClick: noop, // multi
+        onChange: noop, // multi
+        onAdd: noop, // search string as first argument
         onDone: noop,
         onReset: noop,
         tags: null,
@@ -866,7 +866,7 @@ export default class Select extends Component {
                                 onClick: this._clickHandler,
                                 disabled: this.props.disabled,
                                 children: this._getPlaceholder(),
-                                'data-test': 'ring-select_focus'
+                                'data-test': 'ring-select__focus'
                             },
                             popup: this._renderPopup()
                         })}

package/components/select/select__popup.js

@@ -227,8 +227,11 @@ export default class SelectPopup extends PureComponent {
         return this.getFilter();
     }
     getBottomLine() {
-        const { loading, message } = this.props;
-        return (loading || message) && (<div className={styles.bottomLine}>
+        const { loading, message, data } = this.props;
+        const hasMoreThanOneItem = data.length > 1;
+        return (loading || message) && (<div className={classNames(styles.bottomLine, {
+                [styles.bottomLineOverItem]: hasMoreThanOneItem
+            })}>
         {loading && <LoaderInline />}
 
         {message && (<div className={styles.message}>{message}</div>)}

package/components/sidebar/sidebar.css

@@ -1,7 +1,5 @@
 @import "../global/global.css";
 
-@value unit from "../global/global.css";
-
 @keyframes show-sidebar {
   0% {
     right: -100%;
@@ -25,10 +23,10 @@
 
   box-sizing: border-box;
 
-  width: calc(unit * 58);
+  width: calc(var(--ring-unit) * 58);
   height: 100%;
 
-  padding-top: calc(2 * unit);
+  padding-top: calc(2 * var(--ring-unit));
 
   transition: right 0.5s ease, visibility 0.5s;
 
@@ -60,16 +58,16 @@
 :global(.ring-sidebar__avatar) {
   float: left;
 
-  width: calc(6 * unit);
-  height: calc(6 * unit);
+  width: calc(6 * var(--ring-unit));
+  height: calc(6 * var(--ring-unit));
   object-fit: contain;
 
-  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+  padding: 0 calc(2 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__title) {
   margin: 0;
-  padding-left: calc(4 * unit);
+  padding-left: calc(4 * var(--ring-unit));
 
   vertical-align: middle;
 
@@ -90,8 +88,8 @@
 :global(.ring-sidebar__section) {
   position: relative;
 
-  margin-top: calc(3 * unit);
-  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+  margin-top: calc(3 * var(--ring-unit));
+  padding: 0 calc(2 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__section-title) {
@@ -107,7 +105,7 @@
   color: var(--ring-text-color);
 
   font-size: var(--ring-font-size);
-  line-height: calc(3 * unit);
+  line-height: calc(3 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__section-text_multiline) {
@@ -117,7 +115,7 @@
 }
 
 :global(.ring-sidebar__section-roster) {
-  margin-top: unit;
+  margin-top: var(--ring-unit);
 }
 
 :global(.ring-sidebar__section-icon) {
@@ -126,7 +124,7 @@
 
   display: block;
 
-  width: calc(4 * unit);
+  width: calc(4 * var(--ring-unit));
 
   text-align: center;
 
@@ -136,7 +134,7 @@
 }
 
 :global(.ring-sidebar__empty) {
-  margin-top: calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 4);
 
   text-align: center;
 }
@@ -148,7 +146,7 @@
 }
 
 :global(.ring-sidebar__empty-description) {
-  margin-top: calc(unit * 2);
+  margin-top: calc(var(--ring-unit) * 2);
   padding-top: 4px;
 
   color: var(--ring-text-color);

package/components/table/table.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value height: calc(4 * unit);
 @value compensate: 2px;
-@value compensated: calc(height - compensate);
+@value compensated: calc(calc(4 * var(--ring-unit)) - compensate);
 
 .tableWrapper {
   position: relative;
@@ -23,8 +21,8 @@
   composes: font-smaller-lower from "../global/global.css";
 
   box-sizing: border-box;
-  height: calc(unit * 3);
-  padding-right: calc(unit * 5);
+  height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 5);
 
   text-align: left;
   white-space: nowrap;
@@ -35,12 +33,12 @@
 }
 
 .headerCell:first-child {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .headerCell:last-child {
   width: 100%;
-  padding-right: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 4);
 }
 
 .headerCell:first-child:only-child {
@@ -76,7 +74,7 @@
 }
 
 .caption {
-  padding-top: unit;
+  padding-top: var(--ring-unit);
   padding-bottom: 6px;
 
   color: var(--ring-text-color);
@@ -152,15 +150,15 @@
 
   min-width: 0;
 
-  height: height;
+  height: calc(4 * var(--ring-unit));
   padding: 0;
-  padding-right: calc(unit * 5);
+  padding-right: calc(var(--ring-unit) * 5);
 
   color: var(--ring-text-color);
 }
 
 .cell:first-child {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .cell:last-child {
@@ -169,12 +167,12 @@
   /* Markup hack, allows cell to have content which is wider than cell and collapses it */
 
   max-width: 0;
-  padding-right: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 4);
 }
 
 .cell:first-child {
-  min-width: calc(unit * 37);
-  max-width: calc(unit * 77);
+  min-width: calc(var(--ring-unit) * 37);
+  max-width: calc(var(--ring-unit) * 77);
 }
 
 .cell:first-child:only-child {
@@ -207,7 +205,7 @@
 
 .dragHandle {
   top: top;
-  left: calc(-2 * unit);
+  left: calc(-2 * var(--ring-unit));
 
   cursor: grab;
 
@@ -218,7 +216,7 @@
 .dragHandle.dragHandle {
   position: absolute;
 
-  height: calc(height - top);
+  height: calc(calc(4 * var(--ring-unit)) - top);
   padding: 0;
 }
 
@@ -228,7 +226,7 @@
 }
 
 .rowCollapseExpandButton {
-  padding-right: calc(unit / 2);
+  padding-right: calc(var(--ring-unit) / 2);
   padding-left: 7px;
 }
 

package/components/table/table.js

@@ -151,7 +151,7 @@ export class Table extends PureComponent {
                 return null;
             }
             const { ref, ...restProps } = props;
-            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
+            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
             return isDragged
                 ? (<table style={{ ...props.style }} className={style.draggingTable}>
             <tbody>{row}</tbody>