@itcase/ui 1.1.25 → 1.2.1

package/dist/cjs/components/Code.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Code = require('../Code-BJFoJBYh.js');
-require('../_tslib-CKiUdo7p.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var OtpInput = require('react-otp-input');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -13,6 +13,99 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
+function Code(props) {
+    var className = props.className, inputPlaceholder = props.inputPlaceholder, inputAutoFocus = props.inputAutoFocus, inputCount = props.inputCount, inputType = props.inputType, before = props.before, after = props.after, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var _a = React.useState(''), otp = _a[0], setOtp = _a[1];
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'inputFill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'inputFillHover',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'code__input_size_',
+        propsKey: 'inputSize',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'code__input_shape_',
+        propsKey: 'inputShape',
+    });
+    var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'inputTextSize',
+    });
+    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'inputTextColor',
+    });
+    var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'inputCaretColor',
+    });
+    var placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'inputPlaceholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'inputTextWeight',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'inputBorderWidth',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'inputBorderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'inputBorderColorHover',
+    });
+    var borderColorFocusClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_focus_',
+        propsKey: 'inputBorderFocusColor',
+    });
+    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // NOTE: too many dependencies for "useCallback" and possible too many checks
+    var renderInput = function (otpInputProps) {
+        return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { autoComplete: "one-time-code", className: clsx('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass), onBlur: function (event) {
+                onBlur && onBlur(event);
+                otpInputProps.onBlur(event);
+            }, onFocus: function (event) {
+                onFocus && onFocus(event);
+                otpInputProps.onFocus(event);
+            } })));
+    };
+    React.useEffect(function () {
+        onChange && onChange(otp);
+    }, [otp]);
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper', gapClass), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+}
+Code.defaultProps = {
+    inputCount: 6,
+    inputType: 'number',
+    inputSize: 'normal',
+    inputBorderWidth: 1,
+    inputPlaceholder: 0,
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputBorderColorHover: 'surfaceBorderQuaternary',
+    inputBorderFocusColor: 'surfaceBorderAccent',
+    inputFill: 'surfacePrimary',
+    inputFillHover: 'surfaceSecondary',
+    inputShape: 'rounded',
+    inputTextColor: 'surfaceTextPrimary',
+    inputTextSize: 'xxl',
+    inputCaretColor: 'surfaceItemAccent',
+};
 
-
-exports.Code = Code.Code;
+exports.Code = Code;

package/dist/cjs/components/ContextMenu.js

@@ -1,30 +1,65 @@
 'use strict';
 
-var ContextMenuItem = require('../ContextMenuItem-CLU1xPrC.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Divider = require('../../Divider-BjB5MD6u.js');
+var Icon = require('../../Icon-Co5Mtpt_.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Divider-D92wY8Fn.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Icon-C7ZJyN5o.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
 
+function ContextMenu(props) {
+    var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'context-menu_shape_',
+        propsKey: 'shape',
+    });
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'context-menu', set && "context-menu_set_".concat(set), shapeClass, fillClass), id: id, onClick: onClick, children: children }));
+}
+ContextMenu.defaultProps = {
+    tag: 'div',
+};
 
+function ContextMenuItem(props) {
+    var id = props.id, 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, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight;
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'labelTextSize',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'labelTextColor',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'labelTextWeight',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'context-menu__item', fillClass, fillHoverClass, onClick && 'cursor_type_pointer'), id: id, onClick: onClick, children: [jsxRuntime.jsxs("div", { className: "context-menu__item-wrapper", children: [iconBefore && (jsxRuntime.jsx(Icon.Icon, { className: "context-menu__item-icon-before", SvgImage: iconBefore, size: iconBeforeSize, bgFill: iconBeforeBgFill, fill: iconBeforeFill })), label && (jsxRuntime.jsx(Text.Text, { className: "context-menu__item-title", textColor: labelTextColor, size: labelTextSize, textWeight: labelTextWeight, children: label })), iconAfter && (jsxRuntime.jsx(Icon.Icon, { className: "context-menu__item-icon-after", SvgImage: iconAfter, size: iconAfterSize, bgFill: iconAfterBgFill, fill: iconAfterFill }))] }), jsxRuntime.jsx(Divider.Divider, { className: "context-menu__item-divider", width: dividerWidth, direction: dividerDirection, size: dividerSize, fill: dividerFill })] }));
+}
 
-exports.ContextMenu = ContextMenuItem.ContextMenu;
-exports.ContextMenuItem = ContextMenuItem.ContextMenuItem;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuItem = ContextMenuItem;

package/dist/cjs/components/CookiesWarning.js

