@itcase/ui 1.0.79 → 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/CookiesWarning.js

@@ -33,10 +33,10 @@ require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Loader.js');
+require('../constants/componentProps/width.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/stacking.js');
 require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/width.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');

package/dist/components/DatePicker.js

@@ -7,8 +7,9 @@ var _commonjsHelpers = require('../_commonjsHelpers-rI13D0F7.js');
 var defineProperty = require('../defineProperty-ujK-k7aM.js');
 var ReactDOM = require('react-dom');
 var index = require('./Input.js');
-var index$3 = require('./Text.js');
-var index$1 = require('./Button.js');
+var index$4 = require('./Text.js');
+var index$1 = require('./Label.js');
+var index$3 = require('./Button.js');
 var index$2 = require('./Icon.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
@@ -27,16 +28,17 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/shape.js');
 require('./Loader.js');
 require('./Link.js');
-require('../constants/componentProps/fill.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
+require('../constants/componentProps/width.js');
 require('react-inlinesvg');
 require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -10103,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') {
@@ -10138,7 +10155,7 @@ function DatePickerInput(props) {
     setEndDate(newEndDate);
   };
   const renderDayContents = (day, date) => {
-    return /*#__PURE__*/React__namespace.default.createElement(index$1.Button, {
+    return /*#__PURE__*/React__namespace.default.createElement(index$3.Button, {
       className: "react-datepicker__day-button",
       label: date.getDate(),
       labelTextColor: datePickerProps.dayTextColor,
@@ -10166,14 +10183,14 @@ function DatePickerInput(props) {
     onClick: decreaseMonth
   }), /*#__PURE__*/React__namespace.default.createElement("div", {
     className: "react-datepicker__data"
-  }, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  }, /*#__PURE__*/React__namespace.default.createElement(index$4.Text, {
     className: "react-datepicker__month",
     size: datePickerProps.monthTextSize,
     textColor: datePickerProps.monthTextColor,
     textWeight: datePickerProps.monthTextWeight
   }, monthDate.toLocaleString('ru-RU', {
     month: 'long'
-  })), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  })), /*#__PURE__*/React__namespace.default.createElement(index$4.Text, {
     className: "react-datepicker__year",
     size: datePickerProps.yearTextSize,
     textColor: datePickerProps.yearTextColor,
@@ -10201,41 +10218,106 @@ function DatePickerInput(props) {
   return /*#__PURE__*/React__namespace.default.createElement("div", {
     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(DatePickerСustomInput, Object.assign({}, inputProps, {
-      inputProps: inputProps
-    })),
+    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,
+      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)));
+  }, datePickerProps, {
+    // Important for use custom clear button
+    isClearable: false
+  })));
 }
-const DatePickerСustomInput = /*#__PURE__*/React__namespace.default.forwardRef((props, ref) => {
+const DatePickerCustomInput = /*#__PURE__*/React__namespace.default.forwardRef((props, ref) => {
   const {
+    isClearable,
     value,
     inputProps
   } = props;
-  const getValue = React.useCallback(() => {
-    const twoDates = value.split(' - ');
-    return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+  const multipleValue = React.useMemo(() => {
+    if (value) {
+      const twoDates = value.split(' - ');
+      return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+    }
+    return '';
   }, [value]);
-  return /*#__PURE__*/React__namespace.default.createElement(index.Input, Object.assign({}, props, {
-    placeholder: inputProps.placeholder,
+  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: getValue()
-  }));
+    value: multipleValue
+  })), isClearable && /*#__PURE__*/React__namespace.default.createElement(DatePickerClearButton, props));
 });
-DatePickerСustomInput.displayName = 'DatePickerСustomInput';
+DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 DatePickerInput.propTypes = {
   className: PropTypes__default.default.string,
   datePickerProps: PropTypes__default.default.object,
   inputProps: PropTypes__default.default.object,
   onChange: PropTypes__default.default.func
 };
+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": "",
   "methods": [],