@itcase/ui 1.0.20 → 1.0.22

package/dist/components/Button.js

@@ -122,7 +122,6 @@ var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(prop
   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', 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),
     DefaultComponent: "button",

package/dist/components/DatePicker.js

@@ -10102,25 +10102,44 @@ var ru = locale;
 
 function DatePickerInput(props) {
   var className = props.className,
+    value = props.value,
     inputProps = props.inputProps,
     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);
-  }, []);
+
+  // const [startDate, setStartDate] = useState(() =>
+  //   datePickerProps.isStartDefaultNull ? null : new Date(),
+  // )
+
+  var startDate = React.useMemo(function () {
+    if (value) {
+      if (typeof value === 'string') {
+        return new Date(value);
+      }
+      return value;
+    }
+    if (datePickerProps.isStartDefaultNull) {
+      return null;
+    }
+    return new Date();
+  }, [value, datePickerProps.isStartDefaultNull]);
+  var _useState = React.useState(null),
+    endDate = _useState[0],
+    setEndDate = _useState[1];
+
+  // const onChangeDate = useCallback(
+  //   (date) => {
+  //     setStartDate(date)
+  //     onChange && onChange(date)
+  //   },
+  //   [onChange],
+  // )
+
   var handleChange = function handleChange(_ref) {
     var newStartDate = _ref[0],
       newEndDate = _ref[1];
-    setStartDate(newStartDate);
+    onChange && onChange(newStartDate);
+    // setStartDate(newStartDate)
     setEndDate(newEndDate);
   };
   var renderDayContents = function renderDayContents(day, date) {
@@ -10189,7 +10208,7 @@ function DatePickerInput(props) {
     renderDayContents: renderDayContents,
     selected: startDate,
     startDate: startDate,
-    onChange: datePickerProps != null && datePickerProps.selectsRange ? handleChange : onChangeDate
+    onChange: datePickerProps != null && datePickerProps.selectsRange ? handleChange : onChange
   }, datePickerProps)));
 }
 var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/dist/components/Input.js

@@ -22,7 +22,7 @@ var inputConfig = {
     inputConfig.state = newComponent;
   }
 };
-function Input(props) {
+var Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
   var _inputConfig$state$st, _inputConfig$state$st2, _inputConfig$state$st3;
   var state = props.state,
     id = props.id,
@@ -32,7 +32,6 @@ function Input(props) {
     placeholder = props.placeholder,
     disabled = props.disabled,
     value = props.value,
-    inputRef = props.inputRef,
     onBlur = props.onBlur,
     onChange = props.onChange,
     onFocus = props.onFocus,
@@ -86,7 +85,7 @@ function Input(props) {
     type: type,
     id: id,
     index: index,
-    ref: inputRef,
+    ref: ref,
     disabled: disabled,
     placeholder: placeholder,
     value: value,
@@ -95,7 +94,7 @@ function Input(props) {
     onFocus: onFocus,
     onKeyDown: onKeyDown
   });
-}
+});
 Input.propTypes = {
   id: PropTypes__default.default.string,
   className: PropTypes__default.default.string,

package/dist/components/Segmented.js

@@ -83,6 +83,10 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
     prefix: 'segmented_width_',
     propsKey: 'width'
   });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && "segmented_size_" + size, type && "segmented_type_" + type),
     ref: controlRef
@@ -92,7 +96,7 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
     className: clsx__default.default('segmented__wrapper-inner', borderColorClass, borderWidthClass, borderTypeClass)
   }, segments == null ? void 0 : segments.map(function (item, i) {
     return /*#__PURE__*/React__default.default.createElement("div", {
-      className: clsx__default.default('segmented__item', item.value === activeSegment.value && 'segmented__item_active'),
+      className: clsx__default.default('segmented__item', fillHoverClass, item.value === activeSegment.value && 'segmented__item_active'),
       key: item.value,
       ref: segmentsRefs.get(item.value)
     }, /*#__PURE__*/React__default.default.createElement("input", {

package/dist/components/Select.js

@@ -7521,9 +7521,10 @@ var SelectControl = function SelectControl(props) {
   var _props$selectProps = props.selectProps,
     inputFill = _props$selectProps.inputFill,
     inputShape = _props$selectProps.inputShape,
-    inputBorderColor = _props$selectProps.inputBorderColor;
+    inputBorderColor = _props$selectProps.inputBorderColor,
+    inputBorderColorHover = _props$selectProps.inputBorderColorHover;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Control, Object.assign({}, props, {
-    className: clsx__default.default(inputFill, inputShape, inputBorderColor && "border-color_" + inputBorderColor)
+    className: clsx__default.default(inputFill, inputShape, inputBorderColor && "border-color_" + inputBorderColor, inputBorderColorHover && "border-color_hover_" + inputBorderColorHover)
   }));
 };
 SelectControl.propTypes = {
@@ -7850,6 +7851,9 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
   var inputBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'inputBorderColor'
   });
+  var inputBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'inputBorderColorHover'
+  });
   var placeholderTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'placeholderTextSize'
   });
