@itcase/ui 1.0.80 → 1.0.81

package/dist/components/Cell.js

@@ -44,8 +44,10 @@ function Cell(props) {
     className,
     iconAfter,
     iconAfterSize,
+    iconAfterSrc,
     iconBefore,
     iconBeforeSize,
+    iconBeforeSrc,
     iconBeforeBgFill,
     iconBeforeFill,
     iconBeforeStroke,
@@ -96,15 +98,15 @@ function Cell(props) {
     propsKey: 'bgFill'
   });
   const bgFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
+    prefix: 'fill_hover_',
     propsKey: 'bgFillHover'
   });
   const bgFillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
+    prefix: 'fill_active_',
     propsKey: 'bgFillActive'
   });
   const bgFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
+    prefix: 'fill_disabled_',
     propsKey: 'bgFillDisabled'
   });
   const bgShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -120,20 +122,20 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, directionClass, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass),
     onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, size && `cell_size_${size}`, set && `cell_set_${set}`, directionClass, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
+    onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__before"
   }, before), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('cell__wrapper', fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass)
-  }, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    className: "cell__icon-before",
-    SvgImage: iconBefore,
-    size: iconBeforeSize,
+  }, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     bgFill: iconBeforeBgFill,
+    className: "cell__icon-before",
     fill: iconBeforeFill,
-    stroke: iconBeforeStroke
+    size: iconBeforeSize,
+    stroke: iconBeforeStroke,
+    SvgImage: iconBefore
   }), /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__data"
   }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
@@ -148,42 +150,42 @@ function Cell(props) {
     tag: valueTag,
     textColor: valueTextColor,
     textWeight: valueTextWeight
-  }, value)), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    className: "cell__icon-after",
-    SvgImage: iconAfter,
-    size: iconAfterSize,
+  }, value)), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     bgFill: iconAfterBgFill,
+    className: "cell__icon-after",
     fill: iconAfterFill,
-    stroke: iconAfterStroke
+    size: iconAfterSize,
+    stroke: iconAfterStroke,
+    SvgImage: iconAfter
   })), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__after"
   }, after));
 }
 Cell.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
-  value: PropTypes__default.default.string,
-  valueTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
-  valueTextColor: PropTypes__default.default.string,
-  title: PropTypes__default.default.string,
-  titleTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
-  titleTextColor: PropTypes__default.default.string,
-  onClick: PropTypes__default.default.func,
-  onMouseEnter: PropTypes__default.default.func,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
   iconAfter: PropTypes__default.default.any,
+  iconAfterBgFill: PropTypes__default.default.string,
+  iconAfterFill: PropTypes__default.default.string,
   iconAfterSize: PropTypes__default.default.string,
+  iconAfterStroke: PropTypes__default.default.string,
   iconBefore: PropTypes__default.default.any,
-  iconBeforeSize: PropTypes__default.default.string,
   iconBeforeBgFill: PropTypes__default.default.string,
   iconBeforeFill: PropTypes__default.default.string,
+  iconBeforeSize: PropTypes__default.default.string,
   iconBeforeStroke: PropTypes__default.default.string,
-  iconAfterBgFill: PropTypes__default.default.string,
-  iconAfterFill: PropTypes__default.default.string,
-  iconAfterStroke: PropTypes__default.default.string,
   isActive: PropTypes__default.default.bool,
-  isDisabled: PropTypes__default.default.bool
+  isDisabled: PropTypes__default.default.bool,
+  title: PropTypes__default.default.string,
+  titleTextColor: PropTypes__default.default.string,
+  titleTextSize: PropTypes__default.default.oneOf(size.default),
+  value: PropTypes__default.default.string,
+  valueTextColor: PropTypes__default.default.string,
+  valueTextSize: PropTypes__default.default.oneOf(size.default),
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func
 };
 Cell.defaultProps = {
   isDisabled: false,
@@ -212,168 +214,168 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "children": {
+    "after": {
       "description": "",
       "type": {
         "name": "any"
       },
       "required": false
     },
-    "className": {
+    "before": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "any"
       },
       "required": false
     },
-    "after": {
+    "children": {
       "description": "",
       "type": {
         "name": "any"
       },
       "required": false
     },
-    "before": {
+    "className": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "string"
       },
       "required": false
     },
-    "value": {
+    "iconAfter": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "any"
       },
       "required": false
     },
