@itcase/ui 1.0.42 → 1.0.44

package/dist/components/Choice.js

@@ -11,7 +11,7 @@ require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -27,79 +27,73 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var Choice = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
-  var name = props.name,
-    className = props.className,
-    type = props.type,
-    options = props.options,
-    active = props.active,
-    setActiveSegment = props.setActiveSegment,
-    size = props.size,
-    labelTextColor = props.labelTextColor,
-    labelTextActiveColor = props.labelTextActiveColor,
-    labelTextSize = props.labelTextSize;
-  var controlRef = React.useRef(null);
-  var optionsRefs = React.useMemo(function () {
-    return new Map(options.map(function (item) {
-      return [item.value, /*#__PURE__*/React.createRef()];
-    }));
-  }, [options]);
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
+  const {
+    name,
+    className,
+    type,
+    options,
+    active,
+    setActiveSegment,
+    size,
+    labelTextColor,
+    labelTextActiveColor,
+    labelTextSize
+  } = props;
+  const controlRef = React.useRef(null);
+  const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'choice_shape_',
     propsKey: 'shape'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_active_',
     propsKey: 'fillActive'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'choice', shapeClass, fillClass, borderColorClass, borderWidthClass, borderTypeClass, size && "choice_size_" + size, type && "choice_type_" + type),
