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

package/components/confirm/confirm.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .description {
-  margin-top: unit;
+  margin-top: var(--ring-unit);
 
   font-size: var(--ring-font-size);
 }

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

@@ -7,7 +7,7 @@ import { ControlsHeight } from '../global/controls-height';
 export type Props = ConfirmAttributes & {
     buttonsHeight?: ControlsHeight;
 };
-export declare const containerElement: HTMLDivElement;
+export declare const reactRoot: import("react-dom/client").Root;
 export interface ConfirmServiceParams {
     text?: string | undefined;
     description?: ReactNode;

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

@@ -1,16 +1,17 @@
 import React from 'react';
-import { render } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import Confirm from '../confirm/confirm';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
-export const containerElement = document.createElement('div');
+const containerElement = document.createElement('div');
+export const reactRoot = createRoot(containerElement);
 /**
  * Renders Confirm into virtual node to skip maintaining container
  */
 function renderConfirm(props) {
     const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
-    render((<ControlsHeightContext.Provider value={buttonsHeight}>
+    reactRoot.render(<ControlsHeightContext.Provider value={buttonsHeight}>
       <Confirm {...restProps}/>
-    </ControlsHeightContext.Provider>), containerElement);
+    </ControlsHeightContext.Provider>);
 }
 export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight }) {
     return new Promise((resolve, reject) => {

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

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media, small-screen-media from "../global/global.css";
-@value sidebarWidth: calc(unit * 30);
+@value extra-small-screen-media, small-screen-media from "../global/global.css";
+@value sidebarWidth: calc(var(--ring-unit) * 30);
 
 .contentLayout {
   position: relative;
@@ -15,7 +15,7 @@
   flex-grow: 2;
 
   width: 100%; /* without this hack IE11 render contentLayoutContent wider than its container */
-  margin: 0 calc(unit * 4);
+  margin: 0 calc(var(--ring-unit) * 4);
 }
 
 .sidebarContainer {
@@ -34,13 +34,13 @@
   min-width: sidebarWidth;
   max-width: sidebarWidth;
   height: 100%;
-  padding-right: calc(unit * 2);
-  padding-left: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 2);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .sidebarRight {
-  padding-right: calc(unit * 4);
-  padding-left: calc(unit * 2);
+  padding-right: calc(var(--ring-unit) * 4);
+  padding-left: calc(var(--ring-unit) * 2);
 }
 
 .sidebarFixedTop {

package/components/data-list/data-list.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value height, compensate from "../table/table.css";
 
 .dataListWrapper {
@@ -25,8 +24,8 @@
   align-items: center;
 
   box-sizing: content-box;
-  height: height;
-  padding: 0 calc(unit * 5) compensate 0;
+  height: calc(4 * var(--ring-unit));
+  padding: 0 calc(var(--ring-unit) * 5) compensate 0;
 
   outline: none;
 
@@ -57,11 +56,11 @@
 .boxes {
   display: flex;
 
-  min-width: calc(unit * 3);
+  min-width: calc(var(--ring-unit) * 3);
 }
 
 .checkboxBox {
-  width: calc(unit * 3);
+  width: calc(var(--ring-unit) * 3);
 }
 
 .collapseButton {

package/components/date-picker/consts.d.ts

@@ -70,7 +70,6 @@ export interface DatePopupBaseProps {
     fromPlaceholder?: string | null | undefined;
     toPlaceholder?: string | null | undefined;
     timePlaceholder?: string | null | undefined;
-    hidden: boolean;
     locale?: Locale | undefined;
     parseDateInput: (text: Date | number | string | null | undefined) => Date | null;
     displayFormat: (date: Date, locale: Locale | undefined) => string;

package/components/date-picker/date-input.d.ts

@@ -25,7 +25,6 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
         date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         time: PropTypes.Requireable<string>;
         displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        hidden: PropTypes.Requireable<boolean>;
         translations: PropTypes.Requireable<object>;
         fromPlaceholder: PropTypes.Requireable<string>;
         toPlaceholder: PropTypes.Requireable<string>;

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

@@ -16,7 +16,6 @@ export default class DateInput extends React.PureComponent {
         date: dateType,
         time: PropTypes.string,
         displayFormat: PropTypes.func,
-        hidden: PropTypes.bool,
         translations: PropTypes.object,
         fromPlaceholder: PropTypes.string,
         toPlaceholder: PropTypes.string,
@@ -28,8 +27,8 @@ export default class DateInput extends React.PureComponent {
         locale: PropTypes.object
     };
     componentDidUpdate(prevProps) {
-        const { hidden, text, active } = this.props;
-        if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
+        const { text, active } = this.props;
+        if (text !== prevProps.text || active !== prevProps.active) {
             this.updateInput({ text, active });
         }
     }

package/components/date-picker/date-picker.css

@@ -1,12 +1,11 @@
 @import "../global/variables.css";
 @import "../global/global.css";
 
-@value unit from "../global/global.css";
-@value cellSize: calc(unit * 3);
-@value calHeight: calc(unit * 36);
-@value calWidth: calc(unit * 37);
-@value yearHeight: calc(unit * 4);
-@value yearWidth: calc(unit * 6);
+@value cellSize: calc(var(--ring-unit) * 3);
+@value calHeight: calc(var(--ring-unit) * 36);
+@value calWidth: calc(var(--ring-unit) * 37);
+@value yearHeight: calc(var(--ring-unit) * 4);
+@value yearWidth: calc(var(--ring-unit) * 6);
 
 :root {
   /* stylelint-disable-next-line color-no-hex */
@@ -29,22 +28,22 @@
 }
 
 .datePicker.datePicker {
-  padding-right: unit;
+  padding-right: var(--ring-unit);
 
   &.inline {
     padding: 0;
   }
 
   &.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 {
@@ -59,13 +58,13 @@
 .displayDate {
   display: inline-block;
 
-  min-width: calc(unit * 11);
+  min-width: calc(var(--ring-unit) * 11);
 
   text-align: left;
 }
 
 .displayDate.displayRange {
-  min-width: calc(unit * 22);
+  min-width: calc(var(--ring-unit) * 22);
 }
 
 .clear {
@@ -103,7 +102,7 @@
 
   display: flex;
 
-  padding-left: calc(unit * 2);
+  padding-left: calc(var(--ring-unit) * 2);
 }
 
 .filter {
@@ -111,14 +110,14 @@
 }
 
 .calendarIcon {
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   color: var(--ring-icon-color);
 }
 
 .anchor {
   width: 100%;
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   text-align: start;
   white-space: nowrap;
@@ -145,7 +144,7 @@
 .fromInput {
   position: relative;
 
-  flex-basis: calc(unit * 13);
+  flex-basis: calc(var(--ring-unit) * 13);
   flex-grow: 0;
   flex-shrink: 0;
 }
@@ -154,24 +153,24 @@
   &::after {
     position: absolute;
     top: 0;
-    right: unit;
+    right: var(--ring-unit);
 
     content: "—";
 
-    line-height: calc(4 * unit - 2px);
+    line-height: calc(4 * var(--ring-unit) - 2px);
   }
 }
 
 .toInput {
-  flex-basis: calc(unit * 13);
+  flex-basis: calc(var(--ring-unit) * 13);
   flex-grow: 1;
   flex-shrink: 0;
 
-  width: calc(unit * 13);
+  width: calc(var(--ring-unit) * 13);
 }
 
 .dateInput {
-  flex-basis: calc(unit * 11);
+  flex-basis: calc(var(--ring-unit) * 11);
   flex-grow: 1;
   flex-shrink: 0;
 }
@@ -181,17 +180,17 @@
 
   &::before {
     position: absolute;
-    left: calc(-1 * unit);
+    left: calc(-1 * var(--ring-unit));
 
     content: ",";
 
-    line-height: calc(4 * unit - 3px);
+    line-height: calc(4 * var(--ring-unit) - 3px);
   }
 }
 
 .weekdays {
-  height: calc(unit * 4);
-  padding: 5px calc(unit * 2) 0;
+  height: calc(var(--ring-unit) * 4);
+  padding: 5px calc(var(--ring-unit) * 2) 0;
 
   color: var(--ring-secondary-color);
 }
@@ -237,8 +236,8 @@
   display: flex;
   flex-wrap: wrap;
 
-  width: calc(unit * 21);
-  margin: calc(unit * 2);
+  width: calc(var(--ring-unit) * 21);
+  margin: calc(var(--ring-unit) * 2);
 }
 
 .month.month > * {
@@ -252,9 +251,9 @@
 .monthTitle {
   /* IE workaround, see https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box */
 
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 
-  padding-left: calc(unit * 0.5);
+  padding-left: calc(var(--ring-unit) * 0.5);
 
   text-align: left;
 
@@ -263,7 +262,7 @@
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
-    flex-basis: calc(unit * 12);
+    flex-basis: calc(var(--ring-unit) * 12);
 
     width: auto;
   }
@@ -341,7 +340,7 @@
   &::after {
     position: absolute;
 
-    width: calc(unit * 2);
+    width: calc(var(--ring-unit) * 2);
     height: 100%;
 
     content: "";
@@ -384,8 +383,8 @@
     position: absolute;
     z-index: var(--ring-invisible-element-z-index);
 
-    width: calc(unit * 23);
-    height: calc(unit * 8);
+    width: calc(var(--ring-unit) * 23);
+    height: calc(var(--ring-unit) * 8);
 
     content: "";
     transition: background-color var(--ring-ease);
@@ -403,7 +402,7 @@
 
   &.Monday {
     &::after {
-      height: calc(unit * 5);
+      height: calc(var(--ring-unit) * 5);
     }
   }
 
@@ -413,10 +412,10 @@
     &::before {
       position: absolute;
       z-index: var(--ring-invisible-element-z-index);
-      top: calc(unit * -8);
+      top: calc(var(--ring-unit) * -8);
       left: 600%;
 
-      width: calc(unit * 2);
+      width: calc(var(--ring-unit) * 2);
       height: 100%;
 
       content: "";
@@ -430,7 +429,7 @@
 .Sunday {
   &::before,
   &::after {
-    height: calc(unit * 5);
+    height: calc(var(--ring-unit) * 5);
   }
 }
 
@@ -469,7 +468,7 @@
 .today::before {
   position: absolute;
   top: 0;
-  left: calc(unit * 0.5);
+  left: calc(var(--ring-unit) * 0.5);
 
   content: "•";
 
@@ -496,7 +495,7 @@
   right: 0;
   bottom: 0;
 
-  width: calc(unit * 6);
+  width: calc(var(--ring-unit) * 6);
 
   background-color: var(--ring-content-background-color);
   box-shadow: -1px 0 var(--ring-line-color);
@@ -513,7 +512,7 @@
   width: 100%;
 
   height: cellSize;
-  padding-left: calc(unit * 1.5);
+  padding-left: calc(var(--ring-unit) * 1.5);
 
   text-transform: capitalize;
 
@@ -532,7 +531,7 @@
 
   width: calc(100% + 1px);
 
-  height: calc(unit * 6);
+  height: calc(var(--ring-unit) * 6);
 
   cursor: grab;
 

package/components/date-picker/date-picker.js

@@ -22,13 +22,13 @@ import DatePopup from './date-popup';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 import formats from './formats';
-const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} keepMounted className={className} ref={popupRef} directions={[
+const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} className={className} ref={popupRef} directions={[
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
         Popup.PopupProps.Directions.TOP_RIGHT
     ]} {...restProps}>
-    <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete} hidden={hidden}/>
+    <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
   </Popup>);
 PopupComponent.propTypes = {
     hidden: PropTypes.bool,

package/components/date-picker/date-popup.d.ts

@@ -20,7 +20,6 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        hidden: PropTypes.Requireable<boolean>;
         fromPlaceholder: PropTypes.Requireable<string>;
         toPlaceholder: PropTypes.Requireable<string>;
         timePlaceholder: PropTypes.Requireable<string>;

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

@@ -36,7 +36,6 @@ export default class DatePopup extends Component {
         onClear: PropTypes.func,
         minDate: dateType,
         maxDate: dateType,
-        hidden: PropTypes.bool,
         fromPlaceholder: PropTypes.string,
         toPlaceholder: PropTypes.string,
         timePlaceholder: PropTypes.string,
@@ -268,7 +267,7 @@ export default class DatePopup extends Component {
         this.componentRef.current?.querySelector('input')?.focus();
     };
     render() {
-        const { range, hidden, withTime, locale } = this.props;
+        const { range, withTime, locale } = this.props;
         const { from, to, date, time, ...restProps } = this.props;
         const parsedDate = this.parse(this.props.date, 'date');
         const parsedTo = this.parse(this.props.to, 'to');
@@ -329,11 +328,11 @@ export default class DatePopup extends Component {
                 if (clearable && name !== 'from' && !this.isInTimeMode()) {
                     onClear = this.onClear.bind(this);
                 }
-                return (<DateInput {...this.props} {...this.state} divider={name === 'from' && (dates[name] != null || parsedTo != null)} name={name} key={name} date={dates[name]} active={this.state.active === name} hidden={hidden} onActivate={this.handleActivate(name)} onInput={this.handleInput} onConfirm={this.handleConfirm(name)} onClear={onClear} locale={locale}/>);
+                return (<DateInput {...this.props} {...this.state} divider={name === 'from' && (dates[name] != null || parsedTo != null)} name={name} key={name} date={dates[name]} active={this.state.active === name} onActivate={this.handleActivate(name)} onInput={this.handleInput} onConfirm={this.handleConfirm(name)} onClear={onClear} locale={locale}/>);
             })}
 
           {this.isInTimeMode()
-                ? (<DateInput {...this.props} text={this.state.text} divider={!!parsedDate} hoverDate={null} name={'time'} key={'time'} date={null} time={time} active={this.state.active === 'time'} hidden={hidden} onActivate={this.handleActivate('time')} onInput={this.handleInput} onConfirm={this.handleConfirm('time')} onClear={clearable && this.onClear || undefined} locale={locale}/>)
+                ? (<DateInput {...this.props} text={this.state.text} divider={!!parsedDate} hoverDate={null} name={'time'} key={'time'} date={null} time={time} active={this.state.active === 'time'} onActivate={this.handleActivate('time')} onInput={this.handleInput} onConfirm={this.handleConfirm('time')} onClear={clearable && this.onClear || undefined} locale={locale}/>)
                 : ('')}
         </div>
         <Weekdays locale={locale}/>

package/components/dialog/dialog.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value header from "../island/island.css";
 
 .container {
@@ -16,9 +15,9 @@
   align-items: center;
   justify-content: center;
 
-  padding: calc(unit * 4) unit;
+  padding: calc(var(--ring-unit) * 4) var(--ring-unit);
 
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(var(--ring-dialog-overlay-components), 0.4);
 }
 
 .innerContainer {
@@ -31,16 +30,20 @@
 .content {
   position: relative;
 
-  width: calc(unit * 58);
-  min-height: calc(unit * 15);
+  width: calc(var(--ring-unit) * 58);
+  min-height: calc(var(--ring-unit) * 15);
   margin: auto;
 
   cursor: default;
   overflow-wrap: break-word;
 
+  & [data-scrollable-container] {
+    padding-bottom: var(--ring-unit);
+  }
+
   & .panel {
     margin-top: 0;
-    padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
+    padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
 
     border-top: none;
 
@@ -49,7 +52,7 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .panel > button:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }
 
@@ -89,12 +92,12 @@
 
 .closeButtonOutside {
   top: 0;
-  right: calc(unit * -4);
+  right: calc(var(--ring-unit) * -4);
 }
 
 .closeButtonInside {
-  top: calc(unit * 1.5);
-  right: unit;
+  top: calc(var(--ring-unit) * 1.5);
+  right: var(--ring-unit);
 }
 
 .documentWithoutScroll {
@@ -119,16 +122,16 @@
 }
 
 .container .header {
-  padding-top: calc(unit * 4);
+  padding-top: calc(var(--ring-unit) * 4);
 
   font-size: 24px;
   line-height: 28px;
 }
 
 .dense .header {
-  padding-top: calc(unit * 2);
+  padding-top: calc(var(--ring-unit) * 2);
 }
 
 .dense .panel {
-  padding-bottom: calc(unit * 2);
+  padding-bottom: calc(var(--ring-unit) * 2);
 }

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -20,7 +20,17 @@ declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
 }) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
     ListProps: {
         Type: typeof import("../list/consts").Type;
-        Dimension: typeof import("../list/consts").Dimension;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
     };
 };
 export default _default;

package/components/editable-heading/editable-heading.css

@@ -1,5 +1,3 @@
-@value unit from "../global/global.css";
-
 .editableHeading {
   display: flex;
   align-items: center;
@@ -11,7 +9,7 @@
   }
 
   &.isEditing {
-    gap: unit;
+    gap: var(--ring-unit);
   }
 }
 
@@ -127,12 +125,41 @@
   }
 }
 
+.textarea {
+  resize: none;
+}
+
+.textareaNotOverflow {
+  overflow: hidden;
+}
+
+.textareaFade {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 30px;
+
+  content: "";
+  pointer-events: none;
+
+  background: linear-gradient(to bottom, rgba(var(--ring-content-background-components), 0), rgba(var(--ring-content-background-components), 1));
+}
+
+
+.textareaWrapper {
+  position: relative;
+
+  display: flex;
+}
+
 .button {
   margin: 6px 0;
 }
 
 .errorText {
-  margin: calc(unit / 2) 0;
+  margin: calc(var(--ring-unit) / 2) 0;
 
   color: var(--ring-error-color);
 
@@ -149,19 +176,19 @@
 }
 
 .level3 {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .sizeS {
-  max-width: calc(unit * 12);
+  max-width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  max-width: calc(unit * 30);
+  max-width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  max-width: calc(unit * 50);
+  max-width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {

package/components/editable-heading/editable-heading.d.ts

@@ -7,7 +7,7 @@ export interface EditableHeadingTranslations {
     save: string;
     cancel: string;
 }
-export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
+export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
     inputClassName?: string | null;
@@ -23,6 +23,7 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, '
     'data-test'?: string | null;
     error?: string;
     multiline?: boolean;
+    maxInputRows?: number;
     renderMenu?: () => React.ReactNode;
     translations?: EditableHeadingTranslations;
 };