@ryuzaki13/react-foundation-ui 0.1.0

package/dist/layout-picker/stories/LayoutPicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/layout-picker/stories/LayoutPicker.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiC,YAAY,EAAmD,MAAM,UAAU,CAAC;AAIxH,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAwH5D,QAAA,MAAM,IAAI;;;;;;;qDAOa,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFD,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA0B3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/dist/layout-picker/stories/LayoutPicker.stories.js

@@ -0,0 +1,422 @@
+import { n as e, t } from "../../chunks/layout-picker-BA9vA8JI.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { fn as a } from "storybook/test";
+import { useArgs as o } from "storybook/preview-api";
+var s = {
+	canvas: "buT8ds",
+	toolbar: "vDpJVR",
+	summary: "-GMI1h",
+	summaryItem: "Xgkzn9",
+	summaryValue: "X--lo-",
+	muted: "W5rEjx",
+	layoutPreview: "BgilL7",
+	layoutCell: "ALGrVl",
+	layoutCellTitle: "IrqK1d"
+}, c = [
+	{
+		id: "dashboard-summary",
+		label: "Сводка + детали",
+		description: "Один широкий блок сверху и две области детализации снизу.",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "summary",
+				column: 1,
+				columnSpan: 2,
+				row: 1,
+				rowSpan: 1
+			},
+			{
+				id: "left-detail",
+				column: 1,
+				columnSpan: 1,
+				row: 2,
+				rowSpan: 1
+			},
+			{
+				id: "right-detail",
+				column: 2,
+				columnSpan: 1,
+				row: 2,
+				rowSpan: 1
+			}
+		]
+	},
+	{
+		id: "dashboard-main-aside",
+		label: "Основной блок + сайдбар",
+		description: "Большая рабочая область слева и вертикальная колонка справа.",
+		columns: 3,
+		rows: 2,
+		cells: [
+			{
+				id: "main",
+				column: 1,
+				columnSpan: 2,
+				row: 1,
+				rowSpan: 2
+			},
+			{
+				id: "aside-top",
+				column: 3,
+				columnSpan: 1,
+				row: 1,
+				rowSpan: 1
+			},
+			{
+				id: "aside-bottom",
+				column: 3,
+				columnSpan: 1,
+				row: 2,
+				rowSpan: 1
+			}
+		]
+	},
+	{
+		id: "dashboard-quad",
+		label: "Четыре равных блока",
+		description: "Плотная сетка для сравнения нескольких независимых виджетов.",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "top-left",
+				column: 1,
+				columnSpan: 1,
+				row: 1,
+				rowSpan: 1
+			},
+			{
+				id: "top-right",
+				column: 2,
+				columnSpan: 1,
+				row: 1,
+				rowSpan: 1
+			},
+			{
+				id: "bottom-left",
+				column: 1,
+				columnSpan: 1,
+				row: 2,
+				rowSpan: 1
+			},
+			{
+				id: "bottom-right",
+				column: 2,
+				columnSpan: 1,
+				row: 2,
+				rowSpan: 1
+			}
+		]
+	}
+];
+function l(e, t) {
+	return t.find((t) => t.id === e);
+}
+function u({ value: e, presets: t }) {
+	let i = l(e, t);
+	return /* @__PURE__ */ r("div", {
+		className: s.summary,
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: s.summaryItem,
+				children: [/* @__PURE__ */ n("span", { children: "ID" }), /* @__PURE__ */ n("span", {
+					className: s.summaryValue,
+					children: e || "не выбрано"
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: s.summaryItem,
+				children: [/* @__PURE__ */ n("span", { children: "Название" }), /* @__PURE__ */ n("span", {
+					className: s.summaryValue,
+					children: i?.label ?? "Layout не выбран"
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: s.summaryItem,
+				children: [/* @__PURE__ */ n("span", { children: "Сетка" }), /* @__PURE__ */ n("span", {
+					className: s.summaryValue,
+					children: i ? `${i.columns} x ${i.rows}` : "нет данных"
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: s.summaryItem,
+				children: [/* @__PURE__ */ n("span", { children: "Ячеек" }), /* @__PURE__ */ n("span", {
+					className: s.summaryValue,
+					children: i?.cells.length ?? 0
+				})]
+			})
+		]
+	});
+}
+function d({ value: e, presets: t }) {
+	let i = l(e, t);
+	if (!i) return null;
+	let a = i.columns, o = i.rows, c = i.cells;
+	return /* @__PURE__ */ n("div", {
+		className: s.layoutPreview,
+		style: {
+			gridTemplateColumns: `repeat(${a}, minmax(0, 1fr))`,
+			gridTemplateRows: `repeat(${o}, minmax(0, 1fr))`
+		},
+		children: c.map((e, t) => /* @__PURE__ */ r("div", {
+			className: s.layoutCell,
+			style: {
+				gridColumn: `${e.column} / span ${e.columnSpan}`,
+				gridRow: `${e.row} / span ${e.rowSpan}`
+			},
+			children: [/* @__PURE__ */ r("span", {
+				className: s.layoutCellTitle,
+				children: ["Область ", t + 1]
+			}), /* @__PURE__ */ r("span", {
+				className: s.muted,
+				children: [
+					"Колонка ",
+					e.column,
+					", строка ",
+					e.row,
+					"; span ",
+					e.columnSpan,
+					" x ",
+					e.rowSpan
+				]
+			})]
+		}, e.id))
+	});
+}
+function f() {
+	let [a, o] = i("two-columns");
+	return /* @__PURE__ */ r("div", {
+		className: s.canvas,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: s.toolbar,
+				children: /* @__PURE__ */ n(t, {
+					label: "Layout панели",
+					value: a,
+					onChange: o,
+					ariaLabel: "Выбрать layout панели"
+				})
+			}),
+			/* @__PURE__ */ n(u, {
+				value: a,
+				presets: e
+			}),
+			/* @__PURE__ */ n(d, {
+				value: a,
+				presets: e
+			})
+		]
+	});
+}
+var p = {
+	title: "Shared/UI/LayoutPicker",
+	component: t,
+	args: {
+		label: "Layout панели",
+		description: "Выберите схему размещения областей.",
+		value: e[0].id,
+		onChange: a(),
+		presets: e,
+		disabled: !1,
+		placeholder: "Выберите layout",
+		ariaLabel: "Выбрать layout",
+		placement: "bottom-start"
+	},
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded",
+		docs: { description: { component: "Контролируемый выбор layout-пресета со схематичным превью. Компонент хранит только UI-состояние popup и возвращает наружу ID выбранного пресета." } }
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		id: {
+			description: "ID кнопки выбора. Если не передан, компонент создаёт стабильный `useId`.",
+			control: "text"
+		},
+		label: {
+			description: "Заголовок поля.",
+			control: "text"
+		},
+		description: {
+			description: "Описание под заголовком.",
+			control: "text"
+		},
+		value: {
+			description: "ID текущего выбранного layout-пресета.",
+			control: "text"
+		},
+		onChange: {
+			description: "Вызывается с ID выбранного layout-пресета.",
+			control: !1
+		},
+		presets: {
+			description: "Список layout-пресетов. По умолчанию используется `DEFAULT_LAYOUT_PICKER_PRESETS`.",
+			control: !1
+		},
+		disabled: {
+			description: "Блокирует кнопку выбора и открытие popup.",
+			control: "boolean"
+		},
+		getPresetDisabled: {
+			description: "Позволяет заблокировать отдельные пресеты внутри popup.",
+			control: !1
+		},
+		placeholder: {
+			description: "Текст в trigger, когда `value` не найден среди `presets`.",
+			control: "text"
+		},
+		ariaLabel: {
+			description: "Доступное имя trigger-кнопки. Если не передано, строится из текущего значения.",
+			control: "text"
+		},
+		size: {
+			description: "Размер поля из общего `UiBaseProps`.",
+			control: "select",
+			options: [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			]
+		},
+		className: {
+			description: "Дополнительный CSS-класс корневого контейнера.",
+			control: "text"
+		},
+		triggerClassName: {
+			description: "Дополнительный CSS-класс trigger-кнопки.",
+			control: "text"
+		},
+		popupClassName: {
+			description: "Дополнительный CSS-класс popup.",
+			control: "text"
+		},
+		placement: {
+			description: "Позиционирование popup относительно trigger.",
+			control: "select",
+			options: [
+				"bottom-start",
+				"bottom-end",
+				"top-start",
+				"top-end",
+				"right-start",
+				"left-start"
+			]
+		}
+	}
+}, m = {
+	args: { value: "two-rows" },
+	name: "Контролируемый выбор",
+	render: function(i) {
+		let [, a] = o(), c = i.presets ?? e;
+		return /* @__PURE__ */ r("div", {
+			className: s.canvas,
+			children: [/* @__PURE__ */ n(t, {
+				...i,
+				presets: c,
+				onChange: (e) => {
+					i.onChange(e), a({ value: e });
+				}
+			}), /* @__PURE__ */ n(u, {
+				value: i.value ?? "",
+				presets: c
+			})]
+		});
+	}
+}, h = {
+	name: "Без выбранного значения",
+	render: (a) => {
+		let [o, c] = i(""), l = a.presets ?? e;
+		return /* @__PURE__ */ r("div", {
+			className: s.canvas,
+			children: [/* @__PURE__ */ n(t, {
+				...a,
+				value: o,
+				presets: l,
+				placeholder: "Layout ещё не выбран",
+				onChange: (e) => {
+					c(e), a.onChange(e);
+				}
+			}), /* @__PURE__ */ n(u, {
+				value: o,
+				presets: l
+			})]
+		});
+	},
+	args: { value: "" }
+}, g = {
+	name: "Кастомные пресеты",
+	render: (e) => {
+		let [a, o] = i(c[0].id);
+		return /* @__PURE__ */ r("div", {
+			className: s.canvas,
+			children: [
+				/* @__PURE__ */ n(t, {
+					...e,
+					value: a,
+					presets: c,
+					ariaLabel: "Выбрать layout дашборда",
+					onChange: (t) => {
+						o(t), e.onChange(t);
+					}
+				}),
+				/* @__PURE__ */ n(u, {
+					value: a,
+					presets: c
+				}),
+				/* @__PURE__ */ n(d, {
+					value: a,
+					presets: c
+				})
+			]
+		});
+	},
+	args: {
+		value: c[0].id,
+		presets: c
+	}
+}, _ = {
+	name: "Заблокированные пресеты",
+	render: (a) => {
+		let [o, c] = i("single-cell");
+		return /* @__PURE__ */ r("div", {
+			className: s.canvas,
+			children: [
+				/* @__PURE__ */ n(t, {
+					...a,
+					value: o,
+					getPresetDisabled: (e) => e.id === "two-columns" || e.id === "large-left-two-right",
+					onChange: (e) => {
+						c(e), a.onChange(e);
+					}
+				}),
+				/* @__PURE__ */ n("div", {
+					className: s.muted,
+					children: "Пресеты с двумя колонками в этом сценарии недоступны."
+				}),
+				/* @__PURE__ */ n(u, {
+					value: o,
+					presets: e
+				})
+			]
+		});
+	}
+}, v = {
+	name: "В панели настройки",
+	render: () => /* @__PURE__ */ n(f, {})
+}, y = {
+	name: "Заблокированный контрол",
+	args: {
+		disabled: !0,
+		value: "two-columns"
+	}
+};
+//#endregion
+export { m as Controlled, g as CustomPresets, y as Disabled, _ as DisabledPresets, v as InToolbar, h as Placeholder, p as default };
+
+//# sourceMappingURL=LayoutPicker.stories.js.map

package/dist/layout-picker/stories/LayoutPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPicker.stories.js","names":[],"sources":["../../../src/layout-picker/stories/LayoutPicker.stories.module.scss","../../../src/layout-picker/stories/LayoutPicker.stories.tsx"],"sourcesContent":[".canvas {\n\tdisplay: grid;\n\tgap: var(--space-md);\n\twidth: min(100%, 48em);\n}\n\n.toolbar {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: end;\n\tgap: var(--space-sm);\n}\n\n.summary {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr));\n\tgap: var(--space-sm);\n\tpadding: var(--space-sm);\n\tborder: var(--border);\n\tborder-radius: var(--radius-sm);\n\tbackground-color: var(--surface-2);\n}\n\n.summaryItem {\n\tdisplay: grid;\n\tgap: calc(var(--space-xs) / 2);\n\tmin-width: 0;\n}\n\n.summaryValue {\n\toverflow: hidden;\n\tcolor: var(--content-1);\n\tfont-weight: 300;\n\tfont-variation-settings: \"wght\" 300;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.muted {\n\tcolor: var(--content-2);\n\tfont-size: var(--font-size-sm);\n}\n\n.layoutPreview {\n\tdisplay: grid;\n\tgap: var(--space-sm);\n}\n\n.layoutCell {\n\tdisplay: grid;\n\tgap: var(--space-xs);\n\talign-content: start;\n\tmin-height: 6em;\n\tpadding: var(--space-sm);\n\tborder: var(--border);\n\tborder-radius: var(--radius-sm);\n\tbackground-color: var(--surface-1);\n}\n\n.layoutCellTitle {\n\tcolor: var(--content-0);\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n}\n","import { useState } from \"react\";\n\nimport { useArgs } from \"storybook/preview-api\";\nimport { fn } from \"storybook/test\";\n\nimport { DEFAULT_LAYOUT_PICKER_PRESETS, LayoutPicker, type LayoutPickerPreset, type LayoutPickerProps } from \"../index\";\n\nimport styles from \"./LayoutPicker.stories.module.scss\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst dashboardPresets = [\n\t{\n\t\tid: \"dashboard-summary\",\n\t\tlabel: \"Сводка + детали\",\n\t\tdescription: \"Один широкий блок сверху и две области детализации снизу.\",\n\t\tcolumns: 2,\n\t\trows: 2,\n\t\tcells: [\n\t\t\t{ id: \"summary\", column: 1, columnSpan: 2, row: 1, rowSpan: 1 },\n\t\t\t{ id: \"left-detail\", column: 1, columnSpan: 1, row: 2, rowSpan: 1 },\n\t\t\t{ id: \"right-detail\", column: 2, columnSpan: 1, row: 2, rowSpan: 1 }\n\t\t]\n\t},\n\t{\n\t\tid: \"dashboard-main-aside\",\n\t\tlabel: \"Основной блок + сайдбар\",\n\t\tdescription: \"Большая рабочая область слева и вертикальная колонка справа.\",\n\t\tcolumns: 3,\n\t\trows: 2,\n\t\tcells: [\n\t\t\t{ id: \"main\", column: 1, columnSpan: 2, row: 1, rowSpan: 2 },\n\t\t\t{ id: \"aside-top\", column: 3, columnSpan: 1, row: 1, rowSpan: 1 },\n\t\t\t{ id: \"aside-bottom\", column: 3, columnSpan: 1, row: 2, rowSpan: 1 }\n\t\t]\n\t},\n\t{\n\t\tid: \"dashboard-quad\",\n\t\tlabel: \"Четыре равных блока\",\n\t\tdescription: \"Плотная сетка для сравнения нескольких независимых виджетов.\",\n\t\tcolumns: 2,\n\t\trows: 2,\n\t\tcells: [\n\t\t\t{ id: \"top-left\", column: 1, columnSpan: 1, row: 1, rowSpan: 1 },\n\t\t\t{ id: \"top-right\", column: 2, columnSpan: 1, row: 1, rowSpan: 1 },\n\t\t\t{ id: \"bottom-left\", column: 1, columnSpan: 1, row: 2, rowSpan: 1 },\n\t\t\t{ id: \"bottom-right\", column: 2, columnSpan: 1, row: 2, rowSpan: 1 }\n\t\t]\n\t}\n] as const satisfies readonly LayoutPickerPreset[];\n\nfunction findPreset(value: string, presets: readonly LayoutPickerPreset[]): LayoutPickerPreset | undefined {\n\treturn presets.find((preset) => preset.id === value);\n}\n\nfunction PresetSummary({ value, presets }: { value: string; presets: readonly LayoutPickerPreset[] }) {\n\tconst selectedPreset = findPreset(value, presets);\n\n\treturn (\n\t\t<div className={styles.summary} aria-live=\"polite\">\n\t\t\t<div className={styles.summaryItem}>\n\t\t\t\t<span>ID</span>\n\t\t\t\t<span className={styles.summaryValue}>{value || \"не выбрано\"}</span>\n\t\t\t</div>\n\t\t\t<div className={styles.summaryItem}>\n\t\t\t\t<span>Название</span>\n\t\t\t\t<span className={styles.summaryValue}>{selectedPreset?.label ?? \"Layout не выбран\"}</span>\n\t\t\t</div>\n\t\t\t<div className={styles.summaryItem}>\n\t\t\t\t<span>Сетка</span>\n\t\t\t\t<span className={styles.summaryValue}>\n\t\t\t\t\t{selectedPreset ? `${selectedPreset.columns} x ${selectedPreset.rows}` : \"нет данных\"}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div className={styles.summaryItem}>\n\t\t\t\t<span>Ячеек</span>\n\t\t\t\t<span className={styles.summaryValue}>{selectedPreset?.cells.length ?? 0}</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction LayoutPreview({ value, presets }: { value: string; presets: readonly LayoutPickerPreset[] }) {\n\tconst selectedPreset = findPreset(value, presets);\n\tif (!selectedPreset) return null;\n\n\tconst columns = selectedPreset.columns;\n\tconst rows = selectedPreset.rows;\n\tconst cells = selectedPreset.cells;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.layoutPreview}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,\n\t\t\t\tgridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`\n\t\t\t}}>\n\t\t\t{cells.map((cell, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={cell.id}\n\t\t\t\t\tclassName={styles.layoutCell}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tgridColumn: `${cell.column} / span ${cell.columnSpan}`,\n\t\t\t\t\t\tgridRow: `${cell.row} / span ${cell.rowSpan}`\n\t\t\t\t\t}}>\n\t\t\t\t\t<span className={styles.layoutCellTitle}>Область {index + 1}</span>\n\t\t\t\t\t<span className={styles.muted}>\n\t\t\t\t\t\tКолонка {cell.column}, строка {cell.row}; span {cell.columnSpan} x {cell.rowSpan}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nfunction ControlledExample() {\n\tconst [value, setValue] = useState(\"two-columns\");\n\n\treturn (\n\t\t<div className={styles.canvas}>\n\t\t\t<div className={styles.toolbar}>\n\t\t\t\t<LayoutPicker label=\"Layout панели\" value={value} onChange={setValue} ariaLabel=\"Выбрать layout панели\" />\n\t\t\t</div>\n\t\t\t<PresetSummary value={value} presets={DEFAULT_LAYOUT_PICKER_PRESETS} />\n\t\t\t<LayoutPreview value={value} presets={DEFAULT_LAYOUT_PICKER_PRESETS} />\n\t\t</div>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Shared/UI/LayoutPicker\",\n\tcomponent: LayoutPicker,\n\targs: {\n\t\tlabel: \"Layout панели\",\n\t\tdescription: \"Выберите схему размещения областей.\",\n\t\tvalue: DEFAULT_LAYOUT_PICKER_PRESETS[0].id,\n\t\tonChange: fn<(value: string) => void>(),\n\t\tpresets: DEFAULT_LAYOUT_PICKER_PRESETS,\n\t\tdisabled: false,\n\t\tplaceholder: \"Выберите layout\",\n\t\tariaLabel: \"Выбрать layout\",\n\t\tplacement: \"bottom-start\"\n\t},\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\",\n\t\tdocs: {\n\t\t\tdescription: {\n\t\t\t\tcomponent:\n\t\t\t\t\t\"Контролируемый выбор layout-пресета со схематичным превью. Компонент хранит только UI-состояние popup и возвращает наружу ID выбранного пресета.\"\n\t\t\t}\n\t\t}\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\tid: {\n\t\t\tdescription: \"ID кнопки выбора. Если не передан, компонент создаёт стабильный `useId`.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: \"Заголовок поля.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tdescription: {\n\t\t\tdescription: \"Описание под заголовком.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: \"ID текущего выбранного layout-пресета.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tonChange: {\n\t\t\tdescription: \"Вызывается с ID выбранного layout-пресета.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tpresets: {\n\t\t\tdescription: \"Список layout-пресетов. По умолчанию используется `DEFAULT_LAYOUT_PICKER_PRESETS`.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: \"Блокирует кнопку выбора и открытие popup.\",\n\t\t\tcontrol: \"boolean\"\n\t\t},\n\t\tgetPresetDisabled: {\n\t\t\tdescription: \"Позволяет заблокировать отдельные пресеты внутри popup.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: \"Текст в trigger, когда `value` не найден среди `presets`.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tariaLabel: {\n\t\t\tdescription: \"Доступное имя trigger-кнопки. Если не передано, строится из текущего значения.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tsize: {\n\t\t\tdescription: \"Размер поля из общего `UiBaseProps`.\",\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n\t\t},\n\t\tclassName: {\n\t\t\tdescription: \"Дополнительный CSS-класс корневого контейнера.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\ttriggerClassName: {\n\t\t\tdescription: \"Дополнительный CSS-класс trigger-кнопки.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tpopupClassName: {\n\t\t\tdescription: \"Дополнительный CSS-класс popup.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tplacement: {\n\t\t\tdescription: \"Позиционирование popup относительно trigger.\",\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"bottom-start\", \"bottom-end\", \"top-start\", \"top-end\", \"right-start\", \"left-start\"]\n\t\t}\n\t}\n} satisfies Meta<typeof LayoutPicker>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n\targs: {\n\t\tvalue: \"two-rows\"\n\t},\n\n\tname: \"Контролируемый выбор\",\n\n\trender: function Render(args) {\n\t\tconst [, updateArgs] = useArgs<LayoutPickerProps>();\n\t\tconst presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;\n\n\t\treturn (\n\t\t\t<div className={styles.canvas}>\n\t\t\t\t<LayoutPicker\n\t\t\t\t\t{...args}\n\t\t\t\t\tpresets={presets}\n\t\t\t\t\tonChange={(layoutId) => {\n\t\t\t\t\t\targs.onChange(layoutId);\n\t\t\t\t\t\tupdateArgs({ value: layoutId });\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<PresetSummary value={args.value ?? \"\"} presets={presets} />\n\t\t\t</div>\n\t\t);\n\t}\n};\n\nexport const Placeholder: Story = {\n\tname: \"Без выбранного значения\",\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(\"\");\n\t\tconst presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;\n\n\t\treturn (\n\t\t\t<div className={styles.canvas}>\n\t\t\t\t<LayoutPicker\n\t\t\t\t\t{...args}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tpresets={presets}\n\t\t\t\t\tplaceholder=\"Layout ещё не выбран\"\n\t\t\t\t\tonChange={(layoutId) => {\n\t\t\t\t\t\tsetValue(layoutId);\n\t\t\t\t\t\targs.onChange(layoutId);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<PresetSummary value={value} presets={presets} />\n\t\t\t</div>\n\t\t);\n\t},\n\targs: {\n\t\tvalue: \"\"\n\t}\n};\n\nexport const CustomPresets: Story = {\n\tname: \"Кастомные пресеты\",\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<string>(dashboardPresets[0].id);\n\n\t\treturn (\n\t\t\t<div className={styles.canvas}>\n\t\t\t\t<LayoutPicker\n\t\t\t\t\t{...args}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tpresets={dashboardPresets}\n\t\t\t\t\tariaLabel=\"Выбрать layout дашборда\"\n\t\t\t\t\tonChange={(layoutId) => {\n\t\t\t\t\t\tsetValue(layoutId);\n\t\t\t\t\t\targs.onChange(layoutId);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<PresetSummary value={value} presets={dashboardPresets} />\n\t\t\t\t<LayoutPreview value={value} presets={dashboardPresets} />\n\t\t\t</div>\n\t\t);\n\t},\n\targs: {\n\t\tvalue: dashboardPresets[0].id,\n\t\tpresets: dashboardPresets\n\t}\n};\n\nexport const DisabledPresets: Story = {\n\tname: \"Заблокированные пресеты\",\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(\"single-cell\");\n\n\t\treturn (\n\t\t\t<div className={styles.canvas}>\n\t\t\t\t<LayoutPicker\n\t\t\t\t\t{...args}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tgetPresetDisabled={(preset) => preset.id === \"two-columns\" || preset.id === \"large-left-two-right\"}\n\t\t\t\t\tonChange={(layoutId) => {\n\t\t\t\t\t\tsetValue(layoutId);\n\t\t\t\t\t\targs.onChange(layoutId);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<div className={styles.muted}>Пресеты с двумя колонками в этом сценарии недоступны.</div>\n\t\t\t\t<PresetSummary value={value} presets={DEFAULT_LAYOUT_PICKER_PRESETS} />\n\t\t\t</div>\n\t\t);\n\t}\n};\n\nexport const InToolbar: Story = {\n\tname: \"В панели настройки\",\n\trender: () => <ControlledExample />\n};\n\nexport const Disabled: Story = {\n\tname: \"Заблокированный контрол\",\n\targs: {\n\t\tdisabled: true,\n\t\tvalue: \"two-columns\"\n\t}\n};\n"],"mappings":"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"}