+    className: clsx__default.default(className, 'choice', shapeClass, fillClass, borderColorClass, borderWidthClass, borderTypeClass, size && `choice_size_${size}`, type && `choice_type_${type}`),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "choice__wrapper"
-  }, options == null ? void 0 : options.map(function (item, i) {
-    return /*#__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'),
-      key: item.value,
-      ref: optionsRefs.get(item.value)
-    }, /*#__PURE__*/React__default.default.createElement("input", {
-      checked: item.value === active.value,
-      className: "choice__item-radio",
-      id: item.label,
-      name: name,
-      type: "radio",
-      value: item.value,
-      onChange: function onChange() {
-        return setActiveSegment(item);
-      }
-    }), /*#__PURE__*/React__default.default.createElement("label", {
-      className: clsx__default.default('choice__item-label'),
-      htmlFor: item.label
-    }, /*#__PURE__*/React__default.default.createElement(index.Text, {
-      textColor: item.value === active.value ? labelTextActiveColor : labelTextColor,
-      size: labelTextSize
-    }, item.label)));
-  })));
+  }, 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'),
+    key: item.value,
+    ref: optionsRefs.get(item.value)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    checked: item.value === active.value,
+    className: "choice__item-radio",
+    id: item.label,
+    name: name,
+    type: "radio",
+    value: item.value,
+    onChange: () => setActiveSegment(item)
+  }), /*#__PURE__*/React__default.default.createElement("label", {
+    className: clsx__default.default('choice__item-label'),
+    htmlFor: item.label
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    textColor: item.value === active.value ? labelTextActiveColor : labelTextColor,
+    size: labelTextSize
+  }, item.label))))));
 });
 Choice.displayName = 'Choice';
 Choice.propTypes = {

package/dist/components/Code.js

@@ -4,8 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index = require('./Text.js');
-var index$1 = require('./Input.js');
+require('./Text.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -17,7 +16,7 @@ require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -28,123 +27,279 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var currentOtpIndex = 0;
+var isStyleObject = function (obj) { return typeof obj === 'object' && obj !== null; };
+var OTPInput = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.numInputs, numInputs = _c === void 0 ? 4 : _c, onChange = _a.onChange, renderInput = _a.renderInput, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? false : _d, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, renderSeparator = _a.renderSeparator, placeholder = _a.placeholder, containerStyle = _a.containerStyle, inputStyle = _a.inputStyle;
+    var _f = React__default.default.useState(0), activeInput = _f[0], setActiveInput = _f[1];
+    var inputRefs = React__default.default.useRef([]);
+    var getOTPValue = function () { return (value ? value.toString().split('') : []); };
+    var isInputNum = inputType === 'number' || inputType === 'tel';
+    React__default.default.useEffect(function () {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    React__default.default.useEffect(function () {
+        var _a;
+        if (shouldAutoFocus) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [shouldAutoFocus]);
+    var getPlaceholderValue = function () {
+        if (typeof placeholder === 'string') {
+            if (placeholder.length === numInputs) {
+                return placeholder;
+            }
+            if (placeholder.length > 0) {
+                console.error('Length of the placeholder should be equal to the number of inputs.');
+            }
+        }
+        return undefined;
+    };
+    var isInputValueValid = function (value) {
+        var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
+        return isTypeValid && value.trim().length === 1;
+    };
+    var handleChange = function (event) {
+        var value = event.target.value;
+        if (isInputValueValid(value)) {
+            changeCodeAtFocus(value);
+            focusInput(activeInput + 1);
+        }
+    };
+    var handleInputChange = function (event) {
+        var nativeEvent = event.nativeEvent;
+        if (!isInputValueValid(event.target.value)) {
+            // @ts-expect-error - This was added previosly to handle and edge case
+            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+            // still needed.
+            if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
+                event.preventDefault();
+                changeCodeAtFocus('');
+                focusInput(activeInput - 1);
+            }
+            // Clear the input if it's not valid value because firefox allows
+            // pasting non-numeric characters in a number type input
+            event.target.value = '';
+        }
+    };
+    var handleFocus = function (event) { return function (index) {
+        setActiveInput(index);
+        event.target.select();
+    }; };
+    var handleBlur = function () {
+        setActiveInput(activeInput - 1);
+    };
+    var handleKeyDown = function (event) {
+        var otp = getOTPValue();
+        if ([event.code, event.key].includes('Backspace')) {
+            event.preventDefault();
+            changeCodeAtFocus('');
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'Delete') {
+            event.preventDefault();
+            changeCodeAtFocus('');
+        }
+        else if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        // React does not trigger onChange when the same value is entered
+        // again. So we need to focus the next input manually in this case.
+        else if (event.key === otp[activeInput]) {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.code === 'Spacebar' ||
+            event.code === 'Space' ||
+            event.code === 'ArrowUp' ||
+            event.code === 'ArrowDown') {
+            event.preventDefault();
+        }
+    };
+    var focusInput = function (index) {
+        var _a, _b;
+        var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+        if (inputRefs.current[activeInput]) {
+            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+            setActiveInput(activeInput);
+        }
+    };
+    var changeCodeAtFocus = function (value) {
+        var otp = getOTPValue();
+        otp[activeInput] = value[0];
+        handleOTPChange(otp);
+    };
+    var handleOTPChange = function (otp) {
+        var otpValue = otp.join('');
+        onChange(otpValue);
+    };
+    var handlePaste = function (event) {
+        var _a;
+        event.preventDefault();
+        var otp = getOTPValue();
+        var nextActiveInput = activeInput;
+        // Get pastedData in an array of max size (num of inputs - current position)
+        var pastedData = event.clipboardData
+            .getData('text/plain')
+            .slice(0, numInputs - activeInput)
+            .split('');
+        // Prevent pasting if the clipboard data contains non-numeric values for number inputs
+        if (isInputNum && pastedData.some(function (value) { return isNaN(Number(value)); })) {
+            return;
+        }
+        // Paste data from focused input onwards
+        for (var pos = 0; pos < numInputs; ++pos) {
+            if (pos >= activeInput && pastedData.length > 0) {
+                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
+                nextActiveInput++;
+            }
+        }
+        focusInput(nextActiveInput);
+        handleOTPChange(otp);
+    };
+    return (React__default.default.createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
+        var _a, _b, _c;
+        return (React__default.default.createElement(React__default.default.Fragment, { key: index },
+            renderInput({
+                value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
+                placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+                ref: function (element) { return (inputRefs.current[index] = element); },
+                onChange: handleChange,
+                onFocus: function (event) { return handleFocus(event)(index); },
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                onPaste: handlePaste,
+                autoComplete: 'off',
+                maxLength: 1,
+                'aria-label': "Please enter OTP character ".concat(index + 1),
+                style: Object.assign({ width: '1em', textAlign: 'center' }, isStyleObject(inputStyle) && inputStyle),
+                className: typeof inputStyle === 'string' ? inputStyle : undefined,
+                type: inputType,
+                inputMode: isInputNum ? 'numeric' : 'text',
+                onInput: handleInputChange,
+            }, index),
+            index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)));
+    })));
+};
+
 function Code(props) {
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    inputPlaceholder,
+    inputAutoFocus,
+    inputCount,
+    inputType,
+    before,
+    after,
+    separatorComponent
+  } = props;
+  const [otp, setOtp] = React.useState('');
+
+  // const formattedHelpText = useMemo(() => {
+  //   return helpText.replace('{fields}', inputCount)
+  // }, [])
+
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'inputFillHover'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'code__input_size_',
+    propsKey: 'inputSize'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'code__input_shape_',
+    propsKey: 'inputShape'
+  });
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'inputTextSize'
+  });
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'inputTextColor'
+  });
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'inputCaretColor'
+  });
+  const placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'inputPlaceholderTextColor'
+  });
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'inputTextWeight'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'inputBorderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'inputBorderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'inputBorderColorHover'
+  });
+  const borderColorFocusClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_focus_',
+    propsKey: 'inputBorderFocusColor'
+  });
+  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'gap_',
+    propsKey: 'gap'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var className = props.className,
-    fields = props.fields,
-    before = props.before,
-    errorText = props.errorText,
-    errorTextSize = props.errorTextSize,
-    errorTextColor = props.errorTextColor,
-    errorTextWeight = props.errorTextWeight,
-    inputSize = props.inputSize,
-    inputFill = props.inputFill,
-    inputPlaceholder = props.inputPlaceholder,
-    inputPlaceholderColor = props.inputPlaceholderColor,
-    inputTextSize = props.inputTextSize,
-    inputTextColor = props.inputTextColor,
-    inputTextWeight = props.inputTextWeight,
-    inputBorderColor = props.inputBorderColor,
-    inputBorderWidth = props.inputBorderWidth,
-    inputShape = props.inputShape,
-    onBlur = props.onBlur,
-    onChange = props.onChange,
-    helpText = props.helpText,
-    helpTextSize = props.helpTextSize,
-    helpTextColor = props.helpTextColor,
-    helpTextWeight = props.helpTextWeight,
-    after = props.after;
-  var _useState = React.useState(new Array(fields).fill('')),
-    otp = _useState[0],
-    setOtp = _useState[1];
-  var _useState2 = React.useState(0),
-    activeOtpIndex = _useState2[0],
-    setActiveOtpIndex = _useState2[1];
-  var inputRef = React.useRef(null);
-  var formattedHelpText = React.useMemo(function () {
-    return helpText.replace('{fields}', fields);
-  }, []);
-  var handleChange = function handleChange(e) {
-    var value = e.target.value;
-    var newOtp = [].concat(otp);
-    newOtp[currentOtpIndex] = value.substring(value.length - 1);
-    if (!value) {
-      setActiveOtpIndex(currentOtpIndex - 1);
-    } else {
-      setActiveOtpIndex(currentOtpIndex + 1);
-    }
-    setOtp(newOtp);
-    onChange && onChange(newOtp);
-  };
-  var handleOnKeyDown = function handleOnKeyDown(e) {
-    var index = +e.target.getAttribute('index');
-    currentOtpIndex = index;
-    if (e.key === 'Backspace') {
-      setActiveOtpIndex(currentOtpIndex - 1);
-    }
-  };
-  React.useEffect(function () {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-  }, [activeOtpIndex]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'code', widthClass)
-  }, before, errorText && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "code__error",
-    size: errorTextSize,
-    textColor: errorTextColor,
-    textWeight: errorTextWeight
-  }, errorText), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "code__group"
-  }, otp.map(function (value, index) {
-    return /*#__PURE__*/React__default.default.createElement(index$1.Input, {
-      className: "code__input",
-      key: index,
-      index: index,
-      size: inputSize,
-      fill: inputFill,
-      placeholder: inputPlaceholder,
-      placeholderTextColor: inputPlaceholderColor,
-      textSize: inputTextSize,
-      textColor: inputTextColor,
-      textWeight: inputTextWeight,
-      value: value,
-      borderColor: inputBorderColor,
-      borderWidth: inputBorderWidth,
-      shape: inputShape,
-      onBlur: onBlur,
-      onChange: handleChange,
-      onKeyDown: function onKeyDown(e) {
-        return handleOnKeyDown(e);
-      },
-      inputRef: index === activeOtpIndex ? inputRef : null
-    });
-  })), helpText && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "code__help",
-    size: helpTextSize,
-    textColor: helpTextColor,
-    textWeight: helpTextWeight
-  }, formattedHelpText), after);
+  }, before, /*#__PURE__*/React__default.default.createElement(OTPInput, {
+    containerStyle: clsx__default.default(className, 'code__wrapper', gapClass),
+    numInputs: inputCount,
+    inputType: inputType,
+    placeholder: inputPlaceholder,
+    renderInput: props => /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, props, {
+      autocomplete: "one-time-code",
+      className: clsx__default.default('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass)
+    })),
+    renderSeparator: separatorComponent || null,
+    shouldAutoFocus: inputAutoFocus,
+    value: otp,
+    onChange: setOtp
+  }), after);
 }
 Code.propTypes = {
   value: PropTypes__default.default.number
 };
 Code.defaultProps = {
-  inputBorderColor: 'surfaceBorderQuaternary',
+  inputCount: 6,
+  gap: 12,
+  inputType: 'number',
+  inputSize: 'normal',
+  inputBorderWidth: 1,
+  inputPlaceholder: 0,
+  inputBorderColor: 'surfaceBorderTertiary',
+  inputBorderColorHover: 'surfaceBorderQuaternary',
+  inputBorderFocusColor: 'surfaceBorderAccent',
   inputFill: 'surfacePrimary',
-  inputPlaceholder: '0',
-  inputPlaceholderTextColor: 'surfaceTextQuaternary',
+  inputFillHover: 'surfaceSecondary',
   inputShape: 'rounded',
   inputTextColor: 'surfaceTextPrimary',
   inputTextSize: 'xxl',
-  helpText: 'Введите {fields} значный код',
-  helpTextSize: 's',
-  helpTextColor: 'surfaceTextTertiary',
-  helpTextWeight: 400
+  inputCaretColor: 'surfaceItemAccent'
 };
 
 exports.Code = Code;