-    "valueTextSize": {
+    "iconAfterBgFill": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "PropTypes.oneOf(sizeProps)"
+        "name": "string"
       },
       "required": false
     },
-    "valueTextColor": {
+    "iconAfterFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "title": {
+    "iconAfterSize": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "titleTextSize": {
+    "iconAfterStroke": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "PropTypes.oneOf(sizeProps)"
+        "name": "string"
       },
       "required": false
     },
-    "titleTextColor": {
+    "iconBefore": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "any"
       },
       "required": false
     },
-    "onClick": {
+    "iconBeforeBgFill": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "string"
       },
       "required": false
     },
-    "onMouseEnter": {
+    "iconBeforeFill": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "string"
       },
       "required": false
     },
-    "iconAfter": {
+    "iconBeforeSize": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "string"
       },
       "required": false
     },
-    "iconAfterSize": {
+    "iconBeforeStroke": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBefore": {
+    "isActive": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "bool"
       },
       "required": false
     },
-    "iconBeforeSize": {
+    "title": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBeforeBgFill": {
+    "titleTextColor": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBeforeFill": {
+    "titleTextSize": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
       },
       "required": false
     },
-    "iconBeforeStroke": {
+    "value": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconAfterBgFill": {
+    "valueTextColor": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconAfterFill": {
+    "valueTextSize": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
       },
       "required": false
     },
-    "iconAfterStroke": {
+    "onClick": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "func"
       },
       "required": false
     },
-    "isActive": {
+    "onMouseEnter": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "func"
       },
       "required": false
     }

package/dist/components/Choice.js

@@ -78,7 +78,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "choice__wrapper"
   }, options?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('choice__item', borderColorClass, borderWidthClass, borderTypeClass, fillHoverClass, item.value === active.value && fillActiveClass, item.value === active.value && 'choice__item_active'),
