ingred-ui 25.4.0 → 25.4.2

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

@@ -91,3 +91,22 @@ export declare const WithCustomMiddleware: {
         };
     };
 };
+/**
+ * #### selectedContentを使用した例
+ *
+ * 外部フィルターモードで検索にヒットしなかったアイテムが選択済みパネルに表示される場合、
+ * `selectedContent`を使用することでReactNodeを表示できます。
+ *
+ * この例では:
+ * - 検索フィルターで絞り込まれたアイテムのみが候補パネルに表示される（外部フィルターモード）
+ * - 検索にヒットしないアイテムを選択している場合、選択済みパネルでは`selectedContent`が使用される
+ * - `selectedContent`が未設定の場合は`label`（文字列）のみが表示される
+ */
+export declare const WithSelectedContent: Story;
+/**
+ * #### with Custom Handler（アコーディオン）
+ *
+ * onOpen/onCloseにカスタムハンドラを指定した例です。
+ * セクションでも同様に指定できます。
+ */
+export declare const WithCustomHandlerAccordion: Story;

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

@@ -5,6 +5,7 @@ type DualListBox2AccordionProps = {
     disableExclude?: boolean;
     children: ReactNode;
     onOpen?: () => void;
+    onClose?: () => void;
 };
-export declare const DualListBox2Accordion: ({ label, disableInclude, disableExclude, children, onOpen, }: DualListBox2AccordionProps) => JSX.Element;
+export declare const DualListBox2Accordion: ({ label, disableInclude, disableExclude, children, onOpen, onClose, }: DualListBox2AccordionProps) => JSX.Element;
 export {};

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

@@ -2,9 +2,11 @@ import { type ReactNode } from "react";
 type DualListBox2SectionProps = {
     label: string;
     children: ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
 };
 export declare const DualListBox2Section: {
-    ({ label, children, }: DualListBox2SectionProps): JSX.Element | null;
+    ({ label, children, onOpen, onClose, }: DualListBox2SectionProps): JSX.Element | null;
     displayName: string;
 };
 export {};

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

