@alfalab/core-components-form-control - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/Component.d.ts

 /// <reference types="react" />
-import { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+import { ReactNode, HTMLAttributes } from "react";
 type FormControlProps = HTMLAttributes<HTMLDivElement> & {
@@ -65,3 +66,64 @@ /**
 };
-declare const FormControl: ({ block, size, className, labelClassName, disabled, focused, filled, error, hint, label, leftAddons, rightAddons, bottomAddons, children, dataTestId, ...restProps }: FormControlProps) => JSX.Element;
+declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | undefined;
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean | undefined;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: string | boolean | undefined;
+    /**
+     * Текст подсказки
+     */
+    hint?: string | undefined;
+    /**
+     * Лейбл компонента
+     */
+    label?: React.ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Компонент поля (инпут, textarea и пр.)
+     */
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export { FormControlProps, FormControl };

dist/Component.js

@@ -50,10 +50,10 @@ 'use strict';
 
-var styles = {"component":"form-control__component_1xt49","inner":"form-control__inner_1xt49","disabled":"form-control__disabled_1xt49","inputWrapper":"form-control__inputWrapper_1xt49","input":"form-control__input_1xt49","label":"form-control__label_1xt49","labelInner":"form-control__labelInner_1xt49","addons":"form-control__addons_1xt49","errorIcon":"form-control__errorIcon_1xt49","leftAddons":"form-control__leftAddons_1xt49","rightAddons":"form-control__rightAddons_1xt49","sub":"form-control__sub_1xt49","block":"form-control__block_1xt49","s":"form-control__s_1xt49","hasLabel":"form-control__hasLabel_1xt49","m":"form-control__m_1xt49","l":"form-control__l_1xt49","hasLeftAddons":"form-control__hasLeftAddons_1xt49","hasRightAddons":"form-control__hasRightAddons_1xt49","focused":"form-control__focused_1xt49","hasError":"form-control__hasError_1xt49","filled":"form-control__filled_1xt49","error":"form-control__error_1xt49"};
+var styles = {"component":"form-control__component_1ifyh","inner":"form-control__inner_1ifyh","disabled":"form-control__disabled_1ifyh","inputWrapper":"form-control__inputWrapper_1ifyh","input":"form-control__input_1ifyh","label":"form-control__label_1ifyh","labelInner":"form-control__labelInner_1ifyh","addons":"form-control__addons_1ifyh","errorIcon":"form-control__errorIcon_1ifyh","leftAddons":"form-control__leftAddons_1ifyh","rightAddons":"form-control__rightAddons_1ifyh","sub":"form-control__sub_1ifyh","block":"form-control__block_1ifyh","s":"form-control__s_1ifyh","hasLabel":"form-control__hasLabel_1ifyh","m":"form-control__m_1ifyh","l":"form-control__l_1ifyh","hasLeftAddons":"form-control__hasLeftAddons_1ifyh","hasRightAddons":"form-control__hasRightAddons_1ifyh","focused":"form-control__focused_1ifyh","hasError":"form-control__hasError_1ifyh","filled":"form-control__filled_1ifyh","error":"form-control__error_1ifyh"};
 require('./index.css')
 
-var FormControl = function (_a) {
+var FormControl = React.forwardRef(function (_a, ref) {
     var _b;
     var _c = _a.block, block = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, className = _a.className, labelClassName = _a.labelClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "className", "labelClassName", "disabled", "focused", "filled", "error", "hint", "label", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
     var errorMessage = typeof error === 'string' ? error : '';
-    return (React.createElement("div", __assign({ "data-test-id": dataTestId, className: cn(styles.component, styles[size], (_b = {},
+    return (React.createElement("div", __assign({ ref: ref, "data-test-id": dataTestId, className: cn(styles.component, styles[size], (_b = {},
             _b[styles.focused] = focused,
@@ -77,7 +77,7 @@ _b[styles.disabled] = disabled,
                 React.createElement(ErrorIcon, null)))),
-        errorMessage && React.createElement("span", { className: cn(styles.sub, styles.error) }, errorMessage),
+        errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.error) }, errorMessage)),
         hint && !errorMessage && React.createElement("span", { className: styles.sub }, hint),
         bottomAddons));
-};
+});
 
 exports.FormControl = FormControl;

dist/modern/Component.d.ts

 /// <reference types="react" />
-import { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+import { ReactNode, HTMLAttributes } from "react";
 type FormControlProps = HTMLAttributes<HTMLDivElement> & {
@@ -65,3 +66,64 @@ /**
 };
-declare const FormControl: ({ block, size, className, labelClassName, disabled, focused, filled, error, hint, label, leftAddons, rightAddons, bottomAddons, children, dataTestId, ...restProps }: FormControlProps) => JSX.Element;
+declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | undefined;
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean | undefined;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: string | boolean | undefined;
+    /**
+     * Текст подсказки
+     */
+    hint?: string | undefined;
+    /**
+     * Лейбл компонента
+     */
+    label?: React.ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Компонент поля (инпут, textarea и пр.)
+     */
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export { FormControlProps, FormControl };

dist/modern/Component.js

@@ -5,8 +5,8 @@ import React from 'react';
 
-var styles = {"component":"form-control__component_1xt49","inner":"form-control__inner_1xt49","disabled":"form-control__disabled_1xt49","inputWrapper":"form-control__inputWrapper_1xt49","input":"form-control__input_1xt49","label":"form-control__label_1xt49","labelInner":"form-control__labelInner_1xt49","addons":"form-control__addons_1xt49","errorIcon":"form-control__errorIcon_1xt49","leftAddons":"form-control__leftAddons_1xt49","rightAddons":"form-control__rightAddons_1xt49","sub":"form-control__sub_1xt49","block":"form-control__block_1xt49","s":"form-control__s_1xt49","hasLabel":"form-control__hasLabel_1xt49","m":"form-control__m_1xt49","l":"form-control__l_1xt49","hasLeftAddons":"form-control__hasLeftAddons_1xt49","hasRightAddons":"form-control__hasRightAddons_1xt49","focused":"form-control__focused_1xt49","hasError":"form-control__hasError_1xt49","filled":"form-control__filled_1xt49","error":"form-control__error_1xt49"};
+var styles = {"component":"form-control__component_1ifyh","inner":"form-control__inner_1ifyh","disabled":"form-control__disabled_1ifyh","inputWrapper":"form-control__inputWrapper_1ifyh","input":"form-control__input_1ifyh","label":"form-control__label_1ifyh","labelInner":"form-control__labelInner_1ifyh","addons":"form-control__addons_1ifyh","errorIcon":"form-control__errorIcon_1ifyh","leftAddons":"form-control__leftAddons_1ifyh","rightAddons":"form-control__rightAddons_1ifyh","sub":"form-control__sub_1ifyh","block":"form-control__block_1ifyh","s":"form-control__s_1ifyh","hasLabel":"form-control__hasLabel_1ifyh","m":"form-control__m_1ifyh","l":"form-control__l_1ifyh","hasLeftAddons":"form-control__hasLeftAddons_1ifyh","hasRightAddons":"form-control__hasRightAddons_1ifyh","focused":"form-control__focused_1ifyh","hasError":"form-control__hasError_1ifyh","filled":"form-control__filled_1ifyh","error":"form-control__error_1ifyh"};
 require('./index.css')
 
-const FormControl = ({ block = false, size = 's', className, labelClassName, disabled, focused, filled, error, hint, label, leftAddons, rightAddons, bottomAddons, children, dataTestId, ...restProps }) => {
+const FormControl = React.forwardRef(({ block = false, size = 's', className, labelClassName, disabled, focused, filled, error, hint, label, leftAddons, rightAddons, bottomAddons, children, dataTestId, ...restProps }, ref) => {
     const errorMessage = typeof error === 'string' ? error : '';
-    return (React.createElement("div", Object.assign({ "data-test-id": dataTestId, className: cn(styles.component, styles[size], {
+    return (React.createElement("div", Object.assign({ ref: ref, "data-test-id": dataTestId, className: cn(styles.component, styles[size], {
             [styles.focused]: focused,
@@ -30,7 +30,7 @@ [styles.disabled]: disabled,
                 React.createElement(ErrorIcon, null)))),
-        errorMessage && React.createElement("span", { className: cn(styles.sub, styles.error) }, errorMessage),
+        errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.error) }, errorMessage)),
         hint && !errorMessage && React.createElement("span", { className: styles.sub }, hint),
         bottomAddons));
-};
+});
 
 export { FormControl };

package.json

 {
     "name": "@alfalab/core-components-form-control",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "FormControl component",
@@ -22,3 +22,3 @@ "keywords": [],
     },
-    "gitHead": "44322d91560eccb0b7657cf23913e85c2a6c4e04"
+    "gitHead": "f4dc483b1c30b3b8e69d7a175900240ee72fcac5"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28721

increased by9.83%

Lines of code

766

increased by16.77%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes