From f2e8108d1bdc0b8a3894d70aebc260ad42459e2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=93=D0=BE=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B5=D1=86=D0=BA=D0=B8=D0=B9?=
 <gorodetskiy.timur@tnsu.kz>
Date: Wed, 26 Aug 2026 08:39:25 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20TextInput/TextArea=20borderless+ariaLab?=
 =?UTF-8?q?el+onKeyDown,=20Alert=20info,=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA?=
 =?UTF-8?q?=D0=B0=20info=20(0.11.0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Для инлайн-ячеек таблиц СТ и info-баннеров при перекраске форм.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 package.json                        |  2 +-
 src/Alert/Alert.module.scss         |  6 ++++++
 src/Alert/Alert.tsx                 |  8 +++++---
 src/Icon/IconSprite.tsx             |  4 ++++
 src/Icon/iconNames.ts               |  1 +
 src/TextArea/TextArea.module.scss   | 14 ++++++++++++++
 src/TextArea/TextArea.tsx           |  9 +++++++--
 src/TextInput/TextInput.module.scss | 13 +++++++++++++
 src/TextInput/TextInput.tsx         | 17 +++++++++++++++--
 9 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index b5ee63e..d1d7bbc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tnsu/ui-kit",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "TNSU shared UI components for SPFx web parts",
   "author": "Timur Gorodetskiy",
   "license": "ISC",
diff --git a/src/Alert/Alert.module.scss b/src/Alert/Alert.module.scss
index 4cd4bda..f4ad266 100644
--- a/src/Alert/Alert.module.scss
+++ b/src/Alert/Alert.module.scss
@@ -28,3 +28,9 @@
   color: $red-500;
   border-color: #fecaca;
 }
+
+.info {
+  background: $navy-50;
+  color: $navy-800;
+  border-color: $navy-100;
+}
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 9eaccc1..630426a 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -3,7 +3,7 @@ import styles from './Alert.module.scss';
 import { Icon } from '../Icon/Icon';
 import { IconName } from '../Icon/iconNames';
 
