import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-CMLjY6eW.js";import{n as a,t as o}from"./Select-DMXjzkDO.js";var s=e({ControlledObjects:()=>p,CustomOptionLayout:()=>_,Disabled:()=>v,GroupedOptions:()=>g,Placeholder:()=>h,PrimitiveOptions:()=>m,__namedExportsOrder:()=>y,default:()=>f}),c,l,u,d,f,p,m,h,g,_,v,y,b=n((()=>{c=t(r(),1),a(),l=i(),u=[{id:1,name:`Отдел продаж`,code:`SLS`,manager:`Елена Миронова`,direction:`Коммерческий блок`},{id:2,name:`Закупки`,code:`PRC`,manager:`Антон Мелихов`,direction:`Коммерческий блок`},{id:3,name:`Логистика`,code:`LGS`,manager:`Мария Климова`,direction:`Операционный блок`,disabled:!0},{id:4,name:`Поддержка клиентов`,code:`SUP`,manager:`Ирина Белова`,direction:`Операционный блок`}],d=[`Новый`,`В работе`,`Завершён`,`Архив`],f={title:`Shared/UI/Select`,component:o,args:{label:`Подразделение`,description:`Выберите подразделение из списка.`,placeholder:`Не выбрано`,value:void 0,options:u,onChange:()=>{},getOptionKey:e=>e.id,getOptionLabel:e=>e.name,getOptionCode:e=>e.code,getOptionDisabled:e=>e.disabled??!1,size:`md`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Низкоуровневый getter-based select. Подходит для произвольных структур данных, примитивов и сложного кастомного рендера. Компонент возвращает наружу саму выбранную option. Для сериализуемых конфигов и сценариев с optionKey/optionLabel используйте SerializableSelect.`}}},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда значение ещё не выбрано.`,control:`text`},value:{description:`Текущая выбранная option целиком.`,control:!1},options:{description:`Массив опций любого поддерживаемого формата.`,control:!1},onChange:{description:`Вызывается с выбранной option.`,control:!1},getOptionKey:{description:`Функция получения уникального ключа option.`,control:!1},getOptionLabel:{description:`Функция получения основного текста option.`,control:!1},getOptionCode:{description:`Опциональный рендер дополнительного кода справа.`,control:!1},getOptionDisabled:{description:`Опциональная функция блокировки отдельных option.`,control:!1},getOptionAriaLabel:{description:`Опциональная функция для aria-label option.`,control:!1},getOptionGroup:{description:`Опциональная функция, которая объединяет соседние option под доступным заголовком группы.`,control:!1},getOptionClassName:{description:`Опциональная функция CSS-класса option по её состоянию.`,control:!1},renderOption:{description:`Полностью кастомный рендер option в списке.`,control:!1},renderValue:{description:`Кастомный рендер выбранного значения в кнопке.`,control:!1},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},buttonClassName:{description:`Дополнительный CSS-класс кнопки выбора.`,control:`text`},optionsClassName:{description:`Дополнительный CSS-класс контейнера списка.`,control:`text`},optionsMaxWidth:{description:`Максимальная ширина выпадающего списка в любом допустимом CSS-формате.`,control:`text`},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},placement:{description:`Позиционирование выпадающего списка.`,control:`select`,options:[`bottom-start`,`bottom-end`,`top-start`,`top-end`]},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`}}},p={name:`Объекты`,render:e=>{let[t,n]=(0,c.useState)(u[1]);return(0,l.jsx)(o,{...e,value:t,onChange:n})}},m={name:`Примитивы`,render:()=>{let[e,t]=(0,c.useState)(d[1]);return(0,l.jsx)(o,{label:`Статус`,description:`Пример использования низкоуровневого Select со строковыми значениями.`,placeholder:`Выберите статус`,options:d,value:e,onChange:t,getOptionKey:e=>e,getOptionLabel:e=>e,size:`md`})}},h={render:e=>{let[t,n]=(0,c.useState)(void 0);return(0,l.jsx)(o,{...e,value:t,onChange:n})}},g={name:`Группированные опции`,render:e=>{let[t,n]=(0,c.useState)();return(0,l.jsx)(o,{...e,value:t,onChange:n,getOptionGroup:e=>({key:e.direction,label:e.direction}),optionsMaxWidth:`40rem`})}},_={name:`Кастомный рендер`,render:e=>{let[t,n]=(0,c.useState)(u[0]);return(0,l.jsx)(o,{...e,value:t,onChange:n,renderValue:e=>`${e.code} · ${e.name}`,renderOption:(e,t)=>(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(`div`,{className:`flexEllipsis`,children:[(0,l.jsx)(`div`,{children:e.name}),(0,l.jsx)(`div`,{className:`fontSizeSm content2`,children:e.manager})]}),(0,l.jsx)(`div`,{style:{opacity:t.selected?1:.5},children:e.code})]})})}},v={args:{disabled:!0,value:u[0]}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
  name: "Объекты",
  render: args => {
    const [value, setValue] = useState<DepartmentOption | undefined>(departmentOptions[1]);
    return <Select {...args} value={value} onChange={setValue} />;
  }
}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  name: "Примитивы",
  render: () => {
    const [value, setValue] = useState<(typeof primitiveOptions)[number] | undefined>(primitiveOptions[1]);
    return <Select label="Статус" description="Пример использования низкоуровневого Select со строковыми значениями." placeholder="Выберите статус" options={primitiveOptions} value={value} onChange={setValue} getOptionKey={option => option} getOptionLabel={option => option} size="md" />;
  }
}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  render: args => {
    const [value, setValue] = useState<DepartmentOption | undefined>(undefined);
    return <Select {...args} value={value} onChange={setValue} />;
  }
}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  name: "Группированные опции",
  render: args => {
    const [value, setValue] = useState<DepartmentOption | undefined>();
    return <Select {...args} value={value} onChange={setValue} getOptionGroup={option => ({
      key: option.direction,
      label: option.direction
    })} optionsMaxWidth="40rem" />;
  }
}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  name: "Кастомный рендер",
  render: args => {
    const [value, setValue] = useState<DepartmentOption | undefined>(departmentOptions[0]);
    return <Select {...args} value={value} onChange={setValue} renderValue={option => \`\${option.code} · \${option.name}\`} renderOption={(option, state) => <>
                        <div className="flexEllipsis">
                            <div>{option.name}</div>
                            <div className="fontSizeSm content2">{option.manager}</div>
                        </div>
                        <div style={{
        opacity: state.selected ? 1 : 0.5
      }}>{option.code}</div>
                    </>} />;
  }
}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  args: {
    disabled: true,
    value: departmentOptions[0]
  }
}`,...v.parameters?.docs?.source}}},y=[`ControlledObjects`,`PrimitiveOptions`,`Placeholder`,`GroupedOptions`,`CustomOptionLayout`,`Disabled`]}));b();export{p as ControlledObjects,_ as CustomOptionLayout,v as Disabled,g as GroupedOptions,h as Placeholder,m as PrimitiveOptions,y as __namedExportsOrder,f as default,b as n,s as t};