@ryuzaki13/react-foundation-ui 1.0.0 → 1.0.2

package/dist/chunks/{LabeledExpandableActionPanel-Bx-DWmYz.js → LabeledExpandableActionPanel-D3kUvmFH.js}

@@ -1,9 +1,9 @@
-import { l as e } from "./misc-DrmMj8GO.js";
-import { t } from "./Button-BZ_b-Kin.js";
-import { ChevronsLeftIcon as n, ChevronsRightIcon as r } from "lucide-react";
-import { cn as i } from "@ryuzaki13/react-foundation-lib/utils";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as s, useId as c, useState as l } from "react";
+import { t as e } from "./Button-CCWuggdA.js";
+import { l as t } from "./misc-DoqZBMof.js";
+import { useCallback as n, useId as r, useState as i } from "react";
+import { cn as a } from "@ryuzaki13/react-foundation-lib/utils";
+import { ChevronsLeftIcon as o, ChevronsRightIcon as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {
 	expandableActionPanel: "sj-rIq",
 	content: "_3anR7j",
@@ -15,21 +15,21 @@ var u = {
 //#endregion
 //#region src/expandable-action-panel/ExpandableActionPanel.tsx
 function d({ children: d, className: f, contentClassName: p, toggleClassName: m, open: h, defaultOpen: g = !1, disabled: _, onOpenChange: v, expandLabel: y = "Раскрыть панель действий влево", collapseLabel: b = "Свернуть панель действий", panelLabel: x = "Действия панели", itemSelector: S, scrollPadding: C, smoothScroll: w }) {
-	let [T, E] = l(g), D = c(), O = h !== void 0, k = O ? h : T, A = s((e) => {
+	let [T, E] = i(g), D = r(), O = h !== void 0, k = O ? h : T, A = n((e) => {
 		let t = typeof e == "function" ? e(k) : e;
 		O || E(t), v?.(t);
 	}, [
 		O,
 		v,
 		k
-	]), j = () => A((e) => !e), M = k ? r : n;
-	return /* @__PURE__ */ o("div", {
-		className: i(u.expandableActionPanel, f),
+	]), j = () => A((e) => !e), M = k ? s : o;
+	return /* @__PURE__ */ l("div", {
+		className: a(u.expandableActionPanel, f),
 		"data-ui": "expandable-action-panel",
 		"data-open": k ? "" : void 0,
-		children: [/* @__PURE__ */ a(t, {
+		children: [/* @__PURE__ */ c(e, {
 			className: m,
-			icon: /* @__PURE__ */ a(M, {}),
+			icon: /* @__PURE__ */ c(M, {}),
 			title: k ? b : y,
 			disabled: _,
 			variant: "neutralOutline",
@@ -38,12 +38,12 @@ function d({ children: d, className: f, contentClassName: p, toggleClassName: m,
 			"data-ui": "expandable-action-panel-toggle",
 			"data-action": k ? "collapse-action-panel" : "expand-action-panel",
 			onClick: j
-		}), k && /* @__PURE__ */ a("div", {
+		}), k && /* @__PURE__ */ c("div", {
 			id: D,
 			role: "group",
 			"aria-label": x,
-			className: i(u.content, p),
-			children: /* @__PURE__ */ a(e, {
+			className: a(u.content, p),
+			children: /* @__PURE__ */ c(t, {
 				className: u.contentScroller,
 				itemSelector: S,
 				scrollPadding: C,
@@ -55,28 +55,28 @@ function d({ children: d, className: f, contentClassName: p, toggleClassName: m,
 }
 //#endregion
 //#region src/expandable-action-panel/LabeledExpandableActionPanel.tsx
-function f({ label: e, className: t, labelClassName: n, labelStyle: r, labelMinWidth: s = "12em", panelClassName: c, open: l, defaultOpen: f, ...p }) {
+function f({ label: e, className: t, labelClassName: n, labelStyle: r, labelMinWidth: i = "12em", panelClassName: o, open: s, defaultOpen: f, ...p }) {
 	let m = {
 		...r,
-		minWidth: s
+		minWidth: i
 	}, h = typeof e == "string" ? e : void 0;
-	return /* @__PURE__ */ o("div", {
-		className: i(u.labeledPanel, t),
+	return /* @__PURE__ */ l("div", {
+		className: a(u.labeledPanel, t),
 		"data-ui": "labeled-expandable-action-panel",
-		children: [/* @__PURE__ */ a("div", {
-			className: i("flexEllipsis", u.label, n),
+		children: [/* @__PURE__ */ c("div", {
+			className: a("flexEllipsis", u.label, n),
 			style: m,
 			title: h,
 			children: e
-		}), /* @__PURE__ */ a(d, {
+		}), /* @__PURE__ */ c(d, {
 			...p,
-			open: l,
+			open: s,
 			defaultOpen: f,
-			className: i(u.labeledActionPanel, c)
+			className: a(u.labeledActionPanel, o)
 		})]
 	});
 }
 //#endregion
 export { d as n, f as t };
 
-//# sourceMappingURL=LabeledExpandableActionPanel-Bx-DWmYz.js.map
+//# sourceMappingURL=LabeledExpandableActionPanel-D3kUvmFH.js.map

package/dist/chunks/LabeledExpandableActionPanel-D3kUvmFH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledExpandableActionPanel-D3kUvmFH.js","names":[],"sources":["../../src/expandable-action-panel/ExpandableActionPanel.module.scss","../../src/expandable-action-panel/ExpandableActionPanel.tsx","../../src/expandable-action-panel/LabeledExpandableActionPanel.tsx"],"sourcesContent":[".expandableActionPanel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tgap: var(--space-sm);\n\tmin-width: var(--control-height);\n\tmax-width: 100%;\n\toverflow: hidden;\n}\n\n.content {\n\tmin-width: 0;\n\tmax-width: 100%;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n}\n\n.contentScroller {\n\twidth: 100%;\n\tmin-width: 0;\n}\n\n.labeledPanel {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-sm);\n\twidth: 100%;\n\tmin-width: 0;\n}\n\n.label {\n\tcolor: var(--content-0);\n}\n\n.labeledActionPanel {\n\tflex: 0 1 auto;\n}\n","import React, { PropsWithChildren, useCallback, useId, useState } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { ChevronsLeftIcon, ChevronsRightIcon } from \"lucide-react\";\n\nimport { Button } from \"../button\";\nimport { OneStepScroller } from \"../misc\";\n\nimport styles from \"./ExpandableActionPanel.module.scss\";\n\nexport interface ExpandableActionPanelProps extends PropsWithChildren {\n\tclassName?: string;\n\tcontentClassName?: string;\n\ttoggleClassName?: string;\n\topen?: boolean;\n\tdefaultOpen?: boolean;\n\tdisabled?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\texpandLabel?: string;\n\tcollapseLabel?: string;\n\tpanelLabel?: string;\n\titemSelector?: string;\n\tscrollPadding?: number;\n\tsmoothScroll?: boolean;\n}\n\n/**\n * Горизонтальная раскрывающаяся панель действий.\n * Не знает о внешнем layout и может использоваться рядом с любым содержимым.\n */\nexport function ExpandableActionPanel({\n\tchildren,\n\tclassName,\n\tcontentClassName,\n\ttoggleClassName,\n\topen: controlledOpen,\n\tdefaultOpen = false,\n\tdisabled,\n\tonOpenChange,\n\texpandLabel = \"Раскрыть панель действий влево\",\n\tcollapseLabel = \"Свернуть панель действий\",\n\tpanelLabel = \"Действия панели\",\n\titemSelector,\n\tscrollPadding,\n\tsmoothScroll\n}: ExpandableActionPanelProps) {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\tconst panelId = useId();\n\tconst isControlled = controlledOpen !== undefined;\n\tconst open = isControlled ? controlledOpen : uncontrolledOpen;\n\n\tconst setOpen = useCallback<React.Dispatch<React.SetStateAction<boolean>>>(\n\t\t(value) => {\n\t\t\tconst nextOpen = typeof value === \"function\" ? value(open) : value;\n\n\t\t\tif (!isControlled) {\n\t\t\t\tsetUncontrolledOpen(nextOpen);\n\t\t\t}\n\n\t\t\tonOpenChange?.(nextOpen);\n\t\t},\n\t\t[isControlled, onOpenChange, open]\n\t);\n\n\tconst handleToggle = () => setOpen((prevOpen) => !prevOpen);\n\tconst ToggleIcon = open ? ChevronsRightIcon : ChevronsLeftIcon;\n\n\treturn (\n\t\t<div className={cn(styles.expandableActionPanel, className)} data-ui=\"expandable-action-panel\" data-open={open ? \"\" : undefined}>\n\t\t\t<Button\n\t\t\t\tclassName={toggleClassName}\n\t\t\t\ticon={<ToggleIcon />}\n\t\t\t\ttitle={open ? collapseLabel : expandLabel}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tvariant=\"neutralOutline\"\n\t\t\t\taria-expanded={open}\n\t\t\t\taria-controls={panelId}\n\t\t\t\tdata-ui=\"expandable-action-panel-toggle\"\n\t\t\t\tdata-action={open ? \"collapse-action-panel\" : \"expand-action-panel\"}\n\t\t\t\tonClick={handleToggle}\n\t\t\t/>\n\n\t\t\t{open && (\n\t\t\t\t<div id={panelId} role=\"group\" aria-label={panelLabel} className={cn(styles.content, contentClassName)}>\n\t\t\t\t\t<OneStepScroller\n\t\t\t\t\t\tclassName={styles.contentScroller}\n\t\t\t\t\t\titemSelector={itemSelector}\n\t\t\t\t\t\tscrollPadding={scrollPadding}\n\t\t\t\t\t\tsmooth={smoothScroll}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</OneStepScroller>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n","import React from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { ExpandableActionPanel, ExpandableActionPanelProps } from \"./ExpandableActionPanel\";\nimport styles from \"./ExpandableActionPanel.module.scss\";\n\nexport interface LabeledExpandableActionPanelProps extends Omit<ExpandableActionPanelProps, \"className\"> {\n\tlabel: React.ReactNode;\n\tclassName?: string;\n\tlabelClassName?: string;\n\tlabelStyle?: React.CSSProperties;\n\tlabelMinWidth?: React.CSSProperties[\"minWidth\"];\n\tpanelClassName?: string;\n}\n\n/**\n * Раскрывающаяся панель действий с левым текстом, который сжимается через `flexEllipsis`.\n */\nexport function LabeledExpandableActionPanel({\n\tlabel,\n\tclassName,\n\tlabelClassName,\n\tlabelStyle,\n\tlabelMinWidth = \"12em\",\n\tpanelClassName,\n\topen,\n\tdefaultOpen,\n\t...panelProps\n}: LabeledExpandableActionPanelProps) {\n\tconst resolvedLabelStyle: React.CSSProperties = {\n\t\t...labelStyle,\n\t\tminWidth: labelMinWidth\n\t};\n\tconst title = typeof label === \"string\" ? label : undefined;\n\n\treturn (\n\t\t<div className={cn(styles.labeledPanel, className)} data-ui=\"labeled-expandable-action-panel\">\n\t\t\t<div className={cn(\"flexEllipsis\", styles.label, labelClassName)} style={resolvedLabelStyle} title={title}>\n\t\t\t\t{label}\n\t\t\t</div>\n\t\t\t<ExpandableActionPanel\n\t\t\t\t{...panelProps}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tclassName={cn(styles.labeledActionPanel, panelClassName)}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AC8BA,SAAgB,EAAsB,EACrC,aACA,cACA,qBACA,oBACA,MAAM,GACN,iBAAc,IACd,aACA,iBACA,iBAAc,kCACd,mBAAgB,4BAChB,gBAAa,mBACb,iBACA,kBACA,mBAC8B;CAC9B,IAAM,CAAC,GAAkB,KAAuB,EAAS,CAAW,GAC9D,IAAU,EAAM,GAChB,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAU,GACd,MAAU;EACV,IAAM,IAAW,OAAO,KAAU,aAAa,EAAM,CAAI,IAAI;EAM7D,AAJK,KACJ,EAAoB,CAAQ,GAG7B,IAAe,CAAQ;CACxB,GACA;EAAC;EAAc;EAAc;CAAI,CAClC,GAEM,UAAqB,GAAS,MAAa,CAAC,CAAQ,GACpD,IAAa,IAAO,IAAoB;CAE9C,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,uBAAuB,CAAS;EAAG,WAAQ;EAA0B,aAAW,IAAO,KAAK,KAAA;YAAtH,CACC,kBAAC,GAAD;GACC,WAAW;GACX,MAAM,kBAAC,GAAD,CAAa,CAAA;GACnB,OAAO,IAAO,IAAgB;GACpB;GACV,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAQ;GACR,eAAa,IAAO,0BAA0B;GAC9C,SAAS;EACT,CAAA,GAEA,KACA,kBAAC,OAAD;GAAK,IAAI;GAAS,MAAK;GAAQ,cAAY;GAAY,WAAW,EAAG,EAAO,SAAS,CAAgB;aACpG,kBAAC,GAAD;IACC,WAAW,EAAO;IACJ;IACC;IACf,QAAQ;IACP;GACe,CAAA;EACb,CAAA,CAEF;;AAEP;;;AC5EA,SAAgB,EAA6B,EAC5C,UACA,cACA,mBACA,eACA,mBAAgB,QAChB,mBACA,SACA,gBACA,GAAG,KACkC;CACrC,IAAM,IAA0C;EAC/C,GAAG;EACH,UAAU;CACX,GACM,IAAQ,OAAO,KAAU,WAAW,IAAQ,KAAA;CAElD,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,cAAc,CAAS;EAAG,WAAQ;YAA5D,CACC,kBAAC,OAAD;GAAK,WAAW,EAAG,gBAAgB,EAAO,OAAO,CAAc;GAAG,OAAO;GAA2B;aAClG;EACG,CAAA,GACL,kBAAC,GAAD;GACC,GAAI;GACE;GACO;GACb,WAAW,EAAG,EAAO,oBAAoB,CAAc;EACvD,CAAA,CACG;;AAEP"}

package/dist/chunks/Listbox-BZlp5qHz.js

@@ -0,0 +1,81 @@
+import { t as e } from "./ui.module-BisoTevy.js";
+import { useEffect as t, useId as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { cn as s, findFirstEnabledIndex as c, findLastEnabledIndex as l, findNextEnabledIndex as u, handleKeyboardActivation as d } from "@ryuzaki13/react-foundation-lib/utils";
+import { CheckIcon as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/listbox/Listbox.tsx
+var h = (e) => e.disabled === !0;
+function g(e, t, n) {
+	if (n) {
+		if (Array.isArray(t) && t.length > 0) {
+			let n = e.findIndex((e) => t.includes(e.value) && !e.disabled);
+			if (n >= 0) return n;
+		}
+		return c(e, h);
+	}
+	if (t !== void 0) {
+		let n = e.findIndex((e) => e.value === t && !e.disabled);
+		if (n >= 0) return n;
+	}
+	return c(e, h);
+}
+function _(_) {
+	let { value: v, defaultValue: y, multiple: b, focusOnMount: x, renderItem: S, getKey: C, options: w, onChange: T, id: E, ...D } = _, O = v !== void 0, k = n(), A = E ?? `${k}-listbox`, [j, M] = o(y), N = a(null), [P, F] = o(() => g(w, v ?? y, b)), I = i(() => (O ? v : j) ?? (b ? [] : null), [
+		j,
+		O,
+		b,
+		v
+	]), L = P, R = (e) => {
+		if (e.disabled) return;
+		let t;
+		if (_.multiple) {
+			let n = Array.isArray(I) ? I : [];
+			t = n.includes(e.value) ? n.filter((t) => t !== e.value) : [...n, e.value], _.onChange?.(t, e);
+		} else t = e.value, _.onChange?.(t, e);
+		O || M(t);
+	};
+	return t(() => {
+		let e = N.current?.querySelectorAll("[role=\"option\"]")[L];
+		e && e.scrollIntoView({ block: "nearest" });
+	}, [L]), r(() => {
+		x && N.current?.focus();
+	}, [x]), /* @__PURE__ */ p("ul", {
+		ref: N,
+		id: A,
+		role: "listbox",
+		"aria-multiselectable": b || void 0,
+		"aria-activedescendant": L >= 0 ? `${A}-option-${L}` : void 0,
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			if (e.key === "ArrowDown") e.preventDefault(), F((e) => u(w, e, 1, h));
+			else if (e.key === "ArrowUp") e.preventDefault(), F((e) => u(w, e, -1, h));
+			else if (e.key === "Home") e.preventDefault(), F(c(w, h));
+			else if (e.key === "End") e.preventDefault(), F(l(w, h));
+			else if (d(e, () => {
+				let e = w[L];
+				e && R(e);
+			})) return;
+		},
+		...D,
+		className: s(e.uiPanel, "scrollable"),
+		children: w.map((t, n) => {
+			let r = b ? Array.isArray(I) && I.includes(t.value) : I === t.value, i = n === L;
+			return /* @__PURE__ */ m("li", {
+				id: `${A}-option-${n}`,
+				role: "option",
+				"aria-selected": r,
+				"aria-disabled": t.disabled || void 0,
+				onMouseDown: (e) => {
+					e.preventDefault(), !t.disabled && (F(n), R(t));
+				},
+				tabIndex: -1,
+				className: s(e.uiPopupOption, t.disabled && e.disabled, i && e.uiPopupOptionActive, r && e.selected),
+				children: [p(r ? f : "span", { className: e.uiPopupOptionIcon }), /* @__PURE__ */ p("div", { children: S ? S(t, r, i) : t.label ?? String(t.value) })]
+			}, C ? C(t, n) : n);
+		})
+	});
+}
+//#endregion
+export { _ as t };
+
+//# sourceMappingURL=Listbox-BZlp5qHz.js.map

package/dist/chunks/Listbox-BZlp5qHz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox-BZlp5qHz.js","names":[],"sources":["../../src/listbox/Listbox.tsx"],"sourcesContent":["import { HTMLAttributes, JSX, KeyboardEvent, ReactNode, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n\tcn,\n\tfindFirstEnabledIndex,\n\tfindLastEnabledIndex,\n\tfindNextEnabledIndex,\n\thandleKeyboardActivation\n} from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nimport uiStyles from \"../ui.module.scss\";\n\ntype ListboxOption<T> = {\n\tvalue: T;\n\tlabel?: string;\n\tdisabled?: boolean;\n};\n\ninterface ListboxBaseProps<T> extends Omit<HTMLAttributes<HTMLUListElement>, \"onChange\" | \"defaultValue\" | \"value\"> {\n\toptions: ListboxOption<T>[];\n\tfocusOnMount?: boolean;\n\trenderItem?: (option: ListboxOption<T>, selected: boolean, active: boolean) => ReactNode;\n\tgetKey?: (option: ListboxOption<T>, index: number) => string;\n}\n\n// Вариант для single-select\ninterface ListboxSingleProps<T> extends ListboxBaseProps<T> {\n\tmultiple?: false;\n\tvalue?: T;\n\tdefaultValue?: T;\n\tonChange?: (value: T, option: ListboxOption<T>) => void;\n}\n\n// Вариант для multi-select\ninterface ListboxMultiProps<T> extends ListboxBaseProps<T> {\n\tmultiple: true;\n\tvalue?: T[];\n\tdefaultValue?: T[];\n\tonChange?: (value: T[], option: ListboxOption<T>) => void;\n}\n\ntype ListboxProps<T> = ListboxSingleProps<T> | ListboxMultiProps<T>;\n\nconst isOptionDisabled = <T,>(option: ListboxOption<T>) => option.disabled === true;\n\nfunction getInitialFocusIndex<T>(options: ListboxOption<T>[], value: T | T[] | undefined, multiple: boolean | undefined) {\n\tif (multiple) {\n\t\tif (Array.isArray(value) && value.length > 0) {\n\t\t\tconst selectedIndex = options.findIndex((option) => value.includes(option.value) && !option.disabled);\n\t\t\tif (selectedIndex >= 0) {\n\t\t\t\treturn selectedIndex;\n\t\t\t}\n\t\t}\n\n\t\treturn findFirstEnabledIndex(options, isOptionDisabled);\n\t}\n\n\tif (value !== undefined) {\n\t\tconst selectedIndex = options.findIndex((option) => option.value === value && !option.disabled);\n\t\tif (selectedIndex >= 0) {\n\t\t\treturn selectedIndex;\n\t\t}\n\t}\n\n\treturn findFirstEnabledIndex(options, isOptionDisabled);\n}\n\n/**\n * Компонент выбора одного или нескольких элементов из списка. Поддерживает controlled API, поиск по данным и рендер кастомных опций.\n */\nexport function Listbox<T>(props: ListboxSingleProps<T>): JSX.Element;\nexport function Listbox<T>(props: ListboxMultiProps<T>): JSX.Element;\nexport function Listbox<T>(props: ListboxProps<T>): JSX.Element {\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst { value, defaultValue, multiple, focusOnMount, renderItem, getKey, options, onChange, id: externalId, ...rest } = props;\n\n\tconst isControlled = value !== undefined;\n\tconst autoId = useId();\n\tconst listId = externalId ?? `${autoId}-listbox`;\n\tconst [internalValue, setInternalValue] = useState<T | T[] | undefined>(defaultValue);\n\tconst listRef = useRef<HTMLUListElement>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState(() => getInitialFocusIndex(options, value ?? defaultValue, multiple));\n\t// const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n\tconst selectedValues = useMemo(\n\t\t() => (isControlled ? value : internalValue) ?? (multiple ? [] : null),\n\t\t[internalValue, isControlled, multiple, value]\n\t);\n\tconst activeIndex = /*hoveredIndex ??*/ focusedIndex;\n\n\tconst handleSelect = (option: ListboxOption<T>) => {\n\t\tif (option.disabled) return;\n\n\t\tlet newValue: T | T[];\n\t\tif (props.multiple) {\n\t\t\tconst arr = Array.isArray(selectedValues) ? selectedValues : [];\n\t\t\tnewValue = arr.includes(option.value) ? arr.filter((v) => v !== option.value) : [...arr, option.value];\n\n\t\t\tprops.onChange?.(newValue, option);\n\t\t} else {\n\t\t\tnewValue = option.value;\n\n\t\t\tprops.onChange?.(newValue, option);\n\t\t}\n\n\t\tif (!isControlled) setInternalValue(newValue);\n\t};\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n\t\tif (e.key === \"ArrowDown\") {\n\t\t\te.preventDefault();\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex((index) => findNextEnabledIndex(options, index, 1, isOptionDisabled));\n\t\t} else if (e.key === \"ArrowUp\") {\n\t\t\te.preventDefault();\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex((index) => findNextEnabledIndex(options, index, -1, isOptionDisabled));\n\t\t} else if (e.key === \"Home\") {\n\t\t\te.preventDefault();\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex(findFirstEnabledIndex(options, isOptionDisabled));\n\t\t} else if (e.key === \"End\") {\n\t\t\te.preventDefault();\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex(findLastEnabledIndex(options, isOptionDisabled));\n\t\t} else if (\n\t\t\thandleKeyboardActivation(e, () => {\n\t\t\t\tconst activeOption = options[activeIndex];\n\t\t\t\tif (activeOption) {\n\t\t\t\t\thandleSelect(activeOption);\n\t\t\t\t}\n\t\t\t})\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tconst el = listRef.current?.querySelectorAll<HTMLElement>('[role=\"option\"]')[activeIndex];\n\t\tif (el) el.scrollIntoView({ block: \"nearest\" });\n\t}, [activeIndex]);\n\n\tuseLayoutEffect(() => {\n\t\tif (focusOnMount) {\n\t\t\tlistRef.current?.focus();\n\t\t}\n\t}, [focusOnMount]);\n\n\treturn (\n\t\t<ul\n\t\t\tref={listRef}\n\t\t\tid={listId}\n\t\t\trole=\"listbox\"\n\t\t\taria-multiselectable={multiple || undefined}\n\t\t\taria-activedescendant={activeIndex >= 0 ? `${listId}-option-${activeIndex}` : undefined}\n\t\t\ttabIndex={0}\n\t\t\t// onMouseLeave={() => setHoveredIndex(null)}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\t{...rest}\n\t\t\tclassName={cn(uiStyles.uiPanel, \"scrollable\")}>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tconst selected = multiple\n\t\t\t\t\t? Array.isArray(selectedValues) && selectedValues.includes(option.value)\n\t\t\t\t\t: selectedValues === option.value;\n\t\t\t\tconst active = index === activeIndex;\n\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={getKey ? getKey(option, index) : index}\n\t\t\t\t\t\tid={`${listId}-option-${index}`}\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={selected}\n\t\t\t\t\t\taria-disabled={option.disabled || undefined}\n\t\t\t\t\t\tonMouseDown={(e) => {\n\t\t\t\t\t\t\te.preventDefault(); // чтобы не сбрасывался фокус listbox\n\t\t\t\t\t\t\tif (option.disabled) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetFocusedIndex(index);\n\t\t\t\t\t\t\t// setHoveredIndex(index);\n\t\t\t\t\t\t\thandleSelect(option);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// onMouseEnter={() => setHoveredIndex(index)}\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tuiStyles.uiPopupOption,\n\t\t\t\t\t\t\toption.disabled && uiStyles.disabled,\n\t\t\t\t\t\t\tactive && uiStyles.uiPopupOptionActive,\n\t\t\t\t\t\t\tselected && uiStyles.selected\n\t\t\t\t\t\t)}>\n\t\t\t\t\t\t{selected ? (\n\t\t\t\t\t\t\t<CheckIcon className={uiStyles.uiPopupOptionIcon} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className={uiStyles.uiPopupOptionIcon}></span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div /*className={uiStyles.uiOptionText}*/>\n\t\t\t\t\t\t\t{renderItem ? renderItem(option, selected, active) : (option.label ?? String(option.value))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}