ingred-ui 23.6.2 → 23.7.0

package/dist/components/DualListBox2/DualListBox2Item.d.ts

@@ -2,6 +2,7 @@ import React, { type ReactNode } from "react";
 export type DualListBox2ItemProps = {
     id: string;
     children: ReactNode;
+    label?: string;
     isIncluded?: boolean;
     isExcluded?: boolean;
     disableInclude?: boolean;

package/dist/components/DualListBox2/__tests__/lib.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DualListBox2/lib.d.ts

@@ -15,6 +15,7 @@ export declare const DualListBox2GroupContext: import("react").Context<{
 export declare const traverseChildren: (children: ReactNode, callback: (child: ReactNode) => void) => void;
 export declare const extractAllItems: (children: ReactNode) => Item[];
 export declare const getAllIds: (children: ReactNode) => string[];
+export declare const extractItemContents: (children: ReactNode) => Record<string, ReactNode>;
 type groupedItems = {
     groupName?: string;
     items: Item[];

package/dist/index.es.js

@@ -1848,7 +1848,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   align-items: center;
   justify-content: center;
   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=y`
+`,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=>{if(o(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Vv.displayName){const n=e.props.label||(e=>{let t="";const n=e=>{"string"==typeof e||"number"==typeof e?t+=String(e):o(e)&&e.props.children?n(e.props.children):Array.isArray(e)&&e.forEach(n)};return n(e),t})(e.props.children);t.push({id:e.props.id,label:n,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=y`
   display: flex;
   gap: 4px;
   box-sizing: border-box;
@@ -2392,7 +2392,7 @@ var ya=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   padding-left: 48px;
 `;const fx=({label:e,children:n})=>{const{activeSection:r,setActiveSection:i}=g(Nv),a=p((()=>r===e),[e,r]),o=p((()=>null!==r&&r!==e),[e,r]),l=d((()=>{i(a?null:e)}),[e,a,i]);return o?null:t.createElement(Lv.Provider,{value:{groupName:e}},t.createElement(gx,{type:"button","aria-label":`${e}を開く`,"aria-expanded":a,onClick:l},t.createElement(px,null,t.createElement(Y,{name:"arrow_left",color:V.basic[900]})),t.createElement("div",null,e),t.createElement(mx,null,t.createElement(Y,{name:"arrow_right",color:V.basic[900]}))),a&&n)};fx.displayName="DualListBox2Section";const bx=v(Nl)`
   margin-right: 16px;
-`,vx=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(Nd,{width:136,trigger:t.createElement(bx,{append:e},"件数を変更")},n.map((n=>t.createElement(Cl,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),xx=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push({id:t.id,label:t.label}):e.push({groupName:t.groupName,items:[{id:t.id,label:t.label}]}),e}),[]),yx=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:a,onExcludedChange:o}=g(Nv),l=p((()=>r.includes(e)),[r,e]),s=p((()=>i.includes(e)),[i,e]),c=d((()=>{l&&a(r.filter((t=>t!==e))),s&&o(i.filter((t=>t!==e)))}),[l,s,r,i,a,o,e]);return t.createElement(ox,null,n,t.createElement("button",{type:"button","aria-label":"解除",onClick:c},t.createElement(Y,{name:"close_circle",type:"fill",color:"currentColor"})))}));yx.displayName="DualListBox2SelectedItem";const wx=({label:e})=>t.createElement(lx,null,e),Cx=n((({included:e,excluded:n,disableInclude:l,disableExclude:s,menuButtons:c,children:u,loading:m,onIncludedChange:g,onExcludedChange:h,onLoadMore:f,pageSize:v=50,pageSizeOptions:x=[10,50,100,200],onPageSizeChange:y,filter:w="",onFilterChange:C},E)=>{const[I,k]=r(0),[A,M]=r(""),[H,N]=r(null),[L,Z]=r(!1),D=i(null),O=C?w:A,$=d((e=>{const t=e.target.value;C?C(t):M(t)}),[C]),S=d((()=>{C?C(""):M("")}),[C]),R=d((e=>{N(e),null===e&&S()}),[S]),z=p((()=>{let e=!1;return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&(e=!0)})),e}),[u]),T=p((()=>{const e=O.trim();return e?e.split(/\s+/):[]}),[O]),B=p((()=>Dv(u)),[u]),G=d((e=>{if(!o(e))return e;if(e.type!==Vv)return e;const t=B.find((t=>t.id===e.props.id));return t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[T,B]),W=p((()=>T.length?t.Children.map(u,(e=>{if(!o(e))return e;if(e.type===Vv)return G(e);if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Accordion"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>G(e))).filter(Boolean);return 0===n.length?null:t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Section"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>G(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):u),[u,T,G]),P=p((()=>e.map((e=>e.id))),[e]),j=p((()=>n.map((e=>e.id))),[n]),F=p((()=>B.map((e=>e.id))),[B]),X=p((()=>0===T.length?F:F.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.includes(e)))}))),[F,B,T]),J=p((()=>{if(!z)return[];if(null===H)return[];const e=[];return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&t.props.label===H&&Zv(t.props.children,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Vv.displayName&&e.push(t.props.id)}))})),e}),[H,u,z]),U=p((()=>0===T.length?J:J.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.includes(e)))}))),[J,B,T]),Q=p((()=>{if(z){if(null===H)return!0;return!!U.every((e=>P.includes(e)))}return!!X.every((e=>P.includes(e)))}),[z,H,X,U,P]),_=p((()=>{if(z){if(null===H)return!0;return!!U.every((e=>j.includes(e)))}return!!X.every((e=>j.includes(e)))}),[z,H,X,U,j]),K=d((()=>{e.length&&g([]),n.length&&h([])}),[e,n,g,h]),q=d((()=>{if(z){if(null===H)return;return g(Array.from(new Set([...P,...U]))),void h(j.filter((e=>!U.includes(e))))}g(Array.from(new Set([...P,...X]))),h(j.filter((e=>!X.includes(e))))}),[X,g,h,z,H,P,j,U]),ee=d((()=>{if(z){if(null===H)return;return h(Array.from(new Set([...j,...U]))),void g(P.filter((e=>!U.includes(e))))}h(Array.from(new Set([...j,...X]))),g(P.filter((e=>!X.includes(e))))}),[X,g,h,z,H,P,j,U]),te=d((async e=>{if(e[0].isIntersecting&&!L&&f){Z(!0);try{await f()}finally{Z(!1)}}}),[L,f]);return a((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(te,{root:null,rootMargin:"100px",threshold:.1}),t=D.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[te]),t.createElement(Rv,{ref:E,role:"region","aria-label":"アイテムの追加、除外選択エリア"},t.createElement(zv,{role:"tablist","aria-label":"リストの表示切り替え"},t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":0===I,"aria-expanded":0===I,"aria-controls":"list-items-panel",onClick:()=>k(0)},"リストアイテム")),t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":1===I,"aria-expanded":1===I,"aria-controls":"selected-items-panel",onClick:()=>k(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(Tv,null,e.length+n.length)))),t.createElement(Bv,null,t.createElement(Nv.Provider,{value:{filterWords:T,includedIds:P,excludedIds:j,activeSection:H,onIncludedChange:g,onExcludedChange:h,setActiveSection:R}},t.createElement(Gv,{isShow:0===I,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Pv,{hasMenu:!(!c&&!y)},t.createElement(jv,null,t.createElement(Y,{name:"search",size:"sm",color:V.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:z&&null===H,placeholder:"検索",type:"text",value:O,onChange:$}),O&&t.createElement(Fv,{type:"button","aria-label":"検索をリセット",onClick:S},t.createElement(Y,{name:"close_circle",type:"fill",color:"currentColor"}))),(c||y)&&t.createElement(Ld,null,t.createElement(Nd,{trigger:t.createElement(Xv,{type:"button"},t.createElement(Y,{name:"more_vert",color:V.basic[900]}))},y&&t.createElement(vx,{pageSize:v,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Yv,null,m?t.createElement(Er,{width:"16px"}):t.createElement(t.Fragment,null,z&&null===H?"-":z?U.length.toLocaleString("en-US"):X.length.toLocaleString("en-US"),"件")),t.createElement(Jv,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:Q,onClick:q},t.createElement(Y,{name:"check_thin",color:Q?V.basic[400]:V.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:_,onClick:ee},t.createElement(Y,{name:"forbid",color:_?V.basic[400]:V.red[500]}),"全て除外")))),t.createElement(Wv,null,W,t.createElement("div",{ref:D,style:{height:"20px"}},m&&t.createElement(hx,null,"読み込み中...")))),t.createElement(Uv,{isShow:1===I},t.createElement(Qv,null,t.createElement(Kv,null,0!==e.length&&t.createElement(ex,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),e.length),0!==n.length&&t.createElement(tx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),n.length)),t.createElement(nx,null,t.createElement(Jt,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:K},"選択をクリア"))),t.createElement(_v,null,!!e.length&&t.createElement(rx,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),"追加"),xx(e).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},e.label)))))),!!n.length&&t.createElement(rx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),"除外"),xx(n).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},e.label)))))))))))}));Cx.displayName="DualListBox2";const Ex=e.forwardRef((function({children:t},n){const r=W();return e.createElement(U,{ref:n,display:"flex",alignItems:"center"},e.createElement(Pt,{pr:.5},e.createElement(Y,{name:"alert",type:"fill",color:r.palette.danger.main,size:"md"})),e.createElement(oe,{color:r.palette.danger.main},t))})),Ix=v.div`
+`,vx=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(Nd,{width:136,trigger:t.createElement(bx,{append:e},"件数を変更")},n.map((n=>t.createElement(Cl,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),xx=e=>e.reduce(((e,t)=>{const n=e.find((e=>e.groupName===t.groupName));return n?n.items.push({id:t.id,label:t.label}):e.push({groupName:t.groupName,items:[{id:t.id,label:t.label}]}),e}),[]),yx=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:a,onExcludedChange:o}=g(Nv),l=p((()=>r.includes(e)),[r,e]),s=p((()=>i.includes(e)),[i,e]),c=d((()=>{l&&a(r.filter((t=>t!==e))),s&&o(i.filter((t=>t!==e)))}),[l,s,r,i,a,o,e]);return t.createElement(ox,null,n,t.createElement("button",{type:"button","aria-label":"解除",onClick:c},t.createElement(Y,{name:"close_circle",type:"fill",color:"currentColor"})))}));yx.displayName="DualListBox2SelectedItem";const wx=({label:e})=>t.createElement(lx,null,e),Cx=n((({included:e,excluded:n,disableInclude:l,disableExclude:s,menuButtons:c,children:u,loading:m,onIncludedChange:g,onExcludedChange:h,onLoadMore:f,pageSize:v=50,pageSizeOptions:x=[10,50,100,200],onPageSizeChange:y,filter:w="",onFilterChange:C},E)=>{const[I,k]=r(0),[A,M]=r(""),[H,N]=r(null),[L,Z]=r(!1),D=i(null),O=C?w:A,$=d((e=>{const t=e.target.value;C?C(t):M(t)}),[C]),S=d((()=>{C?C(""):M("")}),[C]),R=d((e=>{N(e),null===e&&S()}),[S]),z=p((()=>{let e=!1;return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&(e=!0)})),e}),[u]),T=p((()=>{const e=O.trim();return e?e.split(/\s+/):[]}),[O]),B=p((()=>Dv(u)),[u]),G=p((()=>(e=>{const t={};return Zv(e,(e=>{o(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Vv.displayName&&(t[e.props.id]=e.props.children)})),t})(u)),[u]),W=d((e=>{if(!o(e))return e;if(e.type!==Vv)return e;const t=B.find((t=>t.id===e.props.id));return t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[T,B]),P=p((()=>T.length?t.Children.map(u,(e=>{if(!o(e))return e;if(e.type===Vv)return W(e);if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Accordion"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>W(e))).filter(Boolean);return 0===n.length?null:t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Section"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(o).map((e=>W(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):u),[u,T,W]),j=p((()=>e.map((e=>e.id))),[e]),F=p((()=>n.map((e=>e.id))),[n]),X=p((()=>B.map((e=>e.id))),[B]),J=p((()=>0===T.length?X:X.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[X,B,T]),U=p((()=>{if(!z)return[];if(null===H)return[];const e=[];return Zv(u,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===fx.displayName&&t.props.label===H&&Zv(t.props.children,(t=>{o(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Vv.displayName&&e.push(t.props.id)}))})),e}),[H,u,z]),Q=p((()=>0===T.length?U:U.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&T.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[U,B,T]),_=p((()=>{if(z){if(null===H)return!0;return!!Q.every((e=>j.includes(e)))}return!!J.every((e=>j.includes(e)))}),[z,H,J,Q,j]),K=p((()=>{if(z){if(null===H)return!0;return!!Q.every((e=>F.includes(e)))}return!!J.every((e=>F.includes(e)))}),[z,H,J,Q,F]),q=d((()=>{e.length&&g([]),n.length&&h([])}),[e,n,g,h]),ee=d((()=>{if(z){if(null===H)return;return g(Array.from(new Set([...j,...Q]))),void h(F.filter((e=>!Q.includes(e))))}g(Array.from(new Set([...j,...J]))),h(F.filter((e=>!J.includes(e))))}),[J,g,h,z,H,j,F,Q]),te=d((()=>{if(z){if(null===H)return;return h(Array.from(new Set([...F,...Q]))),void g(j.filter((e=>!Q.includes(e))))}h(Array.from(new Set([...F,...J]))),g(j.filter((e=>!J.includes(e))))}),[J,g,h,z,H,j,F,Q]),ne=d((async e=>{if(e[0].isIntersecting&&!L&&f){Z(!0);try{await f()}finally{Z(!1)}}}),[L,f]);return a((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(ne,{root:null,rootMargin:"100px",threshold:.1}),t=D.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[ne]),t.createElement(Rv,{ref:E,role:"region","aria-label":"アイテムの追加、除外選択エリア"},t.createElement(zv,{role:"tablist","aria-label":"リストの表示切り替え"},t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":0===I,"aria-expanded":0===I,"aria-controls":"list-items-panel",onClick:()=>k(0)},"リストアイテム")),t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":1===I,"aria-expanded":1===I,"aria-controls":"selected-items-panel",onClick:()=>k(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(Tv,null,e.length+n.length)))),t.createElement(Bv,null,t.createElement(Nv.Provider,{value:{filterWords:T,includedIds:j,excludedIds:F,activeSection:H,onIncludedChange:g,onExcludedChange:h,setActiveSection:R}},t.createElement(Gv,{isShow:0===I,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Pv,{hasMenu:!(!c&&!y)},t.createElement(jv,null,t.createElement(Y,{name:"search",size:"sm",color:V.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:z&&null===H,placeholder:"検索",type:"text",value:O,onChange:$}),O&&t.createElement(Fv,{type:"button","aria-label":"検索をリセット",onClick:S},t.createElement(Y,{name:"close_circle",type:"fill",color:"currentColor"}))),(c||y)&&t.createElement(Ld,null,t.createElement(Nd,{trigger:t.createElement(Xv,{type:"button"},t.createElement(Y,{name:"more_vert",color:V.basic[900]}))},y&&t.createElement(vx,{pageSize:v,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Yv,null,m?t.createElement(Er,{width:"16px"}):t.createElement(t.Fragment,null,z&&null===H?"-":z?Q.length.toLocaleString("en-US"):J.length.toLocaleString("en-US"),"件")),t.createElement(Jv,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:_,onClick:ee},t.createElement(Y,{name:"check_thin",color:_?V.basic[400]:V.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:K,onClick:te},t.createElement(Y,{name:"forbid",color:K?V.basic[400]:V.red[500]}),"全て除外")))),t.createElement(Wv,null,P,t.createElement("div",{ref:D,style:{height:"20px"}},m&&t.createElement(hx,null,"読み込み中...")))),t.createElement(Uv,{isShow:1===I},t.createElement(Qv,null,t.createElement(Kv,null,0!==e.length&&t.createElement(ex,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),e.length),0!==n.length&&t.createElement(tx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),n.length)),t.createElement(nx,null,t.createElement(Jt,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:q},"選択をクリア"))),t.createElement(_v,null,!!e.length&&t.createElement(rx,null,t.createElement(Y,{name:"check_thin",color:V.blue[500]}),"追加"),xx(e).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},G[e.id]||e.label)))))),!!n.length&&t.createElement(rx,null,t.createElement(Y,{name:"forbid",color:V.red[500]}),"除外"),xx(n).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(wx,{label:e.groupName}),e.items.map((e=>t.createElement(yx,{key:e.id,id:e.id},G[e.id]||e.label)))))))))))}));Cx.displayName="DualListBox2";const Ex=e.forwardRef((function({children:t},n){const r=W();return e.createElement(U,{ref:n,display:"flex",alignItems:"center"},e.createElement(Pt,{pr:.5},e.createElement(Y,{name:"alert",type:"fill",color:r.palette.danger.main,size:"md"})),e.createElement(oe,{color:r.palette.danger.main},t))})),Ix=v.div`
   display: flex;
   justify-content: center;
   align-items: center;