npm - @alfalab/core-components - Versions diffs - 45.6.0-beta.0 → 45.6.0-beta.1 - Mend

@@ -0,0 +1,61 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-1500-inverted: #fff;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
+    --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+    /* Hard */
+    /* Up */
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --input-inverted-color: var(--color-light-text-primary-inverted);
+    --input-inverted-placeholder-color: var(--color-light-text-secondary-inverted);
+    --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted);
+    --input-inverted-with-label-placeholder-color: var(--color-light-text-tertiary-inverted);
+    --input-inverted-caret-color: var(--color-light-neutral-1500-inverted);
+    /* disabled */
+    --input-inverted-disabled-color: var(--color-light-text-tertiary-inverted);
+    /* read-only */
+    --input-inverted-read-only-color: var(--color-light-text-tertiary-inverted);
+    /* error */
+    --input-inverted-error-color: var(--color-light-text-primary-inverted);
+    /* display */
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+} .input {
+    color: var(--input-inverted-color);
+    caret-color: var(--input-inverted-caret-color);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+} .input:-webkit-autofill {
+    -webkit-text-fill-color: var(--input-inverted-color);
+} .input::placeholder {
+    color: var(--input-inverted-placeholder-color);
+} .hasInnerLabel::placeholder {
+    color: var(--input-inverted-with-label-placeholder-color);
+} /* READ-ONLY STATE */ .input:read-only:not(.disableUserInput) {
+    color: var(--input-inverted-read-only-color)
+} .input:read-only:not(.disableUserInput):focus::placeholder {
+        color: var(--input-inverted-placeholder-color);
+    } /* DISABLED STATE */ .input:disabled {
+    color: var(--input-inverted-disabled-color);
+    -webkit-text-fill-color: var(--input-inverted-disabled-color);
+} /* FOCUS STATE */ .input:focus::placeholder {
+    color: var(--input-inverted-focus-placeholder-color);
+} /* ERROR STATE */ .error {
+    color: var(--input-inverted-error-color);
+    caret-color: var(--input-inverted-error-color);
+}

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import React from 'react';
+interface ClearButtonProps {
+    disabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    colors: 'default' | 'inverted';
+}
+declare const ClearButton: React.FC<ClearButtonProps>;
+export { ClearButton };

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsButton = require('../../../../button/cssm');
+var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
+var defaultColors = require('./default.module.css');
+var styles = require('./index.module.css');
+var invertedColors = require('./inverted.module.css');
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
+};
+var preventDefault = function (e) { return e.preventDefault(); };
+var ClearButton = function (_a) {
+    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick;
+    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles__default.default.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault },
+        React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles__default.default.clearIcon, colorStyles[colors].clearIcon) })));
+};
+exports.ClearButton = ClearButton;

@@ -0,0 +1,36 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
+    --color-light-neutral-translucent-500-hover: rgba(5, 8, 29, 0.38);
+    --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+    /* Hard */
+    /* Up */
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    /* disabled */
+    /* read-only */
+    /* error */
+    /* display */
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+} .clearIcon {
+    color: var(--color-light-neutral-translucent-500)
+} .clearIcon:hover {
+        color: var(--color-light-neutral-translucent-500-hover);
+    } .clearIcon:active {
+        color: var(--color-light-neutral-translucent-500-press);
+    }

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+var components_clearButton_Component = require('./Component.js');
+exports.ClearButton = components_clearButton_Component.ClearButton;

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseInputProps } from "../components/base-input/index";
+type InputDesktopProps = Omit<BaseInputProps, 'FormControlComponent'>;
+declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { InputDesktopProps, InputDesktop };

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+var tslib = require('tslib');
+var React = require('react');
+var desktop = require('../../../form-control/cssm/desktop');
+var components_baseInput_Component = require('../components/base-input/Component.js');
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var InputDesktop = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_baseInput_Component.BaseInput, tslib.__assign({}, restProps, { FormControlComponent: desktop.FormControlDesktop, ref: ref }))); });
+exports.InputDesktop = InputDesktop;

	@@ -0,0 +1,2 @@
1	+ export * from "./Component.desktop";
2	+ export {};

	@@ -0,0 +1,2 @@
1	+ export * from "./Component.responsive";
2	+ export {};

	@@ -0,0 +1,2 @@
1	+ export * from "./Component.mobile";
2	+ export {};

	@@ -0,0 +1,2 @@
1	+ export * from "../components/clear-button/index";
2	+ export { getInputTestIds } from "../utils";

@@ -0,0 +1,10 @@
+declare function getInputTestIds(dataTestId: string): {
+    input: string;
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+};
+export { getInputTestIds };

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+var coreComponentsShared = require('../../shared/cssm');
+function getInputTestIds(dataTestId) {
+    return {
+        input: dataTestId,
+        inputWrapper: coreComponentsShared.getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+    };
+}
+exports.getInputTestIds = getInputTestIds;

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseInputProps } from "./components/base-input/index";
+type InputProps = Omit<BaseInputProps, 'FormControlComponent'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input };

@@ -0,0 +1,28 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '../../mq/esm';
+import { InputDesktop } from './desktop/Component.desktop.js';
+import { InputMobile } from './mobile/Component.mobile.js';
+import '../../form-control/esm/desktop';
+import './components/base-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import '../../badge/esm';
+import '../../shared/esm';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import './components/clear-button/Component.js';
+import '../../button/esm';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../../form-control/esm/mobile';
+var Input = forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = useMatchMedia(query, defaultMatchMediaValue)[0];
+    var Component = isDesktop ? InputDesktop : InputMobile;
+    return React.createElement(Component, __assign({ ref: ref }, restProps));
+});
+export { Input };

@alfalab/core-components 45.6.0-beta.0 → 45.6.0-beta.1