ingred-ui 25.4.0 → 25.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DualListBox2/DualListBox2.stories.d.ts +19 -0
- package/dist/components/DualListBox2/DualListBox2Accordion.d.ts +2 -1
- package/dist/components/DualListBox2/DualListBox2Section.d.ts +3 -1
- package/dist/components/DualListBox2/styled.d.ts +2 -1
- package/dist/components/DualListBox2/types.d.ts +2 -0
- package/dist/index.es.js +4 -3
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +4 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2293,7 +2293,7 @@ var _r=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
2293
2293
|
align-items: center;
|
|
2294
2294
|
justify-content: center;
|
|
2295
2295
|
gap: ${({theme:e})=>2*e.spacing}px;
|
|
2296
|
-
`,zv=({items:e,selectedItemTitle:t,onRemove:n})=>{const r=w();return i.default.createElement(Nv,null,i.default.createElement(Dv,null,i.default.createElement(Z,{size:"sm",weight:"bold"},i.default.createElement(Z,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),t)),i.default.createElement(Lv,null,e.map(((t,a)=>i.default.createElement(Vv,{key:t.id,isLastIndex:a+1===e.length},t.content,i.default.createElement(Hv,null,n&&i.default.createElement(Rv,{type:"button",onClick:()=>n(t)},i.default.createElement(A,{color:r.palette.black,name:"close_circle",type:"fill"}))))))))},Tv=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Tv(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},Zv=i.forwardRef((function(e){const{candidateItems:t,selectedItems:n,selectedItemTitle:r,disableCheckbox:a,onAdd:o,onRemove:l}=Dd({props:e,name:"DualListBox"}),s=w(),c=i.useMemo((()=>Tv(t,n)),[t,n]);return i.createElement(Cv,null,i.createElement(Ov,{disableCheckbox:a,items:c,onAdd:o,onRemove:l}),i.createElement(Bd,{color:s.palette.divider,orientation:"vertical"}),i.createElement(zv,{items:n,selectedItemTitle:r,onRemove:l}))})),Bv=({id:t,children:n,isIncluded:r=!1,isExcluded:a=!1,disableInclude:o,disableExclude:l})=>{const{onIncludedChange:s,onExcludedChange:d,includedIds:u,excludedIds:p}=e.useContext(Pv),f=(e,t,n)=>e?c.basic[400]:t?n:c.basic[900];return i.default.createElement(hx,null,n,i.default.createElement(mx,null,i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:o,"aria-pressed":r,"aria-label":"追加",style:{"--color":c.blue[500]},onClick:()=>{r?s(u.filter((e=>e!==t))):a?(d(p.filter((e=>e!==t))),s([...u,t])):s([...u,t])}},i.default.createElement(A,{name:"check_thin",color:f(o,r,c.blue[500])}))),i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:l,"aria-pressed":a,"aria-label":"除外",style:{"--color":c.red[500]},onClick:()=>{a?d(p.filter((e=>e!==t))):r?(s(u.filter((e=>e!==t))),d([...p,t])):d([...p,t])}},i.default.createElement(A,{name:"forbid",color:f(l,a,c.red[500])})))))};Bv.displayName="DualListBox2Item";const Pv=e.createContext({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),Gv=e.createContext({groupName:""}),Fv=(t,n)=>{e.Children.forEach(t,(t=>{n(t),e.isValidElement(t)&&t.props.children&&Fv(t.props.children,n)}))},_v=t=>{const n=[];return Fv(t,(t=>{if(e.isValidElement(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&t.type&&"function"==typeof t.type&&"displayName"in t.type&&t.type.displayName===Bv.displayName){const r=t.props.label||(t=>{let n="";const r=t=>{"string"==typeof t||"number"==typeof t?n+=String(t):e.isValidElement(t)&&t.props.children?r(t.props.children):Array.isArray(t)&&t.forEach(r)};return r(t),n})(t.props.children);n.push({id:t.props.id,label:r,groupName:t.props.groupName})}})),n},jv=({label:t,disableInclude:n,disableExclude:r,children:a,onOpen:o})=>{const[
|
|
2296
|
+
`,zv=({items:e,selectedItemTitle:t,onRemove:n})=>{const r=w();return i.default.createElement(Nv,null,i.default.createElement(Dv,null,i.default.createElement(Z,{size:"sm",weight:"bold"},i.default.createElement(Z,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),t)),i.default.createElement(Lv,null,e.map(((t,a)=>i.default.createElement(Vv,{key:t.id,isLastIndex:a+1===e.length},t.content,i.default.createElement(Hv,null,n&&i.default.createElement(Rv,{type:"button",onClick:()=>n(t)},i.default.createElement(A,{color:r.palette.black,name:"close_circle",type:"fill"}))))))))},Tv=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Tv(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},Zv=i.forwardRef((function(e){const{candidateItems:t,selectedItems:n,selectedItemTitle:r,disableCheckbox:a,onAdd:o,onRemove:l}=Dd({props:e,name:"DualListBox"}),s=w(),c=i.useMemo((()=>Tv(t,n)),[t,n]);return i.createElement(Cv,null,i.createElement(Ov,{disableCheckbox:a,items:c,onAdd:o,onRemove:l}),i.createElement(Bd,{color:s.palette.divider,orientation:"vertical"}),i.createElement(zv,{items:n,selectedItemTitle:r,onRemove:l}))})),Bv=({id:t,children:n,isIncluded:r=!1,isExcluded:a=!1,disableInclude:o,disableExclude:l})=>{const{onIncludedChange:s,onExcludedChange:d,includedIds:u,excludedIds:p}=e.useContext(Pv),f=(e,t,n)=>e?c.basic[400]:t?n:c.basic[900];return i.default.createElement(hx,null,n,i.default.createElement(mx,null,i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:o,"aria-pressed":r,"aria-label":"追加",style:{"--color":c.blue[500]},onClick:()=>{r?s(u.filter((e=>e!==t))):a?(d(p.filter((e=>e!==t))),s([...u,t])):s([...u,t])}},i.default.createElement(A,{name:"check_thin",color:f(o,r,c.blue[500])}))),i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:l,"aria-pressed":a,"aria-label":"除外",style:{"--color":c.red[500]},onClick:()=>{a?d(p.filter((e=>e!==t))):r?(s(u.filter((e=>e!==t))),d([...p,t])):d([...p,t])}},i.default.createElement(A,{name:"forbid",color:f(l,a,c.red[500])})))))};Bv.displayName="DualListBox2Item";const Pv=e.createContext({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),Gv=e.createContext({groupName:""}),Fv=(t,n)=>{e.Children.forEach(t,(t=>{n(t),e.isValidElement(t)&&t.props.children&&Fv(t.props.children,n)}))},_v=t=>{const n=[];return Fv(t,(t=>{if(e.isValidElement(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&t.type&&"function"==typeof t.type&&"displayName"in t.type&&t.type.displayName===Bv.displayName){const r=t.props.label||(t=>{let n="";const r=t=>{"string"==typeof t||"number"==typeof t?n+=String(t):e.isValidElement(t)&&t.props.children?r(t.props.children):Array.isArray(t)&&t.forEach(r)};return r(t),n})(t.props.children);n.push({id:t.props.id,label:r,groupName:t.props.groupName})}})),n},jv=({label:t,disableInclude:n,disableExclude:r,children:a,onOpen:o,onClose:l})=>{const[s,d]=e.useState(!1),u=e.useCallback((()=>{const e=!s;d(e),e&&o&&o(),!e&&l&&l()}),[s,o,l]),{includedIds:p,excludedIds:f,onIncludedChange:m,onExcludedChange:h}=e.useContext(Pv),g=e.useMemo((()=>(e=>_v(e).map((e=>e.id)))(a)),[a]),b=e.useCallback((()=>{g.every((e=>p.includes(e)))||(m(Array.from(new Set([...p,...g]))),h(f.filter((e=>!g.includes(e)))))}),[g,p,f,m,h]),v=e.useCallback((()=>{g.every((e=>f.includes(e)))||(h(Array.from(new Set([...f,...g]))),m(p.filter((e=>!g.includes(e)))))}),[g,p,f,m,h]);return i.default.createElement(i.default.Fragment,null,i.default.createElement(xx,null,i.default.createElement(yx,{type:"button","aria-label":`${t}を開く`,"aria-expanded":s,onClick:u},t),i.default.createElement(wx,null,i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:n,"aria-label":"追加",onClick:b},i.default.createElement(A,{name:"check_thin",color:c.blue[500]}))),i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:r,"aria-label":"除外",onClick:v},i.default.createElement(A,{name:"forbid",color:c.red[500]})))),i.default.createElement(Cx,null,i.default.createElement(A,{name:"arrow_down",color:c.basic[900]}))),s&&a)},Wv=t.css`
|
|
2297
2297
|
display: flex;
|
|
2298
2298
|
gap: 4px;
|
|
2299
2299
|
box-sizing: border-box;
|
|
@@ -2834,9 +2834,9 @@ var _r=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
2834
2834
|
padding-left: 24px;
|
|
2835
2835
|
`,o.default(hx)`
|
|
2836
2836
|
padding-left: 48px;
|
|
2837
|
-
`;const Mx=({label:t,children:n})=>{const{activeSection:
|
|
2837
|
+
`;const Mx=({label:t,children:n,onOpen:r,onClose:a})=>{const{activeSection:o,setActiveSection:l}=e.useContext(Pv),s=e.useMemo((()=>o===t),[t,o]),d=e.useMemo((()=>null!==o&&o!==t),[t,o]),u=e.useCallback((()=>{const e=!s;l(e?t:null),e&&r&&r(),!e&&a&&a()}),[t,s,l,r,a]);return d?null:i.default.createElement(Gv.Provider,{value:{groupName:t}},i.default.createElement(kx,{type:"button","aria-label":`${t}を開く`,"aria-expanded":s,onClick:u},i.default.createElement(Ex,null,i.default.createElement(A,{name:"arrow_left",color:c.basic[900]})),i.default.createElement("div",null,t),i.default.createElement(Ix,null,i.default.createElement(A,{name:"arrow_right",color:c.basic[900]}))),s&&n)};Mx.displayName="DualListBox2Section";const Sx=o.default(Ui)`
|
|
2838
2838
|
margin-right: 16px;
|
|
2839
|
-
`,$x=({pageSize:e,pageSizeOptions:t,onPageSizeChange:n})=>i.default.createElement(Qs,{width:136,trigger:i.default.createElement(Sx,{append:e},"件数を変更")},t.map((t=>i.default.createElement(Gi,{key:t,closeOnChange:!0,checked:e===t,onChange:()=>n(t)},t,"件")))),Ox=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}),[]),Nx=i.default.memo((({id:t,children:n})=>{const{includedIds:r,excludedIds:a,onIncludedChange:o,onExcludedChange:l}=e.useContext(Pv),s=e.useMemo((()=>r.includes(t)),[r,t]),c=e.useMemo((()=>a.includes(t)),[a,t]),d=e.useCallback((()=>{s&&o(r.filter((e=>e!==t))),c&&l(a.filter((e=>e!==t)))}),[s,c,r,a,o,l,t]);return i.default.createElement(gx,null,n,i.default.createElement(bx,{type:"button","aria-label":"解除",onClick:d},i.default.createElement(A,{name:"close_circle",type:"fill",color:"currentColor"})))}));Nx.displayName="DualListBox2SelectedItem";const Dx=({label:e})=>i.default.createElement(vx,null,e),Lx=e.forwardRef((({included:t,excluded:n,disableInclude:r,disableExclude:a,menuButtons:o,children:l,loading:s,onIncludedChange:d,onExcludedChange:u,onLoadMore:p,pageSize:f=50,pageSizeOptions:m=[10,50,100,200],onPageSizeChange:h,filter:g="",onFilterChange:b,placement:v,middleware:x},y)=>{const[w,C]=e.useState(0),[E,I]=e.useState(""),[k,M]=e.useState(null),[S,$]=e.useState(!1),O=e.useRef(null),N=b?g:E,D=e.useCallback((e=>{const t=e.target.value;b?b(t):I(t)}),[b]),L=e.useCallback((()=>{b?b(""):I("")}),[b]),V=e.useCallback((e=>{M(e),null===e&&L()}),[L]),R=e.useMemo((()=>{let t=!1;return Fv(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Mx.displayName&&(t=!0)})),t}),[l]),H=e.useMemo((()=>{const e=N.trim();return e?e.split(/\s+/):[]}),[N]),z=e.useMemo((()=>_v(l)),[l]),T=e.useMemo((()=>(t=>{const n={};return Fv(t,(t=>{e.isValidElement(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&t.type&&"function"==typeof t.type&&"displayName"in t.type&&t.type.displayName===Bv.displayName&&(n[t.props.id]=t.props.children)})),n})(l)),[l]),Z=e.useCallback((t=>{if(!e.isValidElement(t))return t;if(t.type!==Bv)return t;const n=z.find((e=>e.id===t.props.id));return n&&H.every((e=>n.label.toLowerCase().includes(e.toLowerCase())))?t:null}),[H,z]),B=e.useMemo((()=>H.length?i.default.Children.map(l,(t=>{if(!e.isValidElement(t))return t;if(t.type===Bv)return Z(t);if("string"!=typeof t.type&&"displayName"in t.type&&"DualListBox2Accordion"===t.type.displayName){const n=i.default.Children.toArray(t.props.children).filter(e.isValidElement).map((e=>Z(e))).filter(Boolean);return 0===n.length?null:i.default.cloneElement(t,Object.assign(Object.assign({},t.props),{children:n}))}if("string"!=typeof t.type&&"displayName"in t.type&&"DualListBox2Section"===t.type.displayName){const n=i.default.Children.toArray(t.props.children).filter(e.isValidElement).map((e=>Z(e))).filter(Boolean);return i.default.cloneElement(t,Object.assign(Object.assign({},t.props),{children:n}))}return t})):l),[l,H,Z]),P=e.useMemo((()=>t.map((e=>e.id))),[t]),G=e.useMemo((()=>n.map((e=>e.id))),[n]),F=e.useMemo((()=>z.map((e=>e.id))),[z]),_=e.useMemo((()=>0===H.length?F:F.filter((e=>{const t=z.find((t=>t.id===e));return!!t&&H.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[F,z,H]),j=e.useMemo((()=>{if(!R)return[];if(null===k)return[];const t=[];return Fv(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Mx.displayName&&n.props.label===k&&Fv(n.props.children,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Bv.displayName&&t.push(n.props.id)}))})),t}),[k,l,R]),W=e.useMemo((()=>0===H.length?j:j.filter((e=>{const t=z.find((t=>t.id===e));return!!t&&H.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[j,z,H]),X=e.useMemo((()=>{if(R){if(null===k)return!0;return!!W.every((e=>P.includes(e)))}return!!_.every((e=>P.includes(e)))}),[R,k,_,W,P]),Y=e.useMemo((()=>{if(R){if(null===k)return!0;return!!W.every((e=>G.includes(e)))}return!!_.every((e=>G.includes(e)))}),[R,k,_,W,G]),J=e.useCallback((()=>{t.length&&d([]),n.length&&u([])}),[t,n,d,u]),U=e.useCallback((()=>{if(R){if(null===k)return;return d(Array.from(new Set([...P,...W]))),void u(G.filter((e=>!W.includes(e))))}d(Array.from(new Set([...P,..._]))),u(G.filter((e=>!_.includes(e))))}),[_,d,u,R,k,P,G,W]),Q=e.useCallback((()=>{if(R){if(null===k)return;return u(Array.from(new Set([...G,...W]))),void d(P.filter((e=>!W.includes(e))))}u(Array.from(new Set([...G,..._]))),d(P.filter((e=>!_.includes(e))))}),[_,d,u,R,k,P,G,W]),q=e.useCallback((async e=>{if(e[0].isIntersecting&&!S&&p){$(!0);try{await p()}finally{$(!1)}}}),[S,p]);return e.useEffect((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(q,{root:null,rootMargin:"100px",threshold:.1}),t=O.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[q]),i.default.createElement(Xv,{ref:y,role:"region","aria-label":"アイテムの追加、除外選択エリア"},i.default.createElement(Yv,{role:"tablist","aria-label":"リストの表示切り替え"},i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":0===w,"aria-expanded":0===w,"aria-controls":"list-items-panel",onClick:()=>C(0)},"リストアイテム")),i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":1===w,"aria-expanded":1===w,"aria-controls":"selected-items-panel",onClick:()=>C(1)},"選択済みアイテム",(t.length>0||n.length>0)&&i.default.createElement(Jv,null,t.length+n.length)))),i.default.createElement(Uv,null,i.default.createElement(Pv.Provider,{value:{filterWords:H,includedIds:P,excludedIds:G,activeSection:k,onIncludedChange:d,onExcludedChange:u,setActiveSection:V}},i.default.createElement(Qv,{isShow:0===w,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},i.default.createElement(Kv,{hasMenu:!(!o&&!h)},i.default.createElement(ex,null,i.default.createElement(A,{name:"search",size:"sm",color:c.basic[600]}),i.default.createElement("input",{"aria-label":"アイテムを検索",disabled:R&&null===k,placeholder:"検索",type:"text",value:N,onChange:D}),N&&i.default.createElement(tx,{type:"button","aria-label":"検索をリセット",onClick:L},i.default.createElement(A,{name:"close_circle",type:"fill",color:"currentColor"}))),(o||h)&&i.default.createElement(qs,null,i.default.createElement(Qs,{trigger:i.default.createElement(nx,{type:"button"},i.default.createElement(A,{name:"more_vert",color:c.basic[900]})),placement:v,middleware:x},h&&i.default.createElement($x,{pageSize:f,pageSizeOptions:m,onPageSizeChange:h}),o)),i.default.createElement(rx,null,s?i.default.createElement(St,{width:"16px"}):i.default.createElement(i.default.Fragment,null,R&&null===k?"-":R?W.length.toLocaleString("en-US"):_.length.toLocaleString("en-US"),"件")),i.default.createElement(ax,null,!r&&i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:X,onClick:U},i.default.createElement(A,{name:"check_thin",color:X?c.basic[400]:c.blue[500]}),"全て追加")),!a&&i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:Y,onClick:Q},i.default.createElement(A,{name:"forbid",color:Y?c.basic[400]:c.red[500]}),"全て除外")))),i.default.createElement(qv,null,B,i.default.createElement("div",{ref:O,style:{height:"20px"}},s&&i.default.createElement(Ax,null,"読み込み中...")))),i.default.createElement(ix,{isShow:1===w},i.default.createElement(ox,null,i.default.createElement(sx,null,0!==t.length&&i.default.createElement(dx,null,i.default.createElement(A,{name:"check_thin",color:c.blue[500]}),t.length),0!==n.length&&i.default.createElement(ux,null,i.default.createElement(A,{name:"forbid",color:c.red[500]}),n.length)),i.default.createElement(px,null,i.default.createElement(Lt,{type:"button",color:"basicLight",size:"small",disabled:!t.length&&!n.length,onClick:J},"選択をクリア"))),i.default.createElement(lx,null,!!t.length&&i.default.createElement(fx,null,i.default.createElement(A,{name:"check_thin",color:c.blue[500]}),"追加"),Ox(t).map((t=>i.default.createElement(e.Fragment,{key:t.groupName||"_"},t.groupName&&i.default.createElement(Dx,{label:t.groupName}),t.items.map((e=>i.default.createElement(Nx,{key:e.id,id:e.id},T[e.id]||e.label)))))),!!n.length&&i.default.createElement(fx,null,i.default.createElement(A,{name:"forbid",color:c.red[500]}),"除外"),Ox(n).map((t=>i.default.createElement(e.Fragment,{key:t.groupName||"_"},t.groupName&&i.default.createElement(Dx,{label:t.groupName}),t.items.map((e=>i.default.createElement(Nx,{key:e.id,id:e.id},T[e.id]||e.label)))))))))))}));Lx.displayName="DualListBox2";const Vx=o.default.div`
|
|
2839
|
+
`,$x=({pageSize:e,pageSizeOptions:t,onPageSizeChange:n})=>i.default.createElement(Qs,{width:136,trigger:i.default.createElement(Sx,{append:e},"件数を変更")},t.map((t=>i.default.createElement(Gi,{key:t,closeOnChange:!0,checked:e===t,onChange:()=>n(t)},t,"件")))),Ox=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,selectedContent:t.selectedContent}):e.push({groupName:t.groupName,items:[{id:t.id,label:t.label,selectedContent:t.selectedContent}]}),e}),[]),Nx=i.default.memo((({id:t,children:n})=>{const{includedIds:r,excludedIds:a,onIncludedChange:o,onExcludedChange:l}=e.useContext(Pv),s=e.useMemo((()=>r.includes(t)),[r,t]),c=e.useMemo((()=>a.includes(t)),[a,t]),d=e.useCallback((()=>{s&&o(r.filter((e=>e!==t))),c&&l(a.filter((e=>e!==t)))}),[s,c,r,a,o,l,t]);return i.default.createElement(gx,null,n,i.default.createElement(bx,{type:"button","aria-label":"解除",onClick:d},i.default.createElement(A,{name:"close_circle",type:"fill",color:"currentColor"})))}));Nx.displayName="DualListBox2SelectedItem";const Dx=({label:e})=>i.default.createElement(vx,null,e),Lx=e.forwardRef((({included:t,excluded:n,disableInclude:r,disableExclude:a,menuButtons:o,children:l,loading:s,onIncludedChange:d,onExcludedChange:u,onLoadMore:p,pageSize:f=50,pageSizeOptions:m=[10,50,100,200],onPageSizeChange:h,filter:g="",onFilterChange:b,placement:v,middleware:x},y)=>{const[w,C]=e.useState(0),[E,I]=e.useState(""),[k,M]=e.useState(null),[S,$]=e.useState(!1),O=e.useRef(null),N=b?g:E,D=e.useCallback((e=>{const t=e.target.value;b?b(t):I(t)}),[b]),L=e.useCallback((()=>{b?b(""):I("")}),[b]),V=e.useCallback((e=>{M(e),null===e&&L()}),[L]),R=e.useMemo((()=>{let t=!1;return Fv(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"symbol"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Mx.displayName&&(t=!0)})),t}),[l]),H=e.useMemo((()=>{const e=N.trim();return e?e.split(/\s+/):[]}),[N]),z=e.useMemo((()=>_v(l)),[l]),T=e.useMemo((()=>(t=>{const n={};return Fv(t,(t=>{e.isValidElement(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&t.type&&"function"==typeof t.type&&"displayName"in t.type&&t.type.displayName===Bv.displayName&&(n[t.props.id]=t.props.children)})),n})(l)),[l]),Z=e.useCallback((t=>{if(!e.isValidElement(t))return t;if(t.type!==Bv)return t;const n=z.find((e=>e.id===t.props.id));return n&&H.every((e=>n.label.toLowerCase().includes(e.toLowerCase())))?t:null}),[H,z]),B=e.useMemo((()=>H.length?i.default.Children.map(l,(t=>{if(!e.isValidElement(t))return t;if(t.type===Bv)return Z(t);if("string"!=typeof t.type&&"symbol"!=typeof t.type&&"displayName"in t.type&&"DualListBox2Accordion"===t.type.displayName){const n=i.default.Children.toArray(t.props.children).filter(e.isValidElement).map((e=>Z(e))).filter(Boolean);return 0===n.length?null:i.default.cloneElement(t,Object.assign(Object.assign({},t.props),{children:n}))}if("string"!=typeof t.type&&"symbol"!=typeof t.type&&"displayName"in t.type&&"DualListBox2Section"===t.type.displayName){const n=i.default.Children.toArray(t.props.children).filter(e.isValidElement).map((e=>Z(e))).filter(Boolean);return i.default.cloneElement(t,Object.assign(Object.assign({},t.props),{children:n}))}return t})):l),[l,H,Z]),P=e.useMemo((()=>t.map((e=>e.id))),[t]),G=e.useMemo((()=>n.map((e=>e.id))),[n]),F=e.useMemo((()=>z.map((e=>e.id))),[z]),_=e.useMemo((()=>0===H.length?F:F.filter((e=>{const t=z.find((t=>t.id===e));return!!t&&H.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[F,z,H]),j=e.useMemo((()=>{if(!R)return[];if(null===k)return[];const t=[];return Fv(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"symbol"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Mx.displayName&&n.props.label===k&&Fv(n.props.children,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"symbol"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Bv.displayName&&t.push(n.props.id)}))})),t}),[k,l,R]),W=e.useMemo((()=>0===H.length?j:j.filter((e=>{const t=z.find((t=>t.id===e));return!!t&&H.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[j,z,H]),X=e.useMemo((()=>{if(R){if(null===k)return!0;return!!W.every((e=>P.includes(e)))}return!!_.every((e=>P.includes(e)))}),[R,k,_,W,P]),Y=e.useMemo((()=>{if(R){if(null===k)return!0;return!!W.every((e=>G.includes(e)))}return!!_.every((e=>G.includes(e)))}),[R,k,_,W,G]),J=e.useCallback((()=>{t.length&&d([]),n.length&&u([])}),[t,n,d,u]),U=e.useCallback((()=>{if(R){if(null===k)return;return d(Array.from(new Set([...P,...W]))),void u(G.filter((e=>!W.includes(e))))}d(Array.from(new Set([...P,..._]))),u(G.filter((e=>!_.includes(e))))}),[_,d,u,R,k,P,G,W]),Q=e.useCallback((()=>{if(R){if(null===k)return;return u(Array.from(new Set([...G,...W]))),void d(P.filter((e=>!W.includes(e))))}u(Array.from(new Set([...G,..._]))),d(P.filter((e=>!_.includes(e))))}),[_,d,u,R,k,P,G,W]),q=e.useCallback((async e=>{if(e[0].isIntersecting&&!S&&p){$(!0);try{await p()}finally{$(!1)}}}),[S,p]);return e.useEffect((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(q,{root:null,rootMargin:"100px",threshold:.1}),t=O.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[q]),i.default.createElement(Xv,{ref:y,role:"region","aria-label":"アイテムの追加、除外選択エリア"},i.default.createElement(Yv,{role:"tablist","aria-label":"リストの表示切り替え"},i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":0===w,"aria-expanded":0===w,"aria-controls":"list-items-panel",onClick:()=>C(0)},"リストアイテム")),i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":1===w,"aria-expanded":1===w,"aria-controls":"selected-items-panel",onClick:()=>C(1)},"選択済みアイテム",(t.length>0||n.length>0)&&i.default.createElement(Jv,null,t.length+n.length)))),i.default.createElement(Uv,null,i.default.createElement(Pv.Provider,{value:{filterWords:H,includedIds:P,excludedIds:G,activeSection:k,onIncludedChange:d,onExcludedChange:u,setActiveSection:V}},i.default.createElement(Qv,{isShow:0===w,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},i.default.createElement(Kv,{hasMenu:!(!o&&!h)},i.default.createElement(ex,null,i.default.createElement(A,{name:"search",size:"sm",color:c.basic[600]}),i.default.createElement("input",{"aria-label":"アイテムを検索",disabled:R&&null===k,placeholder:"検索",type:"text",value:N,onChange:D}),N&&i.default.createElement(tx,{type:"button","aria-label":"検索をリセット",onClick:L},i.default.createElement(A,{name:"close_circle",type:"fill",color:"currentColor"}))),(o||h)&&i.default.createElement(qs,null,i.default.createElement(Qs,{trigger:i.default.createElement(nx,{type:"button"},i.default.createElement(A,{name:"more_vert",color:c.basic[900]})),placement:v,middleware:x},h&&i.default.createElement($x,{pageSize:f,pageSizeOptions:m,onPageSizeChange:h}),o)),i.default.createElement(rx,null,s?i.default.createElement(St,{width:"16px"}):i.default.createElement(i.default.Fragment,null,R&&null===k?"-":R?W.length.toLocaleString("en-US"):_.length.toLocaleString("en-US"),"件")),i.default.createElement(ax,null,!r&&i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:X,onClick:U},i.default.createElement(A,{name:"check_thin",color:X?c.basic[400]:c.blue[500]}),"全て追加")),!a&&i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:Y,onClick:Q},i.default.createElement(A,{name:"forbid",color:Y?c.basic[400]:c.red[500]}),"全て除外")))),i.default.createElement(qv,null,B,i.default.createElement("div",{ref:O,style:{height:"20px"}},s&&i.default.createElement(Ax,null,"読み込み中...")))),i.default.createElement(ix,{isShow:1===w},i.default.createElement(ox,null,i.default.createElement(sx,null,0!==t.length&&i.default.createElement(dx,null,i.default.createElement(A,{name:"check_thin",color:c.blue[500]}),t.length),0!==n.length&&i.default.createElement(ux,null,i.default.createElement(A,{name:"forbid",color:c.red[500]}),n.length)),i.default.createElement(px,null,i.default.createElement(Lt,{type:"button",color:"basicLight",size:"small",disabled:!t.length&&!n.length,onClick:J},"選択をクリア"))),i.default.createElement(lx,null,!!t.length&&i.default.createElement(fx,null,i.default.createElement(A,{name:"check_thin",color:c.blue[500]}),"追加"),Ox(t).map((t=>i.default.createElement(e.Fragment,{key:t.groupName||"_"},t.groupName&&i.default.createElement(Dx,{label:t.groupName}),t.items.map((e=>i.default.createElement(Nx,{key:e.id,id:e.id},T[e.id]||e.selectedContent||e.label)))))),!!n.length&&i.default.createElement(fx,null,i.default.createElement(A,{name:"forbid",color:c.red[500]}),"除外"),Ox(n).map((t=>i.default.createElement(e.Fragment,{key:t.groupName||"_"},t.groupName&&i.default.createElement(Dx,{label:t.groupName}),t.items.map((e=>i.default.createElement(Nx,{key:e.id,id:e.id},T[e.id]||e.selectedContent||e.label)))))))))))}));Lx.displayName="DualListBox2";const Vx=o.default.div`
|
|
2840
2840
|
display: flex;
|
|
2841
2841
|
justify-content: center;
|
|
2842
2842
|
align-items: center;
|
|
@@ -4312,6 +4312,7 @@ var _r=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
4312
4312
|
white-space: nowrap;
|
|
4313
4313
|
padding: 0 6px;
|
|
4314
4314
|
width: 100%;
|
|
4315
|
+
height: 100%;
|
|
4315
4316
|
text-align: left;
|
|
4316
4317
|
`,jE=o.default.span`
|
|
4317
4318
|
${g}
|