package/dist/layout-picker/ui/LayoutPicker.d.ts

@@ -0,0 +1,18 @@
+import { type Placement } from "@floating-ui/react";
+import { type UiBaseProps } from "../../types";
+import { type LayoutPickerPreset } from "../lib";
+export interface LayoutPickerProps extends UiBaseProps<string> {
+    id?: string;
+    presets?: readonly LayoutPickerPreset[];
+    getPresetDisabled?: (preset: LayoutPickerPreset) => boolean;
+    ariaLabel?: string;
+    className?: string;
+    triggerClassName?: string;
+    popupClassName?: string;
+    placement?: Placement;
+}
+/**
+ * Контрол выбора layout-пресета. Не хранит бизнес-логику содержимого ячеек.
+ */
+export declare function LayoutPicker({ id, label, description, value, onChange, presets, disabled, getPresetDisabled, placeholder, size, ariaLabel, className, triggerClassName, popupClassName, placement }: LayoutPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=LayoutPicker.d.ts.map

package/dist/layout-picker/ui/LayoutPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPicker.d.ts","sourceRoot":"","sources":["../../../src/layout-picker/ui/LayoutPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAapD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAqE,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAIpH,MAAM,WAAW,iBAAkB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,OAAO,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAuC,EACvC,QAAQ,EACR,iBAAiB,EACjB,WAAiC,EACjC,IAAI,EACJ,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,SAA0B,EAC1B,EAAE,iBAAiB,+BAuLnB"}

package/dist/layout-picker/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./LayoutPicker";
+//# sourceMappingURL=index.d.ts.map

package/dist/layout-picker/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout-picker/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/list/List.d.ts

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren } from "react";
+interface ListToolbarProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ListToolbar: React.FC<ListToolbarProps>;
+interface ListFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ListFooter: React.FC<ListFooterProps>;
+interface ListContentProps<T> {
+    items: T[];
+    getKey: (item: T, index: number) => string;
+    render: (item: T) => React.ReactNode;
+    separated?: boolean;
+    className?: string;
+}
+declare function ListContent<T>({ items, getKey, render, separated, className }: ListContentProps<T>): React.JSX.Element;
+interface ListVirtualizedContentProps<T> {
+    items: T[];
+    getKey: (item: T, index: number) => string;
+    render: (item: T) => React.ReactNode;
+    isLoading?: boolean;
+    separated?: boolean;
+    className?: string;
+    /** Параметры для бесконечной подгрузки */
+    hasNextPage: boolean;
+    fetchNextPage: () => Promise<unknown>;
+}
+declare function ListVirtualizedContent<T>({ items, getKey, render, separated, className, isLoading, hasNextPage, fetchNextPage }: ListVirtualizedContentProps<T>): React.JSX.Element;
+interface ListComposition {
+    Toolbar: typeof ListToolbar;
+    Content: typeof ListContent;
+    Footer: typeof ListFooter;
+    VirtualizedContent: typeof ListVirtualizedContent;
+}
+interface ListProps extends PropsWithChildren {
+    className?: string;
+}
+export declare const List: React.FC<ListProps> & ListComposition;
+export {};
+//# sourceMappingURL=List.d.ts.map

