@jetbrains/ring-ui 5.0.151 → 5.0.153

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

@@ -0,0 +1,23 @@
+.label {
+  display: block;
+
+  margin-bottom: calc(var(--ring-unit) * 0.5);
+}
+
+.primaryLabel {
+  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",
+    PRIMARY = "primary"
+}
+interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    type?: LabelType;
+}
+export declare const ControlLabel: React.FC<ControlLabelProps>;
+export default ControlLabel;

package/components/control-label/control-label.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './control-label.css';
+export var LabelType;
+(function (LabelType) {
+    LabelType["SECONDARY"] = "secondary";
+    LabelType["PRIMARY"] = "primary";
+})(LabelType || (LabelType = {}));
+const classNameByType = {
+    [LabelType.SECONDARY]: styles.secondaryLabel,
+    [LabelType.PRIMARY]: styles.primaryLabel
+};
+export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
+        [styles.disabledLabel]: disabled
+    })} {...rest}>{children}</label>);
+ControlLabel.propTypes = {
+    label: PropTypes.node,
+    labelStyle: PropTypes.string,
+    disabled: PropTypes.bool
+};
+export default ControlLabel;

package/components/input/input.css

@@ -150,21 +150,6 @@ textarea.input {
   resize: none;
 }
 
-.label {
-  display: block;
-
-  margin-bottom: calc(unit / 2);
-
-  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);
-}
-
 .input::placeholder {
   color: var(--ring-disabled-color);
 }

package/components/input/input.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
  * @name Input