@@ -7917,6 +7921,7 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     inputCaretColor: inputCaretColorClass,
     inputShape: inputShapeClass,
     inputBorderColor: inputBorderColorClass,
+    inputBorderColorHover: inputBorderColorHoverClass,
     placeholder: placeholder,
     placeholderTextSize: placeholderTextSizeClass,
     placeholderTextColor: placeholderTextColorClass,

package/dist/components/Textarea.js

@@ -40,6 +40,10 @@ function Textarea(props) {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderHover'
+  });
   var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'textarea_size_',
     propsKey: 'size'
@@ -73,7 +77,7 @@ function Textarea(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("textarea", {
-    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
+    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass, borderColorHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
     id: id,
     disabled: disabled,
     placeholder: placeholder,

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

@@ -723,9 +723,13 @@
 .react-datepicker {
   background: var(--date-picker-background);
   border-radius: var(--date-picker-border-radius);
-  border: var(--date-picker-border);
+  border: none;
   box-shadow: var(--date-picker-box-shadow);
   font-size: inherit;
+  display: flex;
+  &-popper {
+    z-index: 10;
+  }
   &__triangle {
     display: none;
   }
@@ -735,6 +739,14 @@
       z-index: 1000 !important;
     }
   }
+  &__header {
+    background: var(--date-picker-background);
+    border: none;
+    padding: 0;
+    &--time {
+      padding: 0;
+    }
+  }
   &__month {
     margin: 0;
     &-container {
@@ -796,7 +808,11 @@
               background: var(--date-picker-day-hover-background);
               color: var(--date-picker-day-hover-text-color);
             }
-            &--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {
+            &--in-selecting-range:not(.react-datepicker__day--in-range):not(
+                .react-datepicker__month-text--in-range
+              ):not(.react-datepicker__quarter-text--in-range):not(
+                .react-datepicker__year-text--in-range
+              ) {
               background: var(--date-picker-day-selected-background);
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);
@@ -841,6 +857,41 @@
               & .button__label {
                 color: var(--date-picker-day-today-text-color);
               }
+              &:hover {
+                background: var(--date-picker-day-hover-background);
+              }
+              &.react-datepicker__day--in-range {
+                border-radius: 0;
+                background: var(--date-picker-day-selected-background);
+                & .button__label {
+                  color: var(--date-picker-day-selected-text-color);
+                }
+                &:hover {
+                  background: var(--date-picker-day-selected-background) !important;
+                  & .button__label {
+                    color: var(--date-picker-day-selected-text-color) !important;
+                  }
+                }
+              }
+              &.react-datepicker__day--range {
+                background-color: var(--date-picker-day-range-background) !important;
+                border-radius: var(--date-picker-day-range-border-radius) !important;
+                & .button__label {
+                  color: var(--date-picker-day-range-text-color) !important;
+                }
+                &-start {
+                  border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  &:hover {
+                    border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  }
+                }
+                &-end {
+                  border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  &:hover {
+                    border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  }
+                }
+              }
             }
             &--today.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
               border-radius: var(--date-picker-day-border-radius) !important;
@@ -849,14 +900,72 @@
                 color: var(--date-picker-day-today-text-color);
               }
             }
-            &--keyboard-selected {
+            /* &--keyboard-selected {
               background: transparent;
-            }
+            } */
             &--selected {
               background: var(--date-picker-day-selected-background);
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);
               }
+              &:hover {
+                background: var(--date-picker-day-selected-background) !important;
+              }
+            }
+            &--weekend {
+              background: var(--date-picker-day-weekend-background);
+              & .button__label {
+                color: var(--date-picker-day-weekend-text-color);
+              }
+              &:hover {
+                background: var(--date-picker-day-hover-background);
+              }
+              &.react-datepicker__day--selected {
+                background: var(--date-picker-day-selected-background);
+                & .button__label {
+                  color: var(--date-picker-day-selected-text-color);
+                }
+                &:hover {
+                  background: var(--date-picker-day-selected-background) !important;
+                }
+              }
+              &.react-datepicker__day--outside-month {
+                & .button__label {
+                  color: var(--date-picker-day-weekend-outside-text-color) !important;
+                }
+              }
+              &.react-datepicker__day--in-range {
+                border-radius: 0;
+                background: var(--date-picker-day-selected-background);
+                & .button__label {
+                  color: var(--date-picker-day-selected-text-color);
+                }
+                &:hover {
+                  background: var(--date-picker-day-selected-background) !important;
+                  & .button__label {
+                    color: var(--date-picker-day-selected-text-color) !important;
+                  }
+                }
+              }
+              &.react-datepicker__day--range {
+                background-color: var(--date-picker-day-range-background) !important;
+                border-radius: var(--date-picker-day-range-border-radius) !important;
+                & .button__label {
+                  color: var(--date-picker-day-range-text-color) !important;
+                }
+                &-start {
+                  border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  &:hover {
+                    border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  }
+                }
+                &-end {
+                  border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  &:hover {
+                    border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  }
+                }
+              }
             }
             &--outside-month {
               background: var(--date-picker-day-outside-background) !important;
@@ -874,33 +983,36 @@
     }
   }
   &__time {
-    background: var(--date-picker-container-background) !important;
     width: 95px;
+    background: var(--date-picker-background) !important;
     &-container {
       width: auto;
-      padding: var(--date-picker-container-padding);
+      float: none;
+      padding: var(--date-picker-padding);
       display: flex;
       flex-direction: column;
       gap: 24px;
-      border-left: 1px solid var(--date-picker-container-border-color);
+      border-left: var(--date-picker-border);
+      ^&-box {
+      }
     }
     &-list {
-      height: 300px !important;
+      height: 240px !important;
       &-item {
         border-radius: var(--date-picker-day-border-radius);
         font-size: var(--date-picker-name-size);
         line-height: 30px;
-        max-height: var(--date-picker-height);
+        max-height: var(--date-picker-day-height);
         &:hover {
-          background: var(--date-picker-day-background-hover) !important;
+          background: var(--date-picker-day-hover-background) !important;
         }
         &--selected {
-          background: var(--date-picker-selected-background) !important;
-          color: var(--date-picker-selected-color) !important;
+          background: var(--date-picker-day-selected-background) !important;
+          color: var(--date-picker-day-selected-text-color) !important;
           font-weight: var(--date-picker-selected-weight) !important;
-        }
-        &--selected:hover {
-          background: var(--date-picker-selected-background-hover) !important;
+          &:hover {
+            background: var(--date-picker-day-selected-background) !important;
+          }
         }
       }
     }
@@ -916,7 +1028,7 @@
       margin: 0;
       padding: 4px;
       float: none;
-      border-top: 1px solid var(--date-picker-container-border-color);
+      border-top: var(--date-picker-border);
       text-align: center;
       ^^&-time {
         &__caption {
@@ -965,26 +1077,41 @@
   }
 }
 :root {
+  --date-picker-name-size: 18px;
+  --date-picker-name-weight: 400;
+  --date-picker-selected-weight: 400;
+  --date-picker-input-border-radius: 6px;
+
+  --date-picker-background: var(--color-surface-primary);
+  --date-picker-padding: 24px 12px;
+  --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
+  --date-picker-border-radius: 12px;
+  --date-picker-border: 1px solid var(--color-surface-tertiary);
+
   --date-picker-day-width: 40px;
   --date-picker-day-height: 40px;
   --date-picker-day-padding: 8px 0;
   --date-picker-day-border-radius: 6px;
-  --date-picker-input-border-radius: 6px;
-  --date-picker-day-color-hover: var(--color-surface-text-secondary);
-  --date-picker-day-background-hover: var(--color-accent-tertiary);
-  --date-picker-month-border-radius: 12px;
-  --date-picker-container-border-color: var(--color-surface-tertiary);
-  --date-picker-container-background: var(--color-surface-primary);
-  --date-picker-container-padding: 24px 12px;
-  --date-picker-container-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
-  --date-picker-name-color: var(--color-surface-text);
-  --date-picker-name-size: 18px;
-  --date-picker-name-weight: 400;
-  --date-picker-selected-color: var(--color-accent-text-primary);
-  --date-picker-selected-weight: 400;
-  --date-picker-selected-background: var(--color-accent-primary);
-  --date-picker-selected-background-hover: var(--color-accent-primary-hover);
-  --date-picker-outside-color: var(--color-surface-text-quaternary);
-  --date-picker-weekend-color: var(--color-secondary-primary);
-  --date-picker-outside-weekend-color: var(--color-secondary-text-disabled);
+
+  --date-picker-day-hover-background: var(--color-accent-tertiary);
+  --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
+
+  --date-picker-day-range-background: var(--color-accent-tertiary);
+  --date-picker-day-range-text-color: var(--color-accent-text-secondary);
+  --date-picker-day-range-border-radius: 0;
+  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
+  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
+
+  --date-picker-day-today-background: var(--color-surface-secondary);
+  --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);
+  --date-picker-day-weekend-outside-text-color: var(--color-secondary-text-disabled);
+
+  --date-picker-day-selected-background: var(--color-accent-primary);
+  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
+
+  --date-picker-day-outside-background: var(--color-surface-primary);
+  --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);
 }

