import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-DaN-XFub.js";import{n as i,t as a}from"./Select-X_O4M8Hi.js";function o(e,t){return e[t]}function s(e,t,n){let r=e[t];if(typeof r==`string`||typeof r==`number`)return r;let i=o(e,n);return typeof i==`string`||typeof i==`number`?i:String(i)}function c({label:e,description:t,disabled:n,placeholder:r,size:i,options:c,value:u,onChange:d,optionKey:f,optionLabel:p,renderCode:m,className:h,clearable:g}){let _=u===void 0?void 0:c.find(e=>o(e,f)===u);return(0,l.jsx)(a,{label:e,description:t,disabled:n,placeholder:r,size:i,options:c,value:_,onChange:e=>d(e?o(e,f):void 0),getOptionKey:e=>o(e,f),getOptionLabel:e=>s(e,p,f),getOptionCode:m?e=>o(e,f):void 0,className:h,clearable:g})}var l;function u(){return(u=e((()=>{i(),l=r(),c.__docgenInfo={description:``,methods:[],displayName:`SerializableSelect`,props:{options:{required:!0,tsType:{name:`unknown`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: SerializableOptionValue<TOption, TOptionKey> | undefined) => void`,signature:{arguments:[{type:{name:`union`,raw:`SerializableOptionValue<TOption, TOptionKey> | undefined`,elements:[{name:`Extract`,elements:[{name:`TOption[TOptionKey]`,raw:`TOption[TOptionKey]`},{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`Extract<
	TOption[TOptionKey],
	SelectOptionKey
>`},{name:`undefined`}]},name:`value`}],return:{name:`void`}}},description:``},optionKey:{required:!0,tsType:{name:`TOptionKey`},description:``},optionLabel:{required:!0,tsType:{name:`TOptionLabel`},description:``},renderCode:{required:!1,tsType:{name:`literal`,value:`true`},description:``},className:{required:!1,tsType:{name:`string`},description:``},clearable:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}})))()}var d=t({AsyncReloadLike:()=>y,Controlled:()=>g,Disabled:()=>b,Placeholder:()=>_,WithCode:()=>v,__namedExportsOrder:()=>x,default:()=>h}),f,p,m,h,g,_,v,y,b,x;function S(){return(S=e((()=>{f=n(),u(),p=r(),m=[{id:10,name:`Продажи`,code:`SLS`,branch:`Екатеринбург`},{id:20,name:`Закупки`,code:`PRC`,branch:`Челябинск`},{id:30,name:`Логистика`,code:`LGS`,branch:`Новосибирск`},{id:40,name:`Сервис`,code:`SRV`,branch:`Москва`}],h={title:`Shared/UI/SerializableSelect`,component:c,args:{label:`Подразделение`,description:`Сериализуемая обёртка над Select для object-options и field-based конфигурации.`,placeholder:`Выберите подразделение`,options:m,optionKey:`id`,optionLabel:`name`,value:void 0,onChange:()=>{},size:`md`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Высокоуровневая обёртка над low-level Select. Принимает массив объектов, получает key и label по именам полей, а наружу возвращает только значение ключа. Нужна для сериализуемых конфигов, в том числе в src/shared/ui/controls/*.`}}},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда ключ ещё не выбран.`,control:`text`},options:{description:`Массив объектных option.`,control:!1},optionKey:{description:`Поле объекта, значение которого используется как ключ и отдаётся наружу через onChange.`,control:!1},optionLabel:{description:`Поле объекта, значение которого отображается как основной текст option.`,control:!1},renderCode:{description:`Если включено, справа от текста будет показан ключ optionKey.`,control:`boolean`},value:{description:`Текущий выбранный ключ option, а не вся option целиком.`,control:!1},onChange:{description:`Вызывается с новым значением optionKey.`,control:!1},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`}}},g={name:`Выбор по ключу`,render:e=>{let[t,n]=(0,f.useState)(20);return(0,p.jsx)(c,{...e,value:t,onChange:n})}},_={render:e=>{let[t,n]=(0,f.useState)(void 0);return(0,p.jsx)(c,{...e,value:t,onChange:n})}},v={name:`С кодом`,render:e=>{let[t,n]=(0,f.useState)(10);return(0,p.jsx)(c,{...e,value:t,onChange:n,renderCode:!0})},args:{renderCode:!0}},y={name:`Смена набора опций`,render:e=>{let[t,n]=(0,f.useState)(30),[r,i]=(0,f.useState)(!1),a=(0,f.useMemo)(()=>r?m.filter(e=>e.id!==20):m,[r]);return(0,p.jsxs)(`div`,{style:{display:`grid`,gap:`12px`,maxWidth:`320px`},children:[(0,p.jsx)(`button`,{type:`button`,onClick:()=>i(e=>!e),children:r?`Показать полный список`:`Скрыть одну опцию`}),(0,p.jsx)(c,{...e,options:a,value:t,onChange:n})]})}},b={args:{disabled:!0,value:10}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  name: "Выбор по ключу",
  render: args => {
    const [value, setValue] = useState<number | undefined>(20);
    return <SerializableSelect {...args} value={value} onChange={setValue} />;
  }
}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  render: args => {
    const [value, setValue] = useState<number | undefined>(undefined);
    return <SerializableSelect {...args} value={value} onChange={setValue} />;
  }
}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  name: "С кодом",
  render: args => {
    const [value, setValue] = useState<number | undefined>(10);
    return <SerializableSelect {...args} value={value} onChange={setValue} renderCode />;
  },
  args: {
    renderCode: true
  }
}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  name: "Смена набора опций",
  render: args => {
    const [value, setValue] = useState<number | undefined>(30);
    const [showShortList, setShowShortList] = useState(false);
    const options = useMemo(() => showShortList ? departmentOptions.filter(option => option.id !== 20) : departmentOptions, [showShortList]);
    return <div style={{
      display: "grid",
      gap: "12px",
      maxWidth: "320px"
    }}>
                <button type="button" onClick={() => setShowShortList(current => !current)}>
                    {showShortList ? "Показать полный список" : "Скрыть одну опцию"}
                </button>
                <SerializableSelect {...args} options={options} value={value} onChange={setValue} />
            </div>;
  }
}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  args: {
    disabled: true,
    value: 10
  }
}`,...b.parameters?.docs?.source}}},x=[`Controlled`,`Placeholder`,`WithCode`,`AsyncReloadLike`,`Disabled`]})))()}export{d as a,_ as i,g as n,v as o,b as r,S as s,y as t};