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

package/components/collapse/collapse.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useId, useState } from 'react';
+import { CollapseContext } from './collapse-context';
+import { BASE_ANIMATION_DURATION } from './consts';
+/**
+ * @name Collapse
+ */
+export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { } }) => {
+    const [collapsed, toggle] = useState(true);
+    const id = useId();
+    const setCollapsed = useCallback(() => {
+        toggle(!collapsed);
+        onChange(!collapsed);
+    }, [toggle, onChange, collapsed]);
+    return (<div className={className}>
+      <CollapseContext.Provider value={{
+            collapsed,
+            setCollapsed,
+            duration,
+            disableAnimation,
+            id
+        }}>
+        {children}
+      </CollapseContext.Provider>
+    </div>);
+};
+export default Collapse;

package/components/collapse/collapse.stories.css

@@ -0,0 +1,25 @@
+.container {
+  width: 400px;
+  padding: 10px;
+}
+
+.border {
+  border: 1px solid var(--ring-line-color);
+  border-radius: 5px;
+}
+
+.loaderWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 200px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 500px;
+}

package/components/collapse/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const COLLAPSE_CONTROL_TEST_ID = "ring-collapse-control";
+export declare const COLLAPSE_CONTENT_CONTAINER_TEST_ID = "ring-collapse-content-container";
+export declare const COLLAPSE_CONTENT_TEST_ID = "ring-collapse-content";
+export declare const BASE_ANIMATION_DURATION = 200;

package/components/collapse/consts.js

@@ -0,0 +1,4 @@
+export const COLLAPSE_CONTROL_TEST_ID = 'ring-collapse-control';
+export const COLLAPSE_CONTENT_CONTAINER_TEST_ID = 'ring-collapse-content-container';
+export const COLLAPSE_CONTENT_TEST_ID = 'ring-collapse-content';
+export const BASE_ANIMATION_DURATION = 200;

package/components/collapse/utils.d.ts

@@ -0,0 +1 @@
+export declare const toPx: (value: number) => string;

package/components/collapse/utils.js

@@ -0,0 +1 @@
+export const toPx = (value) => `${value}px`;

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/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.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import add from 'date-fns/add';
+import { add } from 'date-fns/add';
 const unit = 8; // px;
 const units = {
     unit,

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

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import formatDate from 'date-fns/format';
-import isSameDay from 'date-fns/isSameDay';
-import isSameMonth from 'date-fns/isSameMonth';
-import isSameYear from 'date-fns/isSameYear';
-import isValid from 'date-fns/isValid';
-import parse from 'date-fns/parse';
-import set from 'date-fns/set';
+import { format as formatDate } from 'date-fns/format';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isValid } from 'date-fns/isValid';
+import { parse } from 'date-fns/parse';
+import { set } from 'date-fns/set';
 import calendarIcon from '@jetbrains/icons/calendar';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import memoize from '../global/memoize';

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

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isSameDay from 'date-fns/isSameDay';
-import startOfDay from 'date-fns/startOfDay';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isSameDay } from 'date-fns/isSameDay';
+import { startOfDay } from 'date-fns/startOfDay';
 import { set } from 'date-fns';
 import memoize from '../global/memoize';
 import DateInput from './date-input';

