import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{Tt as r,n as i,pn as a,t as o}from"./iframe-NOj5DEP4.js";import{a as s,i as c,n as l,r as u,s as d,t as f}from"./utils-C5_R17vJ.js";import{n as p,t as m}from"./ui.module-wFHXkJzp.js";function h(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 u(e,y)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return u(e,y)}function g(e){let{value:t,defaultValue:n,multiple:i,focusOnMount:a,renderItem:o,getKey:c,options:m,onChange:g,id:b,...x}=e,S=t!==void 0,C=(0,_.useId)(),w=b??`${C}-listbox`,[T,E]=(0,_.useState)(n),D=(0,_.useRef)(null),[O,k]=(0,_.useState)(()=>h(m,t??n,i)),A=(0,_.useMemo)(()=>(S?t:T)??(i?[]:null),[T,S,i,t]),j=O,M=t=>{if(t.disabled)return;let n;if(e.multiple){let r=Array.isArray(A)?A:[];n=r.includes(t.value)?r.filter(e=>e!==t.value):[...r,t.value],e.onChange?.(n,t)}else n=t.value,e.onChange?.(n,t);S||E(n)};return(0,_.useEffect)(()=>{let e=D.current?.querySelectorAll(`[role="option"]`)[j];e&&e.scrollIntoView({block:`nearest`})},[j]),(0,_.useLayoutEffect)(()=>{a&&D.current?.focus()},[a]),(0,v.jsx)(`ul`,{ref:D,id:w,role:`listbox`,"aria-multiselectable":i||void 0,"aria-activedescendant":j>=0?`${w}-option-${j}`:void 0,tabIndex:0,onKeyDown:e=>{if(e.key===`ArrowDown`)e.preventDefault(),k(e=>f(m,e,1,y));else if(e.key===`ArrowUp`)e.preventDefault(),k(e=>f(m,e,-1,y));else if(e.key===`Home`)e.preventDefault(),k(u(m,y));else if(e.key===`End`)e.preventDefault(),k(d(m,y));else if(l(e,()=>{let e=m[j];e&&M(e)}))return},...x,className:s(p.uiPanel,`scrollable`),children:m.map((e,t)=>{let n=i?Array.isArray(A)&&A.includes(e.value):A===e.value,a=t===j;return(0,v.jsxs)(`li`,{id:`${w}-option-${t}`,role:`option`,"aria-selected":n,"aria-disabled":e.disabled||void 0,onMouseDown:n=>{n.preventDefault(),!e.disabled&&(k(t),M(e))},tabIndex:-1,className:s(p.uiPopupOption,e.disabled&&p.disabled,a&&p.uiPopupOptionActive,n&&p.selected),children:[n?(0,v.jsx)(r,{className:p.uiPopupOptionIcon}):(0,v.jsx)(`span`,{className:p.uiPopupOptionIcon}),(0,v.jsx)(`div`,{children:o?o(e,n,a):e.label??String(e.value)})]},c?c(e,t):t)})})}var _,v,y,b=n((()=>{_=t(a(),1),c(),i(),m(),v=o(),y=e=>e.disabled===!0,g.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})),x=e({CustomRender:()=>O,MultiSelect:()=>D,SingleSelect:()=>E,__namedExportsOrder:()=>k,default:()=>T});function S(e){return e.multiple?(0,w.jsx)(g,{...e,multiple:!0}):(0,w.jsx)(g,{...e})}var C,w,T,E,D,O,k,A=n((()=>{C=t(a(),1),b(),w=o(),T={title:`Shared/UI/Listbox`,component:S,args:{options:[{id:`low`,label:`Низкий`},{id:`medium`,label:`Средний`},{id:`high`,label:`Высокий`},{id:`critical`,label:`Критический`,disabled:!0}],multiple:!1,value:`medium`,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{options:{description:`Массив доступных опций списка.`,control:!1},multiple:{description:`Режим множественного выбора.`,control:`boolean`},value:{description:`Текущее выбранное значение (или массив значений).`,control:!1},defaultValue:{description:`Начальное значение для uncontrolled-режима.`,control:!1},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},E={render:e=>{let[t,n]=(0,C.useState)(`medium`);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,w.jsx)(S,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},D={render:e=>{let[t,n]=(0,C.useState)([`low`,`high`]);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,w.jsx)(S,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},O={render:e=>{let[t,n]=(0,C.useState)(`low`);return(0,w.jsx)(S,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,w.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,w.jsx)(`span`,{children:e.label}),(0,w.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
  render: args => {
    const [value, setValue] = useState<string>("medium");
    return <div style={{
      display: "grid",
      gap: 12,
      maxWidth: 280
    }}>
                <StringListbox {...args} multiple={false} value={value} onChange={next => {
        if (typeof next === "string") setValue(next);
      }} />
                <div>Выбрано: {value}</div>
            </div>;
  }
}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
  render: args => {
    const [value, setValue] = useState<string[]>(["low", "high"]);
    return <div style={{
      display: "grid",
      gap: 12,
      maxWidth: 320
    }}>
                <StringListbox {...args} multiple value={value} onChange={next => {
        if (Array.isArray(next)) setValue(next);
      }} />
                <div>Выбрано: {value.join(", ") || "пусто"}</div>
            </div>;
  },
  args: {
    multiple: true
  }
}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
  render: args => {
    const [value, setValue] = useState<string>("low");
    return <StringListbox {...args} value={value} onChange={next => {
      if (typeof next === "string") setValue(next);
    }} renderItem={(option, selected, active) => <div style={{
      display: "flex",
      justifyContent: "space-between",
      width: "100%",
      opacity: option.disabled ? 0.5 : 1
    }}>
                        <span>{option.label}</span>
                        <span>{selected ? "Выбрано" : active ? "Фокус" : ""}</span>
                    </div>} />;
  }
}`,...O.parameters?.docs?.source}}},k=[`SingleSelect`,`MultiSelect`,`CustomRender`]}));A();export{O as CustomRender,D as MultiSelect,E as SingleSelect,k as __namedExportsOrder,T as default,A as n,x as t};