@@ -20,6 +21,7 @@ export interface InputBaseProps {
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
     active?: boolean | null | undefined;
     error?: ReactNode | null | undefined;
     borderless?: boolean | null | undefined;

package/components/input/input.js

@@ -9,8 +9,8 @@ import Icon from '../icon/icon';
 import { I18nContext } from '../i18n/i18n-context';
 import composeRefs from '../global/composeRefs';
 import { ControlsHeightContext } from '../global/controls-height';
+import { ControlLabel } from '../control-label/control-label';
 import styles from './input.css';
-import { InputLabel } from './input-label';
 function noop() { }
 /**
  * @name Input
@@ -93,7 +93,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, active, multiline, borderless, 
         // Props
-        label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
+        label, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
@@ -120,7 +120,7 @@ export class Input extends PureComponent {
         };
         return (<I18nContext.Consumer>
         {({ translate }) => (<div className={classes} data-test="ring-input">
-            {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
             <div className={styles.container}>
               {icon && <Icon glyph={icon} className={styles.icon}/>}
               {multiline

package/components/input-ng/input-ng.js

@@ -8,6 +8,7 @@ import closeIcon from '@jetbrains/icons/close';
 
 import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../input/input.css';
+import labelStyles from '../control-label/control-label.css';
 import ButtonNg from '../button-ng/button-ng';
 
 import styleOverrides from './input-ng.css';
@@ -102,7 +103,7 @@ class RingInputComponent extends RingAngularComponent {
 >
   <label
     ng-if="!$ctrl.borderless"
-    class="${styles.label}"
+    class="${labelStyles.label} ${labelStyles.secondaryLabel}"
   >{{$ctrl.label}}</label>
   <div class="${styles.container}">
     <input

package/components/select/select.d.ts

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
 import { SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
+import { LabelType } from '../control-label/control-label';
 import { ListDataItem } from '../list/consts';
 import { Directions } from '../popup/popup.consts';
 import { ControlsHeight } from '../global/controls-height';
@@ -62,9 +63,11 @@ export interface BaseSelectProps<T = unknown> {
     allowAny: boolean;
     maxHeight: number;
     hideArrow: boolean;
+    showPopup: boolean;
     directions: readonly Directions[];
     label: string | null;
     selectedLabel: ReactNode;
+    labelType?: LabelType;
     inputPlaceholder: string;
     shortcutsEnabled: boolean;
     onBeforeOpen: () => void;
@@ -161,6 +164,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         hideSelected: boolean;
         allowAny: boolean;
         hideArrow: boolean;
+        showPopup: boolean;
         maxHeight: number;
         directions: Directions[];
         selected: null;

package/components/select/select.js

@@ -9,7 +9,7 @@ import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Popup from '../popup/popup';
 import List, { ActiveItemContext } from '../list/list';
 import Input, { Size } from '../input/input';
-import InputLabel from '../input/input-label';
+import ControlLabel from '../control-label/control-label';
 import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import dataTests from '../global/data-tests';
@@ -190,6 +190,7 @@ export default class Select extends Component {
         hideSelected: false,
         allowAny: false,
         hideArrow: false,
+        showPopup: false,
         maxHeight: 600,
         directions: [
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
@@ -274,7 +275,7 @@ export default class Select extends Component {
             this.props.filter.value || '',
         shortcutsEnabled: false,
         popupShortcuts: false,
-        showPopup: false,
+        showPopup: this.props.showPopup,
         prevData: this.props.data,
         prevSelected: null,
         prevMultiple: this.props.multiple,
@@ -817,7 +818,7 @@ export default class Select extends Component {
         </>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
-            {selectedLabel && (<InputLabel label={selectedLabel} disabled={this.props.disabled} htmlFor={this.props.id}/>)}
+            {selectedLabel && (<ControlLabel type={this.props.labelType} disabled={this.props.disabled} htmlFor={this.props.id}>{selectedLabel}</ControlLabel>)}
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <div className={styles.buttonContainer}>
               <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
@@ -926,6 +927,7 @@ Select.propTypes = {
     inputPlaceholder: PropTypes.string,
     clear: PropTypes.bool,
     hideArrow: PropTypes.bool,
+    showPopup: PropTypes.bool,
     compact: PropTypes.bool,
     size: PropTypes.oneOf(Object.values(Size)),
     customAnchor: PropTypes.func,

package/components/table/header.d.ts

@@ -1,6 +1,5 @@
 import React, { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
-import { Waypoint } from 'react-waypoint';
 import { Column, SortParams } from './header-cell';
 export interface HeaderProps {
     columns: readonly Column[];
@@ -49,18 +48,8 @@ export default class Header extends PureComponent<HeaderProps> {
         sortKey: string;
         sortOrder: boolean;
     };
-    state: {
-        fixed: boolean;
-        headerWidth: undefined;
-        widths: never[];
-    };
     id: string;
     onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
-    private _columnsRowNode?;
-    storeColumnsRowNode: (node: HTMLElement | null) => void;
-    onScrollIn: () => void;
-    onScrollOut: ({ currentPosition }: Waypoint.CallbackArgs) => void;
-    calculateColumnsWidths(columnsRowNode: HTMLElement | null | undefined): void;
     createCells(widths?: never[]): React.JSX.Element[];
     render(): React.JSX.Element;
 }

package/components/table/header.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Waypoint } from 'react-waypoint';
 import Checkbox from '../checkbox/checkbox';
 import getUID from '../global/get-uid';
 import style from './table.css';
@@ -32,39 +31,10 @@ export default class Header extends PureComponent {
         sortKey: 'id',
         sortOrder: true
     };
-    state = {
-        fixed: false,
-        headerWidth: undefined,
-        widths: []
-    };
     id = getUID('table-header-');
     onCheckboxFocus = (event) => {
         event.currentTarget.blur();
     };
-    _columnsRowNode;
-    storeColumnsRowNode = (node) => {
-        if (node) {
-            this._columnsRowNode = node;
-            this.calculateColumnsWidths(node);
-        }
-    };
-    onScrollIn = () => {
-        this.calculateColumnsWidths(this._columnsRowNode);
-        this.setState({ fixed: false });
-    };
-    onScrollOut = ({ currentPosition }) => {
-        if (currentPosition !== 'above') {
-            return;
-        }
-        this.calculateColumnsWidths(this._columnsRowNode);
-        this.setState({ fixed: true });
-    };
-    calculateColumnsWidths(columnsRowNode) {
-        this.setState({
-            headerWidth: columnsRowNode?.clientWidth,
-            widths: [...columnsRowNode?.childNodes ?? []].map(column => (column instanceof Element ? column.clientWidth : 0))
-        });
-    }
     createCells(widths = []) {
         const { selectable, draggable, columns, checked, checkboxDisabled, onCheckboxChange, onSort, sortKey, sortOrder } = this.props;
         const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
@@ -82,30 +52,16 @@ export default class Header extends PureComponent {
     }
     render() {
         const { caption, sticky, topStickOffset } = this.props;
-        const { fixed, widths, headerWidth } = this.state;
         const regularCells = this.createCells();
-        const waypointChild = (<tr data-test="ring-table-header-row">
-        {/*Since we need to keep the exact amount of columns in each row, we need to present them even being empty*/}
-        {/*regularCells doesn't provide any other information than a list of components. Hence using array indexes as keys looks like a sane idea*/}
-        {/*eslint-disable-next-line react/no-array-index-key*/}
-        {regularCells.map((c, i) => <td key={i}/>)}
-      </tr>);
-        return (<thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
+        return (<thead id={this.id} data-test="ring-table-header" style={{ top: topStickOffset }} className={classNames({
+                [style.tableHead]: true,
+                [style.subHeaderSticky]: sticky
+            })}>
         {caption && (<tr data-test="ring-table-header-row">
             <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test="ring-table-header-cell">{caption}</th>
           </tr>)}
 
-        {sticky &&
-                (<Waypoint topOffset={topStickOffset} onEnter={this.onScrollIn} onLeave={this.onScrollOut}>
-            {waypointChild}
-          </Waypoint>)}
-
-        <tr className={style.subHeader} ref={this.storeColumnsRowNode} data-test="ring-table-header-row">{regularCells}</tr>
-
-        {fixed && sticky &&
-                (<tr className={style.subHeaderFixed} style={{ width: headerWidth, top: topStickOffset }} data-test="ring-table-header-row">
-              {this.createCells(widths)}
-            </tr>)}
+        <tr className={style.subHeader} data-test="ring-table-header-row">{regularCells}</tr>
       </thead>);
     }
 }

