@itcase/ui 1.0.80 → 1.0.82

package/dist/components/Cell.js

@@ -3,8 +3,8 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var index = require('./Icon.js');
-var index$1 = require('./Text.js');
+var index$1 = require('./Icon.js');
+var index = require('./Text.js');
 var size = require('../constants/componentProps/size.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
@@ -42,16 +42,18 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    iconAfter,
-    iconAfterSize,
-    iconBefore,
-    iconBeforeSize,
-    iconBeforeBgFill,
-    iconBeforeFill,
-    iconBeforeStroke,
-    iconAfterBgFill,
-    iconAfterFill,
-    iconAfterStroke,
+    titleIcon,
+    titleIconSize,
+    titleIconSrc,
+    titleIconBgFill,
+    titleIconFill,
+    titleIconStroke,
+    valueIcon,
+    valueIconSize,
+    valueIconSrc,
+    valueIconBgFill,
+    valueIconFill,
+    valueIconStroke,
     isActive,
     isDisabled,
     set,
@@ -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, {
@@ -112,7 +114,7 @@ function Cell(props) {
     propsKey: 'bgShape'
   });
   const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'cell_direction_',
+    prefix: 'cell__wrapper_direction_',
     propsKey: 'direction'
   });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -120,70 +122,74 @@ 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}`, 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,
-    bgFill: iconBeforeBgFill,
-    fill: iconBeforeFill,
-    stroke: iconBeforeStroke
-  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass)
+  }, title && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__data"
-  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "cell__title",
     size: titleTextSize,
     tag: titleTag,
     textColor: titleTextColor,
     textWeight: titleTextWeight
-  }, title), value && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    bgFill: titleIconBgFill,
+    className: "cell__icon",
+    iconFill: titleIconFill,
+    iconSize: titleIconSize,
+    iconStroke: titleIconStroke,
+    imageSrc: titleIconSrc,
+    SvgImage: titleIcon
+  })), value && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__data"
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "cell__value",
     size: valueTextSize,
     tag: valueTag,
     textColor: valueTextColor,
     textWeight: valueTextWeight
-  }, value)), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    className: "cell__icon-after",
-    SvgImage: iconAfter,
-    size: iconAfterSize,
-    bgFill: iconAfterBgFill,
-    fill: iconAfterFill,
-    stroke: iconAfterStroke
-  })), after && /*#__PURE__*/React__default.default.createElement("div", {
+  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    bgFill: valueIconBgFill,
+    className: "cell__icon",
+    iconFill: valueIconFill,
+    iconSize: valueIconSize,
+    iconStroke: valueIconStroke,
+    imageSrc: valueIconSrc,
+    SvgImage: valueIcon
+  }))), 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,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  titleIcon: PropTypes__default.default.any,
+  titleIconBgFill: PropTypes__default.default.string,
+  titleIconFill: PropTypes__default.default.string,
+  titleIconSize: PropTypes__default.default.string,
+  titleIconStroke: PropTypes__default.default.string,
+  valueIcon: PropTypes__default.default.any,
+  valueIconBgFill: PropTypes__default.default.string,
+  valueIconFill: PropTypes__default.default.string,
+  valueIconSize: PropTypes__default.default.string,
+  valueIconStroke: PropTypes__default.default.string,
+  isActive: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
   title: PropTypes__default.default.string,
-  titleTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
   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,
-  iconAfter: PropTypes__default.default.any,
-  iconAfterSize: PropTypes__default.default.string,
-  iconBefore: PropTypes__default.default.any,
-  iconBeforeSize: PropTypes__default.default.string,
-  iconBeforeBgFill: PropTypes__default.default.string,
-  iconBeforeFill: 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
+  onMouseEnter: PropTypes__default.default.func
 };
 Cell.defaultProps = {
   isDisabled: false,
@@ -212,168 +218,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": {
+    "titleIcon": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "any"
       },
       "required": false
     },
-    "valueTextSize": {
+    "titleIconBgFill": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "PropTypes.oneOf(sizeProps)"
+        "name": "string"
       },
       "required": false
     },
-    "valueTextColor": {
+    "titleIconFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "title": {
+    "titleIconSize": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "titleTextSize": {
+    "titleIconStroke": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "PropTypes.oneOf(sizeProps)"
+        "name": "string"
       },
       "required": false
     },
-    "titleTextColor": {
+    "valueIcon": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "any"
       },
       "required": false
     },
-    "onClick": {
+    "valueIconBgFill": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "string"
       },
       "required": false
     },
-    "onMouseEnter": {
+    "valueIconFill": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "string"
       },
       "required": false
     },
-    "iconAfter": {
+    "valueIconSize": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "string"
       },
       "required": false
     },
-    "iconAfterSize": {
+    "valueIconStroke": {
       "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/ContextMenu.js

@@ -197,7 +197,7 @@ function ContextMenuItem(props) {
     propsKey: 'fillHover'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass),
+    className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass, onClick && 'cursor_type_pointer'),
     id: id,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {

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,28 @@ function DatePickerInput(props) {
     inputProps,
     datePickerProps,
     onChange,
-    endValue
+    endValue,
+    labelTextSize,
+    clearLabelTextColorHover,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconItemFillHover,
+    clearIconFillSize,
+    clearIconItemFill,
+    clearIconShape,
+    clearIconSize,
+    clearIconSrc,
+    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 +10156,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 +10171,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 +10198,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 +10220,36 @@ 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,
+      clearIconSrc: clearIconSrc,
+      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 +10266,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 +10278,49 @@ 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,
+    clearIconSrc
+  } = 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 || clearIconSrc) && /*#__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,
+    imageSrc: clearIconSrc,
+    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

@@ -51,7 +51,9 @@ function Label(props) {
     before,
     after,
     dataTour,
-    type
+    type,
+    cursor,
+    onClick
   } = props;
   const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
@@ -89,15 +91,16 @@ function Label(props) {
     styles: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`),
+    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
-    style: labelStyles
+    style: labelStyles,
+    onClick: onClick
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__inner"
   }, 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", {