@egov3/system-design 1.0.39 → 1.0.41

package/README.md

@@ -2,3 +2,13 @@
 
 ## storybook
 yarn storybook
+
+### release 1.0.40
+1. Typography теперь поддерживает jsx style 
+2. Обновление версии storybook и зависимых библиотек
+3. Убрали плагин addon-mdx-gfm 
+4. Добавили utils функции 
+4.1. CreateArray создает массив с заданным количеством элементов
+4.2. SetCharAt добавляет символ в заданный промежуток в строке
+5. InputGroup story, группа из нескольких InputField
+6. InputField props interface расширили стандартным интерфейсом от Реакт

package/dist/cjs/components/InputField/index.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLInputTypeAttribute } from "react";
 export type TOtpType = "OTP" | "TEXT";
-export interface IInputFieldProps {
+export interface IInputFieldProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     onFocus?: () => void;
     onBlur?: () => void;
     onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -17,5 +17,6 @@ export interface IInputFieldProps {
     ariaLabel: string;
     focused?: boolean;
     setFocused?: (val: boolean) => void;
+    readOnly?: boolean;
 }
-export declare const InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, focused, setFocused, }: IInputFieldProps) => React.ReactNode;
+export declare const InputField: React.ForwardRefExoticComponent<Omit<IInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/index.d.ts

@@ -2,7 +2,7 @@
 import { Button } from "./Button";
 export declare const Сomponents: {
     Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./Button").IButtonProps) => import("react").JSX.Element;
-    InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, focused, setFocused, }: import("./InputField").IInputFieldProps) => import("react").ReactNode;
+    InputField: import("react").ForwardRefExoticComponent<Omit<import("./InputField").IInputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
     RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: import("./RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
     CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
     Accordion: ({ open, setOpen, children, title, }: import("./Accordion").IAccordionProps) => import("react").JSX.Element;

package/dist/cjs/index.d.ts

@@ -2,7 +2,7 @@
 declare const SystemDesign: {
     Сomponents: {
         Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./components/Button").IButtonProps) => import("react").JSX.Element;
-        InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, focused, setFocused, }: import("./components/InputField").IInputFieldProps) => import("react").ReactNode;
+        InputField: import("react").ForwardRefExoticComponent<Omit<import("./components/InputField").IInputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
         RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: import("./components/RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
         CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./components/RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
         Accordion: ({ open, setOpen, children, title, }: import("./components/Accordion").IAccordionProps) => import("react").JSX.Element;

package/dist/cjs/index.js

@@ -2898,34 +2898,37 @@ var ClearIcon = function (_a) {
         React.createElement("path", { fill: pathFill, fillRule: "evenodd", d: "M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666zM7.5 6.027L6.027 7.5l2.5 2.5-2.5 2.5L7.5 13.973l2.5-2.5 2.5 2.5 1.473-1.473-2.5-2.5 2.5-2.5L12.5 6.027l-2.5 2.5-2.5-2.5z", clipRule: "evenodd" })));
 };
 