@@ -39,11 +39,12 @@ export declare const SectionButtonBefore: import("styled-components").StyledComp
 export declare const SectionButtonAfter: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const SectionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const LoadingIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NestedAccordion: import("styled-components").StyledComponent<({ label, disableInclude, disableExclude, children, onOpen, }: {
+export declare const NestedAccordion: import("styled-components").StyledComponent<({ label, disableInclude, disableExclude, children, onOpen, onClose, }: {
     label: string;
     disableInclude?: boolean | undefined;
     disableExclude?: boolean | undefined;
     children: import("react").ReactNode;
     onOpen?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const NestedItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,7 +1,9 @@
+import { ReactNode } from "react";
 export type Item = {
     id: string;
     groupName?: string;
     label: string;
     parentNode?: string;
     childNode?: string;
+    selectedContent?: ReactNode;
 };

package/dist/index.es.js

@@ -2293,7 +2293,7 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   align-items: center;
   justify-content: center;
   gap: ${({theme:e})=>2*e.spacing}px;
-`,Cx=({items:e,selectedItemTitle:n,onRemove:r})=>{const i=j();return t.createElement(bx,null,t.createElement(vx,null,t.createElement(ce,{size:"sm",weight:"bold"},t.createElement(ce,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),n)),t.createElement(xx,null,e.map(((n,o)=>t.createElement(yx,{key:n.id,isLastIndex:o+1===e.length},n.content,t.createElement(Ex,null,r&&t.createElement(wx,{type:"button",onClick:()=>r(n)},t.createElement(U,{color:i.palette.black,name:"close_circle",type:"fill"}))))))))},Ix=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Ix(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},kx=e.forwardRef((function(t){const{candidateItems:n,selectedItems:r,selectedItemTitle:i,disableCheckbox:o,onAdd:a,onRemove:l}=au({props:t,name:"DualListBox"}),s=j(),c=e.useMemo((()=>Ix(n,r)),[n,r]);return e.createElement(sx,null,e.createElement(fx,{disableCheckbox:o,items:c,onAdd:a,onRemove:l}),e.createElement(hu,{color:s.palette.divider,orientation:"vertical"}),e.createElement(Cx,{items:r,selectedItemTitle:i,onRemove:l}))})),Ax=({id:e,children:n,isIncluded:r=!1,isExcluded:i=!1,disableInclude:o,disableExclude:a})=>{const{onIncludedChange:l,onExcludedChange:s,includedIds:c,excludedIds:d}=p(Mx),u=(e,t,n)=>e?N.basic[400]:t?n:N.basic[900];return t.createElement(ny,null,n,t.createElement(ty,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:o,"aria-pressed":r,"aria-label":"追加",style:{"--color":N.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(U,{name:"check_thin",color:u(o,r,N.blue[500])}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:a,"aria-pressed":i,"aria-label":"除外",style:{"--color":N.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(U,{name:"forbid",color:u(a,i,N.red[500])})))))};Ax.displayName="DualListBox2Item";const Mx=u({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),$x=u({groupName:""}),Sx=(e,t)=>{s.forEach(e,(e=>{t(e),a(e)&&e.props.children&&Sx(e.props.children,t)}))},Ox=e=>{const t=[];return Sx(e,(e=>{if(a(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Ax.displayName){const n=e.props.label||(e=>{let t="";const n=e=>{"string"==typeof e||"number"==typeof e?t+=String(e):a(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},Nx=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}),[]),Dx=({label:e,disableInclude:n,disableExclude:i,children:o,onOpen:a})=>{const[l,s]=r(!1),c=m((()=>{const e=!l;s(e),e&&a&&a()}),[l,a]),{includedIds:d,excludedIds:u,onIncludedChange:g,onExcludedChange:f}=p(Mx),b=h((()=>(e=>Ox(e).map((e=>e.id)))(o)),[o]),v=m((()=>{b.every((e=>d.includes(e)))||(g(Array.from(new Set([...d,...b]))),f(u.filter((e=>!b.includes(e)))))}),[b,d,u,g,f]),x=m((()=>{b.every((e=>u.includes(e)))||(f(Array.from(new Set([...u,...b]))),g(d.filter((e=>!b.includes(e)))))}),[b,d,u,g,f]);return t.createElement(t.Fragment,null,t.createElement(ay,null,t.createElement(ly,{type:"button","aria-label":`${e}を開く`,"aria-expanded":l,onClick:c},e),t.createElement(sy,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:n,"aria-label":"追加",onClick:v},t.createElement(U,{name:"check_thin",color:N.blue[500]}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:i,"aria-label":"除外",onClick:x},t.createElement(U,{name:"forbid",color:N.red[500]})))),t.createElement(cy,null,t.createElement(U,{name:"arrow_down",color:N.basic[900]}))),l&&o)},Lx=w`
+`,Cx=({items:e,selectedItemTitle:n,onRemove:r})=>{const i=j();return t.createElement(bx,null,t.createElement(vx,null,t.createElement(ce,{size:"sm",weight:"bold"},t.createElement(ce,{color:"primary",component:"span",size:"sm",weight:"bold"},e.length," "),n)),t.createElement(xx,null,e.map(((n,o)=>t.createElement(yx,{key:n.id,isLastIndex:o+1===e.length},n.content,t.createElement(Ex,null,r&&t.createElement(wx,{type:"button",onClick:()=>r(n)},t.createElement(U,{color:i.palette.black,name:"close_circle",type:"fill"}))))))))},Ix=(e,t)=>{const n=[];return e.forEach((e=>{if(e.items)return void n.push(Object.assign(Object.assign({},e),{items:Ix(e.items,t)}));t.find((t=>t.id===e.id))?n.push(Object.assign(Object.assign({},e),{selected:!0})):n.push(e)})),n},kx=e.forwardRef((function(t){const{candidateItems:n,selectedItems:r,selectedItemTitle:i,disableCheckbox:o,onAdd:a,onRemove:l}=au({props:t,name:"DualListBox"}),s=j(),c=e.useMemo((()=>Ix(n,r)),[n,r]);return e.createElement(sx,null,e.createElement(fx,{disableCheckbox:o,items:c,onAdd:a,onRemove:l}),e.createElement(hu,{color:s.palette.divider,orientation:"vertical"}),e.createElement(Cx,{items:r,selectedItemTitle:i,onRemove:l}))})),Ax=({id:e,children:n,isIncluded:r=!1,isExcluded:i=!1,disableInclude:o,disableExclude:a})=>{const{onIncludedChange:l,onExcludedChange:s,includedIds:c,excludedIds:d}=p(Mx),u=(e,t,n)=>e?N.basic[400]:t?n:N.basic[900];return t.createElement(ny,null,n,t.createElement(ty,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:o,"aria-pressed":r,"aria-label":"追加",style:{"--color":N.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(U,{name:"check_thin",color:u(o,r,N.blue[500])}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:a,"aria-pressed":i,"aria-label":"除外",style:{"--color":N.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(U,{name:"forbid",color:u(a,i,N.red[500])})))))};Ax.displayName="DualListBox2Item";const Mx=u({filterWords:[],includedIds:[],excludedIds:[],activeSection:null,onIncludedChange:e=>{},onExcludedChange:e=>{},setActiveSection:e=>{}}),$x=u({groupName:""}),Sx=(e,t)=>{s.forEach(e,(e=>{t(e),a(e)&&e.props.children&&Sx(e.props.children,t)}))},Ox=e=>{const t=[];return Sx(e,(e=>{if(a(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Ax.displayName){const n=e.props.label||(e=>{let t="";const n=e=>{"string"==typeof e||"number"==typeof e?t+=String(e):a(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},Nx=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}),[]),Dx=({label:e,disableInclude:n,disableExclude:i,children:o,onOpen:a,onClose:l})=>{const[s,c]=r(!1),d=m((()=>{const e=!s;c(e),e&&a&&a(),!e&&l&&l()}),[s,a,l]),{includedIds:u,excludedIds:g,onIncludedChange:f,onExcludedChange:b}=p(Mx),v=h((()=>(e=>Ox(e).map((e=>e.id)))(o)),[o]),x=m((()=>{v.every((e=>u.includes(e)))||(f(Array.from(new Set([...u,...v]))),b(g.filter((e=>!v.includes(e)))))}),[v,u,g,f,b]),y=m((()=>{v.every((e=>g.includes(e)))||(b(Array.from(new Set([...g,...v]))),f(u.filter((e=>!v.includes(e)))))}),[v,u,g,f,b]);return t.createElement(t.Fragment,null,t.createElement(ay,null,t.createElement(ly,{type:"button","aria-label":`${e}を開く`,"aria-expanded":s,onClick:d},e),t.createElement(sy,null,t.createElement("li",null,t.createElement("button",{type:"button",disabled:n,"aria-label":"追加",onClick:x},t.createElement(U,{name:"check_thin",color:N.blue[500]}))),t.createElement("li",null,t.createElement("button",{type:"button",disabled:i,"aria-label":"除外",onClick:y},t.createElement(U,{name:"forbid",color:N.red[500]})))),t.createElement(cy,null,t.createElement(U,{name:"arrow_down",color:N.basic[900]}))),s&&o)},Lx=w`
   display: flex;
   gap: 4px;
   box-sizing: border-box;
@@ -2834,9 +2834,9 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   padding-left: 24px;
 `,x(ny)`
   padding-left: 48px;
-`;const hy=({label:e,children:n})=>{const{activeSection:r,setActiveSection:i}=p(Mx),o=h((()=>r===e),[e,r]),a=h((()=>null!==r&&r!==e),[e,r]),l=m((()=>{i(o?null:e)}),[e,o,i]);return a?null:t.createElement($x.Provider,{value:{groupName:e}},t.createElement(py,{type:"button","aria-label":`${e}を開く`,"aria-expanded":o,onClick:l},t.createElement(dy,null,t.createElement(U,{name:"arrow_left",color:N.basic[900]})),t.createElement("div",null,e),t.createElement(uy,null,t.createElement(U,{name:"arrow_right",color:N.basic[900]}))),o&&n)};hy.displayName="DualListBox2Section";const gy=x(ya)`
+`;const hy=({label:e,children:n,onOpen:r,onClose:i})=>{const{activeSection:o,setActiveSection:a}=p(Mx),l=h((()=>o===e),[e,o]),s=h((()=>null!==o&&o!==e),[e,o]),c=m((()=>{const t=!l;a(t?e:null),t&&r&&r(),!t&&i&&i()}),[e,l,a,r,i]);return s?null:t.createElement($x.Provider,{value:{groupName:e}},t.createElement(py,{type:"button","aria-label":`${e}を開く`,"aria-expanded":l,onClick:c},t.createElement(dy,null,t.createElement(U,{name:"arrow_left",color:N.basic[900]})),t.createElement("div",null,e),t.createElement(uy,null,t.createElement(U,{name:"arrow_right",color:N.basic[900]}))),l&&n)};hy.displayName="DualListBox2Section";const gy=x(ya)`
   margin-right: 16px;
-`,fy=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(wc,{width:136,trigger:t.createElement(gy,{append:e},"件数を変更")},n.map((n=>t.createElement(pa,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),by=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}),[]),vy=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:o,onExcludedChange:a}=p(Mx),l=h((()=>r.includes(e)),[r,e]),s=h((()=>i.includes(e)),[i,e]),c=m((()=>{l&&o(r.filter((t=>t!==e))),s&&a(i.filter((t=>t!==e)))}),[l,s,r,i,o,a,e]);return t.createElement(ry,null,n,t.createElement(iy,{type:"button","aria-label":"解除",onClick:c},t.createElement(U,{name:"close_circle",type:"fill",color:"currentColor"})))}));vy.displayName="DualListBox2SelectedItem";const xy=({label:e})=>t.createElement(oy,null,e),yy=n((({included:e,excluded:n,disableInclude:l,disableExclude:s,menuButtons:c,children:d,loading:u,onIncludedChange:p,onExcludedChange:g,onLoadMore:f,pageSize:b=50,pageSizeOptions:x=[10,50,100,200],onPageSizeChange:y,filter:w="",onFilterChange:E,placement:C,middleware:I},k)=>{const[A,M]=r(0),[$,S]=r(""),[O,D]=r(null),[L,H]=r(!1),V=i(null),R=E?w:$,Z=m((e=>{const t=e.target.value;E?E(t):S(t)}),[E]),z=m((()=>{E?E(""):S("")}),[E]),T=m((e=>{D(e),null===e&&z()}),[z]),B=h((()=>{let e=!1;return Sx(d,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===hy.displayName&&(e=!0)})),e}),[d]),P=h((()=>{const e=R.trim();return e?e.split(/\s+/):[]}),[R]),G=h((()=>Ox(d)),[d]),_=h((()=>(e=>{const t={};return Sx(e,(e=>{a(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Ax.displayName&&(t[e.props.id]=e.props.children)})),t})(d)),[d]),F=m((e=>{if(!a(e))return e;if(e.type!==Ax)return e;const t=G.find((t=>t.id===e.props.id));return t&&P.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[P,G]),j=h((()=>P.length?t.Children.map(d,(e=>{if(!a(e))return e;if(e.type===Ax)return F(e);if("string"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Accordion"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(a).map((e=>F(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(a).map((e=>F(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):d),[d,P,F]),W=h((()=>e.map((e=>e.id))),[e]),X=h((()=>n.map((e=>e.id))),[n]),Y=h((()=>G.map((e=>e.id))),[G]),J=h((()=>0===P.length?Y:Y.filter((e=>{const t=G.find((t=>t.id===e));return!!t&&P.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[Y,G,P]),Q=h((()=>{if(!B)return[];if(null===O)return[];const e=[];return Sx(d,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===hy.displayName&&t.props.label===O&&Sx(t.props.children,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Ax.displayName&&e.push(t.props.id)}))})),e}),[O,d,B]),q=h((()=>0===P.length?Q:Q.filter((e=>{const t=G.find((t=>t.id===e));return!!t&&P.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[Q,G,P]),K=h((()=>{if(B){if(null===O)return!0;return!!q.every((e=>W.includes(e)))}return!!J.every((e=>W.includes(e)))}),[B,O,J,q,W]),ee=h((()=>{if(B){if(null===O)return!0;return!!q.every((e=>X.includes(e)))}return!!J.every((e=>X.includes(e)))}),[B,O,J,q,X]),te=m((()=>{e.length&&p([]),n.length&&g([])}),[e,n,p,g]),ne=m((()=>{if(B){if(null===O)return;return p(Array.from(new Set([...W,...q]))),void g(X.filter((e=>!q.includes(e))))}p(Array.from(new Set([...W,...J]))),g(X.filter((e=>!J.includes(e))))}),[J,p,g,B,O,W,X,q]),re=m((()=>{if(B){if(null===O)return;return g(Array.from(new Set([...X,...q]))),void p(W.filter((e=>!q.includes(e))))}g(Array.from(new Set([...X,...J]))),p(W.filter((e=>!J.includes(e))))}),[J,p,g,B,O,W,X,q]),ie=m((async e=>{if(e[0].isIntersecting&&!L&&f){H(!0);try{await f()}finally{H(!1)}}}),[L,f]);return o((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(ie,{root:null,rootMargin:"100px",threshold:.1}),t=V.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[ie]),t.createElement(Hx,{ref:k,role:"region","aria-label":"アイテムの追加、除外選択エリア"},t.createElement(Vx,{role:"tablist","aria-label":"リストの表示切り替え"},t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":0===A,"aria-expanded":0===A,"aria-controls":"list-items-panel",onClick:()=>M(0)},"リストアイテム")),t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":1===A,"aria-expanded":1===A,"aria-controls":"selected-items-panel",onClick:()=>M(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(Rx,null,e.length+n.length)))),t.createElement(Zx,null,t.createElement(Mx.Provider,{value:{filterWords:P,includedIds:W,excludedIds:X,activeSection:O,onIncludedChange:p,onExcludedChange:g,setActiveSection:T}},t.createElement(zx,{isShow:0===A,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Bx,{hasMenu:!(!c&&!y)},t.createElement(Px,null,t.createElement(U,{name:"search",size:"sm",color:N.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:B&&null===O,placeholder:"検索",type:"text",value:R,onChange:Z}),R&&t.createElement(Gx,{type:"button","aria-label":"検索をリセット",onClick:z},t.createElement(U,{name:"close_circle",type:"fill",color:"currentColor"}))),(c||y)&&t.createElement(Ec,null,t.createElement(wc,{trigger:t.createElement(_x,{type:"button"},t.createElement(U,{name:"more_vert",color:N.basic[900]})),placement:C,middleware:I},y&&t.createElement(fy,{pageSize:b,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Fx,null,u?t.createElement(qt,{width:"16px"}):t.createElement(t.Fragment,null,B&&null===O?"-":B?q.length.toLocaleString("en-US"):J.length.toLocaleString("en-US"),"件")),t.createElement(jx,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:K,onClick:ne},t.createElement(U,{name:"check_thin",color:K?N.basic[400]:N.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:ee,onClick:re},t.createElement(U,{name:"forbid",color:ee?N.basic[400]:N.red[500]}),"全て除外")))),t.createElement(Tx,null,j,t.createElement("div",{ref:V,style:{height:"20px"}},u&&t.createElement(my,null,"読み込み中...")))),t.createElement(Wx,{isShow:1===A},t.createElement(Xx,null,t.createElement(Jx,null,0!==e.length&&t.createElement(Qx,null,t.createElement(U,{name:"check_thin",color:N.blue[500]}),e.length),0!==n.length&&t.createElement(qx,null,t.createElement(U,{name:"forbid",color:N.red[500]}),n.length)),t.createElement(Kx,null,t.createElement(rn,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:te},"選択をクリア"))),t.createElement(Yx,null,!!e.length&&t.createElement(ey,null,t.createElement(U,{name:"check_thin",color:N.blue[500]}),"追加"),by(e).map((e=>t.createElement(v,{key:e.groupName||"_"},e.groupName&&t.createElement(xy,{label:e.groupName}),e.items.map((e=>t.createElement(vy,{key:e.id,id:e.id},_[e.id]||e.label)))))),!!n.length&&t.createElement(ey,null,t.createElement(U,{name:"forbid",color:N.red[500]}),"除外"),by(n).map((e=>t.createElement(v,{key:e.groupName||"_"},e.groupName&&t.createElement(xy,{label:e.groupName}),e.items.map((e=>t.createElement(vy,{key:e.id,id:e.id},_[e.id]||e.label)))))))))))}));yy.displayName="DualListBox2";const wy=x.div`
+`,fy=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(wc,{width:136,trigger:t.createElement(gy,{append:e},"件数を変更")},n.map((n=>t.createElement(pa,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),by=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}),[]),vy=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:o,onExcludedChange:a}=p(Mx),l=h((()=>r.includes(e)),[r,e]),s=h((()=>i.includes(e)),[i,e]),c=m((()=>{l&&o(r.filter((t=>t!==e))),s&&a(i.filter((t=>t!==e)))}),[l,s,r,i,o,a,e]);return t.createElement(ry,null,n,t.createElement(iy,{type:"button","aria-label":"解除",onClick:c},t.createElement(U,{name:"close_circle",type:"fill",color:"currentColor"})))}));vy.displayName="DualListBox2SelectedItem";const xy=({label:e})=>t.createElement(oy,null,e),yy=n((({included:e,excluded:n,disableInclude:l,disableExclude:s,menuButtons:c,children:d,loading:u,onIncludedChange:p,onExcludedChange:g,onLoadMore:f,pageSize:b=50,pageSizeOptions:x=[10,50,100,200],onPageSizeChange:y,filter:w="",onFilterChange:E,placement:C,middleware:I},k)=>{const[A,M]=r(0),[$,S]=r(""),[O,D]=r(null),[L,H]=r(!1),V=i(null),R=E?w:$,Z=m((e=>{const t=e.target.value;E?E(t):S(t)}),[E]),z=m((()=>{E?E(""):S("")}),[E]),T=m((e=>{D(e),null===e&&z()}),[z]),B=h((()=>{let e=!1;return Sx(d,(t=>{a(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===hy.displayName&&(e=!0)})),e}),[d]),P=h((()=>{const e=R.trim();return e?e.split(/\s+/):[]}),[R]),G=h((()=>Ox(d)),[d]),_=h((()=>(e=>{const t={};return Sx(e,(e=>{a(e)&&"string"!=typeof e.type&&"symbol"!=typeof e.type&&e.type&&"function"==typeof e.type&&"displayName"in e.type&&e.type.displayName===Ax.displayName&&(t[e.props.id]=e.props.children)})),t})(d)),[d]),F=m((e=>{if(!a(e))return e;if(e.type!==Ax)return e;const t=G.find((t=>t.id===e.props.id));return t&&P.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[P,G]),j=h((()=>P.length?t.Children.map(d,(e=>{if(!a(e))return e;if(e.type===Ax)return F(e);if("string"!=typeof e.type&&"symbol"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Accordion"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(a).map((e=>F(e))).filter(Boolean);return 0===n.length?null:t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}if("string"!=typeof e.type&&"symbol"!=typeof e.type&&"displayName"in e.type&&"DualListBox2Section"===e.type.displayName){const n=t.Children.toArray(e.props.children).filter(a).map((e=>F(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):d),[d,P,F]),W=h((()=>e.map((e=>e.id))),[e]),X=h((()=>n.map((e=>e.id))),[n]),Y=h((()=>G.map((e=>e.id))),[G]),J=h((()=>0===P.length?Y:Y.filter((e=>{const t=G.find((t=>t.id===e));return!!t&&P.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[Y,G,P]),Q=h((()=>{if(!B)return[];if(null===O)return[];const e=[];return Sx(d,(t=>{a(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===hy.displayName&&t.props.label===O&&Sx(t.props.children,(t=>{a(t)&&"string"!=typeof t.type&&"symbol"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Ax.displayName&&e.push(t.props.id)}))})),e}),[O,d,B]),q=h((()=>0===P.length?Q:Q.filter((e=>{const t=G.find((t=>t.id===e));return!!t&&P.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))}))),[Q,G,P]),K=h((()=>{if(B){if(null===O)return!0;return!!q.every((e=>W.includes(e)))}return!!J.every((e=>W.includes(e)))}),[B,O,J,q,W]),ee=h((()=>{if(B){if(null===O)return!0;return!!q.every((e=>X.includes(e)))}return!!J.every((e=>X.includes(e)))}),[B,O,J,q,X]),te=m((()=>{e.length&&p([]),n.length&&g([])}),[e,n,p,g]),ne=m((()=>{if(B){if(null===O)return;return p(Array.from(new Set([...W,...q]))),void g(X.filter((e=>!q.includes(e))))}p(Array.from(new Set([...W,...J]))),g(X.filter((e=>!J.includes(e))))}),[J,p,g,B,O,W,X,q]),re=m((()=>{if(B){if(null===O)return;return g(Array.from(new Set([...X,...q]))),void p(W.filter((e=>!q.includes(e))))}g(Array.from(new Set([...X,...J]))),p(W.filter((e=>!J.includes(e))))}),[J,p,g,B,O,W,X,q]),ie=m((async e=>{if(e[0].isIntersecting&&!L&&f){H(!0);try{await f()}finally{H(!1)}}}),[L,f]);return o((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(ie,{root:null,rootMargin:"100px",threshold:.1}),t=V.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[ie]),t.createElement(Hx,{ref:k,role:"region","aria-label":"アイテムの追加、除外選択エリア"},t.createElement(Vx,{role:"tablist","aria-label":"リストの表示切り替え"},t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":0===A,"aria-expanded":0===A,"aria-controls":"list-items-panel",onClick:()=>M(0)},"リストアイテム")),t.createElement("li",null,t.createElement("button",{type:"button",role:"tab","aria-selected":1===A,"aria-expanded":1===A,"aria-controls":"selected-items-panel",onClick:()=>M(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(Rx,null,e.length+n.length)))),t.createElement(Zx,null,t.createElement(Mx.Provider,{value:{filterWords:P,includedIds:W,excludedIds:X,activeSection:O,onIncludedChange:p,onExcludedChange:g,setActiveSection:T}},t.createElement(zx,{isShow:0===A,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Bx,{hasMenu:!(!c&&!y)},t.createElement(Px,null,t.createElement(U,{name:"search",size:"sm",color:N.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:B&&null===O,placeholder:"検索",type:"text",value:R,onChange:Z}),R&&t.createElement(Gx,{type:"button","aria-label":"検索をリセット",onClick:z},t.createElement(U,{name:"close_circle",type:"fill",color:"currentColor"}))),(c||y)&&t.createElement(Ec,null,t.createElement(wc,{trigger:t.createElement(_x,{type:"button"},t.createElement(U,{name:"more_vert",color:N.basic[900]})),placement:C,middleware:I},y&&t.createElement(fy,{pageSize:b,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Fx,null,u?t.createElement(qt,{width:"16px"}):t.createElement(t.Fragment,null,B&&null===O?"-":B?q.length.toLocaleString("en-US"):J.length.toLocaleString("en-US"),"件")),t.createElement(jx,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:K,onClick:ne},t.createElement(U,{name:"check_thin",color:K?N.basic[400]:N.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:ee,onClick:re},t.createElement(U,{name:"forbid",color:ee?N.basic[400]:N.red[500]}),"全て除外")))),t.createElement(Tx,null,j,t.createElement("div",{ref:V,style:{height:"20px"}},u&&t.createElement(my,null,"読み込み中...")))),t.createElement(Wx,{isShow:1===A},t.createElement(Xx,null,t.createElement(Jx,null,0!==e.length&&t.createElement(Qx,null,t.createElement(U,{name:"check_thin",color:N.blue[500]}),e.length),0!==n.length&&t.createElement(qx,null,t.createElement(U,{name:"forbid",color:N.red[500]}),n.length)),t.createElement(Kx,null,t.createElement(rn,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:te},"選択をクリア"))),t.createElement(Yx,null,!!e.length&&t.createElement(ey,null,t.createElement(U,{name:"check_thin",color:N.blue[500]}),"追加"),by(e).map((e=>t.createElement(v,{key:e.groupName||"_"},e.groupName&&t.createElement(xy,{label:e.groupName}),e.items.map((e=>t.createElement(vy,{key:e.id,id:e.id},_[e.id]||e.selectedContent||e.label)))))),!!n.length&&t.createElement(ey,null,t.createElement(U,{name:"forbid",color:N.red[500]}),"除外"),by(n).map((e=>t.createElement(v,{key:e.groupName||"_"},e.groupName&&t.createElement(xy,{label:e.groupName}),e.items.map((e=>t.createElement(vy,{key:e.id,id:e.id},_[e.id]||e.selectedContent||e.label)))))))))))}));yy.displayName="DualListBox2";const wy=x.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -4312,6 +4312,7 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   white-space: nowrap;
   padding: 0 6px;
   width: 100%;
+  height: 100%;
   text-align: left;
 `,RI=x.span`
   ${B}