@@ -1,32 +1,71 @@
 'use strict';
 
-var CookiesWarning = require('../CookiesWarning-C-6cEf16.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('js-cookie');
-require('../hooks/useDeviceTargetClass.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var Cookies = require('js-cookie');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Button = require('../../Button-VkatyBmt.js');
+var Group = require('../../Group-Buo_BxGT.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Button-DH5f_2bV.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Icon-C7ZJyN5o.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../Icon-Co5Mtpt_.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
-require('../Loader-C2D6fJk1.js');
-require('../Group-EFTg84wP.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
+require('../../Loader-fA11tUEJ.js');
 
+function CookiesWarning(props) {
+    var _a = props.message, message = _a === void 0 ? 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».' : _a, className = props.className, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === void 0 ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, textSize = props.textSize, textColor = props.textColor, buttonWidth = props.buttonWidth, _c = props.isHideOnScroll, isHideOnScroll = _c === void 0 ? false : _c;
+    var cookiesWarningRef = React.useRef(null);
+    var isOpen = React.useMemo(function () { return Cookies.get('cookies-warning') !== 'close'; }, []);
+    var closeCookiesWarning = React.useCallback(function () {
+        var _a;
+        (_a = cookiesWarningRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('cookies-warning_state_hidden');
+        Cookies.set('cookies-warning', 'close');
+    }, []);
+    React.useEffect(function () {
+        if (isHideOnScroll) {
+            window.addEventListener('scroll', closeCookiesWarning, true);
+        }
+        return function () {
+            window.removeEventListener('scroll', closeCookiesWarning, true);
+        };
+    }, []);
+    React.useEffect(function () {
+        // isHideOnScroll &&
+        if (!isOpen) {
+            window.removeEventListener('scroll', closeCookiesWarning, true);
+        }
+    }, [isOpen]);
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill-gradient_',
+        propsKey: 'fillGradient',
+    });
+    var gap = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'gap',
+    });
+    return isOpen ? (jsxRuntime.jsx("div", { className: clsx('cookies-warning', className, fillClass, fillGradientClass), ref: cookiesWarningRef, children: jsxRuntime.jsxs(Group.Group, { direction: "vertical", className: "cookies-warning__inner", gap: gap ? gap : undefined, children: [jsxRuntime.jsx(Text.Text, { size: textSize, textColor: textColor, children: message }), jsxRuntime.jsx(Button.Button, { width: buttonWidth, fill: buttonFill, fillHover: buttonFillHover, shape: buttonShape, size: buttonSize, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
+}
+CookiesWarning.defaultProps = {
+    message: 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».',
+    buttonText: 'I agree',
+    isHideOnScroll: false,
+};
 
-
-exports.CookiesWarning = CookiesWarning.CookiesWarning;
+exports.CookiesWarning = CookiesWarning;

package/dist/cjs/components/DadataHintField.js

@@ -1,12 +1,11 @@
 'use strict';
 
-var DadataHintField = require('../DadataHintField-z7Mw-xDn.js');
-require('../_tslib-CKiUdo7p.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('crypto');
-require('../Input-vwyG3XF0.js');
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var reactDadata = require('react-dadata');
+var Input = require('../../Input-C7gBdx1m.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -15,6 +14,29 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
+function DadataHintField(props) {
+    var delay = props.delay, inputProps = props.inputProps, setValue = props.setValue, input = props.input, meta = props.meta, token = props.token;
+    var dadataInputProps = React.useMemo(function () {
+        return tslib_es6.__assign(tslib_es6.__assign({}, inputProps), { className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_".concat(meta.error.key || 'error')), 
+            // https://www.npmjs.com/package/react-dadata
+            // "Свойство value игнорируется."
+            // value: input.value,
+            inputValue: input.value, onFocus: input.onFocus, onBlur: input.onBlur, onChange: input.onChange });
+    }, [
+        inputProps,
+        meta.active,
+        meta.error,
+        meta.touched,
+        input.value,
+        input.onFocus,
+        input.onBlur,
+        input.onChange,
+    ]);
+    return (jsxRuntime.jsx(reactDadata.PartySuggestions, { customInput: DadataСustomInput, delay: delay || 750, inputProps: dadataInputProps, minChars: 3, token: token, onChange: setValue }));
+}
+function DadataСustomInput(props) {
+    var inputValue = props.inputValue, otherProps = tslib_es6.__rest(props, ["inputValue"]);
+    return jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, otherProps, { value: inputValue }));
+}
 
-
-exports.DadataHintField = DadataHintField.DadataHintField;
+exports.DadataHintField = DadataHintField;