package/components/table/table.css

@@ -101,34 +101,13 @@
   background-color: var(--ring-line-color);
 }
 
-.subHeaderFixed::after {
-  position: absolute;
-  top: 24px;
-
-  height: 1px;
-
-  content: "";
-
-  background-color: var(--ring-line-color);
-}
-
-.subHeader::after {
-  right: calc(unit * 4);
-  left: calc(unit * 4);
-}
+.subHeaderSticky {
+  position: sticky;
 
-.subHeaderFixed {
-  position: fixed;
   z-index: var(--ring-fixed-z-index);
   top: 0;
 
-  opacity: 0.9;
-  background-color: var(--ring-content-background-color);
-}
-
-.subHeaderFixed::after {
-  right: 0;
-  left: 0;
+  background-color: rgba(var(--ring-content-background-components), 0.9);
 }
 
 .row {

package/components/tags-input/tags-input.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, PureComponent, SyntheticEvent, ReactNode } from 'react';
+import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
@@ -6,6 +6,8 @@ import Caret from '../caret/caret';
 import { Size } from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
+import { TagAttrs } from '../tag/tag';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 export interface ToggleTagParams {
     tag: TagType;
@@ -17,7 +19,7 @@ export interface TagsInputProps {
     dataSource: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
     onAddTag: (params: ToggleTagParams) => void;
     onRemoveTag: (params: ToggleTagParams) => void;
-    customTagComponent: Component;
+    customTagComponent: ComponentType<TagAttrs>;
     maxPopupHeight: number;
     minPopupWidth: number;
     canNotBeEmpty: boolean;
@@ -35,6 +37,7 @@ export interface TagsInputProps {
     size: Size;
     height?: ControlsHeight | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
 }
 interface TagsInputState {
     tags: TagType[];

package/components/tags-input/tags-input.js

@@ -11,6 +11,7 @@ import { Size } from '../input/input';
 import { ControlsHeightContext } from '../global/controls-height';
 import getUID from '../global/get-uid';
 import inputStyles from '../input/input.css';
+import ControlLabel from '../control-label/control-label';
 import styles from './tags-input.css';
 function noop() { }
 /**
@@ -252,7 +253,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, height = this.context, label } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
         const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused
@@ -260,11 +261,9 @@ export default class TagsInput extends PureComponent {
         return (<div 
         // it transfers focus to input
         role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
-        {label && (<label htmlFor={this.id} className={classNames(inputStyles.label, {
-                    [inputStyles.disabledLabel]: disabled
-                })}>{label}</label>)}
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
 
-        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick}>
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
           <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage} hint={this.props.hint}/>
         </TagsList>
       </div>);

package/dist/_helpers/control-label.js

@@ -0,0 +1,3 @@
+var modules_9eb96a10 = {"label":"label_rui_40a4","primaryLabel":"primaryLabel_rui_40a4","secondaryLabel":"secondaryLabel_rui_40a4","disabledLabel":"disabledLabel_rui_40a4"};
+
+export { modules_9eb96a10 as m };

package/dist/_helpers/input.js

@@ -1,3 +1,3 @@
-var modules_88cfaf40 = {"unit":"i__const_unit_1","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","light":"light_rui_2ac4","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356","button":"button_rui_e356","active":"active_rui_e356","withIcon":"withIcon_rui_e356","icon":"icon_rui_e356","primary":"primary_rui_e356","loader":"loader_rui_e356","loaderBackground":"loaderBackground_rui_e356","danger":"danger_rui_e356","text":"text_rui_e356","content":"content_rui_e356","text-loading":"text-loading_rui_e356","inline":"inline_rui_e356","withNormalIcon":"withNormalIcon_rui_e356","withDangerIcon":"withDangerIcon_rui_e356","progress":"progress_rui_e356","delayed":"delayed_rui_e356","short":"short_rui_e356","dropdownIcon":"dropdownIcon_rui_e356","outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","clearable":"clearable_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","label":"label_rui_e356","disabledLabel":"disabledLabel_rui_e356","errorText":"errorText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356"};
+var modules_88cfaf40 = {"unit":"i__const_unit_1","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","light":"light_rui_2ac4","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356","button":"button_rui_e356","active":"active_rui_e356","withIcon":"withIcon_rui_e356","icon":"icon_rui_e356","primary":"primary_rui_e356","loader":"loader_rui_e356","loaderBackground":"loaderBackground_rui_e356","danger":"danger_rui_e356","text":"text_rui_e356","content":"content_rui_e356","text-loading":"text-loading_rui_e356","inline":"inline_rui_e356","withNormalIcon":"withNormalIcon_rui_e356","withDangerIcon":"withDangerIcon_rui_e356","progress":"progress_rui_e356","delayed":"delayed_rui_e356","short":"short_rui_e356","dropdownIcon":"dropdownIcon_rui_e356","outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","clearable":"clearable_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","errorText":"errorText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356"};
 
 export { modules_88cfaf40 as m };

package/dist/_helpers/table.js

@@ -1,3 +1,3 @@
-var modules_1db4bbca = {"unit":"i__const_unit_0","height":"32px","compensate":"2px","compensated":"30px","top":"-3px","row":"row_rui_23fe","dragHandle":"dragHandle_rui_23fe","light":"light_rui_2ac4","tableWrapper":"tableWrapper_rui_23fe","table":"table_rui_23fe","userSelectNone":"userSelectNone_rui_23fe","headerCell":"headerCell_rui_23fe font-smaller-lower_rui_8bff font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","headerCellSorted":"headerCellSorted_rui_23fe","headerCellSortable":"headerCellSortable_rui_23fe","sorter":"sorter_rui_23fe","sortedUp":"sortedUp_rui_23fe","icon":"icon_rui_23fe","caption":"caption_rui_23fe","tableHead":"tableHead_rui_23fe","subHeaderFixed":"subHeaderFixed_rui_23fe","subHeader":"subHeader_rui_23fe","disabledHover":"disabledHover_rui_23fe","rowSelected":"rowSelected_rui_23fe","rowFocused":"rowFocused_rui_23fe","cell":"cell_rui_23fe ellipsis_rui_8bff","loadingOverlay":"loadingOverlay_rui_23fe","cellUnlimited":"cellUnlimited_rui_23fe","cellRight":"cellRight_rui_23fe","metaColumn":"metaColumn_rui_23fe","headerMetaColumn":"headerMetaColumn_rui_23fe","visibleDragHandle":"visibleDragHandle_rui_23fe","rowCollapseExpandButton":"rowCollapseExpandButton_rui_23fe","draggingRow":"draggingRow_rui_23fe","draggingTable":"draggingTable_rui_23fe","tableMessage":"tableMessage_rui_23fe"};
+var modules_1db4bbca = {"unit":"i__const_unit_0","height":"32px","compensate":"2px","compensated":"30px","top":"-3px","row":"row_rui_23fe","dragHandle":"dragHandle_rui_23fe","light":"light_rui_2ac4","tableWrapper":"tableWrapper_rui_23fe","table":"table_rui_23fe","userSelectNone":"userSelectNone_rui_23fe","headerCell":"headerCell_rui_23fe font-smaller-lower_rui_8bff font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","headerCellSorted":"headerCellSorted_rui_23fe","headerCellSortable":"headerCellSortable_rui_23fe","sorter":"sorter_rui_23fe","sortedUp":"sortedUp_rui_23fe","icon":"icon_rui_23fe","caption":"caption_rui_23fe","tableHead":"tableHead_rui_23fe","subHeaderSticky":"subHeaderSticky_rui_23fe","disabledHover":"disabledHover_rui_23fe","rowSelected":"rowSelected_rui_23fe","rowFocused":"rowFocused_rui_23fe","cell":"cell_rui_23fe ellipsis_rui_8bff","loadingOverlay":"loadingOverlay_rui_23fe","cellUnlimited":"cellUnlimited_rui_23fe","cellRight":"cellRight_rui_23fe","metaColumn":"metaColumn_rui_23fe","headerMetaColumn":"headerMetaColumn_rui_23fe","visibleDragHandle":"visibleDragHandle_rui_23fe","rowCollapseExpandButton":"rowCollapseExpandButton_rui_23fe","draggingRow":"draggingRow_rui_23fe","draggingTable":"draggingTable_rui_23fe","tableMessage":"tableMessage_rui_23fe"};
 
 export { modules_1db4bbca as m };

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

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

package/dist/control-label/control-label.js

@@ -0,0 +1,35 @@
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { m as modules_9eb96a10 } from '../_helpers/control-label.js';
+
+var LabelType;
+(function (LabelType) {
+  LabelType["SECONDARY"] = "secondary";
+  LabelType["PRIMARY"] = "primary";
+})(LabelType || (LabelType = {}));
+const classNameByType = {
+  [LabelType.SECONDARY]: modules_9eb96a10.secondaryLabel,
+  [LabelType.PRIMARY]: modules_9eb96a10.primaryLabel
+};
+const ControlLabel = _ref => {
+  let {
+    children,
+    type = LabelType.SECONDARY,
+    disabled,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("label", _extends({
+    className: classNames(modules_9eb96a10.label, classNameByType[type], {
+      [modules_9eb96a10.disabledLabel]: disabled
+    })
+  }, rest), children);
+};
+ControlLabel.propTypes = {
+  label: PropTypes.node,
+  labelStyle: PropTypes.string,
+  disabled: PropTypes.bool
+};
+
+export { ControlLabel, LabelType, ControlLabel as default };

package/dist/date-picker/date-input.js

@@ -21,8 +21,9 @@ import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import '../i18n/i18n.js';
 import 'date-fns/add';
 

package/dist/date-picker/date-picker.js

@@ -51,8 +51,9 @@ import '../_helpers/link.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import '../i18n/i18n.js';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';

package/dist/date-picker/date-popup.js

@@ -31,8 +31,9 @@ import '../global/get-uid.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
 import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import 'date-fns/add';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';

package/dist/editable-heading/editable-heading.js

@@ -23,7 +23,8 @@ import '../global/prop-types.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
 import '../global/composeRefs.js';
-import '../input/input-label.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';

package/dist/input/input.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
  * @name Input
@@ -20,6 +21,7 @@ export interface InputBaseProps {
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
     active?: boolean | null | undefined;
     error?: ReactNode | null | undefined;
     borderless?: boolean | null | undefined;

package/dist/input/input.js

@@ -10,8 +10,8 @@ import Icon from '../icon/icon.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import composeRefs from '../global/composeRefs.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
+import { ControlLabel } from '../control-label/control-label.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
-import { InputLabel } from './input-label.js';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
@@ -21,6 +21,7 @@ import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../i18n/i18n.js';
+import '../_helpers/control-label.js';
 
 function noop() {}
 /**
@@ -107,6 +108,7 @@ class Input extends PureComponent {
       borderless,
       // Props
       label,
+      labelType,
       error,
       className,
       inputClassName,
@@ -159,11 +161,11 @@ class Input extends PureComponent {
       return /*#__PURE__*/React.createElement("div", {
         className: classes,
         "data-test": "ring-input"
-      }, label && /*#__PURE__*/React.createElement(InputLabel, {
+      }, label && /*#__PURE__*/React.createElement(ControlLabel, {
         htmlFor: this.getId(),
         disabled: disabled,
-        label: label
-      }), /*#__PURE__*/React.createElement("div", {
+        type: labelType
+      }, label), /*#__PURE__*/React.createElement("div", {
         className: modules_88cfaf40.container
       }, icon && /*#__PURE__*/React.createElement(Icon, {
         glyph: icon,

package/dist/input-ng/input-ng.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import { m as modules_9eb96a10 } from '../_helpers/control-label.js';
 import ButtonNG from '../button-ng/button-ng.js';
 import '../global/dom.js';
 import '../icon-ng/icon-ng.js';
@@ -88,7 +89,7 @@ class RingInputComponent extends RingAngularComponent {
 >
   <label
     ng-if="!$ctrl.borderless"
-    class="${modules_88cfaf40.label}"
+    class="${modules_9eb96a10.label} ${modules_9eb96a10.secondaryLabel}"
   >{{$ctrl.label}}</label>
   <div class="${modules_88cfaf40.container}">
     <input

package/dist/old-browsers-message/white-list.js

@@ -5,11 +5,11 @@ const MAJOR_VERSION_INDEX = 0;
 /**
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
  */
-if (!["and_chr 114", "and_uc 13.4", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"]) {
+if (!["and_chr 114", "and_uc 15.5", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"]) {
   // eslint-disable-next-line no-console
   console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
 }
-const SUPPORTED = ["and_chr 114", "and_uc 13.4", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"] || [];
+const SUPPORTED = ["and_chr 114", "and_uc 15.5", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"] || [];
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
 const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
   var _item$match;