+    className: clsx__default.default('choice__item', fillHoverClass, item.value === active.value && fillActiveClass, item.value === active.value && 'choice__item_active'),
     key: item.value,
     ref: optionsRefs.get(item.value)
   }, /*#__PURE__*/React__default.default.createElement("input", {

package/dist/components/DatePicker.js

@@ -9,8 +9,8 @@ var ReactDOM = require('react-dom');
 var index = require('./Input.js');
 var index$4 = require('./Text.js');
 var index$1 = require('./Label.js');
-var index$2 = require('./Button.js');
-var index$3 = require('./Icon.js');
+var index$3 = require('./Button.js');
+var index$2 = require('./Icon.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -10105,12 +10105,27 @@ function DatePickerInput(props) {
     inputProps,
     datePickerProps,
     onChange,
-    endValue
+    endValue,
+    labelTextSize,
+    clearLabelTextColorHover,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconItemFillHover,
+    clearIconFillSize,
+    clearIconItemFill,
+    clearIconShape,
+    clearIconSize,
+    clearIconStroke,
+    clearLabel,
+    clearLabelTextColor,
+    clearLabelTextSize
   } = props;
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
+  const datepickerRef = React.useRef(null);
   const start = React.useMemo(() => {
     if (value) {
       if (typeof value === 'string') {
@@ -10140,7 +10155,7 @@ function DatePickerInput(props) {
     setEndDate(newEndDate);
   };
   const renderDayContents = (day, date) => {
-    return /*#__PURE__*/React__namespace.default.createElement(index$2.Button, {
+    return /*#__PURE__*/React__namespace.default.createElement(index$3.Button, {
       className: "react-datepicker__day-button",
       label: date.getDate(),
       labelTextColor: datePickerProps.dayTextColor,
@@ -10155,7 +10170,7 @@ function DatePickerInput(props) {
     increaseMonth
   }) => /*#__PURE__*/React__namespace.default.createElement("div", {
     className: "react-datepicker__header--div"
-  }, datePickerProps.iconLeft && /*#__PURE__*/React__namespace.default.createElement(index$3.Icon, {
+  }, datePickerProps.iconLeft && /*#__PURE__*/React__namespace.default.createElement(index$2.Icon, {
     className: "react-datepicker__icon",
     fill: datePickerProps.iconFill,
     fillHover: datePickerProps.iconFillHover,
@@ -10182,7 +10197,7 @@ function DatePickerInput(props) {
     textWeight: datePickerProps.yearTextWeight
   }, monthDate.toLocaleString('ru-RU', {
     year: 'numeric'
-  }))), datePickerProps.iconRight && /*#__PURE__*/React__namespace.default.createElement(index$3.Icon, {
+  }))), datePickerProps.iconRight && /*#__PURE__*/React__namespace.default.createElement(index$2.Icon, {
     className: "react-datepicker__icon",
     fill: datePickerProps.iconFill,
     fillHover: datePickerProps.iconFillHover,
@@ -10204,19 +10219,35 @@ function DatePickerInput(props) {
     className: clsx__default.default(className, 'datepicker', datePickerProps?.monthsShown && 'datepicker_type_multiple-months', datePickerProps?.customTimeInput && 'datepicker_type_button', widthClass)
   }, /*#__PURE__*/React__namespace.default.createElement(tr, Object.assign({
     customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerCustomInput, {
+      clearIcon: clearIcon,
+      clearIconFill: clearIconFill,
+      clearIconFillHover: clearIconFillHover,
+      clearIconFillSize: clearIconFillSize,
+      clearIconItemFill: clearIconItemFill,
+      clearIconItemFillHover: clearIconItemFillHover,
+      clearIconShape: clearIconShape,
+      clearIconSize: clearIconSize,
+      clearIconStroke: clearIconStroke,
+      clearLabel: clearLabel,
+      clearLabelTextColor: clearLabelTextColor,
+      clearLabelTextColorHover: clearLabelTextColorHover,
+      clearLabelTextSize: clearLabelTextSize,
+      datepickerRef: datepickerRef,
       inputProps: inputProps,
-      isClearable: datePickerProps.isClearable
+      isClearable: datePickerProps.isClearable,
+      labelTextSize: labelTextSize
     }),
     endDate: datePickerProps?.selectsRange && endDate,
     locale: ru,
     minDate: datePickerProps?.disablePastDays ? new Date() : null,
+    ref: datepickerRef,
     renderCustomHeader: renderCustomHeader,
     renderDayContents: renderDayContents,
     selected: startDate,
     startDate: startDate,
     onChange: datePickerProps?.selectsRange ? handleChange : onChange
   }, datePickerProps, {
-    // Important
+    // Important for use custom clear button
     isClearable: false
   })));
 }
@@ -10233,10 +10264,10 @@ const DatePickerCustomInput = /*#__PURE__*/React__namespace.default.forwardRef((
     }
     return '';
   }, [value]);
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(index.Input, Object.assign({}, inputProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(index.Input, Object.assign({}, props, inputProps, {
     ref: ref,
     value: multipleValue
-  })), isClearable && /*#__PURE__*/React__namespace.default.createElement(DatePickerClearButton, null));
+  })), isClearable && /*#__PURE__*/React__namespace.default.createElement(DatePickerClearButton, props));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 DatePickerInput.propTypes = {
@@ -10245,11 +10276,47 @@ DatePickerInput.propTypes = {
   inputProps: PropTypes__default.default.object,
   onChange: PropTypes__default.default.func
 };
-const DatePickerClearButton = /*#__PURE__*/React__namespace.default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(index$1.Label, {
-    label: "Clear"
-  });
-});
+function DatePickerClearButton(props, ref) {
+  const {
+    datepickerRef,
+    clearLabel,
+    clearLabelTextSize,
+    clearLabelTextColor,
+    clearIconFill,
+    clearIconFillHover,
+    clearLabelTextColorHover,
+    clearIconItemFillHover,
+    clearIconFillSize,
+    clearIconItemFill,
+    clearIconShape,
+    clearIconSize,
+    clearIconStroke,
+    clearIcon
+  } = props;
+  const onClick = React.useCallback(event => {
+    datepickerRef?.current?.onClearClick(event);
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, clearLabel && /*#__PURE__*/React__namespace.default.createElement(index$1.Label, {
+    className: clsx__default.default('react-datepicker__clear-label', onClick && 'cursor_type_pointer'),
+    label: clearLabel,
+    labelTextSize: clearLabelTextSize,
+    labelTextColor: clearLabelTextColor,
+    labelTextColorHover: clearLabelTextColorHover,
+    onClick: onClick
+  }), clearIcon && /*#__PURE__*/React__namespace.default.createElement(index$2.Icon, {
+    className: clsx__default.default('react-datepicker__clear-icon', onClick && 'cursor_type_pointer'),
+    fill: clearIconFill,
+    fillHover: clearIconFillHover,
+    fillSize: clearIconFillSize,
+    iconFill: clearIconItemFill,
+    iconFillHover: clearIconItemFillHover,
+    shape: clearIconShape,
+    size: clearIconSize,
+    stroke: clearIconStroke,
+    SvgImage: clearIcon,
+    onClick: onClick
+  }));
+}
 DatePickerClearButton.displayName = 'DatePickerClearButton';
 DatePickerInput.__docgenInfo = {
   "description": "",

package/dist/components/Icon.js

@@ -190,10 +190,10 @@ Icon.propTypes = {
   sizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
   sizeMobile: PropTypes__default.default.oneOf(iconSize.default),
   sizeTablet: PropTypes__default.default.oneOf(iconSize.default),
-  stroke: PropTypes__default.default.oneOf(strokeColor.default),
-  strokeDesktop: PropTypes__default.default.oneOf(strokeColor.default),
-  strokeMobile: PropTypes__default.default.oneOf(strokeColor.default),
-  strokeTablet: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStroke: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStrokeDesktop: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStrokeMobile: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStrokeTablet: PropTypes__default.default.oneOf(strokeColor.default),
   width: PropTypes__default.default.string
 };
 Icon.defaultProps = {
@@ -442,7 +442,7 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
-    "stroke": {
+    "iconStroke": {
       "description": "",
       "type": {
         "name": "enum",
@@ -451,7 +451,7 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
-    "strokeDesktop": {
+    "iconStrokeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
@@ -460,7 +460,7 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
-    "strokeMobile": {
+    "iconStrokeMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -469,7 +469,7 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
-    "strokeTablet": {
+    "iconStrokeTablet": {
       "description": "",
       "type": {
         "name": "enum",

package/dist/components/Label.js

@@ -97,7 +97,7 @@ function Label(props) {
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "label__label",
     textColor: labelTextColor || labelConfig.appearance[appearance] && labelConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textColorHoverClass: labelTextColorHover || labelConfig.appearance[appearance] && labelConfig.appearance[appearance].labelTextColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textColorHover: labelTextColorHover || labelConfig.appearance[appearance] && labelConfig.appearance[appearance].labelTextColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
     size: labelTextSize,
     textWrap: labelTextWrap
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/MenuItem.js

@@ -150,8 +150,8 @@ function MenuItem(props) {
     className: "menu-item__label",
     size: textSize,
     textColor: textColor || appearance && menuItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textColorActive: isActive && textColorActive,
-    textColorHover: textColorHover,
+    textColorActive: isActive && (textColorActive || appearance && menuItemConfig.appearance[appearance].textColorActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    textColorHover: textColorHover || appearance && menuItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textGradient: textGradient,
     textStyle: textStyle,
     textWeight: textWeight,