@ryuzaki13/react-foundation-ui 1.2.7 → 1.2.8

package/storybook-static/assets/Table-4x8XIQpa.js

@@ -0,0 +1,197 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-GmIo3IOR.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-0RiOsxIK.js";import{t as f}from"./mdx-react-shim-DQ40dZsI.js";import{Basic as p,Empty as m,Fetching as h,Loading as g,MultiSelect as _,ReachEnd as v,WithColumnPinning as y,WithDisabledRows as b,WithFormattingPipeline as x,WithFormulaColumn as S,WithHiddenZero as C,WithMergedDuplicates as w,WithODataMetadataAdapter as T,WithUseODataTableColumnsBuildHook as E,WithUseODataTableColumnsEnrichHook as D,n as O,t as k}from"./Table.stories-DLsx7_5W.js";function A(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(o,{of:k,parameters:{docs:{toc:!0}}}),`
+`,(0,M.jsx)(l,{children:`Table`}),`
+`,(0,M.jsxs)(a,{children:[`Плоская таблица как React-альтернатива `,(0,M.jsx)(t.code,{children:`sap.m.Table`})]}),`
+`,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`Table`}),` предназначен для плоских данных и по поведению осознанно сближен с `,(0,M.jsx)(t.code,{children:`TreeTable`}),`.
+Оба компонента используют общий табличный каркас, поэтому здесь совпадают states загрузки, визуальная структура, обработка выбора строк и клавиатурная активация.
+`,(0,M.jsx)(t.code,{children:`Table`}),` также поддерживает декларативное форматирование через `,(0,M.jsx)(t.code,{children:`meta.formatting`}),`, formulas, безопасное pipeline-formatting и optional OData adapter.`]}),`
+`,(0,M.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,M.jsx)(d,{}),`
+`,(0,M.jsx)(r,{of:p}),`
+`,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`import { Table, type TableColumnDef } from "@/shared/ui";
+
+interface DealRow {
+	id: string;
+	number: string;
+	client: string;
+	amount: string;
+}
+
+const columns: TableColumnDef<DealRow>[] = [
+	{
+		id: "number",
+		accessorKey: "number",
+		header: "Номер",
+		meta: { width: "9em" }
+	},
+	{
+		id: "client",
+		accessorKey: "client",
+		header: "Клиент",
+		meta: { width: "14em" }
+	},
+	{
+		id: "amount",
+		accessorKey: "amount",
+		header: "Сумма",
+		meta: { width: "10em", align: "right" }
+	}
+];
+
+export function Example({ rows }: { rows: DealRow[] }) {
+	return <Table data={rows} columns={columns} getRowId={(row) => row.id} selectionMode="single" height="20em" />;
+}
+`})}),`
+`,(0,M.jsx)(t.h2,{id:`форматирование-ячеек`,children:`Форматирование ячеек`}),`
+`,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`meta.formatting`}),` добавляет к колонке декларативный runtime-контракт:`]}),`
+`,(0,M.jsxs)(t.ul,{children:[`
+`,(0,M.jsxs)(t.li,{children:[`typed formatting по `,(0,M.jsx)(t.code,{children:`role/type`}),`;`]}),`
+`,(0,M.jsx)(t.li,{children:`formula-based вычисление значения;`}),`
+`,(0,M.jsxs)(t.li,{children:[`pipeline display-formatting (`,(0,M.jsx)(t.code,{children:`normalizeLeadingZeros`}),`, `,(0,M.jsx)(t.code,{children:`resolveValueState`}),`, `,(0,M.jsx)(t.code,{children:`typedValueFormat`}),`);`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`emptyWhenZero`}),` для скрытия нулевых значений;`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`overflowTooltip`}),` для длинного текста.`]}),`
+`]}),`
+`,(0,M.jsx)(t.p,{children:`Важно:`}),`
+`,(0,M.jsxs)(t.ul,{children:[`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`meta.formatting`}),` применяется только если у колонки нет кастомного `,(0,M.jsx)(t.code,{children:`cell`}),`;`]}),`
+`,(0,M.jsx)(t.li,{children:`formulas и pipeline компилируются один раз на снимок колонок;`}),`
+`,(0,M.jsxs)(t.li,{children:[`ошибки formula/pipeline не роняют таблицу и не подставляют универсальный `,(0,M.jsx)(t.code,{children:`0`}),`;`]}),`
+`,(0,M.jsxs)(t.li,{children:[`OData adapter остаётся внешней прослойкой, а не частью `,(0,M.jsx)(t.code,{children:`Table`}),`.`]}),`
+`]}),`
+`,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`const columns: TableColumnDef<Row>[] = [
+	{
+		id: "amount",
+		accessorKey: "amount",
+		header: "Сумма",
+		meta: {
+			align: "right",
+			formatting: {
+				role: "measure",
+				type: "decimal",
+				emptyWhenZero: true
+			}
+		}
+	}
+];
+`})}),`
+`,(0,M.jsxs)(t.p,{children:[`Для OData-сценариев можно не прописывать `,(0,M.jsx)(t.code,{children:`role/type`}),` вручную, а обогатить колонки через adapter:`]}),`
+`,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`import { enrichTableColumnsWithODataFormatting } from "@ryuzaki13/react-foundation-lib/table";
+
+const columns = enrichTableColumnsWithODataFormatting(manualColumns, metadata.columns);
+`})}),`
+`,(0,M.jsx)(t.h2,{id:`слияние-дубликатов`,children:`Слияние дубликатов`}),`
+`,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`meta.mergeDuplicates`}),` включает display-only слияние подряд идущих одинаковых raw-значений без изменения структуры строк.`]}),`
+`,(0,M.jsx)(t.p,{children:`Важно:`}),`
+`,(0,M.jsxs)(t.ul,{children:[`
+`,(0,M.jsxs)(t.li,{children:[`сравнение идёт по `,(0,M.jsx)(t.code,{children:`cell.getValue()`}),`, а не по formatted display;`]}),`
+`,(0,M.jsx)(t.li,{children:`объединяются только подряд идущие строки;`}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`null`}),`, `,(0,M.jsx)(t.code,{children:`undefined`}),` и пустая строка `,(0,M.jsx)(t.code,{children:`""`}),` не объединяются;`]}),`
+`,(0,M.jsx)(t.li,{children:`повторяющееся значение остаётся только в первой строке группы, а ниже рендерятся пустые ячейки;`}),`
+`,(0,M.jsx)(t.li,{children:`если сервер не отсортировал данные так, чтобы дубликаты шли подряд, слияния не будет.`}),`
+`]}),`
+`,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`const columns: TableColumnDef<Row>[] = [
+	{
+		id: "division",
+		accessorKey: "division",
+		header: "Дивизион",
+		meta: {
+			mergeDuplicates: true
+		}
+	}
+];
+`})}),`
+`,(0,M.jsxs)(t.h2,{id:`хук-useodatatablecolumns`,children:[`Хук `,(0,M.jsx)(t.code,{children:`useODataTableColumns`})]}),`
+`,(0,M.jsxs)(t.p,{children:[`Наиболее частый кейс - работать не с pure-helper напрямую, а с hook-слоем `,(0,M.jsx)(t.code,{children:`useODataTableColumns(...)`}),`.`]}),`
+`,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`build`}),` стоит выбирать, когда колонки можно полностью собрать из `,(0,M.jsx)(t.code,{children:`metadata.columns`}),`:`]}),`
+`,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`import { useODataTableColumns } from "@ryuzaki13/react-foundation-api/odata";
+import { Table } from "@/shared/ui";
+
+function DealsTable({ rows }: { rows: DealRow[] }) {
+	const { columns, metadata, isLoading } = useODataTableColumns<DealRow>({
+		service: "ZSD_SALES_SRV",
+		entity: "DealSet",
+		mode: "build"
+	});
+
+	return (
+		<Table
+			title={metadata?.title ?? "Сделки"}
+			data={rows}
+			columns={columns}
+			isLoading={isLoading}
+			getRowId={(row) => row.id}
+			selectionMode="single"
+		/>
+	);
+}
+`})}),`
+`,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`enrich`}),` подходит, когда колонки уже описаны вручную и нужно только дозаполнить `,(0,M.jsx)(t.code,{children:`meta.formatting.role/type`}),`:`]}),`
+`,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`import { useODataTableColumns } from "@ryuzaki13/react-foundation-api/odata";
+import { Table } from "@/shared/ui";
+
+const manualColumns: TableColumnDef<DealRow>[] = [
+	{ id: "product", accessorKey: "product", header: "Позиция" },
+	{ id: "createdAt", accessorKey: "createdAt", header: "Создано" },
+	{ id: "totalAmount", accessorKey: "totalAmount", header: "Итог", meta: { align: "right" } }
+];
+
+function DealsTable({ rows }: { rows: DealRow[] }) {
+	const { columns, isLoading } = useODataTableColumns<DealRow>({
+		service: "ZSD_SALES_SRV",
+		entity: "DealSet",
+		mode: "enrich",
+		columns: manualColumns
+	});
+
+	return <Table data={rows} columns={columns} isLoading={isLoading} getRowId={(row) => row.id} selectionMode="single" />;
+}
+`})}),`
+`,(0,M.jsx)(t.p,{children:`Практическая семантика хука:`}),`
+`,(0,M.jsxs)(t.ul,{children:[`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`columns`}),` уже готовы для прямой передачи в `,(0,M.jsx)(t.code,{children:`Table`}),`;`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`metadata`}),` можно использовать для заголовка, пустых состояний или дополнительной UI-подписи;`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`isLoading`}),` нужно прокидывать в `,(0,M.jsx)(t.code,{children:`Table`}),`, чтобы сохранить единое табличное состояние загрузки;`]}),`
+`,(0,M.jsxs)(t.li,{children:[`сам `,(0,M.jsx)(t.code,{children:`Table`}),` остаётся OData-независимым и получает только готовые `,(0,M.jsx)(t.code,{children:`columns`}),`.`]}),`
+`]}),`
+`,(0,M.jsx)(t.h2,{id:`что-важно-знать`,children:`Что важно знать`}),`
+`,(0,M.jsxs)(t.ul,{children:[`
+`,(0,M.jsx)(t.li,{children:`Компонент принимает именно плоский массив строк и не содержит древовидной логики.`}),`
+`,(0,M.jsxs)(t.li,{children:[`Поведение `,(0,M.jsx)(t.code,{children:`selectionMode`}),` идентично `,(0,M.jsx)(t.code,{children:`TreeTable`}),`: `,(0,M.jsx)(t.code,{children:`single`}),` не снимает выбор повторным кликом по уже выбранной строке.`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`height`}),` и ширины колонок можно задавать строками в `,(0,M.jsx)(t.code,{children:`em`}),`, `,(0,M.jsx)(t.code,{children:`rem`}),`, `,(0,M.jsx)(t.code,{children:`%`}),` и других CSS-единицах; числовые значения трактуются как `,(0,M.jsx)(t.code,{children:`em`}),`.`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`onReachEnd`}),` срабатывает внутри scroll-контейнера и подходит для постепенной догрузки длинного списка.`]}),`
+`,(0,M.jsxs)(t.li,{children:[(0,M.jsx)(t.code,{children:`Table`}),` не зависит от OData напрямую и продолжает работать на plain local data без metadata.`]}),`
+`]}),`
+`,(0,M.jsx)(t.h2,{id:`сценарии`,children:`Сценарии`}),`
+`,(0,M.jsx)(t.h3,{id:`базовый-режим`,children:`Базовый режим`}),`
+`,(0,M.jsx)(u,{of:p}),`
+`,(0,M.jsx)(t.h3,{id:`left-pinning-столбцов`,children:`Left-pinning столбцов`}),`
+`,(0,M.jsx)(u,{of:y}),`
+`,(0,M.jsx)(t.h3,{id:`множественный-выбор`,children:`Множественный выбор`}),`
+`,(0,M.jsx)(u,{of:_}),`
+`,(0,M.jsx)(t.h3,{id:`строки-с-ограничением-выбора`,children:`Строки с ограничением выбора`}),`
+`,(0,M.jsx)(u,{of:b}),`
+`,(0,M.jsx)(t.h3,{id:`фоновое-обновление-данных`,children:`Фоновое обновление данных`}),`
+`,(0,M.jsx)(u,{of:h}),`
+`,(0,M.jsx)(t.h3,{id:`пустая-таблица`,children:`Пустая таблица`}),`
+`,(0,M.jsx)(u,{of:m}),`
+`,(0,M.jsx)(t.h3,{id:`достижение-конца-списка`,children:`Достижение конца списка`}),`
+`,(0,M.jsx)(u,{of:v}),`
+`,(0,M.jsx)(t.h3,{id:`первичная-загрузка`,children:`Первичная загрузка`}),`
+`,(0,M.jsx)(u,{of:g}),`
+`,(0,M.jsx)(t.h3,{id:`formula-based-колонка`,children:`Formula-based колонка`}),`
+`,(0,M.jsx)(u,{of:S}),`
+`,(0,M.jsx)(t.h3,{id:`pipeline-display-formatting`,children:`Pipeline display-formatting`}),`
+`,(0,M.jsx)(u,{of:x}),`
+`,(0,M.jsx)(t.h3,{id:`скрытие-нулевых-значений`,children:`Скрытие нулевых значений`}),`
+`,(0,M.jsx)(u,{of:C}),`
+`,(0,M.jsx)(t.h3,{id:`слияние-дубликатов-1`,children:`Слияние дубликатов`}),`
+`,(0,M.jsx)(u,{of:w}),`
+`,(0,M.jsx)(t.h3,{id:`odata-metadata-adapter`,children:`OData metadata adapter`}),`
+`,(0,M.jsx)(u,{of:T}),`
+`,(0,M.jsx)(t.h3,{id:`useodatatablecolumns-build`,children:`useODataTableColumns: build`}),`
+`,(0,M.jsx)(u,{of:E}),`
+`,(0,M.jsx)(t.h3,{id:`useodatatablecolumns-enrich`,children:`useODataTableColumns: enrich`}),`
+`,(0,M.jsx)(u,{of:D}),`
+`,(0,M.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,M.jsx)(c,{of:k}),`
+`,(0,M.jsx)(t.h2,{id:`все-stories`,children:`Все stories`}),`
+`,(0,M.jsx)(i,{includePrimary:!1})]})}function j(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,M.jsx)(t,{...e,children:(0,M.jsx)(A,{...e})}):A(e)}var M;e((()=>{M=t(),f(),s(),O()}))();export{j as default};

package/storybook-static/assets/{Table.stories-BZOmuXFd.js → Table.stories-DLsx7_5W.js}

@@ -1,4 +1,4 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{t as a,w as ee}from"./formatters-Br290Dmy.js";import{D as te,E as o,T as ne,c as re,l as ie,s as ae,t as s,v as c,w as oe}from"./odata-jXHOPHLv.js";import{C as se,S as ce,d as le,g as ue,i as de,l as fe,m as pe,n as me,p as he,s as ge,t as l,v as _e,x as u,y as ve}from"./base-table-C7bVdENP.js";var d,f,p,ye=n((()=>{d=`hKghZt`,f=`QsLRvS`,p={selectedIndicatorCell:d,sentinel:f}}));function be(e,t){return String(t)}function m({title:e,isLoading:t,isFetching:n,data:r,columns:i,selectionMode:a=`none`,selectedRowIds:te,getRowId:o,className:ne,minHeight:ie,tableClassName:ae,columnVisibility:s,defaultColumnVisibility:c,columnOrder:oe,defaultColumnOrder:l,columnSizing:u,defaultColumnSizing:d,columnPinning:f,defaultColumnPinning:ye,enableColumnResizing:m=!1,enableColumnReordering:xe=!1,columnResizeMinWidth:_,onColumnVisibilityChange:Se,onColumnOrderChange:Ce,onColumnSizingChange:we,onColumnPinningChange:Te,onRowClick:v,onRowSelectionChange:y,onReachEnd:b,getRowCanSelect:x,getRowClassName:S,renderHeaderContextMenu:C,renderCellContent:w}){let T=(0,h.useMemo)(()=>r??[],[r]),E=(0,h.useMemo)(()=>ue(i),[i]),D=o??be,O=(0,h.useMemo)(()=>new Map(T.map((e,t)=>[D(e,t),e])),[D,T]),k=(0,h.useMemo)(()=>Array.from(O.keys()),[O]),A=(0,h.useRef)(null),j=(0,h.useRef)(null),{rowSelection:M,activateRowSelection:N}=re({availableRowIds:k,rowById:O,selectionMode:a,selectedRowIds:te,onRowSelectionChange:y}),{columnVisibility:P,onColumnVisibilityChange:F}=ge({columnVisibility:s,defaultColumnVisibility:c,onColumnVisibilityChange:Se}),{columnOrder:I,onColumnOrderChange:L}=he({columnOrder:oe,defaultColumnOrder:l,onColumnOrderChange:Ce}),{columnSizing:R,onColumnSizingChange:z}=fe({columnSizing:u,defaultColumnSizing:d,columnResizeMinWidth:_,onColumnSizingChange:we}),{columnPinning:B,onColumnPinningChange:V}=le({columnPinning:f,defaultColumnPinning:ye,onColumnPinningChange:Te}),H=(0,h.useMemo)(()=>({columnOrder:I,columnPinning:B,columnSizing:R,columnVisibility:P}),[I,B,R,P]),U=(0,h.useEffectEvent)(()=>{b?.()});(0,h.useEffect)(()=>{if(!b||!A.current||!j.current||t)return;let e=new IntersectionObserver(e=>{e[0]?.isIntersecting&&U()},{root:A.current,threshold:.1});return e.observe(j.current),()=>e.disconnect()},[t,b,T.length]);let W=ce({data:T,columns:i,state:{columnOrder:I,columnPinning:B,columnSizing:R,columnVisibility:P,rowSelection:M},onColumnOrderChange:L,onColumnPinningChange:V,onColumnSizingChange:z,onColumnVisibilityChange:F,getRowId:(e,t)=>D(e,t),getCoreRowModel:se(),enableMultiRowSelection:a===`multi`,enableRowSelection:e=>a===`none`?!1:x?x(e.original):!0}),G=ve(W,H),K=W.getRowModel().rows,q=(0,h.useMemo)(()=>pe({rows:K,columns:G}),[K,G]),J=G[0]?.id;return(0,g.jsx)(de,{table:W,columnState:H,title:e,isLoading:t,isFetching:n,className:ne,minHeight:ie,tableClassName:ae,selectionMode:a,scrollableRef:A,onActivateRow:a!==`none`||v?e=>{N(e.id,e.getCanSelect()),v?.(e.original)}:void 0,isRowInteractive:e=>!!(v||a!==`none`&&e.getCanSelect()),getRowClassName:e=>S?.(e.original),getCellClassName:({row:e,cell:t})=>t.column.id===J&&e.getIsSelected()?p.selectedIndicatorCell:void 0,getCellLayout:({cell:e})=>q.get(e.id),renderHeaderContextMenu:C,enableColumnResizing:m,enableColumnReordering:xe,columnResizeMinWidth:_,renderCellContent:e=>{let t=ee({field:E.runtimeByColumnId[e.cell.column.id],rawValue:e.cell.getValue(),rowData:e.row.original,rowKind:`plain`}),n=_e({columnId:e.cell.column.id,runtimeByColumnId:E.runtimeByColumnId,customCellColumnIds:E.customCellColumnIds})?(0,g.jsx)(me,{displayValue:t,align:e.columnMeta?.align}):e.defaultContent;return w?w({...e,defaultContent:n,displayValue:t}):n},afterTableContent:b?(0,g.jsx)(`div`,{ref:j,className:p.sentinel,"aria-hidden":`true`}):null})}var h,g,xe=n((()=>{h=t(r(),1),a(),c(),u(),l(),ye(),g=i(),m.__docgenInfo={description:"Плоская таблица на базе TanStack Table как React-альтернатива `sap.m.Table`.",methods:[],displayName:`Table`,props:{title:{required:!1,tsType:{name:`string`},description:`Необязательный заголовок над таблицей.`},isLoading:{required:!1,tsType:{name:`boolean`},description:`Признак первичной загрузки.`},isFetching:{required:!1,tsType:{name:`boolean`},description:`Признак фоновой догрузки или обновления данных.`},data:{required:!0,tsType:{name:`union`,raw:`readonly TData[] | undefined | null`,elements:[{name:`unknown`},{name:`undefined`},{name:`null`}]},description:`Плоский источник строк.`},columns:{required:!0,tsType:{name:`unknown`},description:`Описание колонок таблицы.`},selectionMode:{required:!1,tsType:{name:`TableSelectionMode`},description:`Режим выбора строк.`,defaultValue:{value:`"none"`,computed:!1}},selectedRowIds:{required:!1,tsType:{name:`unknown`},description:`Внешний список выбранных строк.
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-GmIo3IOR.js";import{t as a,w as ee}from"./formatters-3Nbt_zpw.js";import{D as te,E as o,T as ne,c as re,l as ie,s as ae,t as s,v as c,w as oe}from"./odata-BXYPW5TY.js";import{C as se,S as ce,d as le,g as ue,i as de,l as fe,m as pe,n as me,p as he,s as ge,t as l,v as _e,x as u,y as ve}from"./base-table-ByITBr1J.js";var d,f,p,ye=n((()=>{d=`hKghZt`,f=`QsLRvS`,p={selectedIndicatorCell:d,sentinel:f}}));function be(e,t){return String(t)}function m({title:e,isLoading:t,isFetching:n,data:r,columns:i,selectionMode:a=`none`,selectedRowIds:te,getRowId:o,className:ne,minHeight:ie,tableClassName:ae,columnVisibility:s,defaultColumnVisibility:c,columnOrder:oe,defaultColumnOrder:l,columnSizing:u,defaultColumnSizing:d,columnPinning:f,defaultColumnPinning:ye,enableColumnResizing:m=!1,enableColumnReordering:xe=!1,columnResizeMinWidth:_,onColumnVisibilityChange:Se,onColumnOrderChange:Ce,onColumnSizingChange:we,onColumnPinningChange:Te,onRowClick:v,onRowSelectionChange:y,onReachEnd:b,getRowCanSelect:x,getRowClassName:S,renderHeaderContextMenu:C,renderCellContent:w}){let T=(0,h.useMemo)(()=>r??[],[r]),E=(0,h.useMemo)(()=>ue(i),[i]),D=o??be,O=(0,h.useMemo)(()=>new Map(T.map((e,t)=>[D(e,t),e])),[D,T]),k=(0,h.useMemo)(()=>Array.from(O.keys()),[O]),A=(0,h.useRef)(null),j=(0,h.useRef)(null),{rowSelection:M,activateRowSelection:N}=re({availableRowIds:k,rowById:O,selectionMode:a,selectedRowIds:te,onRowSelectionChange:y}),{columnVisibility:P,onColumnVisibilityChange:F}=ge({columnVisibility:s,defaultColumnVisibility:c,onColumnVisibilityChange:Se}),{columnOrder:I,onColumnOrderChange:L}=he({columnOrder:oe,defaultColumnOrder:l,onColumnOrderChange:Ce}),{columnSizing:R,onColumnSizingChange:z}=fe({columnSizing:u,defaultColumnSizing:d,columnResizeMinWidth:_,onColumnSizingChange:we}),{columnPinning:B,onColumnPinningChange:V}=le({columnPinning:f,defaultColumnPinning:ye,onColumnPinningChange:Te}),H=(0,h.useMemo)(()=>({columnOrder:I,columnPinning:B,columnSizing:R,columnVisibility:P}),[I,B,R,P]),U=(0,h.useEffectEvent)(()=>{b?.()});(0,h.useEffect)(()=>{if(!b||!A.current||!j.current||t)return;let e=new IntersectionObserver(e=>{e[0]?.isIntersecting&&U()},{root:A.current,threshold:.1});return e.observe(j.current),()=>e.disconnect()},[t,b,T.length]);let W=ce({data:T,columns:i,state:{columnOrder:I,columnPinning:B,columnSizing:R,columnVisibility:P,rowSelection:M},onColumnOrderChange:L,onColumnPinningChange:V,onColumnSizingChange:z,onColumnVisibilityChange:F,getRowId:(e,t)=>D(e,t),getCoreRowModel:se(),enableMultiRowSelection:a===`multi`,enableRowSelection:e=>a===`none`?!1:x?x(e.original):!0}),G=ve(W,H),K=W.getRowModel().rows,q=(0,h.useMemo)(()=>pe({rows:K,columns:G}),[K,G]),J=G[0]?.id;return(0,g.jsx)(de,{table:W,columnState:H,title:e,isLoading:t,isFetching:n,className:ne,minHeight:ie,tableClassName:ae,selectionMode:a,scrollableRef:A,onActivateRow:a!==`none`||v?e=>{N(e.id,e.getCanSelect()),v?.(e.original)}:void 0,isRowInteractive:e=>!!(v||a!==`none`&&e.getCanSelect()),getRowClassName:e=>S?.(e.original),getCellClassName:({row:e,cell:t})=>t.column.id===J&&e.getIsSelected()?p.selectedIndicatorCell:void 0,getCellLayout:({cell:e})=>q.get(e.id),renderHeaderContextMenu:C,enableColumnResizing:m,enableColumnReordering:xe,columnResizeMinWidth:_,renderCellContent:e=>{let t=ee({field:E.runtimeByColumnId[e.cell.column.id],rawValue:e.cell.getValue(),rowData:e.row.original,rowKind:`plain`}),n=_e({columnId:e.cell.column.id,runtimeByColumnId:E.runtimeByColumnId,customCellColumnIds:E.customCellColumnIds})?(0,g.jsx)(me,{displayValue:t,align:e.columnMeta?.align}):e.defaultContent;return w?w({...e,defaultContent:n,displayValue:t}):n},afterTableContent:b?(0,g.jsx)(`div`,{ref:j,className:p.sentinel,"aria-hidden":`true`}):null})}var h,g,xe=n((()=>{h=t(r(),1),a(),c(),u(),l(),ye(),g=i(),m.__docgenInfo={description:"Плоская таблица на базе TanStack Table как React-альтернатива `sap.m.Table`.",methods:[],displayName:`Table`,props:{title:{required:!1,tsType:{name:`string`},description:`Необязательный заголовок над таблицей.`},isLoading:{required:!1,tsType:{name:`boolean`},description:`Признак первичной загрузки.`},isFetching:{required:!1,tsType:{name:`boolean`},description:`Признак фоновой догрузки или обновления данных.`},data:{required:!0,tsType:{name:`union`,raw:`readonly TData[] | undefined | null`,elements:[{name:`unknown`},{name:`undefined`},{name:`null`}]},description:`Плоский источник строк.`},columns:{required:!0,tsType:{name:`unknown`},description:`Описание колонок таблицы.`},selectionMode:{required:!1,tsType:{name:`TableSelectionMode`},description:`Режим выбора строк.`,defaultValue:{value:`"none"`,computed:!1}},selectedRowIds:{required:!1,tsType:{name:`unknown`},description:`Внешний список выбранных строк.
 
 Если передан, таблица синхронизирует визуальное выделение с этим набором id.`},getRowId:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(row: TData, index: number) => string`,signature:{arguments:[{type:{name:`TData`},name:`row`},{type:{name:`number`},name:`index`}],return:{name:`string`}}},description:`Стабильный идентификатор строки.
 

package/storybook-static/assets/Tabs-BYxa2MdO.js

@@ -0,0 +1,72 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-GmIo3IOR.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u}from"./blocks-0RiOsxIK.js";import{t as d}from"./mdx-react-shim-DQ40dZsI.js";import{BoxBasic as f,BoxControlled as p,BoxMountStrategies as m,BoxVertical as h,DisabledTabs as g,Empty as _,LayoutPanels as v,LegacyTabs as y,Loading as b,n as x,t as S}from"./Tabs.stories-Bs2uE5X2.js";function C(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(o,{of:S,parameters:{docs:{toc:!0}}}),`
+`,(0,T.jsx)(l,{children:`Tabs`}),`
+`,(0,T.jsx)(a,{children:`Набор tabs-компонентов с разделением простого scroll-сценария и составного panel-layout сценария`}),`
+`,(0,T.jsxs)(t.p,{children:[`После рефакторинга `,(0,T.jsx)(t.code,{children:`tabs`}),` разделены на два независимых сценария:`]}),`
+`,(0,T.jsxs)(t.ul,{children:[`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`TabsBox`}),` — простой items-based компонент, который сам управляет областью панели и её прокруткой.`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`TabsLayout`}),` — compound-компонент, который управляет только переключением вкладок и каркасом панели.`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`Tabs`}),` — deprecated-совместимость для старого API. Используется только как переходный фасад.`]}),`
+`]}),`
+`,(0,T.jsx)(t.h2,{id:`что-выбрать`,children:`Что выбрать`}),`
+`,(0,T.jsxs)(t.ul,{children:[`
+`,(0,T.jsxs)(t.li,{children:[`Выбирай `,(0,T.jsx)(t.code,{children:`TabsBox`}),`, если у вкладки один основной scroll-контент и встроенный padding подходит по умолчанию.`]}),`
+`,(0,T.jsxs)(t.li,{children:[`Выбирай `,(0,T.jsx)(t.code,{children:`TabsLayout`}),`, если внутри панели нужны `,(0,T.jsx)(t.code,{children:`toolbar`}),`, `,(0,T.jsx)(t.code,{children:`footer`}),` или несколько независимых scroll-областей.`]}),`
+`,(0,T.jsxs)(t.li,{children:[`Используй `,(0,T.jsx)(t.code,{children:`Tabs`}),` только для постепенной миграции существующего кода.`]}),`
+`]}),`
+`,(0,T.jsx)(t.h2,{id:`tabsbox`,children:`TabsBox`}),`
+`,(0,T.jsx)(u,{of:f}),`
+`,(0,T.jsx)(r,{of:f}),`
+`,(0,T.jsx)(t.pre,{children:(0,T.jsx)(t.code,{className:`language-tsx`,children:`import { TabsBox, type TabsBoxItem } from "@/shared/ui";
+
+const items: TabsBoxItem[] = [
+	{ id: "profile", title: "Профиль", content: <div>Содержимое профиля</div> },
+	{ id: "settings", title: "Настройки", content: <div>Содержимое настроек</div> }
+];
+
+export function Example() {
+	return <TabsBox items={items} aria-label="Разделы профиля" />;
+}
+`})}),`
+`,(0,T.jsxs)(t.p,{children:[(0,T.jsx)(t.code,{children:`TabsBox`}),` сохраняет встроенный padding панели, поддерживает `,(0,T.jsx)(t.code,{children:`loading`}),`/`,(0,T.jsx)(t.code,{children:`empty`}),` и остаётся подходящим дефолтом для модалок, карточек и классических вкладок с одним scroll-контейнером.`]}),`
+`,(0,T.jsxs)(t.h3,{id:`сценарии-tabsbox`,children:[`Сценарии `,(0,T.jsx)(t.code,{children:`TabsBox`})]}),`
+`,(0,T.jsx)(u,{of:p}),`
+`,(0,T.jsx)(u,{of:h}),`
+`,(0,T.jsx)(u,{of:m}),`
+`,(0,T.jsx)(u,{of:g}),`
+`,(0,T.jsx)(u,{of:b}),`
+`,(0,T.jsx)(u,{of:_}),`
+`,(0,T.jsx)(t.h2,{id:`tabslayout`,children:`TabsLayout`}),`
+`,(0,T.jsx)(u,{of:v}),`
+`,(0,T.jsx)(t.pre,{children:(0,T.jsx)(t.code,{className:`language-tsx`,children:`import { Scrollable, TabsLayout } from "@/shared/ui";
+
+export function Example() {
+	return (
+		<TabsLayout bordered h100 aria-label="Панели документа">
+			<TabsLayout.Tab id="details" title="Детали">
+				<TabsLayout.Toolbar>Панель инструментов</TabsLayout.Toolbar>
+				<TabsLayout.Content>
+					<Scrollable className="h100">Контент сам управляет scroll.</Scrollable>
+				</TabsLayout.Content>
+				<TabsLayout.Footer>Футер панели</TabsLayout.Footer>
+			</TabsLayout.Tab>
+		</TabsLayout>
+	);
+}
+`})}),`
+`,(0,T.jsxs)(t.p,{children:[`Семантика `,(0,T.jsx)(t.code,{children:`TabsLayout`}),` после рефакторинга:`]}),`
+`,(0,T.jsxs)(t.ul,{children:[`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`Toolbar`}),` и `,(0,T.jsx)(t.code,{children:`Footer`}),` всегда исключены из scroll-контента.`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`Content`}),` не получает встроенный `,(0,T.jsx)(t.code,{children:`overflow`}),` и не оборачивается во внутренний padding от tabs-компонента.`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`loading`}),` и `,(0,T.jsx)(t.code,{children:`empty`}),` состояния рендерятся снаружи вызывающим кодом.`]}),`
+`]}),`
+`,(0,T.jsx)(t.h2,{id:`deprecated-tabs`,children:`Deprecated Tabs`}),`
+`,(0,T.jsx)(u,{of:y}),`
+`,(0,T.jsxs)(t.p,{children:[(0,T.jsx)(t.code,{children:`Tabs`}),` сохранён только для обратной совместимости. Семантика до/после:`]}),`
+`,(0,T.jsxs)(t.ul,{children:[`
+`,(0,T.jsx)(t.li,{children:`До: один публичный компонент пытался одновременно управлять и tabs-state, и layout панели, и scroll-сценариями.`}),`
+`,(0,T.jsxs)(t.li,{children:[`После: `,(0,T.jsx)(t.code,{children:`Tabs`}),` остаётся тонким фасадом над `,(0,T.jsx)(t.code,{children:`TabsBox`}),`, а новые сценарии идут через отдельные `,(0,T.jsx)(t.code,{children:`TabsBox`}),` и `,(0,T.jsx)(t.code,{children:`TabsLayout`}),`.`]}),`
+`]}),`
+`,(0,T.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,T.jsx)(c,{of:S}),`
+`,(0,T.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,T.jsx)(i,{includePrimary:!1})]})}function w(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(C,{...e})}):C(e)}var T;e((()=>{T=t(),d(),s(),x()}))();export{w as default};

package/storybook-static/assets/{Tabs.stories-p59QJ2Tc.js → Tabs.stories-Bs2uE5X2.js}

@@ -1,4 +1,4 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o,o as ee}from"./utils-DKOsD-4R.js";import{c as s,i as c,o as l,t as u,u as d}from"./misc-CI386biM.js";function f(e){return e.find(e=>!e.disabled)?.id??null}function p(e,t){return t?e.find(e=>e.id===t&&!e.disabled)?.id??f(e):f(e)}function m(e){return e.filter(e=>!e.disabled)}function h({mountStrategy:e,isSelected:t,isVisited:n}){return e===`keep-mounted`||t||e===`lazy`&&n}var g=n((()=>{}));function _({items:e,value:t,defaultValue:n,onValueChange:r,orientation:i=`horizontal`,activationMode:a=`automatic`,loop:o=!0}){let s=t!==void 0,c=(0,v.useMemo)(()=>m(e),[e]),l=c[0]?.id??null,[u,d]=(0,v.useState)(()=>p(e,n)),[f,h]=(0,v.useState)(()=>p(e,t??n)),g=p(e,t??n),[_,y]=(0,v.useState)(()=>g?new Set([g]):new Set),b=(0,v.useId)(),x=(0,v.useRef)({}),S=p(e,s?t:u),C=p(e,f)??S??l,te=(0,v.useMemo)(()=>{if(!S||_.has(S))return _;let e=new Set(_);return e.add(S),e},[S,_]),w=t=>{let n=p(e,t);n&&(y(e=>{if(e.has(n))return e;let t=new Set(e);return t.add(n),t}),s||d(n),r?.(n))},ne=e=>{x.current[e]?.focus()},re=e=>{if(c.length<2)return;let t=ee({currentIndex:Math.max(0,c.findIndex(e=>e.id===(C??S??l))),itemCount:c.length,key:e.key,orientation:i,wrap:o});if(t===null)return;e.preventDefault();let n=c[t]?.id;n&&(h(n),ne(n),a===`automatic`&&w(n))},ie=e=>{let t=e.relatedTarget;t instanceof Node&&e.currentTarget.contains(t)||h(S??l)},T=e=>`${b}-tab-${e}`,E=e=>`${b}-panel-${e}`;return{activationMode:a,orientation:i,selectedTabId:S,tabbableTabId:C,onTabListKeyDown:re,onTabListBlur:ie,getTabElementId:T,getPanelElementId:E,getTabButtonProps:e=>{let t=e.id===S,n=e.id===C;return{ref:t=>{x.current[e.id]=t},type:`button`,role:`tab`,id:T(e.id),disabled:e.disabled,"aria-selected":t,"aria-controls":E(e.id),"aria-disabled":e.disabled||void 0,tabIndex:e.disabled?-1:n?0:-1,onFocus:()=>h(e.id),onClick:()=>w(e.id)}},isVisited:e=>te.has(e)}}var v,y=n((()=>{v=t(r(),1),o(),g()})),b,x,S,C,te,w,ne,re,ie,T,E,ae,oe,se,ce,le,D,O=n((()=>{b=`pcMjuj`,x=`ITP5v-`,S=`kzs94N`,C=`ZSAoAa`,te=`psYhsZ`,w=`mNDq9-`,ne=`g156KO`,re=`C2mO1e`,ie=`_28F3fs`,T=`UKZXTZ`,E=`jiTafe`,ae=`nhD0k7`,oe=`G8FICe`,se=`W50XHh`,ce=`vnjXkU`,le=`Nzvfhw`,D={tabsContainer:b,bordered:x,cleanPanel:S,tabs:C,panels:te,horizontal:w,vertical:ne,panelScrollable:re,tab:ie,selected:T,panel:E,panelBody:ae,layoutPanels:oe,layoutPanel:se,layoutSection:ce,layoutContent:le}}));function ue({containerClassName:e,tabListClassName:t,panelsClassName:n,panelClassName:r,panelBodyClassName:i,loadingText:o}){return(0,k.jsxs)(`div`,{className:e,children:[(0,k.jsx)(`div`,{className:t,"aria-hidden":`true`,children:(0,k.jsx)(`button`,{type:`button`,disabled:!0,"data-disabled":``,className:a(D.tab,`skeletonLine`),children:`Загрузка...`})}),(0,k.jsx)(`div`,{className:n,"aria-busy":`true`,children:(0,k.jsx)(`div`,{className:r,children:(0,k.jsx)(`div`,{className:i,children:(0,k.jsx)(d,{text:o,className:`radiusSm`})})})})]})}var k,de=n((()=>{o(),u(),O(),k=i(),ue.__docgenInfo={description:"Служебное loading-состояние для `TabsBox`.",methods:[],displayName:`TabsLoadingState`,props:{containerClassName:{required:!0,tsType:{name:`string`},description:``},tabListClassName:{required:!0,tsType:{name:`string`},description:``},panelsClassName:{required:!0,tsType:{name:`string`},description:``},panelClassName:{required:!0,tsType:{name:`string`},description:``},panelBodyClassName:{required:!0,tsType:{name:`string`},description:``},loadingText:{required:!1,tsType:{name:`string`},description:``}}}}));function fe({containerClassName:e,panelsClassName:t,panelClassName:n,panelBodyClassName:r}){return(0,A.jsx)(`div`,{className:e,children:(0,A.jsx)(`div`,{className:t,children:(0,A.jsx)(`div`,{className:n,children:(0,A.jsx)(`div`,{className:r,children:(0,A.jsx)(s,{className:`radiusSm`})})})})})}var A,pe=n((()=>{u(),A=i(),fe.__docgenInfo={description:"Служебное empty-состояние для `TabsBox`.",methods:[],displayName:`TabsNoDataState`,props:{containerClassName:{required:!0,tsType:{name:`string`},description:``},panelsClassName:{required:!0,tsType:{name:`string`},description:``},panelClassName:{required:!0,tsType:{name:`string`},description:``},panelBodyClassName:{required:!0,tsType:{name:`string`},description:``}}}}));function me({tabId:e,isSelected:t,className:n,getTabElementId:r,getPanelElementId:i,children:a}){return(0,he.jsx)(`div`,{role:`tabpanel`,id:i(e),"aria-labelledby":r(e),hidden:!t,className:n,children:a})}var he,ge=n((()=>{r(),he=i(),me.__docgenInfo={description:``,methods:[],displayName:`TabsPanel`,props:{tabId:{required:!0,tsType:{name:`string`},description:``},isSelected:{required:!0,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},getTabElementId:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(tabId: string) => string`,signature:{arguments:[{type:{name:`string`},name:`tabId`}],return:{name:`string`}}},description:``},getPanelElementId:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(tabId: string) => string`,signature:{arguments:[{type:{name:`string`},name:`tabId`}],return:{name:`string`}}},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}}}}));function _e({items:e,state:t,className:n,ariaLabel:r,ariaLabelledBy:i}){return(0,j.jsx)(`div`,{className:n,role:`tablist`,"aria-orientation":t.orientation,"aria-label":r,"aria-labelledby":i,onKeyDown:t.onTabListKeyDown,onBlur:t.onTabListBlur,children:(e=>t.orientation===`horizontal`?(0,j.jsx)(l,{children:e}):(0,j.jsx)(j.Fragment,{children:e}))(e.map(e=>(0,j.jsx)(`button`,{...t.getTabButtonProps(e),"data-ui":`tabs-tab`,"data-action":`select-tab`,className:a(D.tab,`textWrap`,e.id===t.selectedTabId&&D.selected),children:e.title},e.id)))})}var j,ve=n((()=>{o(),u(),O(),j=i(),_e.__docgenInfo={description:``,methods:[],displayName:`TabsTabList`,props:{items:{required:!0,tsType:{name:`Array`,elements:[{name:`TabsDescriptor`}],raw:`TabsDescriptor[]`},description:``},state:{required:!0,tsType:{name:`TabsStateModel`},description:``},className:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``},ariaLabelledBy:{required:!1,tsType:{name:`string`},description:``}}}}));function M({items:e,value:t,defaultValue:n,onValueChange:r,className:i,isLoading:o,loadingText:ee,cleanPanel:s,bordered:c=!1,orientation:l=`horizontal`,activationMode:u=`automatic`,mountStrategy:d=`unmount`,loop:f=!0,"aria-label":p,"aria-labelledby":m}){let g=_({items:e,value:t,defaultValue:n,onValueChange:r,orientation:l,activationMode:u,loop:f}),v=a(D.tabsContainer,D[l],c&&D.bordered,s&&D.cleanPanel,i),y=D.tabs,b=a(D.panels,D.panelScrollable,`scrollable overscroll`),x=D.panel,S=D.panelBody;return o?(0,N.jsx)(ue,{containerClassName:v,tabListClassName:y,panelsClassName:b,panelClassName:x,panelBodyClassName:S,loadingText:ee}):e.length?(0,N.jsxs)(`div`,{className:v,children:[(0,N.jsx)(_e,{items:e,state:g,className:y,ariaLabel:p,ariaLabelledBy:m}),(0,N.jsx)(`div`,{className:b,children:e.map(e=>{let t=e.id===g.selectedTabId;return h({mountStrategy:d,isSelected:t,isVisited:g.isVisited(e.id)})?(0,N.jsx)(me,{tabId:e.id,isSelected:t,className:x,getTabElementId:g.getTabElementId,getPanelElementId:g.getPanelElementId,children:(0,N.jsx)(`div`,{className:S,children:e.content})},e.id):null})})]}):(0,N.jsx)(fe,{containerClassName:v,panelsClassName:b,panelClassName:x,panelBodyClassName:S})}var N,ye=n((()=>{o(),g(),y(),O(),de(),pe(),ge(),ve(),N=i(),M.__docgenInfo={description:`Простой items-based tabs-компонент.
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-GmIo3IOR.js";import{a,i as o,o as ee}from"./utils-B73_kE2n.js";import{c as s,i as c,o as l,t as u,u as d}from"./misc-DSZ85X5k.js";function f(e){return e.find(e=>!e.disabled)?.id??null}function p(e,t){return t?e.find(e=>e.id===t&&!e.disabled)?.id??f(e):f(e)}function m(e){return e.filter(e=>!e.disabled)}function h({mountStrategy:e,isSelected:t,isVisited:n}){return e===`keep-mounted`||t||e===`lazy`&&n}var g=n((()=>{}));function _({items:e,value:t,defaultValue:n,onValueChange:r,orientation:i=`horizontal`,activationMode:a=`automatic`,loop:o=!0}){let s=t!==void 0,c=(0,v.useMemo)(()=>m(e),[e]),l=c[0]?.id??null,[u,d]=(0,v.useState)(()=>p(e,n)),[f,h]=(0,v.useState)(()=>p(e,t??n)),g=p(e,t??n),[_,y]=(0,v.useState)(()=>g?new Set([g]):new Set),b=(0,v.useId)(),x=(0,v.useRef)({}),S=p(e,s?t:u),C=p(e,f)??S??l,te=(0,v.useMemo)(()=>{if(!S||_.has(S))return _;let e=new Set(_);return e.add(S),e},[S,_]),w=t=>{let n=p(e,t);n&&(y(e=>{if(e.has(n))return e;let t=new Set(e);return t.add(n),t}),s||d(n),r?.(n))},ne=e=>{x.current[e]?.focus()},re=e=>{if(c.length<2)return;let t=ee({currentIndex:Math.max(0,c.findIndex(e=>e.id===(C??S??l))),itemCount:c.length,key:e.key,orientation:i,wrap:o});if(t===null)return;e.preventDefault();let n=c[t]?.id;n&&(h(n),ne(n),a===`automatic`&&w(n))},ie=e=>{let t=e.relatedTarget;t instanceof Node&&e.currentTarget.contains(t)||h(S??l)},T=e=>`${b}-tab-${e}`,E=e=>`${b}-panel-${e}`;return{activationMode:a,orientation:i,selectedTabId:S,tabbableTabId:C,onTabListKeyDown:re,onTabListBlur:ie,getTabElementId:T,getPanelElementId:E,getTabButtonProps:e=>{let t=e.id===S,n=e.id===C;return{ref:t=>{x.current[e.id]=t},type:`button`,role:`tab`,id:T(e.id),disabled:e.disabled,"aria-selected":t,"aria-controls":E(e.id),"aria-disabled":e.disabled||void 0,tabIndex:e.disabled?-1:n?0:-1,onFocus:()=>h(e.id),onClick:()=>w(e.id)}},isVisited:e=>te.has(e)}}var v,y=n((()=>{v=t(r(),1),o(),g()})),b,x,S,C,te,w,ne,re,ie,T,E,ae,oe,se,ce,le,D,O=n((()=>{b=`pcMjuj`,x=`ITP5v-`,S=`kzs94N`,C=`ZSAoAa`,te=`psYhsZ`,w=`mNDq9-`,ne=`g156KO`,re=`C2mO1e`,ie=`_28F3fs`,T=`UKZXTZ`,E=`jiTafe`,ae=`nhD0k7`,oe=`G8FICe`,se=`W50XHh`,ce=`vnjXkU`,le=`Nzvfhw`,D={tabsContainer:b,bordered:x,cleanPanel:S,tabs:C,panels:te,horizontal:w,vertical:ne,panelScrollable:re,tab:ie,selected:T,panel:E,panelBody:ae,layoutPanels:oe,layoutPanel:se,layoutSection:ce,layoutContent:le}}));function ue({containerClassName:e,tabListClassName:t,panelsClassName:n,panelClassName:r,panelBodyClassName:i,loadingText:o}){return(0,k.jsxs)(`div`,{className:e,children:[(0,k.jsx)(`div`,{className:t,"aria-hidden":`true`,children:(0,k.jsx)(`button`,{type:`button`,disabled:!0,"data-disabled":``,className:a(D.tab,`skeletonLine`),children:`Загрузка...`})}),(0,k.jsx)(`div`,{className:n,"aria-busy":`true`,children:(0,k.jsx)(`div`,{className:r,children:(0,k.jsx)(`div`,{className:i,children:(0,k.jsx)(d,{text:o,className:`radiusSm`})})})})]})}var k,de=n((()=>{o(),u(),O(),k=i(),ue.__docgenInfo={description:"Служебное loading-состояние для `TabsBox`.",methods:[],displayName:`TabsLoadingState`,props:{containerClassName:{required:!0,tsType:{name:`string`},description:``},tabListClassName:{required:!0,tsType:{name:`string`},description:``},panelsClassName:{required:!0,tsType:{name:`string`},description:``},panelClassName:{required:!0,tsType:{name:`string`},description:``},panelBodyClassName:{required:!0,tsType:{name:`string`},description:``},loadingText:{required:!1,tsType:{name:`string`},description:``}}}}));function fe({containerClassName:e,panelsClassName:t,panelClassName:n,panelBodyClassName:r}){return(0,A.jsx)(`div`,{className:e,children:(0,A.jsx)(`div`,{className:t,children:(0,A.jsx)(`div`,{className:n,children:(0,A.jsx)(`div`,{className:r,children:(0,A.jsx)(s,{className:`radiusSm`})})})})})}var A,pe=n((()=>{u(),A=i(),fe.__docgenInfo={description:"Служебное empty-состояние для `TabsBox`.",methods:[],displayName:`TabsNoDataState`,props:{containerClassName:{required:!0,tsType:{name:`string`},description:``},panelsClassName:{required:!0,tsType:{name:`string`},description:``},panelClassName:{required:!0,tsType:{name:`string`},description:``},panelBodyClassName:{required:!0,tsType:{name:`string`},description:``}}}}));function me({tabId:e,isSelected:t,className:n,getTabElementId:r,getPanelElementId:i,children:a}){return(0,he.jsx)(`div`,{role:`tabpanel`,id:i(e),"aria-labelledby":r(e),hidden:!t,className:n,children:a})}var he,ge=n((()=>{r(),he=i(),me.__docgenInfo={description:``,methods:[],displayName:`TabsPanel`,props:{tabId:{required:!0,tsType:{name:`string`},description:``},isSelected:{required:!0,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},getTabElementId:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(tabId: string) => string`,signature:{arguments:[{type:{name:`string`},name:`tabId`}],return:{name:`string`}}},description:``},getPanelElementId:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(tabId: string) => string`,signature:{arguments:[{type:{name:`string`},name:`tabId`}],return:{name:`string`}}},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}}}}));function _e({items:e,state:t,className:n,ariaLabel:r,ariaLabelledBy:i}){return(0,j.jsx)(`div`,{className:n,role:`tablist`,"aria-orientation":t.orientation,"aria-label":r,"aria-labelledby":i,onKeyDown:t.onTabListKeyDown,onBlur:t.onTabListBlur,children:(e=>t.orientation===`horizontal`?(0,j.jsx)(l,{children:e}):(0,j.jsx)(j.Fragment,{children:e}))(e.map(e=>(0,j.jsx)(`button`,{...t.getTabButtonProps(e),"data-ui":`tabs-tab`,"data-action":`select-tab`,className:a(D.tab,`textWrap`,e.id===t.selectedTabId&&D.selected),children:e.title},e.id)))})}var j,ve=n((()=>{o(),u(),O(),j=i(),_e.__docgenInfo={description:``,methods:[],displayName:`TabsTabList`,props:{items:{required:!0,tsType:{name:`Array`,elements:[{name:`TabsDescriptor`}],raw:`TabsDescriptor[]`},description:``},state:{required:!0,tsType:{name:`TabsStateModel`},description:``},className:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``},ariaLabelledBy:{required:!1,tsType:{name:`string`},description:``}}}}));function M({items:e,value:t,defaultValue:n,onValueChange:r,className:i,isLoading:o,loadingText:ee,cleanPanel:s,bordered:c=!1,orientation:l=`horizontal`,activationMode:u=`automatic`,mountStrategy:d=`unmount`,loop:f=!0,"aria-label":p,"aria-labelledby":m}){let g=_({items:e,value:t,defaultValue:n,onValueChange:r,orientation:l,activationMode:u,loop:f}),v=a(D.tabsContainer,D[l],c&&D.bordered,s&&D.cleanPanel,i),y=D.tabs,b=a(D.panels,D.panelScrollable,`scrollable overscroll`),x=D.panel,S=D.panelBody;return o?(0,N.jsx)(ue,{containerClassName:v,tabListClassName:y,panelsClassName:b,panelClassName:x,panelBodyClassName:S,loadingText:ee}):e.length?(0,N.jsxs)(`div`,{className:v,children:[(0,N.jsx)(_e,{items:e,state:g,className:y,ariaLabel:p,ariaLabelledBy:m}),(0,N.jsx)(`div`,{className:b,children:e.map(e=>{let t=e.id===g.selectedTabId;return h({mountStrategy:d,isSelected:t,isVisited:g.isVisited(e.id)})?(0,N.jsx)(me,{tabId:e.id,isSelected:t,className:x,getTabElementId:g.getTabElementId,getPanelElementId:g.getPanelElementId,children:(0,N.jsx)(`div`,{className:S,children:e.content})},e.id):null})})]}):(0,N.jsx)(fe,{containerClassName:v,panelsClassName:b,panelClassName:x,panelBodyClassName:S})}var N,ye=n((()=>{o(),g(),y(),O(),de(),pe(),ge(),ve(),N=i(),M.__docgenInfo={description:`Простой items-based tabs-компонент.
 Сам управляет областью панели и её прокруткой.`,methods:[],displayName:`TabsBox`,props:{value:{required:!1,tsType:{name:`string`},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},onValueChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},orientation:{required:!1,tsType:{name:`union`,raw:`"horizontal" | "vertical"`,elements:[{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"vertical"`}]},description:``,defaultValue:{value:`"horizontal"`,computed:!1}},activationMode:{required:!1,tsType:{name:`union`,raw:`"automatic" | "manual"`,elements:[{name:`literal`,value:`"automatic"`},{name:`literal`,value:`"manual"`}]},description:``,defaultValue:{value:`"automatic"`,computed:!1}},mountStrategy:{required:!1,tsType:{name:`union`,raw:`"unmount" | "lazy" | "keep-mounted"`,elements:[{name:`literal`,value:`"unmount"`},{name:`literal`,value:`"lazy"`},{name:`literal`,value:`"keep-mounted"`}]},description:``,defaultValue:{value:`"unmount"`,computed:!1}},loop:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},cleanPanel:{required:!1,tsType:{name:`boolean`},description:``},bordered:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``},"aria-label":{required:!1,tsType:{name:`string`},description:``},"aria-labelledby":{required:!1,tsType:{name:`string`},description:``},items:{required:!0,tsType:{name:`Array`,elements:[{name:`TabsBoxItem`}],raw:`TabsBoxItem[]`},description:``},isLoading:{required:!1,tsType:{name:`boolean`},description:``},loadingText:{required:!1,tsType:{name:`string`},description:``}}}}));function be({onChange:e,onValueChange:t,...n}){return(0,xe.jsx)(M,{...n,onValueChange:n=>{t?.(n),e?.(n)}})}var xe,Se=n((()=>{ye(),xe=i(),be.__docgenInfo={description:"@deprecated Используйте `TabsBox` для простого сценария и `TabsLayout` для составных layout-сценариев.",methods:[],displayName:`Tabs`,props:{value:{required:!1,tsType:{name:`string`},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},onValueChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},orientation:{required:!1,tsType:{name:`union`,raw:`"horizontal" | "vertical"`,elements:[{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"vertical"`}]},description:``},activationMode:{required:!1,tsType:{name:`union`,raw:`"automatic" | "manual"`,elements:[{name:`literal`,value:`"automatic"`},{name:`literal`,value:`"manual"`}]},description:``},mountStrategy:{required:!1,tsType:{name:`union`,raw:`"unmount" | "lazy" | "keep-mounted"`,elements:[{name:`literal`,value:`"unmount"`},{name:`literal`,value:`"lazy"`},{name:`literal`,value:`"keep-mounted"`}]},description:``},loop:{required:!1,tsType:{name:`boolean`},description:``},cleanPanel:{required:!1,tsType:{name:`boolean`},description:``},bordered:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},"aria-label":{required:!1,tsType:{name:`string`},description:``},"aria-labelledby":{required:!1,tsType:{name:`string`},description:``},items:{required:!0,tsType:{name:`Array`,elements:[{name:`TabsBoxItem`}],raw:`TabsBoxItem[]`},description:``},isLoading:{required:!1,tsType:{name:`boolean`},description:``},loadingText:{required:!1,tsType:{name:`string`},description:``},onChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``}}}}));function Ce(e){let{type:t}=e;if(typeof t==`function`){let e=t;return e.displayName??e.name??null}if(typeof t==`object`&&t&&`displayName`in t){let e=t;return typeof e.displayName==`string`?e.displayName:null}return null}function P(e,t){return(0,F.isValidElement)(e)&&Ce(e)===t}function we({children:e}){return(0,I.jsx)(I.Fragment,{children:e})}function Te({children:e}){return(0,I.jsx)(I.Fragment,{children:e})}function Ee({children:e}){return(0,I.jsx)(I.Fragment,{children:e})}function De({children:e}){return(0,I.jsx)(I.Fragment,{children:e})}function Oe(e,t){let n=null,r=null,i=null;for(let a of F.Children.toArray(e)){if(!(0,F.isValidElement)(a))throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`);if(P(a,L)){if(n)throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Toolbar.`);n=a.props;continue}if(P(a,je)){if(r)throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Content.`);r=a.props;continue}if(P(a,Me)){if(i)throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Footer.`);i=a.props;continue}throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`)}if(!r)throw Error(`TabsLayout.Tab "${t}" должен содержать блок TabsLayout.Content.`);return{toolbar:n,content:r,footer:i}}function ke(e){return F.Children.toArray(e).map(e=>{if(!P(e,Ae))throw Error(`TabsLayout принимает только дочерние элементы TabsLayout.Tab.`);return{id:e.props.id,title:e.props.title,disabled:e.props.disabled,...Oe(e.props.children,e.props.id)}})}var F,I,Ae,L,je,Me,R,z,Ne=n((()=>{F=t(r(),1),o(),g(),y(),O(),ge(),ve(),I=i(),Ae=`TabsLayout.Tab`,L=`TabsLayout.Toolbar`,je=`TabsLayout.Content`,Me=`TabsLayout.Footer`,we.displayName=Ae,Te.displayName=L,Ee.displayName=je,De.displayName=Me,R=({children:e,value:t,defaultValue:n,onValueChange:r,className:i,bordered:o,cleanPanel:ee,orientation:s=`horizontal`,activationMode:c=`manual`,mountStrategy:l=`lazy`,loop:u=!0,"aria-label":d,"aria-labelledby":f})=>{let p=(0,F.useMemo)(()=>ke(e),[e]),m=_({items:p,value:t,defaultValue:n,onValueChange:r,orientation:s,activationMode:c,loop:u}),g=a(D.tabsContainer,D[s],o&&D.bordered,ee&&D.cleanPanel,i),v=a(D.panels,D.layoutPanels);return(0,I.jsxs)(`div`,{className:g,children:[(0,I.jsx)(_e,{items:p,state:m,className:D.tabs,ariaLabel:d,ariaLabelledBy:f}),(0,I.jsx)(`div`,{className:v,children:p.map(e=>{let t=e.id===m.selectedTabId;if(!h({mountStrategy:l,isSelected:t,isVisited:m.isVisited(e.id)}))return null;let n=`${e.toolbar?`auto `:``}minmax(0, 1fr)${e.footer?` auto`:``}`;return(0,I.jsx)(me,{tabId:e.id,isSelected:t,className:D.panel,getTabElementId:m.getTabElementId,getPanelElementId:m.getPanelElementId,children:(0,I.jsxs)(`div`,{className:D.layoutPanel,style:{gridTemplateRows:n},children:[e.toolbar?(0,I.jsx)(`div`,{className:a(D.layoutSection,e.toolbar.className),children:e.toolbar.children}):null,(0,I.jsx)(`div`,{className:a(D.layoutSection,D.layoutContent,e.content.className),children:e.content.children}),e.footer?(0,I.jsx)(`div`,{className:a(D.layoutSection,e.footer.className),children:e.footer.children}):null]})},e.id)})})]})},R.displayName=`TabsLayout`,z=Object.assign(R,{Tab:we,Toolbar:Te,Content:Ee,Footer:De}),R.__docgenInfo={description:`Compound-оболочка tabs для составных panel-layout сценариев.
 Сам компонент управляет только переключением и каркасом панели.`,methods:[],displayName:`TabsLayout`,props:{value:{required:!1,tsType:{name:`string`},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},onValueChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},orientation:{required:!1,tsType:{name:`union`,raw:`"horizontal" | "vertical"`,elements:[{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"vertical"`}]},description:``,defaultValue:{value:`"horizontal"`,computed:!1}},activationMode:{required:!1,tsType:{name:`union`,raw:`"automatic" | "manual"`,elements:[{name:`literal`,value:`"automatic"`},{name:`literal`,value:`"manual"`}]},description:``,defaultValue:{value:`"manual"`,computed:!1}},mountStrategy:{required:!1,tsType:{name:`union`,raw:`"unmount" | "lazy" | "keep-mounted"`,elements:[{name:`literal`,value:`"unmount"`},{name:`literal`,value:`"lazy"`},{name:`literal`,value:`"keep-mounted"`}]},description:``,defaultValue:{value:`"lazy"`,computed:!1}},loop:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},cleanPanel:{required:!1,tsType:{name:`boolean`},description:``},bordered:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},"aria-label":{required:!1,tsType:{name:`string`},description:``},"aria-labelledby":{required:!1,tsType:{name:`string`},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}}}})),Pe=n((()=>{Se(),ye(),Ne()})),Fe=e({BoxBasic:()=>G,BoxControlled:()=>K,BoxMountStrategies:()=>J,BoxVertical:()=>q,DisabledTabs:()=>Y,Empty:()=>$,LayoutPanels:()=>X,LegacyTabs:()=>Z,Loading:()=>Q,__namedExportsOrder:()=>Ve,default:()=>Be});function Ie({label:e}){let[t,n]=(0,B.useState)(0);return(0,V.jsxs)(`div`,{style:H,children:[(0,V.jsxs)(`div`,{children:[`Панель: `,e]}),(0,V.jsxs)(`div`,{children:[`Локальный счётчик: `,t]}),(0,V.jsx)(`button`,{type:`button`,onClick:()=>n(e=>e+1),children:`Увеличить`})]})}function Le(){let[e,t]=(0,B.useState)(`details`);return(0,V.jsx)(`div`,{style:{height:360},children:(0,V.jsxs)(z,{value:e,onValueChange:t,bordered:!0,"aria-label":`Составные панели документа`,children:[(0,V.jsxs)(z.Tab,{id:`details`,title:`Детали`,children:[(0,V.jsx)(z.Toolbar,{children:(0,V.jsx)(`div`,{className:`surface0 border radiusSm paddingSm`,children:`Панель инструментов вне scroll-области.`})}),(0,V.jsx)(z.Content,{children:(0,V.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`1fr 1fr`,gap:12,height:`100%`},children:[(0,V.jsx)(c,{className:`surface0 border radiusSm paddingSm h100`,children:W.map(e=>(0,V.jsxs)(`div`,{className:`paddingBlockXs`,children:[`Левая колонка: `,e]},`left-${e}`))}),(0,V.jsx)(c,{className:`surface0 border radiusSm paddingSm h100`,children:W.map(e=>(0,V.jsxs)(`div`,{className:`paddingBlockXs`,children:[`Правая колонка: `,e]},`right-${e}`))})]})}),(0,V.jsx)(z.Footer,{children:(0,V.jsx)(`div`,{className:`surface0 border radiusSm paddingSm`,children:`Футер тоже исключён из scroll-контента.`})})]}),(0,V.jsx)(z.Tab,{id:`history`,title:`История`,children:(0,V.jsx)(z.Content,{children:(0,V.jsx)(c,{className:`surface0 border radiusSm paddingSm h100`,children:W.map(e=>(0,V.jsxs)(`div`,{className:`paddingBlockXs`,children:[`История изменения: `,e]},`history-${e}`))})})})]})})}var B,V,H,U,Re,ze,W,Be,G,K,q,J,Y,X,Z,Q,$,Ve,He=n((()=>{B=t(r(),1),Pe(),u(),V=i(),H={padding:16,display:`grid`,gap:12},U=[{id:`profile`,title:`Профиль`,content:(0,V.jsx)(`div`,{style:H,children:`Карточка пользователя и основные поля профиля.`})},{id:`settings`,title:`Настройки`,content:(0,V.jsx)(`div`,{style:H,children:`Параметры интерфейса, уведомлений и доступа.`})},{id:`history`,title:`История`,content:(0,V.jsx)(`div`,{style:H,children:`Последние действия, комментарии и изменения.`})}],Re=[{id:`first`,title:`Первая`,content:(0,V.jsx)(Ie,{label:`Первая`})},{id:`second`,title:`Вторая`,content:(0,V.jsx)(Ie,{label:`Вторая`})},{id:`third`,title:`Третья`,content:(0,V.jsx)(Ie,{label:`Третья`})}],ze=[{id:`overview`,title:`Обзор`,content:(0,V.jsx)(`div`,{style:H,children:`Раздел доступен сразу.`})},{id:`analytics`,title:`Аналитика`,disabled:!0,content:(0,V.jsx)(`div`,{style:H,children:`Пока недоступно.`})},{id:`history`,title:`История`,content:(0,V.jsx)(`div`,{style:H,children:`История изменений и действий.`})}],W=Array.from({length:12},(e,t)=>`Элемент ${t+1}`),Be={title:`Shared/UI/Tabs`,component:M,args:{items:U,orientation:`horizontal`,activationMode:`automatic`,mountStrategy:`unmount`,isLoading:!1,loadingText:`Загрузка вкладок...`,bordered:!1,loop:!0},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{items:{description:"Набор вкладок для `TabsBox`. Каждая вкладка задаётся через `id`, `title`, `content` и опциональный `disabled`.",control:!1},value:{description:`Активная вкладка в controlled-режиме.`,control:`text`},defaultValue:{description:`Начальная вкладка в uncontrolled-режиме.`,control:`text`},onValueChange:{description:`Вызывается при смене активной вкладки.`,control:!1},orientation:{description:`Направление списка вкладок.`,control:`inline-radio`,options:[`horizontal`,`vertical`]},activationMode:{description:"Режим клавиатурной активации: `automatic` меняет вкладку стрелками, `manual` только переводит фокус.",control:`inline-radio`,options:[`automatic`,`manual`]},mountStrategy:{description:"Политика монтирования панелей: `unmount`, `lazy` или `keep-mounted`.",control:`inline-radio`,options:[`unmount`,`lazy`,`keep-mounted`]},bordered:{description:`Добавляет рамку вокруг области панелей.`,control:`boolean`},loop:{description:`Разрешает циклическую навигацию стрелками и Home/End.`,control:`boolean`},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},isLoading:{description:"Показывает loading-состояние `TabsBox`.",control:`boolean`},loadingText:{description:`Текст внутри loading-состояния.`,control:`text`},"aria-label":{description:"Текстовая подпись для `tablist`, если рядом нет видимого заголовка.",control:`text`},"aria-labelledby":{description:"Ссылка на внешний заголовок `tablist`.",control:`text`}}},G={args:{"aria-label":`Основные разделы профиля`}},K={render:e=>{let[t,n]=(0,B.useState)(`settings`);return(0,V.jsx)(M,{...e,value:t,onValueChange:n})},args:{value:`settings`,"aria-label":`Управляемые вкладки`}},q={render:e=>(0,V.jsx)(`div`,{style:{height:320},children:(0,V.jsx)(M,{...e})}),args:{orientation:`vertical`,bordered:!0,"aria-label":`Вертикальные вкладки`}},J={render:e=>(0,V.jsx)(M,{...e,items:Re}),args:{mountStrategy:`lazy`,"aria-label":`Демонстрация стратегий монтирования`}},Y={args:{items:ze,"aria-label":`Вкладки с недоступным разделом`}},X={render:()=>(0,V.jsx)(Le,{})},Z={render:e=>(0,V.jsx)(be,{...e,items:U,"aria-label":`Устаревший совместимый API`}),parameters:{docs:{description:{story:"Совместимый фасад поверх `TabsBox`. Новый функционал добавляется только в `TabsBox` и `TabsLayout`."}}}},Q={args:{isLoading:!0,items:U}},$={args:{items:[]}},G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
   args: {

package/storybook-static/assets/TagInput.stories-8_Uk7z4a.js

@@ -0,0 +1,18 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{n,pn as r,s as i,t as a}from"./iframe-GmIo3IOR.js";import{a as o,i as s}from"./utils-B73_kE2n.js";import{n as c,t as l}from"./ui.module-wFHXkJzp.js";import{o as ee,u}from"./Input-CjJUuLEX.js";import{t as d}from"./input-BZoBzauA.js";function f(...e){return e.filter(Boolean).join(` `)||void 0}var p=t((()=>{}));function te(e){return e.trim()}function ne(e){return e}function re(e){return`Удалить тег «${e}»`}var m=t((()=>{})),h,g,_,v,y,b,x,S=t((()=>{h=`AoFB3K`,g=`PvaUEA`,_=`FZ-xEM`,v=`-RCqfG`,y=`ggY643`,b=`hiZq-y`,x={control:h,tagList:g,tag:_,tagText:v,removeButton:y,input:b}}));function C({ref:e,value:t,onChange:n,label:r,description:a,placeholder:s,size:l,disabled:d,readOnly:p=!1,error:m,onClearError:h,maxTags:g,normalizeTag:_=te,getTagKey:v=ne,addOnBlur:y=!0,getRemoveButtonAriaLabel:b=re,tokensAriaLabel:S=`Добавленные теги`,inputClassName:C,className:O,id:k,name:A,form:j,required:M,maxLength:N,onKeyDown:P,onPaste:F,onBlur:I,onCompositionStart:L,onCompositionEnd:R,"aria-describedby":z,"aria-labelledby":B,...ie}){let V=(0,w.useRef)(null),H=(0,w.useRef)(null),U=(0,w.useRef)(!1),[W,G]=(0,w.useState)(``),[ae,K]=(0,w.useState)(``),{controlId:q,labelId:J,descriptionId:oe,errorId:se,describedBy:ce}=u({id:k,hasLabel:r!=null,hasDescription:!!a,hasError:!!m}),Y=g===void 0?1/0:Math.max(0,Math.floor(g)),X=d||p,le=f(ce,z),ue=f(J,B);(0,w.useImperativeHandle)(e,()=>{let e=V.current;if(!e)throw Error(`TagInput: внутренний input недоступен при создании imperative handle.`);return e},[]);let Z=e=>{if(X)return;h?.();let r=[...t],i=new Set(r.map(e=>v(e))),a=[],o=0,s=!1;for(let t of e){let e=_(t);if(!e)continue;if(N!==void 0&&e.length>N){K(`Тег «${e}» длиннее допустимого значения.`);continue}let n=v(e);if(i.has(n)){o+=1;continue}if(r.length>=Y){s=!0;break}i.add(n),r.push(e),a.push(e)}a.length>0?(n(r),K(a.length===1?`Добавлен тег «${a[0]}».`:`Добавлено тегов: ${a.length}.`)):s?K(`Достигнуто максимальное количество тегов: ${Y}.`):o>0&&K(`Такой тег уже добавлен.`)},Q=()=>W?(Z(W.split(D)),G(``),!0):!1,$=e=>{if(X)return;let r=t[e];r!==void 0&&(n(t.filter((t,n)=>n!==e)),h?.(),K(`Удалён тег «${r}».`),V.current?.focus())},de=e=>{if(P?.(e),!(e.defaultPrevented||e.nativeEvent.isComposing||U.current||X)){if(e.key===`Enter`||e.key===`,`){(Q()||e.key===`,`)&&e.preventDefault();return}e.key===`Backspace`&&W.length===0&&t.length>0&&(e.preventDefault(),$(t.length-1))}},fe=e=>{if(F?.(e),e.defaultPrevented||X)return;let t=e.clipboardData.getData(`text`);if(!E.test(t))return;e.preventDefault();let n=e.currentTarget.selectionStart??W.length,r=e.currentTarget.selectionEnd??n,i=`${W.slice(0,n)}${t}${W.slice(r)}`;Z(i.split(D)),G(``)};return(0,T.jsxs)(ee,{label:r,description:a,disabled:d,className:O,size:l,error:m,controlId:q,labelId:J,descriptionId:oe,errorId:se,children:[(0,T.jsxs)(`div`,{ref:H,className:o(c.uiControl,m&&c.invalid,x.control),"data-disabled":d?``:void 0,"data-readonly":p?``:void 0,"data-invalid":m?``:void 0,onClick:()=>V.current?.focus(),children:[t.length>0&&(0,T.jsx)(`ul`,{className:x.tagList,"aria-label":S,children:t.map((e,t)=>(0,T.jsxs)(`li`,{className:x.tag,children:[(0,T.jsx)(`span`,{className:x.tagText,children:e}),!X&&(0,T.jsx)(`button`,{type:`button`,className:x.removeButton,onClick:e=>{e.stopPropagation(),$(t)},"aria-label":b(e,t),children:(0,T.jsx)(i,{"aria-hidden":`true`})})]},`${v(e)}-${t}`))}),(0,T.jsx)(`input`,{...ie,ref:V,id:q,form:j,disabled:d,readOnly:p,required:M&&t.length===0,maxLength:N,value:W,placeholder:t.length===0?s:void 0,"aria-invalid":!!m||void 0,"aria-labelledby":ue,"aria-describedby":le,className:o(x.input,C),onChange:e=>{let t=e.target.value,n=E.test(t);if(U.current)G(t);else if(n){let e=t.split(D),n=E.test(t.at(-1)??``)?``:e.pop()??``;Z(e),G(n)}else G(t);(U.current||!n)&&h?.()},onKeyDown:de,onPaste:fe,onCompositionStart:e=>{U.current=!0,L?.(e)},onCompositionEnd:e=>{U.current=!1,R?.(e)},onBlur:e=>{I?.(e);let t=e.relatedTarget,n=t instanceof Node&&H.current?.contains(t);!e.defaultPrevented&&!n&&y&&!X&&Q()}}),A&&t.map((e,t)=>(0,T.jsx)(`input`,{type:`hidden`,name:A,value:e,form:j,disabled:d},`${v(e)}-${t}`))]}),(0,T.jsx)(`span`,{className:`visuallyHidden`,"aria-live":`polite`,"aria-atomic":`true`,children:ae})]})}var w,T,E,D,O=t((()=>{w=e(r(),1),s(),n(),d(),l(),p(),m(),S(),T=a(),E=/[,\r\n]/,D=/[,\r\n]+/,C.__docgenInfo={description:"Controlled-поле для создания коротких строковых тегов.\n\nНовое значение фиксируется по `Enter`, запятой, вставке списка или потере фокуса. Компонент хранит\nтолько незавершённый текст input, а окончательный набор всегда принадлежит потребителю через `value`.",methods:[],displayName:`TagInput`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLInputElement`}],raw:`Ref<HTMLInputElement>`},description:"Ссылка на внутренний нативный `input`, передаваемая напрямую как React 19 prop."},error:{required:!1,tsType:{name:`string`},description:"Сообщение валидации, связанное с полем через `aria-describedby`."},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Сбрасывает внешнюю ошибку после изменения черновика или набора тегов.`},readOnly:{required:!1,tsType:{name:`boolean`},description:`Запрещает изменение набора тегов, сохраняя возможность выделять и копировать текст.`,defaultValue:{value:`false`,computed:!1}},maxTags:{required:!1,tsType:{name:`number`},description:`Максимальное количество тегов. Отсутствие значения не ограничивает набор.`},normalizeTag:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => string`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`string`}}},description:`Нормализует введённое значение перед проверкой дубликата и добавлением.
+По умолчанию удаляет пробелы в начале и конце.`,defaultValue:{value:`function defaultNormalizeTag(value: string) {
+	return value.trim();
+}`,computed:!1}},getTagKey:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => string`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`string`}}},description:`Возвращает ключ сравнения тегов. Позволяет, например, запретить дубликаты без учёта регистра.
+По умолчанию используется точное строковое сравнение.`,defaultValue:{value:`function defaultGetTagKey(value: string) {
+	return value;
+}`,computed:!1}},addOnBlur:{required:!1,tsType:{name:`boolean`},description:`Добавляет непустой черновик при уходе фокуса с input. По умолчанию включено.`,defaultValue:{value:`true`,computed:!1}},getRemoveButtonAriaLabel:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string, index: number) => string`,signature:{arguments:[{type:{name:`string`},name:`value`},{type:{name:`number`},name:`index`}],return:{name:`string`}}},description:`Формирует доступное имя кнопки удаления конкретного тега.`,defaultValue:{value:"function defaultGetRemoveButtonAriaLabel(value: string) {\n	return `Удалить тег «${value}»`;\n}",computed:!1}},tokensAriaLabel:{required:!1,tsType:{name:`string`},description:`Доступное имя списка уже добавленных тегов.`,defaultValue:{value:`"Добавленные теги"`,computed:!1}},inputClassName:{required:!1,tsType:{name:`string`},description:"CSS-класс непосредственно для внутреннего `input`; `className` применяется к оболочке поля."}},composes:[`Omit`]}})),k,A,j,M,N,P;t((()=>{k=e(r(),1),O(),A=a(),j={title:`Shared/UI/TagInput`,component:C,args:{value:[],onChange:()=>void 0},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{value:{description:`Controlled-набор добавленных тегов.`,control:!1},onChange:{description:`Возвращает новый набор после добавления или удаления тега.`,control:!1},maxTags:{description:`Максимальное количество тегов.`,control:`number`},readOnly:{description:`Показывает набор без действий изменения.`,control:`boolean`},normalizeTag:{control:!1},getTagKey:{control:!1},getRemoveButtonAriaLabel:{control:!1}}},M={render:e=>{let[t,n]=(0,k.useState)([`Новости`,`Колледж`]);return(0,A.jsx)(C,{...e,label:`Теги материала`,description:`Введите значение и нажмите Enter или запятую. Можно вставить сразу несколько строк.`,placeholder:`Добавить тег`,value:t,onChange:n,maxTags:10,getTagKey:e=>e.toLocaleLowerCase(`ru`)})}},N={args:{label:`Теги материала`,value:[`Новости`,`Колледж`],readOnly:!0}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<readonly string[]>(["Новости", "Колледж"]);
+    return <TagInput {...args} label="Теги материала" description="Введите значение и нажмите Enter или запятую. Можно вставить сразу несколько строк." placeholder="Добавить тег" value={value} onChange={setValue} maxTags={10} getTagKey={tag => tag.toLocaleLowerCase("ru")} />;
+  }
+}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: "Теги материала",
+    value: ["Новости", "Колледж"],
+    readOnly: true
+  }
+}`,...N.parameters?.docs?.source}}},P=[`Controlled`,`ReadOnly`]}))();export{M as Controlled,N as ReadOnly,P as __namedExportsOrder,j as default};

package/storybook-static/assets/{Textarea-DtmMCSxT.js → Textarea-C9do4TkE.js}

@@ -1,12 +1,12 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{Controlled as p,Disabled as m,WithValue as h,n as g,t as _}from"./Textarea.stories-Db3Pigr7.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
-`,(0,b.jsx)(c,{children:`Textarea`}),`
-`,(0,b.jsx)(i,{children:`Многострочное текстовое поле для описаний, комментариев и заметок`}),`
-`,(0,b.jsx)(o.p,{children:`Textarea уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-GmIo3IOR.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-0RiOsxIK.js";import{t as f}from"./mdx-react-shim-DQ40dZsI.js";import{Controlled as p,Disabled as m,WithValue as h,n as g,t as _}from"./Textarea.stories-khYPBnjL.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(o,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(l,{children:`Textarea`}),`
+`,(0,b.jsx)(a,{children:`Многострочное текстовое поле для описаний, комментариев и заметок`}),`
+`,(0,b.jsx)(t.p,{children:`Textarea уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, заблокированные состояния.`}),`
-`,(0,b.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,b.jsx)(u,{}),`
-`,(0,b.jsx)(n,{of:p}),`
-`,(0,b.jsx)(o.pre,{children:(0,b.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+`,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,b.jsx)(d,{}),`
+`,(0,b.jsx)(r,{of:p}),`
+`,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { Textarea } from "@/shared/ui";
 
@@ -16,22 +16,22 @@ export function Example() {
 	return <Textarea label="Комментарий" value={value} onChange={setValue} placeholder="Введите текст" />;
 }
 `})}),`
-`,(0,b.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,b.jsxs)(o.ul,{children:[`
-`,(0,b.jsx)(o.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
-`,(0,b.jsx)(o.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
+`,(0,b.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,b.jsxs)(t.ul,{children:[`
+`,(0,b.jsx)(t.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
+`,(0,b.jsx)(t.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
 `]}),`
-`,(0,b.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
-`,(0,b.jsx)(o.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
-`,(0,b.jsx)(o.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
-`,(0,b.jsx)(l,{of:p}),`
-`,(0,b.jsx)(o.h3,{id:`компонент-с-уже-заданным-значением`,children:`Компонент с уже заданным значением`}),`
-`,(0,b.jsx)(o.p,{children:`Компонент с уже заданным значением.`}),`
-`,(0,b.jsx)(l,{of:h}),`
-`,(0,b.jsx)(o.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
-`,(0,b.jsx)(o.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
-`,(0,b.jsx)(l,{of:m}),`
-`,(0,b.jsx)(o.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(s,{of:_}),`
-`,(0,b.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,b.jsx)(r,{includePrimary:!1})]})}function y(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,b.jsx)(n,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=d(),f(),o(),g()}))();export{y as default};
+`,(0,b.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,b.jsx)(t.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
+`,(0,b.jsx)(t.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
+`,(0,b.jsx)(u,{of:p}),`
+`,(0,b.jsx)(t.h3,{id:`компонент-с-уже-заданным-значением`,children:`Компонент с уже заданным значением`}),`
+`,(0,b.jsx)(t.p,{children:`Компонент с уже заданным значением.`}),`
+`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(t.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
+`,(0,b.jsx)(t.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
+`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,b.jsx)(i,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=t(),f(),s(),g()}))();export{y as default};

package/storybook-static/assets/Textarea.stories-khYPBnjL.js

@@ -0,0 +1,27 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-GmIo3IOR.js";import{a,i as o}from"./utils-B73_kE2n.js";import{n as s,t as c}from"./ui.module-wFHXkJzp.js";import{o as l,u}from"./Input-CjJUuLEX.js";import{t as d}from"./input-BZoBzauA.js";var f,p,m=n((()=>{f=`TjY2iu`,p={textarea:f}}));function h({label:e,description:t,className:n,disabled:r,size:i,value:o,onChange:c,error:d,onClearError:f,id:m,...h}){let{controlId:_,labelId:v,descriptionId:y,errorId:b,describedBy:x}=u({id:m,hasLabel:e!=null,hasDescription:!!t,hasError:!!d});return(0,g.jsx)(l,{label:e,description:t,disabled:r,size:i,error:d,controlId:_,labelId:v,descriptionId:y,errorId:b,children:(0,g.jsx)(`textarea`,{...h,id:_,disabled:r,value:o,"aria-invalid":!!d||void 0,"aria-labelledby":v,"aria-describedby":x,"data-invalid":d?``:void 0,className:a(s.uiControl,p.textarea,`scrollable`,n),onChange:e=>{c?.(e.target.value),d&&f&&f()}})})}var g,_=n((()=>{o(),d(),c(),m(),g=i(),h.__docgenInfo={description:`Многострочное текстовое поле для ввода свободного текста. Поддерживает подпись, описание, ошибки и единый визуальный стиль формы.`,methods:[],displayName:`Textarea`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}},composes:[`Omit`]}})),v=e({Controlled:()=>S,Disabled:()=>w,WithValue:()=>C,__namedExportsOrder:()=>T,default:()=>x}),y,b,x,S,C,w,T,E=n((()=>{y=t(r(),1),_(),b=i(),x={title:`Shared/UI/Textarea`,component:h,args:{label:`Комментарий`,description:`Оставьте примечание к документу.`,placeholder:`Введите текст...`,rows:4,disabled:!1,value:``,onChange:()=>void 0},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок текстовой области.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Плейсхолдер поля ввода.`,control:`text`},value:{description:`Текущее значение текстовой области.`,control:`text`},onChange:{description:`Вызывается при изменении текста.`,control:!1},rows:{description:`Количество видимых строк.`,control:`number`},cols:{description:`Ширина в количестве символов.`,control:`number`},disabled:{description:`Блокирует редактирование.`,control:`boolean`},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},S={args:{value:``,onChange:()=>void 0},render:e=>{let[t,n]=(0,y.useState)(`Первичный комментарий`);return(0,b.jsx)(h,{...e,value:t,onChange:n})}},C={args:{rows:5,value:``,onChange:()=>void 0},render:e=>{let[t,n]=(0,y.useState)(`Шаблонный текст для редактирования.`);return(0,b.jsx)(h,{...e,value:t,onChange:n})}},w={args:{disabled:!0,value:`Редактирование недоступно.`,onChange:()=>void 0},render:e=>(0,b.jsx)(h,{...e})},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  args: {
+    value: "",
+    onChange: () => undefined
+  },
+  render: args => {
+    const [value, setValue] = useState("Первичный комментарий");
+    return <Textarea {...args} value={value} onChange={setValue} />;
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  args: {
+    rows: 5,
+    value: "",
+    onChange: () => undefined
+  },
+  render: args => {
+    const [value, setValue] = useState("Шаблонный текст для редактирования.");
+    return <Textarea {...args} value={value} onChange={setValue} />;
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: "Редактирование недоступно.",
+    onChange: () => undefined
+  },
+  render: args => <Textarea {...args} />
+}`,...w.parameters?.docs?.source}}},T=[`Controlled`,`WithValue`,`Disabled`]}));E();export{S as Controlled,w as Disabled,C as WithValue,T as __namedExportsOrder,x as default,E as n,v as t};

package/storybook-static/assets/TimePanel-DAQw6BvJ.js

@@ -0,0 +1 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{pn as n,t as r}from"./iframe-GmIo3IOR.js";import{a as i,i as a}from"./utils-B73_kE2n.js";import{R as o,t as s,v as c}from"./formatters-3Nbt_zpw.js";import{i as l,r as u}from"./date-segments-CzU9k5bl.js";function d(e=0,t=0){return c(S,C,w,e,t,0,0)}function f(e=`date-time`){return e===`time`?x:b}function p(e,t=`date-time`){if(e==null)return null;let n=o(e);return n?t===`time`?d(n.getHours(),n.getMinutes()):n:null}function m(e,t,n,r=`date-time`){let i=p(e,r);if(!i)return!1;if(r===`time`){let e=i.getHours()*60+i.getMinutes(),r=t?p(t,`time`):null,a=n?p(n,`time`):null;return!(r&&e<r.getHours()*60+r.getMinutes()||a&&e>a.getHours()*60+a.getMinutes())}return!(t&&i<t||n&&i>n)}function h(e,t){let n=p(t),r=n?.getHours()??0,i=n?.getMinutes()??0;return c(e.getFullYear(),e.getMonth(),e.getDate(),r,i,0,0)}function g(e,t,n,r=`date-time`){return r===`time`?d(t,n):c(e.getFullYear(),e.getMonth(),e.getDate(),t,n,0,0)}function _(e,t,n=`date-time`){return n===`time`?p(e,`time`)??d():p(e,n)??t}function v(e,t,n,r=`date-time`){let i=p(e,r)??e,a=t?p(t,r):null,o=n?p(n,r):null,s=!!a&&i.getFullYear()===a.getFullYear()&&i.getMonth()===a.getMonth()&&i.getDate()===a.getDate(),c=!!o&&i.getFullYear()===o.getFullYear()&&i.getMonth()===o.getMonth()&&i.getDate()===o.getDate(),l=s?a.getHours():0,u=c?o.getHours():23,d=s&&l===u?a.getMinutes():0,f=c&&l===u?o.getMinutes():59,m=l>u||l===u&&d>f;return{disabled:m,minHour:l,maxHour:u,minMinuteByHour:e=>m?0:s&&e===l?a.getMinutes():0,maxMinuteByHour:e=>m?59:c&&e===u?o.getMinutes():59}}function y(e,t,n,r,i,a=`date-time`){let o=v(e,r,i,a);if(o.disabled)return{hours:0,minutes:0};let s=Math.min(Math.max(t,o.minHour),o.maxHour),c=o.minMinuteByHour(s),l=o.maxMinuteByHour(s);return{hours:s,minutes:Math.min(Math.max(n,c),l)}}var b,x,S,C,w,T=t((()=>{u(),s(),b=`dd.MM.yyyy HH:mm`,x=`HH:mm`,S=1970,C=0,w=1,l(x)}));function ee(e,t,n,r=`date-time`){let i=v(e,t,n,r),a=e.getHours(),o=e.getMinutes(),s=i.minMinuteByHour(a),c=i.maxMinuteByHour(a);return i.disabled?{disabled:!0,selectedHour:a,selectedMinute:o,hours:[],minutes:[]}:{disabled:!1,selectedHour:a,selectedMinute:o,hours:Array.from({length:i.maxHour-i.minHour+1},(e,t)=>i.minHour+t),minutes:Array.from({length:c-s+1},(e,t)=>s+t)}}var te=t((()=>{T()}));function E(e,t){return t<=0||e<0?0:e>t-1?t-1:e}function D(e,t){return!Number.isFinite(e)||e<=0?t:Math.max(e,t)}function ne(e,t){return Math.max(1,Math.round(e/Math.max(1,t)))}function re(e,t){return Math.max(0,Math.round(e/2-t/2))}function O(e,t){return Math.max(0,Math.round(e*t))}function k(e,t,n){return n<=0||t<=0?0:E(Math.round(e/t),n)}var A=t((()=>{})),j,M,N,P,F,I,L,R=t((()=>{j=`GLhdJ6`,M=`_2xLNL2`,N=`dgX32S`,P=`WfOtQ9`,F=`XIdSMi`,I=`_--Hsbk`,L={wheelPicker:j,viewport:M,scroller:N,items:P,item:F,selectionFrame:I}}));function z({items:e,value:t,onChange:n,ariaLabel:r,disabled:a,className:o,minHeight:s=H,visibleRows:c=U,formatItem:l,getItemKey:u}){let d=(0,B.useRef)(null),f=(0,B.useRef)(null),p=(0,B.useRef)(null),m=(0,B.useMemo)(()=>Math.max(0,e.findIndex(e=>Object.is(e,t))),[e,t]),[h,g]=(0,B.useState)(0),_=D(h,s),v=ne(_,c),y=re(_,v),b=(0,B.useRef)(m),x=(0,B.useCallback)(e=>Math.round(e.clientHeight),[]),S=(0,B.useCallback)(()=>{let t=f.current;if(!t||e.length===0)return;let r=k(t.scrollTop,v,e.length);t.scrollTo({top:O(r,v),behavior:`smooth`}),r!==b.current&&(b.current=r,n(e[r]))},[v,e,n]),C=(0,B.useCallback)(()=>{p.current!==null&&window.clearTimeout(p.current),p.current=window.setTimeout(()=>{p.current=null,S()},W)},[S]);(0,B.useEffect)(()=>{let e=d.current;if(!e||typeof ResizeObserver>`u`)return;let t=e=>{g(t=>t===e?t:e)},n=new ResizeObserver(n=>{let r=n[0],i=Math.round(r?.contentRect.height??x(e));t(i)});return n.observe(e),t(x(e)),()=>n.disconnect()},[x]),(0,B.useEffect)(()=>{let t=f.current;if(!t||e.length===0)return;let n=E(m,e.length);b.current=n,t.scrollTo({top:O(n,v),behavior:`auto`})},[v,e.length,m]),(0,B.useEffect)(()=>{let e=f.current;if(!e)return;let t=()=>{a||C()},n=t=>{a||(t.preventDefault(),e.scrollTop+=t.deltaY,C())};return e.addEventListener(`scroll`,t,{passive:!0}),e.addEventListener(`wheel`,n,{passive:!1}),()=>{e.removeEventListener(`scroll`,t),e.removeEventListener(`wheel`,n)}},[a,e,n,C]),(0,B.useEffect)(()=>()=>{p.current!==null&&window.clearTimeout(p.current)},[]);let w=t=>{if(a||e.length===0||t.key!==`ArrowUp`&&t.key!==`ArrowDown`)return;t.preventDefault();let r=t.key===`ArrowUp`?-1:1,i=E(m+r,e.length);i!==m&&(b.current=i,n(e[i]))},T={"--wheel-picker-min-height":`${s}px`,"--wheel-picker-viewport-height":`${_}px`,"--wheel-picker-item-height":`${v}px`,"--wheel-picker-edge-padding":`${y}px`};return(0,V.jsx)(`div`,{ref:d,className:i(L.wheelPicker,o),style:T,children:(0,V.jsxs)(`div`,{className:L.viewport,children:[(0,V.jsx)(`div`,{ref:f,className:L.scroller,role:`listbox`,tabIndex:a?-1:0,"aria-label":r,"aria-disabled":a||void 0,onKeyDown:w,children:(0,V.jsx)(`div`,{className:L.items,children:e.map((e,t)=>{let r=t===m;return(0,V.jsx)(`button`,{type:`button`,role:`option`,"aria-selected":r,className:L.item,"data-selected":r?``:void 0,disabled:a,onClick:()=>{b.current=t,n(e)},children:l?.(e)??String(e)},u?.(e,t)??t)})})}),(0,V.jsx)(`div`,{className:L.selectionFrame,"aria-hidden":`true`})]})})}var B,V,H,U,W,ie=t((()=>{B=e(n(),1),a(),A(),R(),V=r(),H=192,U=7,W=96,z.__docgenInfo={description:`Внутренний wheel-picker со snap-кареткой по центру и блокировкой page scroll.`,methods:[],displayName:`WheelPicker`,props:{items:{required:!0,tsType:{name:`unknown`},description:``},value:{required:!0,tsType:{name:`T`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`T`},name:`value`}],return:{name:`void`}}},description:``},ariaLabel:{required:!0,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},minHeight:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`192`,computed:!1}},visibleRows:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`7`,computed:!1}},formatItem:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(item: T) => ReactNode`,signature:{arguments:[{type:{name:`T`},name:`item`}],return:{name:`ReactNode`}}},description:``},getItemKey:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(item: T, index: number) => Key`,signature:{arguments:[{type:{name:`T`},name:`item`},{type:{name:`number`},name:`index`}],return:{name:`Key`}}},description:``}}}})),ae=t((()=>{ie()})),G,K,q,J,Y,X,Z,oe=t((()=>{G=`_5-SSnO`,K=`s1NHua`,q=`KQC9-8`,J=`WDu02W`,Y=`_9mEhfD`,X=`N-Fzjk`,Z={timePanel:G,hint:K,fields:q,field:J,label:Y,wheel:X}}));function Q({value:e,disabled:t,minDate:n,maxDate:r,mode:i=`date-time`,onChange:a}){let o=ee(e,n,r,i),s=e=>String(e).padStart(2,`0`);return o.disabled?(0,$.jsx)(`div`,{className:Z.timePanel,children:(0,$.jsx)(`p`,{className:Z.hint,children:`Для выбранного дня нет доступного времени в заданном диапазоне.`})}):(0,$.jsx)(`div`,{className:Z.timePanel,children:(0,$.jsxs)(`div`,{className:Z.fields,children:[(0,$.jsxs)(`label`,{className:Z.field,children:[(0,$.jsx)(`span`,{className:Z.label,children:`Часы`}),(0,$.jsx)(z,{className:Z.wheel,items:o.hours,value:o.selectedHour,onChange:e=>a(e,o.selectedMinute),ariaLabel:`Выбор часов`,disabled:t,formatItem:s})]}),(0,$.jsxs)(`label`,{className:Z.field,children:[(0,$.jsx)(`span`,{className:Z.label,children:`Минуты`}),(0,$.jsx)(z,{className:Z.wheel,items:o.minutes,value:o.selectedMinute,onChange:e=>a(o.selectedHour,e),ariaLabel:`Выбор минут`,disabled:t,formatItem:s})]})]})})}var $,se=t((()=>{ae(),te(),oe(),$=r(),Q.__docgenInfo={description:`Переиспользуемая панель выбора времени поверх internal wheel-picker.`,methods:[],displayName:`TimePanel`,props:{value:{required:!0,tsType:{name:`Date`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},minDate:{required:!1,tsType:{name:`Date`},description:``},maxDate:{required:!1,tsType:{name:`Date`},description:``},mode:{required:!1,tsType:{name:`union`,raw:`"date-time" | "time"`,elements:[{name:`literal`,value:`"date-time"`},{name:`literal`,value:`"time"`}]},description:``,defaultValue:{value:`"date-time"`,computed:!1}},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(hours: number, minutes: number) => void`,signature:{arguments:[{type:{name:`number`},name:`hours`},{type:{name:`number`},name:`minutes`}],return:{name:`void`}}},description:``}}}}));export{f as a,h as c,_ as d,d as i,g as l,se as n,T as o,y as r,m as s,Q as t,p as u};

