ingred-ui 23.6.0 → 23.6.1

package/dist/index.es.js

@@ -1850,6 +1850,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   gap: ${({theme:e})=>2*e.spacing}px;
 `,Av=({items:e,selectedItemTitle:n,onRemove:r})=>{const i=W();return t.createElement(yv,null,t.createElement(wv,null,t.createElement(oe,{size:"sm",weight:"bold"},t.createElement(oe,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),n)),t.createElement(Cv,null,e.map(((n,a)=>t.createElement(Ev,{key:n.id,isLastIndex:a+1===e.length},n.content,t.createElement(kv,null,r&&t.createElement(Iv,{type:"button",onClick:()=>r(n)},t.createElement(Y,{color:i.palette.black,name:"close_circle",type:"fill"}))))))))},Mv=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Mv(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},Hv=e.forwardRef((function(t){const{candidateItems:n,selectedItems:r,selectedItemTitle:i,disableCheckbox:a,onAdd:o,onRemove:l}=Dr({props:t,name:"DualListBox"}),s=W(),c=e.useMemo((()=>Mv(n,r)),[n,r]);return e.createElement(uv,null,e.createElement(xv,{disableCheckbox:a,items:c,onAdd:o,onRemove:l}),e.createElement(Gr,{color:s.palette.divider,orientation:"vertical"}),e.createElement(Av,{items:r,selectedItemTitle:i,onRemove:l}))})),Vv=({id:e,children:n,isIncluded:r=!1,isExcluded:i=!1,disableInclude:a,disableExclude:o})=>{const{onIncludedChange:l,onExcludedChange:s,includedIds:c,excludedIds:d}=g(Nv),u=(e,t,n)=>e?V.basic[400]:t?n:V.basic[900];return t.createElement(ax,null,n,t.createElement(ix,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:a,"aria-pressed":r,"aria-label":"追加",style:{"--color":V.blue[500]},onClick:()=>{r?l(c.filter((t=>t!==e))):i?(s(d.filter((t=>t!==e))),l([...c,e])):l([...c,e])}},t.createElement(Y,{name:"check_thin",color:u(a,r,V.blue[500])}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:o,"aria-pressed":i,"aria-label":"除外",style:{"--color":V.red[500]},onClick:()=>{i?s(d.filter((t=>t!==e))):r?(l(c.filter((t=>t!==e))),s([...d,e])):s([...d,e])}},t.createElement(Y,{name:"forbid",color:u(o,i,V.red[500])})))))};Vv.displayName="DualListBox2Item";const Nv=m({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),Lv=m({groupName:""}),Zv=(e,t)=>{s.forEach(e,(e=>{t(e),o(e)&&e.props.children&&Zv(e.props.children,t)}))},Dv=e=>{const t=[];return Zv(e,(e=>{o(e)&&"string"!=typeof e.type&&"displayName"in e.type&&e.type.displayName===Vv.displayName&&t.push({id:e.props.id,label:e.props.children,groupName:e.props.groupName})})),t},Ov=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push(t):e.push({groupName:t.groupName,items:[t]}),e}),[]),$v=({label:e,disableInclude:n,disableExclude:i,children:a,onOpen:o})=>{const[l,s]=r(!1),c=d((()=>{const e=!l;s(e),e&&o&&o()}),[l,o]),{includedIds:u,excludedIds:m,onIncludedChange:h,onExcludedChange:f}=g(Nv),b=p((()=>(e=>Dv(e).map((e=>e.id)))(a)),[a]),v=d((()=>{b.every((e=>u.includes(e)))||(h(Array.from(new Set([...u,...b]))),f(m.filter((e=>!b.includes(e)))))}),[b,u,m,h,f]),x=d((()=>{b.every((e=>m.includes(e)))||(f(Array.from(new Set([...m,...b]))),h(u.filter((e=>!b.includes(e)))))}),[b,u,m,h,f]);return t.createElement(t.Fragment,null,t.createElement(sx,null,t.createElement(cx,{type:"button","aria-label":`${e}を開く`,"aria-expanded":l,onClick:c},e),t.createElement(dx,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:n,"aria-label":"追加",onClick:v},t.createElement(Y,{name:"check_thin",color:V.blue[500]}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:i,"aria-label":"除外",onClick:x},t.createElement(Y,{name:"forbid",color:V.red[500]})))),t.createElement(ux,null,t.createElement(Y,{name:"arrow_down",color:V.basic[900]}))),l&&a)},Sv=`\n  display: flex;\n  gap: 4px;\n  box-sizing: border-box;\n  padding: 6px;\n  border: 1px solid ${V.basic[400]};\n  border-radius: 4px;\n  background: #ffffff;\n  /* UI/Text 12 */\n  font-size: 12px;\n  color: ${V.basic[900]};\n  cursor: pointer;\n  box-shadow: ${en(1,.04,Z.action.shadowBase)};\n\n  &:where(:disabled) {\n    color: ${V.basic[400]};\n    background: ${V.basic[200]};\n    box-shadow: ${en(1,.04,Z.black)};\n    cursor: not-allowed;\n  }\n\n  &:where(li:not(:first-child) button) {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:where(li:not(:last-child) button) {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &:where(:hover:not(:disabled)) {\n    background: ${V.basic[100]};\n  }\n\n  &:where(:active:not(:disabled)) {\n    padding-block: 8px 4px;\n    background: ${Z.gray.highlight};\n    box-shadow: ${en(2,.04,Z.black)};\n  }\n`,Rv=v.div`
   container-type: inline-size;
+  line-break: anywhere;
 `,zv=v.ul`
   display: none;
   padding: 0;