package/components/date-picker/day.js

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import addDays from 'date-fns/addDays';
-import format from 'date-fns/format';
-import getDay from 'date-fns/getDay';
-import getDate from 'date-fns/getDate';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isSameDay from 'date-fns/isSameDay';
-import isToday from 'date-fns/isToday';
-import startOfDay from 'date-fns/startOfDay';
+import { addDays } from 'date-fns/addDays';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
+import { getDate } from 'date-fns/getDate';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
+import { startOfDay } from 'date-fns/startOfDay';
 import { dateType, weekdays } from './consts';
 import styles from './date-picker.css';
 let hoverTO;

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

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import endOfMonth from 'date-fns/endOfMonth';
-import format from 'date-fns/format';
-import isThisMonth from 'date-fns/isThisMonth';
-import set from 'date-fns/set';
-import startOfDay from 'date-fns/startOfDay';
-import startOfYear from 'date-fns/startOfYear';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { format } from 'date-fns/format';
+import { isThisMonth } from 'date-fns/isThisMonth';
+import { set } from 'date-fns/set';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfYear } from 'date-fns/startOfYear';
 import linearFunction from '../global/linear-function';
 import MonthSlider from './month-slider';
 import { YEAR, MIDDLE_DAY, yearScrollSpeed, dateType } from './consts';

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

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import addYears from 'date-fns/addYears';
-import startOfDay from 'date-fns/startOfDay';
-import subYears from 'date-fns/subYears';
+import { addYears } from 'date-fns/addYears';
+import { startOfDay } from 'date-fns/startOfDay';
+import { subYears } from 'date-fns/subYears';
 import linearFunction from '../global/linear-function';
 import units, { dateType, yearScrollSpeed } from './consts';
 import styles from './date-picker.css';

package/components/date-picker/month.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import addDays from 'date-fns/addDays';
-import endOfMonth from 'date-fns/endOfMonth';
-import format from 'date-fns/format';
-import getDay from 'date-fns/getDay';
-import setDay from 'date-fns/setDay';
+import { addDays } from 'date-fns/addDays';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
+import { setDay } from 'date-fns/setDay';
 import PropTypes from 'prop-types';
 import Day from './day';
 import { dateType, WEEK, weekdays } from './consts';

package/components/date-picker/months.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import addMonths from 'date-fns/addMonths';
-import getDay from 'date-fns/getDay';
-import getDaysInMonth from 'date-fns/getDaysInMonth';
-import startOfMonth from 'date-fns/startOfMonth';
-import subMonths from 'date-fns/subMonths';
-import endOfMonth from 'date-fns/endOfMonth';
+import { addMonths } from 'date-fns/addMonths';
+import { getDay } from 'date-fns/getDay';
+import { getDaysInMonth } from 'date-fns/getDaysInMonth';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { subMonths } from 'date-fns/subMonths';
+import { endOfMonth } from 'date-fns/endOfMonth';
 import scheduleRAF from '../global/schedule-raf';
 import linearFunction from '../global/linear-function';
 import useEventCallback from '../global/use-event-callback';

package/components/date-picker/weekdays.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import getDay from 'date-fns/getDay';
-import format from 'date-fns/format';
-import setDay from 'date-fns/setDay';
-import startOfDay from 'date-fns/startOfDay';
+import { getDay } from 'date-fns/getDay';
+import { format } from 'date-fns/format';
+import { setDay } from 'date-fns/setDay';
+import { startOfDay } from 'date-fns/startOfDay';
 import PropTypes from 'prop-types';
 import { weekdays } from './consts';
 import styles from './date-picker.css';

package/components/date-picker/years.js

@@ -1,14 +1,14 @@
 import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import addYears from 'date-fns/addYears';
-import getYear from 'date-fns/getYear';
-import format from 'date-fns/format';
-import isSameYear from 'date-fns/isSameYear';
-import isThisYear from 'date-fns/isThisYear';
-import setYear from 'date-fns/setYear';
-import startOfYear from 'date-fns/startOfYear';
-import subYears from 'date-fns/subYears';
+import { addYears } from 'date-fns/addYears';
+import { getYear } from 'date-fns/getYear';
+import { format } from 'date-fns/format';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isThisYear } from 'date-fns/isThisYear';
+import { setYear } from 'date-fns/setYear';
+import { startOfYear } from 'date-fns/startOfYear';
+import { subYears } from 'date-fns/subYears';
 import linearFunction from '../global/linear-function';
 import styles from './date-picker.css';
 import units, { dateType, DOUBLE, HALF, yearDuration } from './consts';