package/dist/list/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAU5E,UAAU,gBAAgB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAW3C,CAAC;AAEF,UAAU,eAAe;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAWzC,CAAC;AAiBF,UAAU,gBAAgB,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,WAAW,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBAU3F;AAED,UAAU,2BAA2B,CAAC,CAAC;IACtC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,iBAAS,sBAAsB,CAAC,CAAC,EAAE,EAClC,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,aAAa,EACb,EAAE,2BAA2B,CAAC,CAAC,CAAC,qBAuDhC;AAED,UAAU,eAAe;IACxB,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,kBAAkB,EAAE,OAAO,sBAAsB,CAAC;CAClD;AAED,UAAU,SAAU,SAAQ,iBAAiB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,eAMxC,CAAC"}

package/dist/list/index.d.ts

@@ -0,0 +1,2 @@
+export { List } from "./List";
+//# sourceMappingURL=index.d.ts.map

package/dist/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/list/index.js

@@ -0,0 +1,88 @@
+import { t as e } from "../chunks/Grid-ByIIytjh.js";
+import { c as t, h as n } from "../chunks/misc-DrmMj8GO.js";
+import { cn as r } from "@ryuzaki13/react-foundation-lib/utils";
+import { jsx as i } from "react/jsx-runtime";
+import a, { Children as o, useMemo as s, useRef as c } from "react";
+import { useVirtualizer as l } from "@tanstack/react-virtual";
+import { useFetchNextPageEffect as u } from "@ryuzaki13/react-foundation-lib/virtualizer";
+//#region src/list/List.tsx
+var d = ({ children: t, className: n }) => o.count(t) === 0 ? /* @__PURE__ */ i("div", {}) : /* @__PURE__ */ i(e.Container, {
+	gap: "sm",
+	className: r("paddingSm borderBottom", n),
+	children: t
+}), f = ({ children: t, className: n }) => o.count(t) === 0 ? /* @__PURE__ */ i("div", {}) : /* @__PURE__ */ i(e.Container, {
+	gap: "sm",
+	className: r("paddingSm borderTop", n),
+	children: t
+});
+function p({ item: e, render: t, separated: n }) {
+	return /* @__PURE__ */ i(a.Fragment, { children: /* @__PURE__ */ i("li", {
+		className: r(n && "borderBottom"),
+		children: t(e)
+	}) });
+}
+function m({ items: e, getKey: n, render: r, separated: a, className: o }) {
+	return /* @__PURE__ */ i(t, {
+		className: o,
+		children: /* @__PURE__ */ i("ul", {
+			className: "",
+			children: e.map((e, t) => /* @__PURE__ */ i(p, {
+				item: e,
+				render: r,
+				separated: a
+			}, n(e, t)))
+		})
+	});
+}
+function h({ items: e, getKey: o, render: d, separated: f, className: p, isLoading: m, hasNextPage: h, fetchNextPage: g }) {
+	let _ = c(null), v = l(((e, t, n) => s(() => ({
+		count: t ? e + 1 : e,
+		getScrollElement: () => n.current,
+		measureElement: (e) => Math.ceil(e.getBoundingClientRect().height),
+		estimateSize: () => 120,
+		overscan: 5
+	}), [
+		e,
+		t,
+		n
+	]))(e.length, h, _)), y = v.getVirtualItems();
+	return u({
+		virtualItems: y,
+		currentItemsCount: e.length,
+		hasNextPage: h,
+		fetchNextPage: g
+	}), /* @__PURE__ */ i(t, {
+		ref: _,
+		className: p,
+		children: m ? /* @__PURE__ */ i(n, {}) : /* @__PURE__ */ i("ul", {
+			style: { height: v.getTotalSize() },
+			className: "relative w100",
+			children: y.map((t) => {
+				let s = t.index > e.length - 1, c = e[t.index];
+				return /* @__PURE__ */ i(a.Fragment, { children: /* @__PURE__ */ i("li", {
+					ref: v.measureElement,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						transform: `translateY(${Math.round(t.start)}px)`
+					},
+					"data-index": t.index,
+					className: r(f && "borderBottom"),
+					children: s ? /* @__PURE__ */ i(n, {}) : d(c)
+				}) }, s ? "loader" : o(c, t.index));
+			})
+		})
+	});
+}
+var g = ({ className: t, children: n }) => /* @__PURE__ */ i(e.Container, {
+	templateRows: "auto 1fr auto",
+	className: r("h100", t),
+	children: n
+});
+g.Toolbar = d, g.Content = m, g.Footer = f, g.VirtualizedContent = h;
+//#endregion
+export { g as List };
+
+//# sourceMappingURL=index.js.map

