@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Code.js

@@ -0,0 +1,437 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+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, onPaste = _a.onPaste, 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, _f = _a.skipDefaultStyles, skipDefaultStyles = _f === void 0 ? false : _f;
+    var _g = React__default.default.useState(0), activeInput = _g[0], setActiveInput = _g[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;
+        var value = event.target.value;
+        if (!isInputValueValid(value)) {
+            // Pasting from the native autofill suggestion on a mobile device can pass
+            // the pasted string as one long input to one of the cells. This ensures
+            // that we handle the full input and not just the first character.
+            if (value.length === numInputs) {
+                var hasInvalidInput = value.split('').some(function (cellInput) { return !isInputValueValid(cellInput); });
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(''));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously 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, onPaste: onPaste }, 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',
+                'aria-label': "Please enter OTP character ".concat(index + 1),
+                style: Object.assign(!skipDefaultStyles ? { 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) {
+  const {
+    className,
+    inputPlaceholder,
+    inputAutoFocus,
+    inputCount,
+    inputType,
+    before,
+    after,
+    separatorComponent,
+    onBlur,
+    onChange,
+    onFocus
+  } = props;
+  const [otp, setOtp] = React.useState('');
+  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'
+  });
+
+  // NOTE: too many dependencies for "useCallback" and possible too many checks
+  const renderInput = otpInputProps => {
+    return /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, otpInputProps, {
+      autocomplete: "one-time-code",
+      className: clsx__default.default('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass),
+      onBlur: event => {
+        onBlur && onBlur(event);
+        otpInputProps.onBlur(event);
+      },
+      onFocus: event => {
+        onFocus && onFocus(event);
+        otpInputProps.onFocus(event);
+      }
+    }));
+  };
+  React.useEffect(() => {
+    onChange && onChange(otp);
+  }, [otp]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'code', widthClass)
+  }, before, /*#__PURE__*/React__default.default.createElement(OTPInput, {
+    containerStyle: clsx__default.default(className, 'code__wrapper', gapClass),
+    inputType: inputType,
+    numInputs: inputCount,
+    placeholder: inputPlaceholder,
+    renderInput: renderInput,
+    renderSeparator: separatorComponent || null,
+    shouldAutoFocus: inputAutoFocus,
+    value: otp,
+    onChange: setOtp
+  }), after);
+}
+Code.propTypes = {
+  value: PropTypes__default.default.number
+};
+Code.defaultProps = {
+  inputCount: 6,
+  gap: 12,
+  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'
+};
+Code.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Code",
+  "props": {
+    "inputCount": {
+      "defaultValue": {
+        "value": "6",
+        "computed": false
+      },
+      "required": false
+    },
+    "gap": {
+      "defaultValue": {
+        "value": "12",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputType": {
+      "defaultValue": {
+        "value": "'number'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputSize": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputBorderWidth": {
+      "defaultValue": {
+        "value": "1",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputPlaceholder": {
+      "defaultValue": {
+        "value": "0",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputBorderColor": {
+      "defaultValue": {
+        "value": "'surfaceBorderTertiary'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputBorderColorHover": {
+      "defaultValue": {
+        "value": "'surfaceBorderQuaternary'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputBorderFocusColor": {
+      "defaultValue": {
+        "value": "'surfaceBorderAccent'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputFill": {
+      "defaultValue": {
+        "value": "'surfacePrimary'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputFillHover": {
+      "defaultValue": {
+        "value": "'surfaceSecondary'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputShape": {
+      "defaultValue": {
+        "value": "'rounded'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputTextColor": {
+      "defaultValue": {
+        "value": "'surfaceTextPrimary'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputTextSize": {
+      "defaultValue": {
+        "value": "'xxl'",
+        "computed": false
+      },
+      "required": false
+    },
+    "inputCaretColor": {
+      "defaultValue": {
+        "value": "'surfaceItemAccent'",
+        "computed": false
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Code = Code;

package/dist/cjs/components/ContextMenu.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var ContextMenuItem = require('../ContextMenuItem-C8eg828K.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/shape.js');
+require('../Text-CfBPhwqK.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
+require('./Divider.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/width.js');
+
+
+
+exports.ContextMenu = ContextMenuItem.ContextMenu;
+exports.ContextMenuItem = ContextMenuItem.ContextMenuItem;

package/dist/cjs/components/CookiesWarning.js

@@ -0,0 +1,186 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var Cookies = require('js-cookie');
+var clsx = require('clsx');
+var Text = require('../Text-CfBPhwqK.js');
+var index = require('./Button.js');
+var Group = require('../Group-DbzIk8kt.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../context/UIContext.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('../hooks/styleAttributes.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+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');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
+require('./Loader.js');
+require('../constants/componentProps/width.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var Cookies__default = /*#__PURE__*/_interopDefault(Cookies);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function CookiesWarning(props) {
+  const {
+    message,
+    className,
+    buttonFill,
+    buttonFillHover,
+    buttonLabel,
+    buttonLabelSize,
+    buttonLabelTextColor,
+    buttonShape,
+    buttonSize,
+    textSize,
+    textColor,
+    buttonWidth,
+    isHideOnScroll
+  } = props;
+  const cookiesWarningRef = React.useRef(null);
+  const isOpen = React.useMemo(() => Cookies__default.default.get('cookies-warning') !== 'close', []);
+  const closeCookiesWarning = React.useCallback(() => {
+    cookiesWarningRef.current?.classList.add('cookies-warning_state_hidden');
+    Cookies__default.default.set('cookies-warning', 'close');
+  }, []);
+  React.useEffect(() => {
+    if (isHideOnScroll) {
+      window.addEventListener('scroll', closeCookiesWarning, true);
+    }
+    return () => {
+      window.removeEventListener('scroll', closeCookiesWarning, true);
+    };
+  }, []); // eslint-disable-line
+
+  React.useEffect(() => {
+    // isHideOnScroll &&
+    if (!isOpen) {
+      window.removeEventListener('scroll', closeCookiesWarning, true);
+    }
+  }, [isOpen]); // eslint-disable-line
+
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill-gradient_',
+    propsKey: 'fillGradient'
+  });
+  const gap = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'gap'
+  });
+  return isOpen ? /*#__PURE__*/React__default.default.createElement("div", {
+    ref: cookiesWarningRef,
+    className: clsx__default.default('cookies-warning', className, fillClass, fillGradientClass)
+  }, /*#__PURE__*/React__default.default.createElement(Group.Group, {
+    direction: "vertical",
+    className: "cookies-warning__inner",
+    gap: gap
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: textSize,
+    textColor: textColor
+  }, message), /*#__PURE__*/React__default.default.createElement(index.Button, {
+    width: buttonWidth,
+    fill: buttonFill,
+    fillHover: buttonFillHover,
+    shape: buttonShape,
+    size: buttonSize,
+    labelTextColor: buttonLabelTextColor,
+    labelSize: buttonLabelSize,
+    onClick: closeCookiesWarning
+  }, buttonLabel))) : null;
+}
+CookiesWarning.propTypes = {
+  buttonClass: PropTypes__default.default.string,
+  buttonText: PropTypes__default.default.string,
+  isHideOnScroll: PropTypes__default.default.bool,
+  message: PropTypes__default.default.string
+};
+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
+};
+
+// Render component without SSR because cookies has only on client
+// import dynamic from 'next/dynamic'
+// export default dynamic(() => Promise.resolve(CookiesWarning), { ssr: false })
+CookiesWarning.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CookiesWarning",
+  "props": {
+    "message": {
+      "defaultValue": {
+        "value": "'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 \xABcookies\xBB.'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "buttonText": {
+      "defaultValue": {
+        "value": "'I agree'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isHideOnScroll": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "buttonClass": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.CookiesWarning = CookiesWarning;