ingred-ui 22.3.1 → 22.3.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/index.js
CHANGED
|
@@ -1800,9 +1800,8 @@ var Za=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
1800
1800
|
`,Wb=o.default.div`
|
|
1801
1801
|
display: grid;
|
|
1802
1802
|
grid-template:
|
|
1803
|
-
"search search search search
|
|
1804
|
-
|
|
1805
|
-
auto auto 1fr auto;
|
|
1803
|
+
${({hasMenu:e=!1})=>e?'"search search menu"\n "count buttons buttons"':'"search search search"\n "count buttons buttons"'} /
|
|
1804
|
+
auto 1fr auto;
|
|
1806
1805
|
align-items: center;
|
|
1807
1806
|
gap: 8px;
|
|
1808
1807
|
padding: 16px;
|
|
@@ -2202,7 +2201,7 @@ var Za=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
2202
2201
|
padding-left: 48px;
|
|
2203
2202
|
`;const hv=({label:t,children:n})=>{const{activeSection:r,setActiveSection:a}=e.useContext(Zb),o=e.useMemo((()=>r===t),[t,r]),l=e.useMemo((()=>null!==r&&r!==t),[t,r]),s=e.useCallback((()=>{a(o?null:t)}),[t,o,a]);return l?null:i.default.createElement(Db.Provider,{value:{groupName:t}},i.default.createElement(mv,{type:"button","aria-label":`${t}を開く`,"aria-expanded":o,onClick:s},i.default.createElement(pv,null,i.default.createElement(I,{name:"arrow_left",color:c.basic[900]})),i.default.createElement("div",null,t),i.default.createElement(fv,null,i.default.createElement(I,{name:"arrow_right",color:c.basic[900]}))),o&&n)};hv.displayName="DualListBox2Section";const bv=o.default(Po)`
|
|
2204
2203
|
margin-right: 16px;
|
|
2205
|
-
`,vv=({pageSize:e,pageSizeOptions:t,onPageSizeChange:n})=>i.default.createElement(Gc,{width:136,trigger:i.default.createElement(bv,{append:e},"件数を変更")},t.map((t=>i.default.createElement(So,{key:t,closeOnChange:!0,checked:e===t,onChange:()=>n(t)},t,"件")))),xv=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}),[]),yv=i.default.memo((({id:t,children:n})=>{const{includedIds:r,excludedIds:a,onIncludedChange:o,onExcludedChange:l}=e.useContext(Zb),s=e.useMemo((()=>r.includes(t)),[r,t]),c=e.useMemo((()=>a.includes(t)),[a,t]),u=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(ov,null,n,i.default.createElement("button",{type:"button","aria-label":"解除",onClick:u}))}));yv.displayName="DualListBox2SelectedItem";const wv=({label:e})=>i.default.createElement(lv,null,e),Cv=e.forwardRef((({included:t,excluded:n,disableInclude:r,disableExclude:a,menuButtons:o,children:l,loading:s,onIncludedChange:u,onExcludedChange:d,onLoadMore:p,pageSize:f=50,pageSizeOptions:m=[10,50,100,200],onPageSizeChange:g,filter:h="",onFilterChange:b},v)=>{const[x,y]=e.useState(0),[w,C]=e.useState(""),[E,k]=e.useState(null),[A,M]=e.useState(!1),H=e.useRef(null),N=b?h:w,V=e.useCallback((e=>{const t=e.target.value;b?b(t):C(t)}),[b]),Z=e.useCallback((()=>{b?b(""):C("")}),[b]),D=e.useCallback((e=>{k(e),null===e&&Z()}),[Z]),L=e.useMemo((()=>{let t=!1;return Lb(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===hv.displayName&&(t=!0)})),t}),[l]),S=e.useMemo((()=>{const e=N.trim();return e?e.split(/\s+/):[]}),[N]),O=e.useMemo((()=>Sb(l)),[l]),R=e.useCallback((t=>{if(!e.isValidElement(t))return t;if(t.type!==Vb)return t;const n=O.find((e=>e.id===t.props.id));return n&&S.every((e=>n.label.toLowerCase().includes(e.toLowerCase())))?t:null}),[S,O]),T=e.useMemo((()=>S.length?i.default.Children.map(l,(t=>{if(!e.isValidElement(t))return t;if(t.type===Vb)return R(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=>R(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=>R(e))).filter(Boolean);return i.default.cloneElement(t,Object.assign(Object.assign({},t.props),{children:n}))}return t})):l),[l,S,R]),$=e.useMemo((()=>t.map((e=>e.id))),[t]),z=e.useMemo((()=>n.map((e=>e.id))),[n]),B=e.useMemo((()=>O.map((e=>e.id))),[O]),G=e.useMemo((()=>0===S.length?B:B.filter((e=>{const t=O.find((t=>t.id===e));return!!t&&S.every((e=>t.label.includes(e)))}))),[B,O,S]),P=e.useMemo((()=>{if(!L)return[];if(null===E)return[];const t=[];return Lb(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===hv.displayName&&n.props.label===E&&Lb(n.props.children,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Vb.displayName&&t.push(n.props.id)}))})),t}),[E,l,L]),W=e.useMemo((()=>0===S.length?P:P.filter((e=>{const t=O.find((t=>t.id===e));return!!t&&S.every((e=>t.label.includes(e)))}))),[P,O,S]),j=e.useMemo((()=>{if(L){if(null===E)return!0;return!!W.every((e=>$.includes(e)))}return!!G.every((e=>$.includes(e)))}),[L,E,G,W,$]),F=e.useMemo((()=>{if(L){if(null===E)return!0;return!!W.every((e=>z.includes(e)))}return!!G.every((e=>z.includes(e)))}),[L,E,G,W,z]),X=e.useCallback((()=>{t.length&&u([]),n.length&&d([])}),[t,n,u,d]),Y=e.useCallback((()=>{if(L){if(null===E)return;return u(Array.from(new Set([...$,...W]))),void d(z.filter((e=>!W.includes(e))))}u(Array.from(new Set([...$,...G]))),d(z.filter((e=>!G.includes(e))))}),[G,u,d,L,E,$,z,W]),J=e.useCallback((()=>{if(L){if(null===E)return;return d(Array.from(new Set([...z,...W]))),void u($.filter((e=>!W.includes(e))))}d(Array.from(new Set([...z,...G]))),u($.filter((e=>!G.includes(e))))}),[G,u,d,L,E,$,z,W]),U=e.useCallback((async e=>{if(e[0].isIntersecting&&!A&&p){M(!0);try{await p()}finally{M(!1)}}}),[A,p]);return e.useEffect((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(U,{root:null,rootMargin:"100px",threshold:.1}),t=H.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[U]),i.default.createElement(Tb,{ref:v,role:"region","aria-label":"デュアルリストボックス"},i.default.createElement($b,{role:"tablist","aria-label":"リストの表示切り替え"},i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":0===x,"aria-expanded":0===x,"aria-controls":"list-items-panel",onClick:()=>y(0)},"リストアイテム")),i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":1===x,"aria-expanded":1===x,"aria-controls":"selected-items-panel",onClick:()=>y(1)},"選択済みアイテム",(t.length>0||n.length>0)&&i.default.createElement(zb,null,t.length+n.length)))),i.default.createElement(Bb,null,i.default.createElement(Zb.Provider,{value:{filterWords:S,includedIds:$,excludedIds:z,activeSection:E,onIncludedChange:u,onExcludedChange:d,setActiveSection:D}},i.default.createElement(Gb,{isShow:0===x,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},i.default.createElement(Wb,
|
|
2204
|
+
`,vv=({pageSize:e,pageSizeOptions:t,onPageSizeChange:n})=>i.default.createElement(Gc,{width:136,trigger:i.default.createElement(bv,{append:e},"件数を変更")},t.map((t=>i.default.createElement(So,{key:t,closeOnChange:!0,checked:e===t,onChange:()=>n(t)},t,"件")))),xv=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}),[]),yv=i.default.memo((({id:t,children:n})=>{const{includedIds:r,excludedIds:a,onIncludedChange:o,onExcludedChange:l}=e.useContext(Zb),s=e.useMemo((()=>r.includes(t)),[r,t]),c=e.useMemo((()=>a.includes(t)),[a,t]),u=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(ov,null,n,i.default.createElement("button",{type:"button","aria-label":"解除",onClick:u}))}));yv.displayName="DualListBox2SelectedItem";const wv=({label:e})=>i.default.createElement(lv,null,e),Cv=e.forwardRef((({included:t,excluded:n,disableInclude:r,disableExclude:a,menuButtons:o,children:l,loading:s,onIncludedChange:u,onExcludedChange:d,onLoadMore:p,pageSize:f=50,pageSizeOptions:m=[10,50,100,200],onPageSizeChange:g,filter:h="",onFilterChange:b},v)=>{const[x,y]=e.useState(0),[w,C]=e.useState(""),[E,k]=e.useState(null),[A,M]=e.useState(!1),H=e.useRef(null),N=b?h:w,V=e.useCallback((e=>{const t=e.target.value;b?b(t):C(t)}),[b]),Z=e.useCallback((()=>{b?b(""):C("")}),[b]),D=e.useCallback((e=>{k(e),null===e&&Z()}),[Z]),L=e.useMemo((()=>{let t=!1;return Lb(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===hv.displayName&&(t=!0)})),t}),[l]),S=e.useMemo((()=>{const e=N.trim();return e?e.split(/\s+/):[]}),[N]),O=e.useMemo((()=>Sb(l)),[l]),R=e.useCallback((t=>{if(!e.isValidElement(t))return t;if(t.type!==Vb)return t;const n=O.find((e=>e.id===t.props.id));return n&&S.every((e=>n.label.toLowerCase().includes(e.toLowerCase())))?t:null}),[S,O]),T=e.useMemo((()=>S.length?i.default.Children.map(l,(t=>{if(!e.isValidElement(t))return t;if(t.type===Vb)return R(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=>R(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=>R(e))).filter(Boolean);return i.default.cloneElement(t,Object.assign(Object.assign({},t.props),{children:n}))}return t})):l),[l,S,R]),$=e.useMemo((()=>t.map((e=>e.id))),[t]),z=e.useMemo((()=>n.map((e=>e.id))),[n]),B=e.useMemo((()=>O.map((e=>e.id))),[O]),G=e.useMemo((()=>0===S.length?B:B.filter((e=>{const t=O.find((t=>t.id===e));return!!t&&S.every((e=>t.label.includes(e)))}))),[B,O,S]),P=e.useMemo((()=>{if(!L)return[];if(null===E)return[];const t=[];return Lb(l,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===hv.displayName&&n.props.label===E&&Lb(n.props.children,(n=>{e.isValidElement(n)&&"string"!=typeof n.type&&"displayName"in n.type&&n.type.displayName===Vb.displayName&&t.push(n.props.id)}))})),t}),[E,l,L]),W=e.useMemo((()=>0===S.length?P:P.filter((e=>{const t=O.find((t=>t.id===e));return!!t&&S.every((e=>t.label.includes(e)))}))),[P,O,S]),j=e.useMemo((()=>{if(L){if(null===E)return!0;return!!W.every((e=>$.includes(e)))}return!!G.every((e=>$.includes(e)))}),[L,E,G,W,$]),F=e.useMemo((()=>{if(L){if(null===E)return!0;return!!W.every((e=>z.includes(e)))}return!!G.every((e=>z.includes(e)))}),[L,E,G,W,z]),X=e.useCallback((()=>{t.length&&u([]),n.length&&d([])}),[t,n,u,d]),Y=e.useCallback((()=>{if(L){if(null===E)return;return u(Array.from(new Set([...$,...W]))),void d(z.filter((e=>!W.includes(e))))}u(Array.from(new Set([...$,...G]))),d(z.filter((e=>!G.includes(e))))}),[G,u,d,L,E,$,z,W]),J=e.useCallback((()=>{if(L){if(null===E)return;return d(Array.from(new Set([...z,...W]))),void u($.filter((e=>!W.includes(e))))}d(Array.from(new Set([...z,...G]))),u($.filter((e=>!G.includes(e))))}),[G,u,d,L,E,$,z,W]),U=e.useCallback((async e=>{if(e[0].isIntersecting&&!A&&p){M(!0);try{await p()}finally{M(!1)}}}),[A,p]);return e.useEffect((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(U,{root:null,rootMargin:"100px",threshold:.1}),t=H.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[U]),i.default.createElement(Tb,{ref:v,role:"region","aria-label":"デュアルリストボックス"},i.default.createElement($b,{role:"tablist","aria-label":"リストの表示切り替え"},i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":0===x,"aria-expanded":0===x,"aria-controls":"list-items-panel",onClick:()=>y(0)},"リストアイテム")),i.default.createElement("li",null,i.default.createElement("button",{type:"button",role:"tab","aria-selected":1===x,"aria-expanded":1===x,"aria-controls":"selected-items-panel",onClick:()=>y(1)},"選択済みアイテム",(t.length>0||n.length>0)&&i.default.createElement(zb,null,t.length+n.length)))),i.default.createElement(Bb,null,i.default.createElement(Zb.Provider,{value:{filterWords:S,includedIds:$,excludedIds:z,activeSection:E,onIncludedChange:u,onExcludedChange:d,setActiveSection:D}},i.default.createElement(Gb,{isShow:0===x,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},i.default.createElement(Wb,{hasMenu:!(!o&&!g)},i.default.createElement(jb,null,i.default.createElement(I,{name:"search",size:"sm",color:c.basic[600]}),i.default.createElement("input",{"aria-label":"アイテムを検索",disabled:L&&null===E,placeholder:"検索",type:"text",value:N,onChange:V}),N&&i.default.createElement(Fb,{type:"button","aria-label":"検索をリセット",onClick:Z})),(o||g)&&i.default.createElement(Pc,null,i.default.createElement(Gc,{trigger:i.default.createElement(Xb,{type:"button"},i.default.createElement(I,{name:"more_vert",color:c.basic[900]}))},g&&i.default.createElement(vv,{pageSize:f,pageSizeOptions:m,onPageSizeChange:g}),o)),i.default.createElement(Yb,null,s?i.default.createElement($n,{width:"16px"}):i.default.createElement(i.default.Fragment,null,L&&null===E?"-":L?W.length.toLocaleString("en-US"):G.length.toLocaleString("en-US"),"件")),i.default.createElement(Jb,null,!r&&i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:j,onClick:Y},i.default.createElement(I,{name:"check_thin",color:j?c.basic[400]:c.blue[500]}),"全て追加")),!a&&i.default.createElement("li",null,i.default.createElement("button",{type:"button",disabled:F,onClick:J},i.default.createElement(I,{name:"forbid",color:F?c.basic[400]:c.red[500]}),"全て除外")))),i.default.createElement(Pb,null,T,i.default.createElement("div",{ref:H,style:{height:"20px"}},s&&i.default.createElement(gv,null,"読み込み中...")))),i.default.createElement(Ub,{isShow:1===x},i.default.createElement(Qb,null,i.default.createElement(qb,null,0!==t.length&&i.default.createElement(ev,null,i.default.createElement(I,{name:"check_thin",color:c.blue[500]}),t.length),0!==n.length&&i.default.createElement(tv,null,i.default.createElement(I,{name:"forbid",color:c.red[500]}),n.length)),i.default.createElement(nv,null,i.default.createElement(st,{type:"button",color:"basicLight",size:"small",disabled:!t.length&&!n.length,onClick:X},"選択をクリア"))),i.default.createElement(_b,null,!!t.length&&i.default.createElement(rv,null,i.default.createElement(I,{name:"check_thin",color:c.blue[500]}),"追加"),xv(t).map((t=>i.default.createElement(e.Fragment,{key:t.groupName||"_"},t.groupName&&i.default.createElement(wv,{label:t.groupName}),t.items.map((e=>i.default.createElement(yv,{key:e.id,id:e.id},e.label)))))),!!n.length&&i.default.createElement(rv,null,i.default.createElement(I,{name:"forbid",color:c.red[500]}),"除外"),xv(n).map((t=>i.default.createElement(e.Fragment,{key:t.groupName||"_"},t.groupName&&i.default.createElement(wv,{label:t.groupName}),t.items.map((e=>i.default.createElement(yv,{key:e.id,id:e.id},e.label)))))))))))}));Cv.displayName="DualListBox2";const Ev=i.forwardRef((function({children:e},t){const n=x();return i.createElement(A,{ref:t,display:"flex",alignItems:"center"},i.createElement(rt,{pr:.5},i.createElement(I,{name:"alert",color:n.palette.danger.main,size:"md"})),i.createElement(T,{color:n.palette.danger.main},e))})),Iv=o.default.div`
|
|
2206
2205
|
display: flex;
|
|
2207
2206
|
justify-content: center;
|
|
2208
2207
|
align-items: center;
|