-var InputField = function (_a) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k;
+// InputField.tsx
+var InputField = react.exports.forwardRef(function (_a, ref) {
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k, _l = _a.readOnly, readOnly = _l === void 0 ? false : _l;
+    var handleClear = function () {
+        if (onChange) {
+            onChange({
+                target: { value: "" },
+            });
+        }
+    };
+    var handleFocus = function () {
+        setFocused(true);
+        if (onFocus)
+            onFocus();
+    };
+    var handleBlur = function () {
+        setFocused(false);
+        if (onBlur)
+            onBlur();
+    };
+    var handleKeyDown = function (event) {
+        if (onEnterPress && event.key === "Enter") {
+            onEnterPress(event);
+        }
+    };
     return (React.createElement("div", { "data-testid": "InputField_MAIN", className: CombineClassNames(styles$3[labelText.length ? "inputContainerLabeled" : "inputContainer"], focused ? styles$3["input--onfocus"] : undefined, styles$3["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())], className), style: style },
         labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
         inputLeftIcon,
-        React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$3.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
-                setFocused(true);
-                if (onFocus) {
-                    onFocus();
-                }
-            }, onBlur: function () {
-                setFocused(false);
-                if (onBlur) {
-                    onBlur();
-                }
-            }, onChange: onChange, onKeyDown: function (event) {
-                if (onEnterPress && event.key === "Enter") {
-                    onEnterPress(event);
-                }
-            }, value: value, readOnly: !onChange }),
-        isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$3.clearIcon, onClick: function () {
-                if (onChange) {
-                    onChange({
-                        target: { value: "" },
-                    });
-                }
-            } }))));
-};
+        React.createElement("input", { ref: ref, "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$3.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: handleFocus, onBlur: handleBlur, onChange: onChange, onKeyDown: handleKeyDown, value: value, readOnly: readOnly }),
+        isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$3.clearIcon, onClick: handleClear }))));
+});
 
 var css_248z$2 = "/* Headings/Heading 1 */\n/* Headings/Heading 3 */\n/* Subtitles/Subtitle 3 */\n/* Body/Body 1, Medium */\n/* Body/Body 1, Regular */\n/* Body/Body 2, Medium */\n/* Body/Body 2, Regular */\n/* Body/Body 3, Regular */\n/* Caption/Caption 1, Medium */\n/* Caption/Caption 1, Regular */\n/* Caption/Caption 1, Semibold */\n/* Caption/Caption 2, Medium */\n/* Caption/Caption 2, Regular */\n.RadioGroup-module_radio__cmSnZ {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.RadioGroup-module_radio__cmSnZ input {\n  display: none;\n}\n\n.RadioGroup-module_radioBtn__HSuIE {\n  position: relative;\n  height: 15px;\n  width: 15px;\n  border-radius: 50%;\n  border: 2px solid #c5ccd3;\n  margin: 10px;\n  transition: background 0.3s;\n}\n\n.RadioGroup-module_radioBtn__HSuIE::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  height: 10px;\n  width: 10px;\n  background: #0581da;\n  border-radius: 50%;\n  transform: scale(0) translate(-50%, -50%);\n  transition: transform 0.3s;\n}\n\ninput:checked + .RadioGroup-module_radioBtn__HSuIE::after {\n  transform: scale(1) translate(-50%, -50%);\n}\n\ninput:checked + .RadioGroup-module_radioBtn__HSuIE {\n  border: 2px solid #0581da;\n}\n\n.RadioGroup-module_radioBtnText__Kx9T1 {\n  padding-left: 10px;\n  width: fit-content;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}";
 var styles$2 = {"radio":"RadioGroup-module_radio__cmSnZ","radioBtn":"RadioGroup-module_radioBtn__HSuIE","radioBtnText":"RadioGroup-module_radioBtnText__Kx9T1"};
@@ -2966,8 +2969,8 @@ var styles = {"Heading1":"Typography-module_Heading1__2wNRy","Heading3":"Typogra
 styleInject(css_248z);
 
 var Typography = function (_a) {
-    var tag = _a.tag, fontClass = _a.fontClass, className = _a.className, children = _a.children, restProps = __rest(_a, ["tag", "fontClass", "className", "children"]);
-    return React.createElement(tag, __assign(__assign({}, restProps), { className: CombineClassNames(fontClass ? styles[fontClass] : "", className) }), children);
+    var tag = _a.tag, fontClass = _a.fontClass, className = _a.className, children = _a.children, style = _a.style, restProps = __rest(_a, ["tag", "fontClass", "className", "children", "style"]);
+    return React.createElement(tag, __assign(__assign({}, restProps), { className: CombineClassNames(fontClass ? styles[fontClass] : "", className), style: style }), children);
 };
 
 var Сomponents = {