@itcase/ui 1.1.4 → 1.1.5

package/dist/components/DadataHintField.js

@@ -1098,7 +1098,7 @@ function DadataHintField(props) {
   const dadataInputProps = React.useMemo(() => {
     return {
       ...inputProps,
-      className: clsx__default.default('react-dadata__input', meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
+      className: clsx__default.default('react-dadata__input', meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${meta.error.key || 'error'}`),
       // https://www.npmjs.com/package/react-dadata
       // "Свойство value игнорируется."
       // value: input.value,

package/dist/components/Input.js

@@ -110,13 +110,13 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   });
   return /*#__PURE__*/React__default.default.createElement("input", {
     className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance] && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance] && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance] && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
-    type: type,
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    disabled: isDisabled,
     id: id,
     index: index,
-    ref: ref,
-    disabled: isDisabled,
     placeholder: placeholder,
-    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    ref: ref,
+    type: type,
     value: value,
     onBlur: onBlur,
     onChange: onChange,
@@ -125,16 +125,16 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   });
 });
 Input.propTypes = {
-  id: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
   className: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  isDisabled: PropTypes__default.default.bool,
   placeholder: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
   value: PropTypes__default.default.string,
-  checked: PropTypes__default.default.bool,
-  isDisabled: PropTypes__default.default.bool,
   onBlur: PropTypes__default.default.func,
   onChange: PropTypes__default.default.func,
-  onKeyDown: PropTypes__default.default.func,
-  type: PropTypes__default.default.string
+  onKeyDown: PropTypes__default.default.func
 };
 Input.defaultProps = {
   size: 'm',
@@ -163,10 +163,10 @@ Input.__docgenInfo = {
       },
       "required": false
     },
-    "id": {
+    "checked": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },
@@ -177,31 +177,31 @@ Input.__docgenInfo = {
       },
       "required": false
     },
-    "placeholder": {
+    "id": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "value": {
+    "isDisabled": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },
-    "checked": {
+    "placeholder": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false
     },
-    "isDisabled": {
+    "value": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false
     },

package/dist/components/Radio.js

@@ -41,21 +41,20 @@ const radioConfig = {
 function Radio(props) {
   const {
     appearance,
-    state,
-    id,
-    className,
     checked,
-    onChange,
-    disabled,
+    className,
+    desc,
+    descTextColor,
     descTextSize,
     descTextWidth,
-    descTextColor,
-    desc,
+    disabled,
+    id,
     label,
+    labelTextColor,
     labelTextSize,
     labelTextWidth,
-    labelTextColor,
-    tag: Tag
+    tag: Tag,
+    onChange
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -98,8 +97,8 @@ function Radio(props) {
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    htmlFor: id,
-    className: clsx__default.default(className, 'radio', fillClass, shapeClass)
+    className: clsx__default.default(className, 'radio', fillClass, shapeClass),
+    htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance] && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -126,7 +125,21 @@ function Radio(props) {
   }, desc));
 }
 Radio.propTypes = {
-  className: PropTypes__default.default.string
+  appearance: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  className: PropTypes__default.default.string,
+  desc: PropTypes__default.default.string,
+  descTextColor: PropTypes__default.default.string,
+  descTextSize: PropTypes__default.default.string,
+  descTextWidth: PropTypes__default.default.string,
+  disabled: PropTypes__default.default.bool,
+  id: PropTypes__default.default.string,
+  label: PropTypes__default.default.string,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
+  labelTextWidth: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func
 };
 Radio.defaultProps = {
   shape: 'circular',
@@ -149,6 +162,24 @@ Radio.__docgenInfo = {
         "value": "'label'",
         "computed": false
       },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
       "required": false
     },
     "className": {
@@ -157,6 +188,83 @@ Radio.__docgenInfo = {
         "name": "string"
       },
       "required": false
+    },
+    "desc": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextWidth": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "disabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "label": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextWidth": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/dist/components/Segmented.js

@@ -76,7 +76,7 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
   });
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'borderColor'
+    propsKey: 'inputBorderColor'
   });
   const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',

package/dist/components/Select.js

@@ -8223,19 +8223,37 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
       }
     };
   }, []);
+  const selectAppearanceItem = selectConfig.appearance[appearance] || {};
   return /*#__PURE__*/React__namespace.default.createElement(SelectComponent, {
-    className: clsx__default.default(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass || selectConfig.appearance[appearance]?.size && `select_size_${selectConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
-    classNamePrefix: "select",
-    styles: clearStyle,
     after: after,
     badgeAppearance: badgeAppearance,
     badgeSize: badgeSize,
     badgeTextSize: badgeTextSize,
     before: before,
+    className: clsx__default.default(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass || selectAppearanceItem.size && `select_size_${selectAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
+    classNamePrefix: "select",
     clearIcon: clearIcon,
     clearIconFill: clearIconFill,
     clearIconStroke: clearIconStroke,
     closeMenuOnSelect: closeMenuOnSelect ?? false,
+    components: {
+      Control: SelectControl,
+      IndicatorsContainer: SelectIndicatorsContainer,
+      ClearIndicator: SelectClearIndicator,
+      DropdownIndicator: SelectDropdownIndicator,
+      IndicatorSeparator: () => null,
+      Input: SelectInput,
+      Menu: SelectMenu,
+      MultiValueContainer: SelectMultiValueContainer,
+      MultiValueRemove: SelectMultiValueRemove,
+      MultiValueLabel: SelectMultiValueLabel,
+      Option: SelectOption,
+      SingleValue: SelectSingleValue,
+      Placeholder: SelectPlaceholder,
+      ValueContainer: SelectValueContainer,
+      NoOptionsMessage: SelectNoOptions,
+      GroupHeading: SelectGroupHeading
+    },
     defaultValue: initialValue,
     dividerDirection: dividerDirection,
     dividerFill: dividerFill,
@@ -8243,7 +8261,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     dropdownIcon: dropdownIcon,
     dropdownIconFill: dropdownIconFill,
     dropdownIconStroke: dropdownIconStroke,
-    elevation: elevation || selectConfig.appearance[appearance].elevation,
+    elevation: elevation || selectAppearanceItem.elevation,
     filterOption: filterOption,
     headingFill: headingFillClass,
     headingFillHover: headingFillHoverClass,
@@ -8253,13 +8271,16 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     hideSelectedOptions: hideSelectedOptions,
     inputAfter: inputAfter,
     inputBefore: inputBefore,
-    inputBorderColor: inputBorderColorClass || selectConfig.appearance[appearance]?.inputBorderColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputBorderColorHover: inputBorderColorHoverClass || selectConfig.appearance[appearance]?.inputBorderColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    inputBorderColor: inputBorderColorClass || selectAppearanceItem.inputBorderColor && selectAppearanceItem.inputBorderColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    inputBorderColorHover: inputBorderColorHoverClass || selectAppearanceItem.inputBorderColorHover && selectAppearanceItem.inputBorderColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
     inputCaretColor: inputCaretColorClass,
-    inputFill: inputFillClass || selectConfig.appearance[appearance]?.inputFill && `select__control_fill_${selectConfig.appearance[appearance].inputFill}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputShape: inputShapeClass || selectConfig.appearance[appearance]?.inputShape && `select__control_shape_${selectConfig.appearance[appearance].inputShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputTextColor: inputTextColorClass || selectConfig.appearance[appearance].inputTextColor,
-    inputTextSize: inputTextSizeClass || selectConfig.appearance[appearance].inputTextSize,
+    inputFill: inputFillClass || selectAppearanceItem.inputFill && `select__control_fill_${selectAppearanceItem.inputFill}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    inputShape: inputShapeClass || selectAppearanceItem.inputShape && `select__control_shape_${selectAppearanceItem.inputShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    inputTextColor: inputTextColorClass || selectAppearanceItem.inputTextColor,
+    inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize,
+    isClearable: isClearable,
+    isMulti: isMulti,
+    isSearchable: isSearchable,
     menuAfter: menuAfter,
     menuBefore: menuBefore,
     menuItemSize: menuItemSize,
@@ -8272,50 +8293,30 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     noOptionBorder: optionBorderClass,
     noOptionBorderType: optionBorderTypeClass,
     noOptionsFill: optionFillClass,
-    noOptionsText: noOptionsText || selectConfig.appearance[appearance].noOptionsText,
-    noOptionsTextColor: noOptionsTextColorClass || selectConfig.appearance[appearance].noOptionsTextColor,
-    noOptionsTextSize: noOptionsTextSizeClass || selectConfig.appearance[appearance].noOptionsTextSize,
+    noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText,
+    noOptionsTextColor: noOptionsTextColorClass || selectAppearanceItem.noOptionsTextColor,
+    noOptionsTextSize: noOptionsTextSizeClass || selectAppearanceItem.noOptionsTextSize,
     openMenuOnClick: openMenuOnClick,
     optionAfter: optionAfter,
     optionBefore: optionBefore,
     optionBorder: optionBorderClass,
     optionBorderType: optionBorderTypeClass,
-    optionFill: optionFillClass || selectConfig.appearance[appearance]?.optionFill && `fill_${selectConfig.appearance[appearance].optionFill}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    optionFillHover: optionFillHoverClass || selectConfig.appearance[appearance]?.optionFillHover && `fill_hover_${selectConfig.appearance[appearance].optionFillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    optionFill: optionFillClass || selectAppearanceItem.optionFill && `fill_${selectAppearanceItem.optionFill}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    optionFillHover: optionFillHoverClass || selectAppearanceItem.optionFillHover && `fill_hover_${selectAppearanceItem.optionFillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
     options: options,
     optionSelected: optionSelected,
     optionShape: optionShapeClass,
-    optionTextColor: optionTextColorClass || selectConfig.appearance[appearance].optionTextColor,
-    optionTextSize: optionTextSizeClass || selectConfig.appearance[appearance].optionTextSize,
-    placeholder: placeholder || selectConfig.appearance[appearance].placeholder,
-    placeholderTextColor: placeholderTextColor || selectConfig.appearance[appearance].placeholderTextColor,
-    placeholderTextSize: placeholderTextSize || selectConfig.appearance[appearance].placeholderTextSize,
+    optionTextColor: optionTextColorClass || selectAppearanceItem.optionTextColor,
+    optionTextSize: optionTextSizeClass || selectAppearanceItem.optionTextSize,
+    placeholder: placeholder || selectAppearanceItem.placeholder,
+    placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor,
+    placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize,
     ref: selectRef,
     set: set,
-    showDivider: showDivider,
     showBadge: showBadge,
+    showDivider: showDivider,
+    styles: clearStyle,
     value: value,
-    components: {
-      Control: SelectControl,
-      IndicatorsContainer: SelectIndicatorsContainer,
-      ClearIndicator: SelectClearIndicator,
-      DropdownIndicator: SelectDropdownIndicator,
-      IndicatorSeparator: () => null,
-      Input: SelectInput,
-      Menu: SelectMenu,
-      MultiValueContainer: SelectMultiValueContainer,
-      MultiValueRemove: SelectMultiValueRemove,
-      MultiValueLabel: SelectMultiValueLabel,
-      Option: SelectOption,
-      SingleValue: SelectSingleValue,
-      Placeholder: SelectPlaceholder,
-      ValueContainer: SelectValueContainer,
-      NoOptionsMessage: SelectNoOptions,
-      GroupHeading: SelectGroupHeading
-    },
-    isClearable: isClearable,
-    isMulti: isMulti,
-    isSearchable: isSearchable,
     onChange: onChange
   });
 });

package/dist/css/components/Input/Input.css

@@ -36,6 +36,14 @@
       background: var(--input-state-focus-background);
       border: solid 1px var(--input-state-focus-border);
     }
+    &_required {
+      background: var(--input-state-required-background);
+      border: solid 1px var(--input-state-required-border);
+    }
+    &_custom {
+      background: var(--input-state-custom-background);
+      border: solid 1px var(--input-state-custom-border);
+    }
   }
 }
 .input {

package/dist/css/components/Title/Title.css

@@ -1,46 +1,4 @@
 .title {}
-.title {
-  &_size_h1 {
-    @mixin h1;
-    padding: 0;
-    margin: 0;
-  }
-}
-.title {
-  &_size_h2 {
-    @mixin h2;
-    padding: 0;
-    margin: 0;
-  }
-}
-.title {
-  &_size_h3 {
-    @mixin h3;
-    padding: 0;
-    margin: 0;
-  }
-}
-.title {
-  &_size_h4 {
-    @mixin h4;
-    padding: 0;
-    margin: 0;
-  }
-}
-.title {
-  &_size_h5 {
-    @mixin h5;
-    padding: 0;
-    margin: 0;
-  }
-}
-.title {
-  &_size_h6 {
-    @mixin h6;
-    padding: 0;
-    margin: 0;
-  }
-}
 .title.title {
   &_mode {
     &_skeleton {
@@ -65,39 +23,20 @@
     background-position: -200%;
   }
 }
-.title {
-  &&_type {
-    &_accent {
-      color: var(--color-accent-text-secondary);
+.title_size {
+  @each $size in h1, h2, h3, h4, h5, h6 {
+    &_$(size) {
+      padding: 0;
+      margin: 0;
+      @mixin $(size);
     }
   }
 }
 .title {
   &&_type {
-    &_primary {
-      color: var(--color-primary-text-secondary);
-    }
-  }
-}
-.title {
-  &&_type {
-    &_secondary {
-      color: var(--color-secondary-text-secondary);
-    }
-  }
-}
-.title {
-  &&_type {
-    &_tertiary {
-      color: var(--color-tertiary-text-tertiary);
-    }
-  }
-}
-.title {
-  &.text-style {
-    &_italic {
-      ^^&__wrapper {
-        font-style: italic;
+    @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      &_$(type) {
+        color: var(--color-$(type)-text-$(type));
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -55,6 +55,7 @@
     "react-dom": "^18.2.0",
     "react-inlinesvg": "^4.1.3",
     "react-modern-drawer": "^1.2.2",
+    "react-datepicker": "^6.2.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
@@ -121,7 +122,6 @@
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.2.5",
-    "react-datepicker": "^6.2.0",
     "rollup": "^4.12.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",