package/dist/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/list/List.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, useMemo, useRef } from \"react\";\n\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { useFetchNextPageEffect } from \"@ryuzaki13/react-foundation-lib/virtualizer\";\n\nimport { Grid } from \"../grid\";\nimport { LoadingMessage, Scrollable } from \"../misc\";\n\ninterface ListToolbarProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nconst ListToolbar: React.FC<ListToolbarProps> = ({ children, className }) => {\n\tif (Children.count(children) === 0) {\n\t\t// Пустой блок для корректной работы родительского шаблона auto 1fr auto\n\t\treturn <div></div>;\n\t}\n\n\treturn (\n\t\t<Grid.Container gap=\"sm\" className={cn(\"paddingSm borderBottom\", className)}>\n\t\t\t{children}\n\t\t</Grid.Container>\n\t);\n};\n\ninterface ListFooterProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nconst ListFooter: React.FC<ListFooterProps> = ({ children, className }) => {\n\tif (Children.count(children) === 0) {\n\t\t// Пустой блок для корректной работы родительского шаблона auto 1fr auto\n\t\treturn <div></div>;\n\t}\n\n\treturn (\n\t\t<Grid.Container gap=\"sm\" className={cn(\"paddingSm borderTop\", className)}>\n\t\t\t{children}\n\t\t</Grid.Container>\n\t);\n};\n\ninterface ListItemProps<T> {\n\titem: T;\n\trender: (item: T) => React.ReactNode;\n\tseparated?: boolean;\n}\n\nfunction ListItem<T>({ item, render, separated }: ListItemProps<T>) {\n\treturn (\n\t\t<React.Fragment>\n\t\t\t<li className={cn(separated && \"borderBottom\")}>{render(item)}</li>\n\t\t\t{/* {separated && <Separator as=\"li\" />} */}\n\t\t</React.Fragment>\n\t);\n}\n\ninterface ListContentProps<T> {\n\titems: T[];\n\tgetKey: (item: T, index: number) => string;\n\trender: (item: T) => React.ReactNode;\n\tseparated?: boolean;\n\tclassName?: string;\n}\n\nfunction ListContent<T>({ items, getKey, render, separated, className }: ListContentProps<T>) {\n\treturn (\n\t\t<Scrollable className={className}>\n\t\t\t<ul className=\"\">\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<ListItem<T> key={getKey(item, index)} item={item} render={render} separated={separated} />\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</Scrollable>\n\t);\n}\n\ninterface ListVirtualizedContentProps<T> {\n\titems: T[];\n\tgetKey: (item: T, index: number) => string;\n\trender: (item: T) => React.ReactNode;\n\tisLoading?: boolean;\n\tseparated?: boolean;\n\tclassName?: string;\n\t/** Параметры для бесконечной подгрузки */\n\thasNextPage: boolean;\n\tfetchNextPage: () => Promise<unknown>;\n}\n\nfunction ListVirtualizedContent<T>({\n\titems,\n\tgetKey,\n\trender,\n\tseparated,\n\tclassName,\n\tisLoading,\n\thasNextPage,\n\tfetchNextPage\n}: ListVirtualizedContentProps<T>) {\n\tconst parentRef = useRef<HTMLDivElement | null>(null);\n\n\tconst useVirtualizerConfig = (itemsCount: number, hasNextPage: boolean | undefined, parentRef: React.RefObject<HTMLElement | null>) => {\n\t\treturn useMemo(\n\t\t\t() => ({\n\t\t\t\tcount: hasNextPage ? itemsCount + 1 : itemsCount,\n\t\t\t\tgetScrollElement: () => parentRef.current,\n\t\t\t\tmeasureElement: (el: Element) => Math.ceil(el.getBoundingClientRect().height),\n\t\t\t\testimateSize: () => 120,\n\t\t\t\toverscan: 5\n\t\t\t}),\n\t\t\t[itemsCount, hasNextPage, parentRef]\n\t\t);\n\t};\n\n\tconst config = useVirtualizerConfig(items.length, hasNextPage, parentRef);\n\tconst rowVirtualizer = useVirtualizer(config);\n\n\tconst virtualItems = rowVirtualizer.getVirtualItems();\n\n\tuseFetchNextPageEffect({ virtualItems, currentItemsCount: items.length, hasNextPage, fetchNextPage });\n\n\treturn (\n\t\t<Scrollable ref={parentRef} className={className}>\n\t\t\t{isLoading ? (\n\t\t\t\t<LoadingMessage />\n\t\t\t) : (\n\t\t\t\t<ul style={{ height: rowVirtualizer.getTotalSize() }} className=\"relative w100\">\n\t\t\t\t\t{virtualItems.map((virtualRow) => {\n\t\t\t\t\t\tconst isLoaderRow = virtualRow.index > items.length - 1;\n\t\t\t\t\t\tconst item = items[virtualRow.index];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<React.Fragment key={isLoaderRow ? \"loader\" : getKey(item, virtualRow.index)}>\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tref={rowVirtualizer.measureElement}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\t\t\t\t\ttransform: `translateY(${Math.round(virtualRow.start)}px)`\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-index={virtualRow.index}\n\t\t\t\t\t\t\t\t\tclassName={cn(separated && \"borderBottom\")}>\n\t\t\t\t\t\t\t\t\t{isLoaderRow ? <LoadingMessage /> : render(item)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</Scrollable>\n\t);\n}\n\ninterface ListComposition {\n\tToolbar: typeof ListToolbar;\n\tContent: typeof ListContent;\n\tFooter: typeof ListFooter;\n\tVirtualizedContent: typeof ListVirtualizedContent;\n}\n\ninterface ListProps extends PropsWithChildren {\n\tclassName?: string;\n}\n\nexport const List: React.FC<ListProps> & ListComposition = ({ className, children }) => {\n\treturn (\n\t\t<Grid.Container templateRows=\"auto 1fr auto\" className={cn(\"h100\", className)}>\n\t\t\t{children}\n\t\t</Grid.Container>\n\t);\n};\n\n// Компоновка\nList.Toolbar = ListToolbar;\nList.Content = ListContent;\nList.Footer = ListFooter;\nList.VirtualizedContent = ListVirtualizedContent;\n"],"mappings":";;;;;;;;AAeA,IAAM,KAA2C,EAAE,aAAU,mBACxD,EAAS,MAAM,CAAQ,MAAM,IAEzB,kBAAC,OAAD,CAAU,CAAA,IAIjB,kBAAC,EAAK,WAAN;CAAgB,KAAI;CAAK,WAAW,EAAG,0BAA0B,CAAS;CACxE;AACc,CAAA,GASZ,KAAyC,EAAE,aAAU,mBACtD,EAAS,MAAM,CAAQ,MAAM,IAEzB,kBAAC,OAAD,CAAU,CAAA,IAIjB,kBAAC,EAAK,WAAN;CAAgB,KAAI;CAAK,WAAW,EAAG,uBAAuB,CAAS;CACrE;AACc,CAAA;AAUlB,SAAS,EAAY,EAAE,SAAM,WAAQ,gBAA+B;CACnE,OACC,kBAAC,EAAM,UAAP,EAAA,UACC,kBAAC,MAAD;EAAI,WAAW,EAAG,KAAa,cAAc;YAAI,EAAO,CAAI;CAAM,CAAA,EAEnD,CAAA;AAElB;AAUA,SAAS,EAAe,EAAE,UAAO,WAAQ,WAAQ,cAAW,gBAAkC;CAC7F,OACC,kBAAC,GAAD;EAAuB;YACtB,kBAAC,MAAD;GAAI,WAAU;aACZ,EAAM,KAAK,GAAM,MACjB,kBAAC,GAAD;IAA6C;IAAc;IAAmB;GAAY,GAAxE,EAAO,GAAM,CAAK,CAAsD,CAC1F;EACE,CAAA;CACO,CAAA;AAEd;AAcA,SAAS,EAA0B,EAClC,UACA,WACA,WACA,cACA,cACA,cACA,gBACA,oBACkC;CAClC,IAAM,IAAY,EAA8B,IAAI,GAgB9C,IAAiB,IAdO,GAAoB,GAAkC,MAC5E,SACC;EACN,OAAO,IAAc,IAAa,IAAI;EACtC,wBAAwB,EAAU;EAClC,iBAAiB,MAAgB,KAAK,KAAK,EAAG,sBAAsB,CAAC,CAAC,MAAM;EAC5E,oBAAoB;EACpB,UAAU;CACX,IACA;EAAC;EAAY;EAAa;CAAS,CACpC,EAGc,CAAqB,EAAM,QAAQ,GAAa,CACzB,CAAM,GAEtC,IAAe,EAAe,gBAAgB;CAIpD,OAFA,EAAuB;EAAE;EAAc,mBAAmB,EAAM;EAAQ;EAAa;CAAc,CAAC,GAGnG,kBAAC,GAAD;EAAY,KAAK;EAAsB;YACrC,IACA,kBAAC,GAAD,CAAiB,CAAA,IAEjB,kBAAC,MAAD;GAAI,OAAO,EAAE,QAAQ,EAAe,aAAa,EAAE;GAAG,WAAU;aAC9D,EAAa,KAAK,MAAe;IACjC,IAAM,IAAc,EAAW,QAAQ,EAAM,SAAS,GAChD,IAAO,EAAM,EAAW;IAE9B,OACC,kBAAC,EAAM,UAAP,EAAA,UACC,kBAAC,MAAD;KACC,KAAK,EAAe;KACpB,OAAO;MACN,UAAU;MACV,KAAK;MACL,MAAM;MACN,OAAO;MACP,WAAW,cAAc,KAAK,MAAM,EAAW,KAAK,EAAE;KACvD;KACA,cAAY,EAAW;KACvB,WAAW,EAAG,KAAa,cAAc;eACxC,IAAc,kBAAC,GAAD,CAAiB,CAAA,IAAI,EAAO,CAAI;IAC5C,CAAA,EACW,GAdK,IAAc,WAAW,EAAO,GAAM,EAAW,KAAK,CAc3D;GAElB,CAAC;EACE,CAAA;CAEM,CAAA;AAEd;AAaA,IAAa,KAA+C,EAAE,cAAW,kBAEvE,kBAAC,EAAK,WAAN;CAAgB,cAAa;CAAgB,WAAW,EAAG,QAAQ,CAAS;CAC1E;AACc,CAAA;AAKlB,EAAK,UAAU,GACf,EAAK,UAAU,GACf,EAAK,SAAS,GACd,EAAK,qBAAqB"}