@itcase/ui 1.0.15 → 1.0.16

package/dist/components/Button.js

@@ -10,8 +10,9 @@ var shape = require('../constants/componentProps/shape.js');
 var size = require('../constants/componentProps/size.js');
 var type = require('../constants/componentProps/type.js');
 var width = require('../constants/componentProps/width.js');
-var index$1 = require('./Icon.js');
-var index$2 = require('./Text.js');
+var index$2 = require('./Icon.js');
+var index$3 = require('./Text.js');
+var index$1 = require('./Loader.js');
 var index = require('./Link.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.js');
@@ -59,6 +60,9 @@ function Button(props) {
     label = props.label,
     labelTextColor = props.labelTextColor,
     labelTextSize = props.labelTextSize,
+    loaderSet = props.loaderSet,
+    loaderFill = props.loaderFill,
+    loaderItemFill = props.loaderItemFill,
     link = props.link,
     href = props.href,
     target = props.target,
@@ -73,6 +77,7 @@ function Button(props) {
     iconAfterFill = props.iconAfterFill,
     iconAfterStroke = props.iconAfterStroke,
     type = props.type,
+    loading = props.loading,
     htmlType = props.htmlType,
     isDisabled = props.isDisabled,
     onClick = props.onClick,
@@ -116,8 +121,9 @@ function Button(props) {
   var _useStyles = useStyles.useStyles(props),
     buttonStyles = _useStyles.styles,
     labelStyles = _useStyles.label;
+  console.log(isDisabled);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
+    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
     href: link || href,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -129,24 +135,29 @@ function Button(props) {
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "button__wrapper"
-  }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }, loading && /*#__PURE__*/React__default.default.createElement(index$1.Loader, {
+    className: "button__loader",
+    set: loaderSet,
+    fill: loaderFill,
+    itemFill: loaderItemFill
+  }), before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_before",
     SvgImage: iconBefore,
     size: iconBeforeSize,
     iconFill: iconBeforeFill,
     iconStroke: iconBeforeStroke
-  }), icon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon",
     SvgImage: icon,
     size: iconSize,
     iconFill: iconFill,
     iconStroke: iconStroke
-  }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
+  }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
     className: "button__label",
     textColor: labelTextColor,
     size: labelTextSize,
     style: labelStyles
-  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
     SvgImage: iconAfter,
     size: iconAfterSize,
@@ -221,7 +232,8 @@ Button.defaultProps = {
   htmlType: 'button',
   size: 'm',
   labelSize: 'm',
-  width: 'hug'
+  width: 'hug',
+  loaderSet: 'simple'
 };
 
 exports.Button = Button;

package/dist/components/CookiesWarning.js

@@ -33,6 +33,7 @@ require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/underline.js');
+require('./Loader.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/stacking.js');
 require('../constants/componentProps/wrap.js');

package/dist/components/DatePicker.js