package/dist/css/components/Dropdown/Dropdown.css

@@ -57,5 +57,5 @@
         }
       }
     }
-}
+  }
 }

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

@@ -20,7 +20,29 @@
   &_set {
     &_float {
       width: 320px;
-      margin: 16px 24px;
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+      }
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_top {
+      width: 320px;
+      ^^&-wrapper {
+        padding: 12px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+      }
     }
   }
 }
@@ -28,9 +50,6 @@
   &_status {
     &_success {
       ^^&-wrapper {
-        border-radius: 8px;
-        @mixin elevation-8;
-        padding: 12px 16px;
         background: var(--color-success-primary);
         ^^^&-title {
           color: var(--color-success-text-secondary);
@@ -44,9 +63,6 @@
     }
     &_error {
       ^^&-wrapper {
-        border-radius: 8px;
-        @mixin elevation-8;
-        padding: 12px 16px;
         background: var(--color-error-primary);
         ^^^&-title {
           color: var(--color-error-text-secondary);
@@ -58,5 +74,18 @@
         }
       }
     }
+    &_warning {
+      ^^&-wrapper {
+        background: var(--color-primary-primary);
+        ^^^&-title {
+          color: var(--color-primary-text-primary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-primary-text-primary);
+          @mixin text-s;
+        }
+      }
+    }
   }
 }

package/dist/css/components/RadioButton/RadioButton.css

@@ -3,6 +3,11 @@
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
   column-gap: 4px;
+  &:hover {
+    .radio-button__state {
+      border-color: var(--radio-button-state-hover-border);
+    }
+  }
   &__item {
     position: relative;
     cursor: pointer;
@@ -97,3 +102,6 @@
     }
   }
 }
+:root {
+  --radio-button-state-hover-border: var(--color-surface-border-tertiary);
+}

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

@@ -21,6 +21,7 @@
         transition: left 0.3s ease, width 0.3s ease;
       }
       ^^&__item {
+        border-radius: 6px;
         min-width: 120px;
         position: relative;
         display: flex;

package/dist/css/components/Select/Select.css

@@ -262,7 +262,7 @@
     overflow: hidden;
     display: flex;
     flex: 1;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     &--is-multi {
       gap: 8px;

package/dist/css/components/Select/css/__value-container/select__value-container.css

@@ -4,7 +4,7 @@
     overflow: hidden;
     display: flex;
     flex: 1;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     &--is-multi {
       gap: 8px;

package/package.json

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