-type AlertVariant = 'warn' | 'ok' | 'err';
+type AlertVariant = 'warn' | 'ok' | 'err' | 'info';
 
 interface IAlertProps {
   variant: AlertVariant;
@@ -13,13 +13,15 @@ interface IAlertProps {
 const variantClass: Record<AlertVariant, string> = {
   warn: styles.warn,
   ok: styles.ok,
-  err: styles.err
+  err: styles.err,
+  info: styles.info
 };
 
 const variantIcon: Record<AlertVariant, IconName> = {
   warn: 'warning',
   ok: 'check',
-  err: 'close'
+  err: 'close',
+  info: 'info'
 };
 
 export const Alert: React.FC<IAlertProps> = ({ variant, children }) => {
diff --git a/src/Icon/IconSprite.tsx b/src/Icon/IconSprite.tsx
index 794508c..3c3e3f1 100644
--- a/src/Icon/IconSprite.tsx
+++ b/src/Icon/IconSprite.tsx
@@ -147,6 +147,10 @@ export const IconSprite: React.FC = () => (
       <path d="M12 2 1 21h22z" strokeLinejoin="round" />
       <path d="M12 9v5M12 17h.01" />
     </symbol>
+    <symbol id="i-info" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5M12 7.5h.01" />
+    </symbol>
     <symbol id="i-check" viewBox="0 0 24 24">
       <path d="M5 12l5 5L20 7" />
     </symbol>
diff --git a/src/Icon/iconNames.ts b/src/Icon/iconNames.ts
index b0fc4c4..70dc11b 100644
--- a/src/Icon/iconNames.ts
+++ b/src/Icon/iconNames.ts
@@ -35,6 +35,7 @@ export const ICON_NAMES = [
   'search',
   'menu',
   'warning',
+  'info',
   'check',
   'plus'
 ] as const;
diff --git a/src/TextArea/TextArea.module.scss b/src/TextArea/TextArea.module.scss
index fc7cd6d..9c05833 100644
--- a/src/TextArea/TextArea.module.scss
+++ b/src/TextArea/TextArea.module.scss
@@ -21,3 +21,17 @@
     color: $gray-400;
   }
 }
+
+// Инлайн-ввод в ячейке таблицы: без рамки/фона, компактный, без ручного ресайза.
+.borderless {
+  border-color: transparent;
+  background: transparent;
+  padding: 6px 8px;
+  min-height: 32px;
+  resize: none;
+
+  &:focus {
+    background: $white;
+    border-color: $gold-500;
+  }
+}
diff --git a/src/TextArea/TextArea.tsx b/src/TextArea/TextArea.tsx
index abdb5ee..37a78a0 100644
--- a/src/TextArea/TextArea.tsx
+++ b/src/TextArea/TextArea.tsx
@@ -10,20 +10,25 @@ interface ITextAreaProps {
   rows?: number;
   /** Только чтение (режим согласующего). */
   readOnly?: boolean;
+  /** Без рамки/фона — для инлайн-ввода в ячейках таблиц. */
+  borderless?: boolean;
+  /** a11y-подпись, когда видимого label нет. */
+  ariaLabel?: string;
 }
 
 /** Многострочный ввод (SharePoint Note). */
-export const TextArea: React.FC<ITextAreaProps> = ({ id, value, onChange, placeholder, rows = 3, readOnly }) => {
+export const TextArea: React.FC<ITextAreaProps> = ({ id, value, onChange, placeholder, rows = 3, readOnly, borderless, ariaLabel }) => {
   const contextReadOnly = useFormReadOnly();
   const effectiveReadOnly = readOnly ?? contextReadOnly;
   return (
     <textarea
       id={id}
-      className={styles.textarea}
+      className={[styles.textarea, borderless ? styles.borderless : ''].filter(Boolean).join(' ')}
       value={value}
       placeholder={placeholder}
       rows={rows}
       readOnly={effectiveReadOnly}
+      aria-label={ariaLabel}
       onChange={(e) => onChange(e.target.value)}
     />
   );
diff --git a/src/TextInput/TextInput.module.scss b/src/TextInput/TextInput.module.scss
index d3a3505..f855627 100644
--- a/src/TextInput/TextInput.module.scss
+++ b/src/TextInput/TextInput.module.scss
@@ -19,3 +19,16 @@
     color: $gray-400;
   }
 }
+
+// Инлайн-ввод в ячейке таблицы: без рамки/фона, компактнее; рамка/фон проявляются на фокусе.
+.borderless {
+  border-color: transparent;
+  background: transparent;
+  padding: 6px 8px;
+  border-radius: 4px;
+
+  &:focus {
+    background: $white;
+    border-color: $gold-500;
+  }
+}
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
index a8b307c..b32aa54 100644
--- a/src/TextInput/TextInput.tsx
+++ b/src/TextInput/TextInput.tsx
@@ -19,6 +19,12 @@ interface ITextInputProps {
    */
   min?: string | number;
   max?: string | number;
+  /** Без рамки/фона — для инлайн-ввода в ячейках таблиц (рамка проявляется на фокусе). */
+  borderless?: boolean;
+  /** a11y-подпись, когда видимого label нет (ячейки таблиц). */
+  ariaLabel?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  autoFocus?: boolean;
 }
 
 /** Однострочный ввод. type='number'|'date' — для числовых полей и дат. */
@@ -30,20 +36,27 @@ export const TextInput: React.FC<ITextInputProps> = ({
   placeholder,
   readOnly,
   min,
-  max
+  max,
+  borderless,
+  ariaLabel,
+  onKeyDown,
+  autoFocus
 }) => {
   const contextReadOnly = useFormReadOnly();
   const effectiveReadOnly = readOnly ?? contextReadOnly;
   return (
     <input
       id={id}
-      className={styles.input}
+      className={[styles.input, borderless ? styles.borderless : ''].filter(Boolean).join(' ')}
       type={type}
       value={value}
       placeholder={placeholder}
       readOnly={effectiveReadOnly}
+      aria-label={ariaLabel}
       min={min}
       max={max}
+      autoFocus={autoFocus}
+      onKeyDown={onKeyDown}
       onChange={(e) => onChange(e.target.value)}
     />
   );