@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.3

package/storybook-static/assets/LayoutPicker.stories-BCnR-zBu.js

@@ -1,449 +0,0 @@
-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-BJGIOdSH.js";import{a as s,i as c}from"./utils-DzbSigQl.js";import{n as ee,t as l}from"./ui.module-wFHXkJzp.js";import{D as te,S as ne,g as re,l as ie,m as ae,r as oe,t as u}from"./picker-DsP4xCcJ.js";function se(e,t){return{gridTemplateColumns:`repeat(${e.columns}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${e.rows}, minmax(${t??0}em, 1fr))`}}function ce(e){return{gridColumn:`${e.column} / span ${e.columnSpan??1}`,gridRow:`${e.row} / span ${e.rowSpan??1}`}}var le=n((()=>{})),d,ue=n((()=>{d=[{id:`1x1`,label:`1x1`,columns:1,rows:1,cells:[{id:`c11`,row:1,column:1}]},{id:`1x2`,label:`1x2`,columns:2,rows:1,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2}]},{id:`1x3`,label:`1x3`,columns:3,rows:1,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3}]},{id:`2x1`,label:`2x1`,columns:1,rows:2,cells:[{id:`c11`,row:1,column:1},{id:`c21`,row:2,column:1}]},{id:`2x2`,label:`2x2`,columns:2,rows:2,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2}]},{id:`2x3`,label:`2x3`,columns:3,rows:2,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3}]},{id:`3x1`,label:`3x1`,columns:1,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c21`,row:2,column:1},{id:`c31`,row:3,column:1}]},{id:`3x2`,label:`3x2`,columns:2,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2}]},{id:`3x3`,label:`3x3`,columns:3,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3}]},{id:`4x1`,label:`4x1`,columns:1,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c21`,row:2,column:1},{id:`c31`,row:3,column:1},{id:`c41`,row:4,column:1}]},{id:`4x2`,label:`4x2`,columns:2,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2}]},{id:`4x3`,label:`4x3`,columns:3,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2},{id:`c43`,row:4,column:3}]},{id:`2x2-l`,label:`Большая слева + две справа`,columns:2,rows:2,cells:[{id:`left`,row:1,column:1,rowSpan:2},{id:`rt`,row:1,column:2},{id:`rb`,row:2,column:2}]},{id:`2x2-r`,label:`Две слева + большая справа`,columns:2,rows:2,cells:[{id:`lt`,row:1,column:1},{id:`lb`,row:2,column:1},{id:`right`,row:1,column:2,rowSpan:2}]},{id:`2x2-t`,label:`Широкая сверху + две снизу`,columns:2,rows:2,cells:[{id:`top`,row:1,column:1,columnSpan:2},{id:`bl`,row:2,column:1},{id:`br`,row:2,column:2}]},{id:`2x2-b`,label:`Две сверху + широкая снизу`,columns:2,rows:2,cells:[{id:`tl`,row:1,column:1},{id:`tr`,row:1,column:2},{id:`bottom`,row:2,column:1,columnSpan:2}]},{id:`3x2-t`,label:`Широкая сверху + 2x2`,columns:2,rows:3,cells:[{id:`top`,row:1,column:1,columnSpan:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2}]},{id:`3x2-b`,label:`2x2 + широкая снизу`,columns:2,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`bottom`,row:3,column:1,columnSpan:2}]},{id:`3x2-m`,label:`Широкая по центру`,columns:2,rows:3,cells:[{id:`tl`,row:1,column:1},{id:`tr`,row:1,column:2},{id:`middle`,row:2,column:1,columnSpan:2},{id:`bl`,row:3,column:1},{id:`br`,row:3,column:2}]},{id:`3x3-l`,label:`Большая слева + 2x3 справа`,columns:3,rows:3,cells:[{id:`left`,row:1,column:1,rowSpan:3},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3}]},{id:`3x3-r`,label:`2x3 слева + большая справа`,columns:3,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`right`,row:1,column:3,rowSpan:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2}]},{id:`3x3-t`,label:`Широкая сверху + 2x3`,columns:3,rows:3,cells:[{id:`top`,row:1,column:1,columnSpan:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3}]},{id:`3x3-b`,label:`2x3 + широкая снизу`,columns:3,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`bottom`,row:3,column:1,columnSpan:3}]},{id:`4x2-t`,label:`Широкая сверху + 3x2`,columns:2,rows:4,cells:[{id:`top`,row:1,column:1,columnSpan:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2}]},{id:`4x2-b`,label:`3x2 + широкая снизу`,columns:2,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`bottom`,row:4,column:1,columnSpan:2}]},{id:`4x3-t`,label:`Широкая сверху + 3x3`,columns:3,rows:4,cells:[{id:`top`,row:1,column:1,columnSpan:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2},{id:`c43`,row:4,column:3}]},{id:`4x3-b`,label:`3x3 + широкая снизу`,columns:3,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3},{id:`bottom`,row:4,column:1,columnSpan:3}]}]})),f=n((()=>{le(),ue()})),p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A=n((()=>{p=`_959ulH`,m=`Ch-SZL`,h=`SmdPit`,g=`giOtGs`,_=`_57Tr0T`,v=`Tkhulr`,y=`VQlniu`,b=`wb39Kf`,x=`HGvQdT`,S=`rZuYyb`,C=`vNV6Q2`,w=`_3ytPPa`,T=`koxYU-`,E=`k8xLa2`,D=`_5pd3Bb`,O=`VrHnjN`,k={valueOverlay:p,triggerInput:m,triggerText:h,popup:g,popupLayout:_,popupBody:v,options:y,option:b,optionActive:x,optionSelected:S,optionPreviewWrap:C,optionCheck:w,preview:T,previewPlaceholder:E,previewCompact:D,previewCell:O}}));function de({preset:e,compact:t=!1}){return(0,N.jsx)(`span`,{className:s(k.preview,t&&k.previewCompact),style:se(e),"aria-hidden":`true`,"data-ui":`layout-picker-preview`,children:e.cells.map(t=>(0,N.jsx)(`span`,{className:k.previewCell,style:ce(t)},`${e.id}:${t.id}`))})}function j({id:e,label:t,description:n,value:i,onChange:a,presets:o=d,disabled:c,getPresetDisabled:l,placeholder:u=fe,showPlaceholder:se=!1,size:ce,ariaLabel:le,className:ue,triggerClassName:f,popupClassName:p,placement:m=`bottom-start`}){let h=(0,M.useRef)(null),[g,_]=(0,M.useState)(!1),v=o.findIndex(e=>e.id===i),y=v>=0?o[v]:void 0,b=y??o[0],x=y?.label??u,{activeIndex:S,context:C,floatingStyles:w,getFloatingProps:T,setReference:E,setFloating:D,setOptionRef:O,close:A,openList:j,toggleOpen:pe,selectOption:me,selectActiveOption:P,handleReferenceKeyDown:F,handleFloatingKeyDown:I,getOptionId:L,getActiveOptionId:R}=ie({options:o,selectedIndex:v,open:g,onOpenChange:_,getOptionDisabled:l,onSelect:e=>a(e.id),disabled:c,placement:m,triggerMode:`display`}),z=oe({mode:`display`,open:g,currentQuery:``,hasDisplayValue:y!==void 0,inputRef:h,openList:j,close:A,toggleOpen:pe}),B=e=>{h.current=e};return(0,N.jsx)(te,{id:e,label:t,description:n,disabled:c,placeholder:u,size:ce,className:ue,children:({controlId:e,labelId:t,describedBy:n})=>{let i=`${e}-listbox`;return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(ae,{ref:B,rootRef:E,id:e,type:`button`,disabled:c,readOnly:!0,autoComplete:`off`,role:`combobox`,value:x,"aria-haspopup":`listbox`,"aria-expanded":g,"aria-controls":g?i:void 0,"aria-labelledby":t,"aria-describedby":n,"aria-autocomplete":`none`,"aria-activedescendant":g?R(i):void 0,"aria-label":t?void 0:le??`Выбрать layout. Текущее значение: ${x}`,"data-ui":`layout-picker-trigger`,rootClassName:f,inputClassName:k.triggerInput,overlay:(0,N.jsxs)(`div`,{className:k.valueOverlay,children:[b?(0,N.jsx)(de,{preset:b,compact:!0}):(0,N.jsx)(`span`,{className:k.previewPlaceholder}),se?(0,N.jsx)(`span`,{className:s(k.triggerText,ee.uiPlaceholder),"data-ui":`layout-picker-placeholder`,children:u}):null]}),endAdornment:(0,N.jsx)(re,{open:g,disabled:c,onToggleMouseDown:z.handleToggleMouseDown,onToggleClick:z.handleToggleClick,openAriaLabel:`Открыть список layout`,closeAriaLabel:`Закрыть список layout`}),onClick:z.handleTriggerClick,onFocus:e=>{z.handleTriggerFocus(e.currentTarget)},onKeyDown:e=>{F(e),!e.defaultPrevented&&z.handleTriggerKeyDown({event:e,onActivateWhenOpen:P,enableSpaceActivation:!0})}}),(0,N.jsx)(ne,{open:g,context:C,floatingStyles:w,listId:i,labelId:t,descriptionId:n,activeOptionId:R(i),setFloating:D,getFloatingProps:T,onKeyDown:I,className:s(ee.uiPopupOptions,k.popup,p),layoutClassName:k.popupLayout,bodyClassName:k.popupBody,children:(0,N.jsx)(`div`,{className:k.options,children:o.map((e,t)=>{let n=t===v,a=t===S,o=l?.(e)??!1;return(0,N.jsxs)(`button`,{id:L(i,t),ref:e=>O(t,e),type:`button`,role:`option`,tabIndex:-1,disabled:o,"aria-selected":n,"aria-disabled":o||void 0,"aria-label":e.description?`${e.label}. ${e.description}`:e.label,className:s(k.option,n&&k.optionSelected,a&&k.optionActive),"data-ui":`layout-picker-option`,"data-selected":n||void 0,onMouseDown:e=>e.preventDefault(),onClick:()=>me(e),children:[(0,N.jsx)(`span`,{className:k.optionPreviewWrap,children:(0,N.jsx)(de,{preset:e})}),(0,N.jsxs)(`span`,{className:`fontSizeSm`,children:[(0,N.jsx)(`span`,{children:e.label}),e.description?(0,N.jsx)(`span`,{children:e.description}):null]}),(0,N.jsx)(`span`,{className:k.optionCheck,"aria-hidden":`true`,children:n?(0,N.jsx)(r,{}):null})]},e.id)})})})]})}})}var M,N,fe,pe=n((()=>{M=t(a(),1),c(),i(),u(),l(),f(),A(),N=o(),fe=`Выберите раскладку`,j.__docgenInfo={description:`Контрол выбора layout-пресета. Не хранит бизнес-логику содержимого ячеек.`,methods:[],displayName:`LayoutPicker`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Выберите раскладку"`,computed:!1}},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},id:{required:!1,tsType:{name:`string`},description:``},presets:{required:!1,tsType:{name:`unknown`},description:``,defaultValue:{value:`[
-	{
-		id: "1x1",
-		label: "1x1",
-		columns: 1,
-		rows: 1,
-		cells: [{ id: "c11", row: 1, column: 1 }]
-	},
-	{
-		id: "1x2",
-		label: "1x2",
-		columns: 2,
-		rows: 1,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 }
-		]
-	},
-	{
-		id: "1x3",
-		label: "1x3",
-		columns: 3,
-		rows: 1,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 }
-		]
-	},
-	{
-		id: "2x1",
-		label: "2x1",
-		columns: 1,
-		rows: 2,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c21", row: 2, column: 1 }
-		]
-	},
-	{
-		id: "2x2",
-		label: "2x2",
-		columns: 2,
-		rows: 2,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 }
-		]
-	},
-	{
-		id: "2x3",
-		label: "2x3",
-		columns: 3,
-		rows: 2,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 }
-		]
-	},
-	{
-		id: "3x1",
-		label: "3x1",
-		columns: 1,
-		rows: 3,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c31", row: 3, column: 1 }
-		]
-	},
-	{
-		id: "3x2",
-		label: "3x2",
-		columns: 2,
-		rows: 3,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 }
-		]
-	},
-	{
-		id: "3x3",
-		label: "3x3",
-		columns: 3,
-		rows: 3,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c33", row: 3, column: 3 }
-		]
-	},
-	{
-		id: "4x1",
-		label: "4x1",
-		columns: 1,
-		rows: 4,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c41", row: 4, column: 1 }
-		]
-	},
-	{
-		id: "4x2",
-		label: "4x2",
-		columns: 2,
-		rows: 4,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c41", row: 4, column: 1 },
-			{ id: "c42", row: 4, column: 2 }
-		]
-	},
-	{
-		id: "4x3",
-		label: "4x3",
-		columns: 3,
-		rows: 4,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c33", row: 3, column: 3 },
-			{ id: "c41", row: 4, column: 1 },
-			{ id: "c42", row: 4, column: 2 },
-			{ id: "c43", row: 4, column: 3 }
-		]
-	},
-
-	{
-		id: "2x2-l",
-		label: "Большая слева + две справа",
-		columns: 2,
-		rows: 2,
-		cells: [
-			{ id: "left", row: 1, column: 1, rowSpan: 2 },
-			{ id: "rt", row: 1, column: 2 },
-			{ id: "rb", row: 2, column: 2 }
-		]
-	},
-	{
-		id: "2x2-r",
-		label: "Две слева + большая справа",
-		columns: 2,
-		rows: 2,
-		cells: [
-			{ id: "lt", row: 1, column: 1 },
-			{ id: "lb", row: 2, column: 1 },
-			{ id: "right", row: 1, column: 2, rowSpan: 2 }
-		]
-	},
-	{
-		id: "2x2-t",
-		label: "Широкая сверху + две снизу",
-		columns: 2,
-		rows: 2,
-		cells: [
-			{ id: "top", row: 1, column: 1, columnSpan: 2 },
-			{ id: "bl", row: 2, column: 1 },
-			{ id: "br", row: 2, column: 2 }
-		]
-	},
-	{
-		id: "2x2-b",
-		label: "Две сверху + широкая снизу",
-		columns: 2,
-		rows: 2,
-		cells: [
-			{ id: "tl", row: 1, column: 1 },
-			{ id: "tr", row: 1, column: 2 },
-			{ id: "bottom", row: 2, column: 1, columnSpan: 2 }
-		]
-	},
-
-	{
-		id: "3x2-t",
-		label: "Широкая сверху + 2x2",
-		columns: 2,
-		rows: 3,
-		cells: [
-			{ id: "top", row: 1, column: 1, columnSpan: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 }
-		]
-	},
-	{
-		id: "3x2-b",
-		label: "2x2 + широкая снизу",
-		columns: 2,
-		rows: 3,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "bottom", row: 3, column: 1, columnSpan: 2 }
-		]
-	},
-	{
-		id: "3x2-m",
-		label: "Широкая по центру",
-		columns: 2,
-		rows: 3,
-		cells: [
-			{ id: "tl", row: 1, column: 1 },
-			{ id: "tr", row: 1, column: 2 },
-			{ id: "middle", row: 2, column: 1, columnSpan: 2 },
-			{ id: "bl", row: 3, column: 1 },
-			{ id: "br", row: 3, column: 2 }
-		]
-	},
-
-	{
-		id: "3x3-l",
-		label: "Большая слева + 2x3 справа",
-		columns: 3,
-		rows: 3,
-		cells: [
-			{ id: "left", row: 1, column: 1, rowSpan: 3 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c33", row: 3, column: 3 }
-		]
-	},
-	{
-		id: "3x3-r",
-		label: "2x3 слева + большая справа",
-		columns: 3,
-		rows: 3,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "right", row: 1, column: 3, rowSpan: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 }
-		]
-	},
-	{
-		id: "3x3-t",
-		label: "Широкая сверху + 2x3",
-		columns: 3,
-		rows: 3,
-		cells: [
-			{ id: "top", row: 1, column: 1, columnSpan: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c33", row: 3, column: 3 }
-		]
-	},
-	{
-		id: "3x3-b",
-		label: "2x3 + широкая снизу",
-		columns: 3,
-		rows: 3,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "bottom", row: 3, column: 1, columnSpan: 3 }
-		]
-	},
-
-	{
-		id: "4x2-t",
-		label: "Широкая сверху + 3x2",
-		columns: 2,
-		rows: 4,
-		cells: [
-			{ id: "top", row: 1, column: 1, columnSpan: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c41", row: 4, column: 1 },
-			{ id: "c42", row: 4, column: 2 }
-		]
-	},
-	{
-		id: "4x2-b",
-		label: "3x2 + широкая снизу",
-		columns: 2,
-		rows: 4,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "bottom", row: 4, column: 1, columnSpan: 2 }
-		]
-	},
-	{
-		id: "4x3-t",
-		label: "Широкая сверху + 3x3",
-		columns: 3,
-		rows: 4,
-		cells: [
-			{ id: "top", row: 1, column: 1, columnSpan: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c33", row: 3, column: 3 },
-			{ id: "c41", row: 4, column: 1 },
-			{ id: "c42", row: 4, column: 2 },
-			{ id: "c43", row: 4, column: 3 }
-		]
-	},
-	{
-		id: "4x3-b",
-		label: "3x3 + широкая снизу",
-		columns: 3,
-		rows: 4,
-		cells: [
-			{ id: "c11", row: 1, column: 1 },
-			{ id: "c12", row: 1, column: 2 },
-			{ id: "c13", row: 1, column: 3 },
-			{ id: "c21", row: 2, column: 1 },
-			{ id: "c22", row: 2, column: 2 },
-			{ id: "c23", row: 2, column: 3 },
-			{ id: "c31", row: 3, column: 1 },
-			{ id: "c32", row: 3, column: 2 },
-			{ id: "c33", row: 3, column: 3 },
-			{ id: "bottom", row: 4, column: 1, columnSpan: 3 }
-		]
-	}
-] as const satisfies readonly LayoutPickerPreset[]`,computed:!1}},getPresetDisabled:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(preset: LayoutPickerPreset) => boolean`,signature:{arguments:[{type:{name:`signature`,type:`object`,raw:`{
-	id: string;
-	label: string;
-	description?: string;
-	columns: number;
-	rows: number;
-	cells: readonly LayoutPickerPresetCell[];
-}`,signature:{properties:[{key:`id`,value:{name:`string`,required:!0}},{key:`label`,value:{name:`string`,required:!0}},{key:`description`,value:{name:`string`,required:!1}},{key:`columns`,value:{name:`number`,required:!0}},{key:`rows`,value:{name:`number`,required:!0}},{key:`cells`,value:{name:`unknown`,required:!0}}]}},name:`preset`}],return:{name:`boolean`}}},description:``},showPlaceholder:{required:!1,tsType:{name:`boolean`},description:"Показывает рядом с превью переданный текст `placeholder`.\nПо умолчанию текст скрыт, поэтому trigger отображает только иконку раскладки.",defaultValue:{value:`false`,computed:!1}},ariaLabel:{required:!1,tsType:{name:`string`},description:``},className:{required:!1,tsType:{name:`string`},description:``},triggerClassName:{required:!1,tsType:{name:`string`},description:``},popupClassName:{required:!1,tsType:{name:`string`},description:``},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"bottom-start"`,computed:!1}}}}})),me=n((()=>{pe()})),P=n((()=>{f(),me()})),F,I,L,R,z,B,he,ge,_e,V,ve=n((()=>{F=`buT8ds`,I=`vDpJVR`,L=`-GMI1h`,R=`Xgkzn9`,z=`X--lo-`,B=`W5rEjx`,he=`BgilL7`,ge=`ALGrVl`,_e=`IrqK1d`,V={canvas:F,toolbar:I,summary:L,summaryItem:R,summaryValue:z,muted:B,layoutPreview:he,layoutCell:ge,layoutCellTitle:_e}})),ye=e({Controlled:()=>q,CustomPresets:()=>Y,Disabled:()=>Q,DisabledPresets:()=>X,InToolbar:()=>Z,Placeholder:()=>J,__namedExportsOrder:()=>$,default:()=>K});function be(e,t){return t.find(t=>t.id===e)}function H({value:e,presets:t}){let n=be(e,t);return(0,W.jsxs)(`div`,{className:V.summary,"aria-live":`polite`,children:[(0,W.jsxs)(`div`,{className:V.summaryItem,children:[(0,W.jsx)(`span`,{children:`ID`}),(0,W.jsx)(`span`,{className:V.summaryValue,children:e||`не выбрано`})]}),(0,W.jsxs)(`div`,{className:V.summaryItem,children:[(0,W.jsx)(`span`,{children:`Название`}),(0,W.jsx)(`span`,{className:V.summaryValue,children:n?.label??`Layout не выбран`})]}),(0,W.jsxs)(`div`,{className:V.summaryItem,children:[(0,W.jsx)(`span`,{children:`Сетка`}),(0,W.jsx)(`span`,{className:V.summaryValue,children:n?`${n.columns} x ${n.rows}`:`нет данных`})]}),(0,W.jsxs)(`div`,{className:V.summaryItem,children:[(0,W.jsx)(`span`,{children:`Ячеек`}),(0,W.jsx)(`span`,{className:V.summaryValue,children:n?.cells.length??0})]})]})}function xe({value:e,presets:t}){let n=be(e,t);if(!n)return null;let r=n.columns,i=n.rows,a=n.cells;return(0,W.jsx)(`div`,{className:V.layoutPreview,style:{gridTemplateColumns:`repeat(${r}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${i}, minmax(0, 1fr))`},children:a.map((e,t)=>(0,W.jsxs)(`div`,{className:V.layoutCell,style:{gridColumn:`${e.column} / span ${e.columnSpan}`,gridRow:`${e.row} / span ${e.rowSpan}`},children:[(0,W.jsxs)(`span`,{className:V.layoutCellTitle,children:[`Область `,t+1]}),(0,W.jsxs)(`span`,{className:V.muted,children:[`Колонка `,e.column,`, строка `,e.row,`; span `,e.columnSpan,` x `,e.rowSpan]})]},e.id))})}function Se(){let[e,t]=(0,U.useState)(`1x2`);return(0,W.jsxs)(`div`,{className:V.canvas,children:[(0,W.jsx)(`div`,{className:V.toolbar,children:(0,W.jsx)(j,{label:`Layout панели`,value:e,onChange:t,ariaLabel:`Выбрать layout панели`})}),(0,W.jsx)(H,{value:e,presets:d}),(0,W.jsx)(xe,{value:e,presets:d})]})}var U,W,Ce,we,G,K,q,J,Y,X,Z,Q,$,Te=n((()=>{U=t(a(),1),P(),ve(),W=o(),{useArgs:Ce}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:we}=__STORYBOOK_MODULE_TEST__,G=[{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}]}],K={title:`Shared/UI/LayoutPicker`,component:j,args:{label:`Layout панели`,description:`Выберите схему размещения областей.`,value:d[0].id,onChange:we(),presets:d,disabled:!1,placeholder:`Выберите layout`,showPlaceholder:!1,ariaLabel:`Выбрать layout`,placement:`bottom-start`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Контролируемый выбор layout-пресета со схематичным превью. Компонент хранит только UI-состояние popup и возвращает наружу ID выбранного пресета.`}}},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:"Текст, который можно явно показать рядом с превью через `showPlaceholder`.",control:`text`},showPlaceholder:{description:"Показывает рядом с превью именно строку `placeholder`. По умолчанию trigger содержит только иконку.",control:`boolean`},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`]}}},q={args:{value:`2x1`},name:`Контролируемый выбор`,render:function(e){let[,t]=Ce(),n=e.presets??d;return(0,W.jsxs)(`div`,{className:V.canvas,children:[(0,W.jsx)(j,{...e,presets:n,onChange:n=>{e.onChange(n),t({value:n})}}),(0,W.jsx)(H,{value:e.value??``,presets:n})]})}},J={name:`Без выбранного значения`,render:e=>{let[t,n]=(0,U.useState)(``),r=e.presets??d;return(0,W.jsxs)(`div`,{className:V.canvas,children:[(0,W.jsx)(j,{...e,value:t,presets:r,placeholder:`Layout ещё не выбран`,showPlaceholder:!0,onChange:t=>{n(t),e.onChange(t)}}),(0,W.jsx)(H,{value:t,presets:r})]})},args:{value:``}},Y={name:`Кастомные пресеты`,render:e=>{let[t,n]=(0,U.useState)(G[0].id);return(0,W.jsxs)(`div`,{className:V.canvas,children:[(0,W.jsx)(j,{...e,value:t,presets:G,ariaLabel:`Выбрать layout дашборда`,onChange:t=>{n(t),e.onChange(t)}}),(0,W.jsx)(H,{value:t,presets:G}),(0,W.jsx)(xe,{value:t,presets:G})]})},args:{value:G[0].id,presets:G}},X={name:`Заблокированные пресеты`,render:e=>{let[t,n]=(0,U.useState)(`1x1`);return(0,W.jsxs)(`div`,{className:V.canvas,children:[(0,W.jsx)(j,{...e,value:t,getPresetDisabled:e=>e.id===`1x2`||e.id===`2x2-l`,onChange:t=>{n(t),e.onChange(t)}}),(0,W.jsx)(`div`,{className:V.muted,children:`Пресеты с двумя колонками в этом сценарии недоступны.`}),(0,W.jsx)(H,{value:t,presets:d})]})}},Z={name:`В панели настройки`,render:()=>(0,W.jsx)(Se,{})},Q={name:`Заблокированный контрол`,args:{disabled:!0,value:`1x2`}},q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
-  args: {
-    value: "2x1"
-  },
-  name: "Контролируемый выбор",
-  render: function Render(args) {
-    const [, updateArgs] = useArgs<LayoutPickerProps>();
-    const presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;
-    return <div className={styles.canvas}>
-                <LayoutPicker {...args} presets={presets} onChange={layoutId => {
-        args.onChange(layoutId);
-        updateArgs({
-          value: layoutId
-        });
-      }} />
-                <PresetSummary value={args.value ?? ""} presets={presets} />
-            </div>;
-  }
-}`,...q.parameters?.docs?.source}}},J.parameters={...J.parameters,docs:{...J.parameters?.docs,source:{originalSource:`{
-  name: "Без выбранного значения",
-  render: args => {
-    const [value, setValue] = useState("");
-    const presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;
-    return <div className={styles.canvas}>
-                <LayoutPicker {...args} value={value} presets={presets} placeholder="Layout ещё не выбран" showPlaceholder onChange={layoutId => {
-        setValue(layoutId);
-        args.onChange(layoutId);
-      }} />
-                <PresetSummary value={value} presets={presets} />
-            </div>;
-  },
-  args: {
-    value: ""
-  }
-}`,...J.parameters?.docs?.source}}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
-  name: "Кастомные пресеты",
-  render: args => {
-    const [value, setValue] = useState<string>(dashboardPresets[0].id);
-    return <div className={styles.canvas}>
-                <LayoutPicker {...args} value={value} presets={dashboardPresets} ariaLabel="Выбрать layout дашборда" onChange={layoutId => {
-        setValue(layoutId);
-        args.onChange(layoutId);
-      }} />
-                <PresetSummary value={value} presets={dashboardPresets} />
-                <LayoutPreview value={value} presets={dashboardPresets} />
-            </div>;
-  },
-  args: {
-    value: dashboardPresets[0].id,
-    presets: dashboardPresets
-  }
-}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
-  name: "Заблокированные пресеты",
-  render: args => {
-    const [value, setValue] = useState("1x1");
-    return <div className={styles.canvas}>
-                <LayoutPicker {...args} value={value} getPresetDisabled={preset => preset.id === "1x2" || preset.id === "2x2-l"} onChange={layoutId => {
-        setValue(layoutId);
-        args.onChange(layoutId);
-      }} />
-                <div className={styles.muted}>Пресеты с двумя колонками в этом сценарии недоступны.</div>
-                <PresetSummary value={value} presets={DEFAULT_LAYOUT_PICKER_PRESETS} />
-            </div>;
-  }
-}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
-  name: "В панели настройки",
-  render: () => <ControlledExample />
-}`,...Z.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
-  name: "Заблокированный контрол",
-  args: {
-    disabled: true,
-    value: "1x2"
-  }
-}`,...Q.parameters?.docs?.source}}},$=[`Controlled`,`Placeholder`,`CustomPresets`,`DisabledPresets`,`InToolbar`,`Disabled`]}));Te();export{q as Controlled,Y as CustomPresets,Q as Disabled,X as DisabledPresets,Z as InToolbar,J as Placeholder,$ as __namedExportsOrder,K as default,Te as n,ye as t};

package/storybook-static/assets/Listbox.stories-B0HctqVp.js

@@ -1,47 +0,0 @@
-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-BJGIOdSH.js";import{a as s,i as c,n as l,r as u,s as d,t as f}from"./utils-DzbSigQl.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};