package/dist/components/ContextMenu.js

@@ -19,7 +19,7 @@ require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -41,21 +41,23 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function ContextMenu(props) {
-  var id = props.id,
-    children = props.children,
-    className = props.className,
-    set = props.set,
-    onClick = props.onClick;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    className,
+    set,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'context-menu_shape_',
     propsKey: 'shape'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'context-menu', set && "context-menu_set_" + set, shapeClass, fillClass),
+    className: clsx__default.default(className, 'context-menu', set && `context-menu_set_${set}`, shapeClass, fillClass),
     id: id,
     onClick: onClick
   }, children);
@@ -75,40 +77,42 @@ ContextMenu.defaultProps = {
 };
 
 function ContextMenuItem(props) {
-  var id = props.id;
-    props.children;
-    var className = props.className,
-    label = props.label,
-    dividerWidth = props.dividerWidth,
-    dividerDirection = props.dividerDirection,
-    dividerSize = props.dividerSize,
-    dividerFill = props.dividerFill,
-    iconBefore = props.iconBefore,
-    iconBeforeSize = props.iconBeforeSize,
-    iconBeforeBgFill = props.iconBeforeBgFill,
-    iconBeforeFill = props.iconBeforeFill,
-    iconBeforeStroke = props.iconBeforeStroke,
-    iconAfter = props.iconAfter,
-    iconAfterSize = props.iconAfterSize,
-    iconAfterBgFill = props.iconAfterBgFill,
-    iconAfterFill = props.iconAfterFill,
-    iconAfterStroke = props.iconAfterStroke;
-    props.isActive;
-    var onClick = props.onClick;
-  var labelTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    className,
+    label,
+    dividerWidth,
+    dividerDirection,
+    dividerSize,
+    dividerFill,
+    iconBefore,
+    iconBeforeSize,
+    iconBeforeBgFill,
+    iconBeforeFill,
+    iconBeforeStroke,
+    iconAfter,
+    iconAfterSize,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    isActive,
+    onClick
+  } = props;
+  const labelTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'labelTextSize'
   });
-  var labelTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const labelTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'labelTextColor'
   });
-  var labelTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const labelTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'labelTextWeight'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });