@itcase/ui 1.1.0 → 1.1.2

package/dist/components/ScrollOnDrag.js

@@ -0,0 +1,290 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var fillHover = require('../constants/componentProps/fillHover.js');
+var fill = require('../constants/componentProps/fill.js');
+var height = require('../constants/componentProps/height.js');
+var width = require('../constants/componentProps/width.js');
+var useStyles = require('../hooks/useStyles.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+    throw new Error(value);
+}
+
+const maxHorizontalScroll = dom => dom.scrollWidth - dom.clientWidth;
+const maxVerticalScroll = dom => dom.scrollHeight - dom.clientHeight;
+var useScrollOnDrag = ((domRef, {
+  onDragStart = () => {},
+  onDragEnd = () => {},
+  runScroll = ({
+    dx,
+    dy
+  }) => {
+    const offsetX = Math.min(maxHorizontalScroll(domRef.current), domRef.current.scrollLeft + dx);
+    domRef.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign
+
+    const offsetY = Math.min(maxVerticalScroll(domRef.current), domRef.current.scrollTop + dy);
+    domRef.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign
+  }
+} = {}) => {
+  const internalState = React.useRef({
+    lastMouseX: null,
+    lastMouseY: null,
+    isMouseDown: false,
+    isScrolling: false
+  });
+  const scroll = React.useCallback(({
+    dx,
+    dy
+  }) => {
+    !(domRef.current !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, `Trying to scroll to the bottom, but no element was found.
+      Did you call this scrollBottom before the component with this hook finished mounting?`) : invariant(false) : void 0;
+    runScroll({
+      dx,
+      dy
+    });
+  }, [runScroll]);
+  const onMouseDown = React.useCallback(e => {
+    internalState.current.isMouseDown = true;
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
+  }, []);
+  const onMouseUp = () => {
+    internalState.current.isMouseDown = false;
+    internalState.current.lastMouseX = null;
+    internalState.current.lastMouseY = null;
+    if (internalState.current.isScrolling) {
+      internalState.current.isScrolling = false;
+      onDragEnd();
+    }
+  };
+  const onMouseMove = e => {
+    if (!internalState.current.isMouseDown) {
+      return;
+    }
+    if (!internalState.current.isScrolling) {
+      internalState.current.isScrolling = true;
+      onDragStart();
+    }
+
+    // diff is negative because we want to scroll in the opposite direction of the movement
+    const dx = -(e.clientX - internalState.current.lastMouseX);
+    const dy = -(e.clientY - internalState.current.lastMouseY);
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
+    scroll({
+      dx,
+      dy
+    });
+  };
+  React.useEffect(() => {
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('mousemove', onMouseMove);
+    return () => {
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+  return {
+    events: {
+      onMouseDown
+    }
+  };
+});
+
+function ScrollOnDrag(props) {
+  const {
+    children,
+    className,
+    speed
+  } = props;
+  const ref = React.useRef(null);
+  const fun = ref => ({
+    dx
+  }) => {
+    ref.current.scrollLeft += dx * speed; // eslint-disable-line no-param-reassign
+  };
+  const {
+    events
+  } = useScrollOnDrag(ref, {
+    runScroll: fun(ref)
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const {
+    styles: groupStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({
+    className: clsx__default.default(className, 'scrolldrag', borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass)
+  }, events, {
+    ref: ref,
+    style: groupStyles
+  }), children);
+}
+ScrollOnDrag.propTypes = {
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  elevation: PropTypes__default.default.oneOf(),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillHover: PropTypes__default.default.oneOf(fillHover.default),
+  height: PropTypes__default.default.oneOf(height.default),
+  width: PropTypes__default.default.oneOf(width.default)
+};
+ScrollOnDrag.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ScrollOnDrag",
+  "props": {
+    "borderColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderWidth": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderWidthProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "elevation": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "PropTypes.oneOf()"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillHover": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillHoverProps"
+      },
+      "required": false
+    },
+    "height": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "heightProps"
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.ScrollOnDrag = ScrollOnDrag;

package/dist/components/Search.js

@@ -36,6 +36,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('react-scrollbars-custom');

package/dist/components/Select.js

@@ -41,6 +41,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/direction.js');

package/dist/components/SiteMenu.js

@@ -35,6 +35,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 

package/dist/components/Text.js

@@ -106,7 +106,7 @@ function Text(props) {
     htmlFor: htmlFor,
     style: textStyles,
     onClick: onClick,
-    "data-testid": dataTestId
+    "data-test-id": dataTestId
   }, before, children, after);
 }
 Text.propTypes = {

package/dist/components/Tile.js

@@ -40,8 +40,8 @@ require('../constants/componentProps/underline.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Tooltip.js');
-require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Tooltip.js

@@ -6,11 +6,13 @@ var clsx = require('clsx');
 var index$1 = require('./Text.js');
 var index = require('./Title.js');
 var size = require('../constants/componentProps/size.js');
+var textSize = require('../constants/componentProps/textSize.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/textStyle.js');
@@ -25,7 +27,6 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
 require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/wrap.js');
 
@@ -56,11 +57,12 @@ const Tooltip = /*#__PURE__*/React__default.default.forwardRef(function Tooltip(
     titleTextColor,
     titleSize,
     textColor,
-    textSize
+    textSize,
+    initialIsVisible
   } = props;
   const tooltipTimeoutHideRef = React.useRef(null);
   const isTooltipCloseAnimationInProgressRef = React.useRef(false);
-  const [isTooltipVisible, setIsTooltipVisible] = React.useState(null);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(initialIsVisible);
   const openTooltip = React.useCallback(() => {
     if (!isTooltipCloseAnimationInProgressRef.current) {
       clearTimeout(tooltipTimeoutHideRef.current);
@@ -169,27 +171,39 @@ Tooltip.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  /**
+   * внутренний padding и отступ gap между элементами
+   */
   size: PropTypes__default.default.oneOf(size.default),
   sizeDesktop: PropTypes__default.default.oneOf(size.default),
   sizeMobile: PropTypes__default.default.oneOf(size.default),
   sizeTablet: PropTypes__default.default.oneOf(size.default),
   text: PropTypes__default.default.any,
-  textColor: PropTypes__default.default.oneOf(size.default),
-  textSize: PropTypes__default.default.oneOf(size.default),
-  textSizeDesktop: PropTypes__default.default.oneOf(size.default),
-  textSizeMobile: PropTypes__default.default.oneOf(size.default),
-  textSizeTablet: PropTypes__default.default.oneOf(size.default),
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textSize: PropTypes__default.default.oneOf(textSize.default),
+  textSizeDesktop: PropTypes__default.default.oneOf(textSize.default),
+  textSizeMobile: PropTypes__default.default.oneOf(textSize.default),
+  textSizeTablet: PropTypes__default.default.oneOf(textSize.default),
   title: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.string,
-  titleTextColor: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.oneOf(titleSize.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
   type: PropTypes__default.default.string
 };
-Tooltip.defaultProps = {};
+Tooltip.defaultProps = {
+  initialIsVisible: null
+};
 Tooltip.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Tooltip",
   "props": {
+    "initialIsVisible": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
     "after": {
       "description": "",
       "type": {
@@ -312,7 +326,7 @@ Tooltip.__docgenInfo = {
       "required": false
     },
     "size": {
-      "description": "",
+      "description": "\u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 padding \u0438 \u043E\u0442\u0441\u0442\u0443\u043F gap \u043C\u0435\u0436\u0434\u0443 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430\u043C\u0438",
       "type": {
         "name": "enum",
         "computed": true,
@@ -359,7 +373,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textColorProps"
       },
       "required": false
     },
@@ -368,7 +382,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -377,7 +391,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -386,7 +400,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -395,7 +409,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -409,14 +423,18 @@ Tooltip.__docgenInfo = {
     "titleSize": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "titleSizeProps"
       },
       "required": false
     },
     "titleTextColor": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
       },
       "required": false
     },

package/dist/constants/componentProps/borderWidth.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const borderWidthProps = [null, '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+const borderWidthProps = [null, /* eslint-disable */
+'1', 1, '2', 2, '3', 3, '4', 4, '5', 5, '6', 6, '7', 7, '8', 8, '9', 9, '10', 10
+/* eslint-enable */];
 
 exports.default = borderWidthProps;

package/dist/constants/componentProps/emojiSize.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const emojiSizeProps = [null, '16', '24', '32', '40', '56', '64', '144'];
+const emojiSizeProps = [null, /* eslint-disable */
+'16', 16, '24', 24, '32', 32, '40', 40, '56', 56, '64', 64, '144', 144
+/* eslint-enable */];
 
 exports.default = emojiSizeProps;

package/dist/constants/componentProps/iconFillSize.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const iconFillProps = [null, '14', '16', '24', '32', '40', '60', '64', '144'];
+const iconFillProps = [null, /* eslint-disable */
+'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '60', 60, '64', 64, '144', 144
+/* eslint-enable */];
 
 exports.default = iconFillProps;

package/dist/constants/componentProps/iconSize.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const iconSizeProps = [null, '14', '16', '24', '32', '40', '60', '64', '144'];
+const iconSizeProps = [null, /* eslint-disable */
+'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '60', 60, '64', 64, '144', 144
+/* eslint-enable */];
 
 exports.default = iconSizeProps;

package/dist/constants/componentProps/sizePX.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const sizePXProps = [null, '14', '16', '24', '32', '40', '48', '56', '60', '64', '72', '80', '96', '112', '144', '240'];
+const sizePXProps = [null, /* eslint-disable */
+'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '48', 48, '56', 56, '60', 60, '64', 64, '72', 72, '80', 80, '96', 96, '112', 112, '144', 144, '240', 240
+/* eslint-enable */];
 
 exports.default = sizePXProps;

package/dist/css/components/DatePicker/DatePicker.css

@@ -829,11 +829,11 @@
               }
             }
             &--in-selecting-range:not(
-            .react-datepicker__day--in-range,
-            .react-datepicker__month-text--in-range,
-            .react-datepicker__quarter-text--in-range,
-            .react-datepicker__year-text--in-range
-          ) {
+                .react-datepicker__day--in-range,
+                .react-datepicker__month-text--in-range,
+                .react-datepicker__quarter-text--in-range,
+                .react-datepicker__year-text--in-range
+              ) {
               background: var(--date-picker-day-selected-background);
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);
@@ -878,6 +878,12 @@
                 &:hover {
                   border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
                 }
+                &.react-datepicker__day--today {
+                  border-radius: var(--date-picker-day-today-border-radius) !important;
+                  &:hover {
+                    border-radius: var(--date-picker-day-today-border-radius) !important;
+                  }
+                }
               }
               &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
                 border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
@@ -1165,6 +1171,7 @@
   --date-picker-day-range-end-border-radius: 0 12px 12px 0;
   --date-picker-day-range-start-end-border-radius: 12px;
   --date-picker-day-today-background: var(--color-surface-secondary);
+  --date-picker-day-today-border-radius: 12px;
   --date-picker-day-today-text-color: var(--color-surface-text-primary);
   --date-picker-day-weekend-background: var(--color-surface-primary);
   --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);

package/dist/css/components/Group/Group.css

@@ -74,14 +74,6 @@
   }
 }
 
-.group {
-  ^& .width {
-    &_fixed {
-      width: 300px;
-    }
-  }
-}
-
 .group {
   &_wrap {
     @each $val in nowrap, wrap, wrap-reverse {

package/dist/css/components/Label/Label.css

@@ -67,25 +67,6 @@ div.label {
     z-index: 12;
   }
 }
-.label {
-  &&_text-align {
-    &_left {
-      ^^&__inner {
-        text-align: left;
-      }
-    }
-    &_center {
-      ^^&__inner {
-        text-align: center;
-      }
-    }
-    &_right {
-      ^^&__inner {
-        text-align: right;
-      }
-    }
-  }
-}
 .label {
   &&_width {
     &_fixed {

package/dist/css/components/Modal/Modal.css

@@ -3,12 +3,12 @@
   min-height: 100%;
   position: fixed;
   display: none;
-  top: 0;
-  left: 0;
   justify-content: center;
   align-items: center;
+  left: 0;
+  top: 0;
   z-index: 1000000;
-  &__fader {
+  &__overlay {
     z-index: -1;
   }
   &&_state_visible {