@itcase/ui 1.0.17 → 1.0.19

package/dist/components/Button.js

@@ -51,6 +51,7 @@ var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(prop
   var before = props.before,
     after = props.after,
     className = props.className,
+    dataTour = props.dataTour,
     Badge = props.Badge,
     children = props.children,
     iconAfter = props.iconAfter,
@@ -132,7 +133,8 @@ var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(prop
     target: target,
     type: htmlType,
     onClick: onClick,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    "data-tour": dataTour
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "button__wrapper",
     ref: ref

package/dist/components/DatePicker.js

@@ -9,13 +9,13 @@ var index = require('./Input.js');
 var index$3 = require('./Text.js');
 var index$1 = require('./Button.js');
 var index$2 = require('./Icon.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
 var size = require('../constants/componentProps/size.js');
 var textColor = require('../constants/componentProps/textColor.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
 require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../constants/componentProps/textColorActive.js');
@@ -10103,13 +10103,20 @@ var ru = locale;
 function DatePickerInput(props) {
   var className = props.className,
     inputProps = props.inputProps,
-    datePickerProps = props.datePickerProps;
-  var _useState = React.useState(new Date()),
+    datePickerProps = props.datePickerProps,
+    onChange = props.onChange;
+  var _useState = React.useState(function () {
+      return datePickerProps.isStartDefaultNull ? null : new Date();
+    }),
     startDate = _useState[0],
     setStartDate = _useState[1];
   var _useState2 = React.useState(null),
     endDate = _useState2[0],
     setEndDate = _useState2[1];
+  var onChangeDate = React.useCallback(function (date) {
+    setStartDate(date);
+    onChange && onChange(date);
+  }, []);
   var handleChange = function handleChange(_ref) {
     var newStartDate = _ref[0],
       newEndDate = _ref[1];
@@ -10119,11 +10126,11 @@ function DatePickerInput(props) {
   var renderDayContents = function renderDayContents(day, date) {
     return /*#__PURE__*/React__namespace.default.createElement(index$1.Button, {
       className: "react-datepicker__day-button",
-      size: datePickerProps.daySize,
       label: date.getDate(),
       labelTextColor: datePickerProps.dayTextColor,
       labelTextSize: datePickerProps.dayTextSize,
-      shape: datePickerProps.dayTextShape
+      shape: datePickerProps.dayTextShape,
+      size: datePickerProps.daySize
     });
   };
   var renderCustomHeader = function renderCustomHeader(_ref2) {
@@ -10138,8 +10145,8 @@ function DatePickerInput(props) {
       fillHover: datePickerProps.iconFillHover,
       fillSize: datePickerProps.iconFillSize,
       iconFill: datePickerProps.iconItemFill,
-      size: datePickerProps.iconSize,
       shape: datePickerProps.iconShape,
+      size: datePickerProps.iconSize,
       stroke: datePickerProps.iconStroke,
       SvgImage: datePickerProps.iconLeft,
       onClick: decreaseMonth
@@ -10147,15 +10154,15 @@ function DatePickerInput(props) {
       className: "react-datepicker__data"
     }, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
       className: "react-datepicker__month",
-      textColor: datePickerProps.monthTextColor,
       size: datePickerProps.monthTextSize,
+      textColor: datePickerProps.monthTextColor,
       textWeight: datePickerProps.monthTextWeight
     }, monthDate.toLocaleString('ru-RU', {
       month: 'long'
     })), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
       className: "react-datepicker__year",
-      textColor: datePickerProps.yearTextColor,
       size: datePickerProps.yearTextSize,
+      textColor: datePickerProps.yearTextColor,
       textWeight: datePickerProps.yearTextWeight
     }, monthDate.toLocaleString('ru-RU', {
       year: 'numeric'
@@ -10165,8 +10172,8 @@ function DatePickerInput(props) {
       fillHover: datePickerProps.iconFillHover,
       fillSize: datePickerProps.iconFillSize,
       iconFill: datePickerProps.iconItemFill,
-      size: datePickerProps.iconSize,
       shape: datePickerProps.iconShape,
+      size: datePickerProps.iconSize,
       stroke: datePickerProps.iconStroke,
       SvgImage: datePickerProps.iconRight,
       onClick: increaseMonth
@@ -10178,13 +10185,11 @@ function DatePickerInput(props) {
     customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, inputProps),
     endDate: (datePickerProps == null ? void 0 : datePickerProps.selectsRange) && endDate,
     locale: ru,
+    renderCustomHeader: renderCustomHeader,
+    renderDayContents: renderDayContents,
     selected: startDate,
     startDate: startDate,
-    onChange: datePickerProps != null && datePickerProps.selectsRange ? handleChange : function (date) {
-      return setStartDate(date);
-    },
-    renderDayContents: renderDayContents,
-    renderCustomHeader: renderCustomHeader
+    onChange: datePickerProps != null && datePickerProps.selectsRange ? handleChange : onChangeDate
   }, datePickerProps)));
 }
 var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -10194,9 +10199,13 @@ var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref)
 });
 DatePickerСustomInput.displayName = 'DatePickerСustomInput';
 DatePickerInput.propTypes = {
+  className: PropTypes__default.default.string,
+  datePickerProps: PropTypes__default.default.object,
+  inputProps: PropTypes__default.default.object,
   size: PropTypes__default.default.oneOf(size.default),
   textColor: PropTypes__default.default.oneOf(textColor.default),
-  textWeight: PropTypes__default.default.oneOf(textWeight.default)
+  textWeight: PropTypes__default.default.oneOf(textWeight.default),
+  onChange: PropTypes__default.default.func
 };
 
 exports.DatePickerInput = DatePickerInput;

package/dist/components/Group.js

@@ -32,7 +32,8 @@ function Group(props) {
     className = props.className,
     horizontalScroll = props.horizontalScroll,
     set = props.set,
-    style = props.style;
+    style = props.style,
+    dataTour = props.dataTour;
   var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_content-align_',
     propsKey: 'contentAlign'
@@ -107,6 +108,7 @@ function Group(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     id: id,
+    "data-tour": dataTour,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
     className: "group__wrapper",

package/dist/components/Icon.js

@@ -45,9 +45,11 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
     after = props.after,
     Badge = props.Badge,
     SvgImage = props.SvgImage,
+    id = props.id,
     imageSrc = props.imageSrc;
     props.simple;
-    var className = props.className,
+    var dataTour = props.dataTour,
+    className = props.className,
     href = props.href,
     link = props.link,
     linkTarget = props.linkTarget,
@@ -138,7 +140,9 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
+    id: id,
     ref: ref,
+    "data-tour": dataTour,
     style: iconStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {

package/dist/components/Label.js

@@ -45,6 +45,7 @@ function Label(props) {
     labelTextWrap = props.labelTextWrap,
     labelTextColor = props.labelTextColor,
     set = props.set,
+    dataTour = props.dataTour,
     type = props.type;
   var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
@@ -78,6 +79,7 @@ function Label(props) {
     labelStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'label', fillClass || appearance && ("fill_" + labelConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type, set && "label_set_" + set),
+    "data-tour": dataTour,
     style: labelStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__inner"

package/dist/components/Search.js

@@ -44,6 +44,7 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     before = props.before,
     className = props.className,
     size = props.size,
+    dataTour = props.dataTour,
     iconAfter = props.iconAfter;
     props.iconAfterBgFill;
     var iconAfterFill = props.iconAfterFill,
@@ -158,6 +159,7 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     searchInputStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("label", {
     className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, size && "search-input_size_" + size, type && "search-input_type_" + type),
+    "data-tour": dataTour,
     style: searchInputStyles
   }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-before",

package/dist/components/Segmented.js

@@ -109,6 +109,7 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
       className: clsx__default.default('segmented__item-label'),
       htmlFor: item.label
     }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+      className: "segmented__item-label-text",
       textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor,
       size: labelTextSize
     }, item.label)));

package/dist/components/Tab.js

@@ -68,7 +68,8 @@ function Tab(props) {
     labelTextSize = props.labelTextSize,
     labelTextWrap = props.labelTextWrap,
     labelTextStyle = props.labelTextStyle,
-    labeTextlWeight = props.labeTextlWeight,
+    labelTextWeight = props.labelTextWeight,
+    dataTour = props.dataTour,
     dividerFill = props.dividerFill,
     dividerFillHover = props.dividerFillHover,
     dividerFillActive = props.dividerFillActive,
@@ -140,7 +141,8 @@ function Tab(props) {
     className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', appearance && ("fill_" + tabConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), appearance && ("fill_hover_" + tabConfig.appearance[appearance].fillHoverClass).replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "tab_set_" + set, justifyContentClass),
     style: tab,
     onClick: onClick,
-    onMouseEnter: onMouseEnter
+    onMouseEnter: onMouseEnter,
+    "data-tour": dataTour
   }, /*#__PURE__*/React__default.default.createElement(index.Link, {
     href: link || href,
     className: clsx__default.default('tab__link', alignDirectionClass, alignClass),
@@ -154,7 +156,7 @@ function Tab(props) {
     textColorActive: isActive && labelColorActive || appearance && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textGradient: labelTextGradient,
     size: labelTextSize,
-    textWeight: labeTextlWeight,
+    textWeight: labelTextWeight,
     textColor: labelColor || appearance && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWrap: labelTextWrap,
     textColorHover: labelTextColorHover,
@@ -211,7 +213,7 @@ Tab.propTypes = (_Tab$propTypes = {
   labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
   labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
   labelTextGradient: PropTypes__default.default.oneOf(textGradient.default)
-}, _Tab$propTypes["labelTextSize"] = PropTypes__default.default.oneOf(size.default), _Tab$propTypes.labelTextWrap = PropTypes__default.default.string, _Tab$propTypes.labelTextStyle = PropTypes__default.default.oneOf(textStyle.default), _Tab$propTypes.labeTextlWeight = PropTypes__default.default.oneOf(textWeight.default), _Tab$propTypes.type = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeDesktop = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeMobile = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeTablet = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.title = PropTypes__default.default.string, _Tab$propTypes.underline = PropTypes__default.default.oneOf(underline.default), _Tab$propTypes);
+}, _Tab$propTypes["labelTextSize"] = PropTypes__default.default.oneOf(size.default), _Tab$propTypes.labelTextWrap = PropTypes__default.default.string, _Tab$propTypes.labelTextStyle = PropTypes__default.default.oneOf(textStyle.default), _Tab$propTypes.labelTextWeight = PropTypes__default.default.oneOf(textWeight.default), _Tab$propTypes.type = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeDesktop = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeMobile = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeTablet = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.title = PropTypes__default.default.string, _Tab$propTypes.underline = PropTypes__default.default.oneOf(underline.default), _Tab$propTypes);
 Tab.defaultProps = {
   size: 'normal',
   LinkComponent: 'a',
@@ -220,6 +222,7 @@ Tab.defaultProps = {
 
 function TabGroup(props) {
   var id = props.id,
+    dataTour = props.dataTour,
     children = props.children,
     className = props.className,
     horizontalScroll = props.horizontalScroll,
@@ -271,6 +274,7 @@ function TabGroup(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass),
     id: id,
+    "data-tour": dataTour,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
     className: "group__wrapper",

package/dist/components/Text.js

@@ -28,6 +28,7 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Text(props) {
   var after = props.after,
+    dataTour = props.dataTour,
     before = props.before,
     children = props.children,
     className = props.className,
@@ -80,6 +81,7 @@ function Text(props) {
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && "text_type_" + type, widthClass, onClick && (cursor || 'cursor_type_pointer')),
+    "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,
     onClick: onClick

package/dist/components/Title.js

@@ -30,7 +30,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Title(props) {
-  var tag = props.tag,
+  var dataTour = props.dataTour,
+    tag = props.tag,
     text = props.text,
     textWrap = props.textWrap;
   var children = props.children,
@@ -105,6 +106,7 @@ function Title(props) {
   }, [isMobile, isTablet, isDesktop]);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'title', fillColorClass, size && "title_size_" + size, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_" + textWrap),
+    "data-tour": dataTour,
     onClick: onClick,
     style: titleStyles
   }, /*#__PURE__*/React__default.default.createElement("span", {

package/dist/css/components/Notification/Notification.css

@@ -12,6 +12,7 @@
       width: 100%;
       align-items: flex-end;
       display: flex;
+      flex-flow: column nowrap;
     }
   }
 }

package/dist/css/components/Segmented/Segmented.css

@@ -66,6 +66,9 @@
           z-index: 3;
           transition: color 0.5s ease;
           cursor: pointer;
+          &-text {
+             @mixin word-wrap;
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",