package/storybook-static/assets/{TimePanel.stories-D2scop0x.js → TimePanel.stories-D8uZoVpL.js}

@@ -1,4 +1,4 @@
-import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-B1Ua6ocI.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{n as i,t as a}from"./TimePanel-Bjn51Vi_.js";var o,s,c,l,u,d;t((()=>{o=e(n(),1),i(),s=r(),c={title:`Shared/UI/Internal/DateTime/TimePanel`,component:a,args:{value:new Date(2026,2,10,12,30,0,0),onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`centered`}},l={render:e=>{let[t,n]=(0,o.useState)(e.value);return(0,s.jsx)(`div`,{style:{width:320,minHeight:280},children:(0,s.jsx)(a,{...e,value:t,onChange:(e,r)=>{n(new Date(t.getFullYear(),t.getMonth(),t.getDate(),e,r,0,0))}})})}},u={render:e=>{let[t,n]=(0,o.useState)(new Date(2026,2,10,9,30,0,0));return(0,s.jsx)(`div`,{style:{width:320,minHeight:280},children:(0,s.jsx)(a,{...e,value:t,minDate:new Date(2026,2,10,9,15,0,0),maxDate:new Date(2026,2,10,18,30,0,0),onChange:(e,r)=>{n(new Date(t.getFullYear(),t.getMonth(),t.getDate(),e,r,0,0))}})})}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{pn as n,t as r}from"./iframe-GmIo3IOR.js";import{n as i,t as a}from"./TimePanel-DAQw6BvJ.js";var o,s,c,l,u,d;t((()=>{o=e(n(),1),i(),s=r(),c={title:`Shared/UI/Internal/DateTime/TimePanel`,component:a,args:{value:new Date(2026,2,10,12,30,0,0),onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`centered`}},l={render:e=>{let[t,n]=(0,o.useState)(e.value);return(0,s.jsx)(`div`,{style:{width:320,minHeight:280},children:(0,s.jsx)(a,{...e,value:t,onChange:(e,r)=>{n(new Date(t.getFullYear(),t.getMonth(),t.getDate(),e,r,0,0))}})})}},u={render:e=>{let[t,n]=(0,o.useState)(new Date(2026,2,10,9,30,0,0));return(0,s.jsx)(`div`,{style:{width:320,minHeight:280},children:(0,s.jsx)(a,{...e,value:t,minDate:new Date(2026,2,10,9,15,0,0),maxDate:new Date(2026,2,10,18,30,0,0),onChange:(e,r)=>{n(new Date(t.getFullYear(),t.getMonth(),t.getDate(),e,r,0,0))}})})}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   render: args => {
     const [value, setValue] = useState<Date>(args.value);
     return <div style={{