@@ -12,8 +12,8 @@ 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 size$1 = require('../constants/componentProps/size.js');
+var textColor$1 = require('../constants/componentProps/textColor.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
 require('../hooks/useDeviceTargetClass.js');
 require('../hooks/useMediaQueries.js');
@@ -31,6 +31,7 @@ require('../constants/componentProps/horizontalResizeMode.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/width.js');
+require('./Loader.js');
 require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/underline.js');
@@ -10174,7 +10175,12 @@ function DatePickerInput(props) {
   return /*#__PURE__*/React__namespace.default.createElement("div", {
     className: clsx__default.default(className, 'datepicker', datePickerProps.monthsShown && 'datepicker_type_multiple-months', (datePickerProps == null ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button')
   }, /*#__PURE__*/React__namespace.default.createElement(Xt, Object.assign({
-    customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, inputProps),
+    customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, Object.assign({}, inputProps, {
+      size: size,
+      textSize: textSize,
+      textColor: textColor,
+      label: label
+    })),
     endDate: (datePickerProps == null ? void 0 : datePickerProps.selectsRange) && endDate,
     locale: ru,
     selected: startDate,
@@ -10193,8 +10199,8 @@ var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref)
 });
 DatePickerСustomInput.displayName = 'DatePickerСustomInput';
 DatePickerInput.propTypes = {
-  size: PropTypes__default.default.oneOf(size.default),
-  textColor: PropTypes__default.default.oneOf(textColor.default),
+  size: PropTypes__default.default.oneOf(size$1.default),
+  textColor: PropTypes__default.default.oneOf(textColor$1.default),
   textWeight: PropTypes__default.default.oneOf(textWeight.default)
 };
 

package/dist/components/Empty.js

@@ -32,6 +32,7 @@ require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/underline.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
+require('./Loader.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 

package/dist/components/Image.js

@@ -65,8 +65,12 @@ function Image(props) {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
-  var borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color-image_',
     propsKey: 'borderColorImage'
   });
   var _useStyles = useStyles.useStyles(props),
@@ -85,7 +89,7 @@ function Image(props) {
     alt: alt,
     title: title,
     style: imageStyles,
-    className: clsx__default.default('image__item', widthClass, heightClass, imgClassName, borderColorImageClass),
+    className: clsx__default.default('image__item', widthClass, heightClass, imgClassName, borderClass, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }
@@ -93,6 +97,7 @@ Image.propTypes = {
   after: PropTypes__default.default.any,
   alt: PropTypes__default.default.string,
   before: PropTypes__default.default.any,
+  border: PropTypes__default.default.string,
   borderColorImage: PropTypes__default.default.oneOf(borderColor.default),
   borderColorImageDesktop: PropTypes__default.default.oneOf(borderColor.default),
   borderColorImageMobile: PropTypes__default.default.oneOf(borderColor.default),

package/dist/components/Loader.js

@@ -34,20 +34,24 @@ function Loader(props) {
     text = props.text,
     textSize = props.textSize,
     textColor = props.textColor;
+  var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'itemFill'
+  });
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('loader', className, set && "loader_set_" + set)
+    className: clsx__default.default('loader', fillClass, className, set && "loader_set_" + set)
   }, children || /*#__PURE__*/React__default.default.createElement("div", {
     className: "loader__inner"
   }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', fillClass)
+    className: clsx__default.default('loader__item', itemFillClass)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', fillClass)
+    className: clsx__default.default('loader__item', itemFillClass)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', fillClass)
+    className: clsx__default.default('loader__item', itemFillClass)
   })), text && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "loader__text",
     size: textSize,

package/dist/components/Notification.js

@@ -3,31 +3,7 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var index = require('./Title.js');
-var index$1 = require('./Text.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
 var Notifications = require('../context/Notifications.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/wrap.js');
-require('../useStyles-e4accb53.js');
-require('../hooks/styleAttributes.js');
-require('lodash/castArray');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/size.js');
 require('uuid');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -39,37 +15,20 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function NotificationItem(props) {
   var after = props.after,
     before = props.before,
-    set = props.set;
-    props.status;
-    var size = props.size,
+    set = props.set,
+    status = props.status,
+    size = props.size,
     text = props.text,
-    textColor = props.textColor,
-    textSize = props.textSize,
-    title = props.title,
-    titleColor = props.titleColor,
-    titleSize = props.titleSize,
-    type = props.type;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'status'
-  });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
+    title = props.title;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('notification__item', type && "notification_set_" + type, set && "notification_set_" + set, size && "notification_set_" + size, fillClass && fillClass + "-primary", fillHoverClass)
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "notification__item-wrapper"
+    className: clsx__default.default('notification__item', status && "notification__item_status_" + status, set && "notification__item_set_" + set, size && "notification__item_set_" + size)
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__item-wrapper"
+  }, title && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__item-title"
+  }, title), text && /*#__PURE__*/React__default.default.createElement("div", {
     className: "notification__item-text"
-  }, /*#__PURE__*/React__default.default.createElement(index.Title, {
-    size: titleSize,
-    textColor: titleColor
-  }, title), /*#__PURE__*/React__default.default.createElement(index$1.Text, {
-    size: textSize,
-    textColor: textColor
-  }, text)), after));
+  }, text)), after);
 }
 NotificationItem.propTypes = {
   className: PropTypes__default.default.string,
@@ -77,11 +36,7 @@ NotificationItem.propTypes = {
   set: PropTypes__default.default.string,
   status: PropTypes__default.default.string,
   text: PropTypes__default.default.string,
-  textColor: PropTypes__default.default.string,
-  textSize: PropTypes__default.default.string,
   title: PropTypes__default.default.string,
-  titleColor: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.string,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any
 };
@@ -92,10 +47,7 @@ function NotificationList(props) {
     hideNotifications = _useNotificationsAPI.hideNotifications;
   var className = props.className,
     size = props.size,
-    textColor = props.textColor,
-    textSize = props.textSize,
-    titleColor = props.titleColor,
-    titleSize = props.titleSize,
+    type = props.type,
     set = props.set;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('notification', className)
@@ -104,12 +56,9 @@ function NotificationList(props) {
   }, notifications.map(function (notification, i) {
     return /*#__PURE__*/React__default.default.createElement(NotificationItem, {
       key: i,
-      textColor: notification.textColor || textColor,
-      textSize: textSize,
-      set: set,
-      size: size,
-      titleColor: titleColor,
-      titleSize: titleSize,
+      type: notification.type || type,
+      set: notification.set || set,
+      size: notification.size || size,
       title: notification.title,
       text: notification.text,
       status: notification.status,

package/dist/css/components/Button/Button.css

@@ -69,9 +69,7 @@
     &_loading {
       ^^&__loader {
         display: flex;
-      }
-      ^^&__text {
-        visibility: hidden;
+        position: absolute;
       }
     }
   }

package/dist/css/components/Choice/Choice.css

@@ -14,7 +14,7 @@
       &:hover {
         background: var(--choice-item-background-hover);
       }
-      &last-child {
+      &:last-child {
         border-right: 0;
       }
       &_state_active {

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

@@ -885,6 +885,7 @@
   }
 }
 .datepicker {
+  width: 100%;
   border-radius: var(--date-picker-day-border-radius);
   ^^^^^& .input {
     border-radius: var(--date-picker-day-border-radius);

package/dist/css/components/Empty/Empty.css

@@ -4,6 +4,8 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
+  align-self: center;
+  margin-top: 200px;
   &__message {
     text-align: center;
   }

package/dist/css/components/Grid/Grid.css

@@ -1,4 +1,5 @@
 .grid {
+  display: grid;
   width: 100%;
   position: relative;
   &__before {

package/dist/css/components/Loader/Loader.css

@@ -3,8 +3,10 @@
   display: flex;
   flex-flow: column wrap;
   align-items: center;
+  justify-content: center;
   &__inner {
     position: relative;
+    display: flex;
   }
   &__text {
   }

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

@@ -1,18 +1,62 @@
 .notification {
-  &__item {
-    padding: 12px;
-    &-text {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-  }
 }
 .notification {
   &&_type_global {
-    position: absolute;
+    width: 100%;
+    position: fixed;
     left: 0;
     top: 0;
+    padding: 0;
+    background: none;
+    z-index: 1000;
+    ^&__wrapper {
+      width: 100%;
+      align-items: flex-end;
+      display: flex;
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_float {
+      width: 320px;
+      margin: 16px 24px;
+    }
+  }
+}
+.notification__item {
+  &_status {
+    &_success {
+      ^^&-wrapper {
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+        background: var(--color-success-primary);
+        ^^^&-title {
+          color: var(--color-success-text-secondary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-success-text-secondary);
+          @mixin text-s;
+        }
+      }
+    }
+    &_error {
+      ^^&-wrapper {
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+        background: var(--color-error-primary);
+        ^^^&-title {
+          color: var(--color-error-text-secondary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-error-text-secondary);
+          @mixin text-s;
+        }
+      }
+    }
   }
 }

package/dist/css/components/Search/Search.css

@@ -35,6 +35,7 @@
     grid-column: 1/3;
     grid-row-start: 1;
     z-index: 2;
+    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -65,7 +66,7 @@
     z-index: 2;
   }
   &&_state_focus,
-  &&_state_filled, {
+  &&_state_filled {
     ^&__input {
       &-wrapper {
         left: 0;

package/dist/css/components/Search/css/search-input/search-input.css

@@ -24,6 +24,7 @@
     grid-column: 1/3;
     grid-row-start: 1;
     z-index: 2;
+    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -54,7 +55,7 @@
     z-index: 2;
   }
   &&_state_focus,
-  &&_state_filled, {
+  &&_state_filled {
     ^&__input {
       &-wrapper {
         left: 0;

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

@@ -24,6 +24,7 @@
         min-width: 120px;
         position: relative;
         display: flex;
+        align-items: center;
         &::after {
           width: 1px;
           height: 100%;
@@ -33,7 +34,7 @@
           top: 0;
           right: 0;
         }
-        &:nth-last-child(-n+2) {
+        &:nth-last-child(-n + 2) {
           &::after {
             display: none;
           }

package/dist/css/styles/fill/fill.css

@@ -11,6 +11,18 @@
           }
         }
       }
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+            @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+              &$(alpha) {
+                background: var(--color-$(type)-item-$(color)-$(alpha));
+              }
+            }
+          }
+        }
+      }
     }
   }
   @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {

package/package.json

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