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.
|
@@ -7,7 +7,9 @@ export declare const LeftPanel: import("styled-components").StyledComponent<"div
|
|
|
7
7
|
isShow: boolean;
|
|
8
8
|
}, never>;
|
|
9
9
|
export declare const LeftPanelBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
-
export declare const LeftPanelHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
10
|
+
export declare const LeftPanelHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
11
|
+
hasMenu?: boolean | undefined;
|
|
12
|
+
}, never>;
|
|
11
13
|
export declare const HeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
14
|
export declare const HeaderSearchReset: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
13
15
|
export declare const HeaderMenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
package/dist/index.es.js
CHANGED
|
@@ -1800,9 +1800,8 @@ var to=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
1800
1800
|
`,Ev=v.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 to=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
|
|
|
2202
2201
|
padding-left: 48px;
|
|
2203
2202
|
`;const Qv=({label:e,children:n})=>{const{activeSection:r,setActiveSection:i}=g(dv),o=p((()=>r===e),[e,r]),a=p((()=>null!==r&&r!==e),[e,r]),l=d((()=>{i(o?null:e)}),[e,o,i]);return a?null:t.createElement(uv.Provider,{value:{groupName:e}},t.createElement(Jv,{type:"button","aria-label":`${e}を開く`,"aria-expanded":o,onClick:l},t.createElement(Xv,null,t.createElement(X,{name:"arrow_left",color:N.basic[900]})),t.createElement("div",null,e),t.createElement(Yv,null,t.createElement(X,{name:"arrow_right",color:N.basic[900]}))),o&&n)};Qv.displayName="DualListBox2Section";const _v=v(ul)`
|
|
2204
2203
|
margin-right: 16px;
|
|
2205
|
-
`,Kv=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(ud,{width:136,trigger:t.createElement(_v,{append:e},"件数を変更")},n.map((n=>t.createElement(rl,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),qv=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}),[]),ex=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:o,onExcludedChange:a}=g(dv),l=p((()=>r.includes(e)),[r,e]),s=p((()=>i.includes(e)),[i,e]),c=d((()=>{l&&o(r.filter((t=>t!==e))),s&&a(i.filter((t=>t!==e)))}),[l,s,r,i,o,a,e]);return t.createElement(Bv,null,n,t.createElement("button",{type:"button","aria-label":"解除",onClick:c}))}));ex.displayName="DualListBox2SelectedItem";const tx=({label:e})=>t.createElement(Gv,null,e),nx=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,A]=r(0),[k,M]=r(""),[H,V]=r(null),[Z,D]=r(!1),L=i(null),O=C?w:k,R=d((e=>{const t=e.target.value;C?C(t):M(t)}),[C]),S=d((()=>{C?C(""):M("")}),[C]),T=d((e=>{V(e),null===e&&S()}),[S]),$=p((()=>{let e=!1;return pv(u,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Qv.displayName&&(e=!0)})),e}),[u]),z=p((()=>{const e=O.trim();return e?e.split(/\s+/):[]}),[O]),B=p((()=>mv(u)),[u]),G=d((e=>{if(!a(e))return e;if(e.type!==cv)return e;const t=B.find((t=>t.id===e.props.id));return t&&z.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[z,B]),W=p((()=>z.length?t.Children.map(u,(e=>{if(!a(e))return e;if(e.type===cv)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(a).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(a).map((e=>G(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):u),[u,z,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]),Y=p((()=>0===z.length?F:F.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&z.every((e=>t.label.includes(e)))}))),[F,B,z]),J=p((()=>{if(!$)return[];if(null===H)return[];const e=[];return pv(u,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Qv.displayName&&t.props.label===H&&pv(t.props.children,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===cv.displayName&&e.push(t.props.id)}))})),e}),[H,u,$]),U=p((()=>0===z.length?J:J.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&z.every((e=>t.label.includes(e)))}))),[J,B,z]),Q=p((()=>{if($){if(null===H)return!0;return!!U.every((e=>P.includes(e)))}return!!Y.every((e=>P.includes(e)))}),[$,H,Y,U,P]),_=p((()=>{if($){if(null===H)return!0;return!!U.every((e=>j.includes(e)))}return!!Y.every((e=>j.includes(e)))}),[$,H,Y,U,j]),K=d((()=>{e.length&&g([]),n.length&&h([])}),[e,n,g,h]),q=d((()=>{if($){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,...Y]))),h(j.filter((e=>!Y.includes(e))))}),[Y,g,h,$,H,P,j,U]),ee=d((()=>{if($){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,...Y]))),g(P.filter((e=>!Y.includes(e))))}),[Y,g,h,$,H,P,j,U]),te=d((async e=>{if(e[0].isIntersecting&&!Z&&f){D(!0);try{await f()}finally{D(!1)}}}),[Z,f]);return o((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(te,{root:null,rootMargin:"100px",threshold:.1}),t=L.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[te]),t.createElement(bv,{ref:E,role:"region","aria-label":"デュアルリストボックス"},t.createElement(vv,{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:()=>A(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:()=>A(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(xv,null,e.length+n.length)))),t.createElement(yv,null,t.createElement(dv.Provider,{value:{filterWords:z,includedIds:P,excludedIds:j,activeSection:H,onIncludedChange:g,onExcludedChange:h,setActiveSection:T}},t.createElement(wv,{isShow:0===I,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Ev,
|
|
2204
|
+
`,Kv=({pageSize:e,pageSizeOptions:n,onPageSizeChange:r})=>t.createElement(ud,{width:136,trigger:t.createElement(_v,{append:e},"件数を変更")},n.map((n=>t.createElement(rl,{key:n,closeOnChange:!0,checked:e===n,onChange:()=>r(n)},n,"件")))),qv=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}),[]),ex=t.memo((({id:e,children:n})=>{const{includedIds:r,excludedIds:i,onIncludedChange:o,onExcludedChange:a}=g(dv),l=p((()=>r.includes(e)),[r,e]),s=p((()=>i.includes(e)),[i,e]),c=d((()=>{l&&o(r.filter((t=>t!==e))),s&&a(i.filter((t=>t!==e)))}),[l,s,r,i,o,a,e]);return t.createElement(Bv,null,n,t.createElement("button",{type:"button","aria-label":"解除",onClick:c}))}));ex.displayName="DualListBox2SelectedItem";const tx=({label:e})=>t.createElement(Gv,null,e),nx=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,A]=r(0),[k,M]=r(""),[H,V]=r(null),[Z,D]=r(!1),L=i(null),O=C?w:k,R=d((e=>{const t=e.target.value;C?C(t):M(t)}),[C]),S=d((()=>{C?C(""):M("")}),[C]),T=d((e=>{V(e),null===e&&S()}),[S]),$=p((()=>{let e=!1;return pv(u,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Qv.displayName&&(e=!0)})),e}),[u]),z=p((()=>{const e=O.trim();return e?e.split(/\s+/):[]}),[O]),B=p((()=>mv(u)),[u]),G=d((e=>{if(!a(e))return e;if(e.type!==cv)return e;const t=B.find((t=>t.id===e.props.id));return t&&z.every((e=>t.label.toLowerCase().includes(e.toLowerCase())))?e:null}),[z,B]),W=p((()=>z.length?t.Children.map(u,(e=>{if(!a(e))return e;if(e.type===cv)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(a).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(a).map((e=>G(e))).filter(Boolean);return t.cloneElement(e,Object.assign(Object.assign({},e.props),{children:n}))}return e})):u),[u,z,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]),Y=p((()=>0===z.length?F:F.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&z.every((e=>t.label.includes(e)))}))),[F,B,z]),J=p((()=>{if(!$)return[];if(null===H)return[];const e=[];return pv(u,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===Qv.displayName&&t.props.label===H&&pv(t.props.children,(t=>{a(t)&&"string"!=typeof t.type&&"displayName"in t.type&&t.type.displayName===cv.displayName&&e.push(t.props.id)}))})),e}),[H,u,$]),U=p((()=>0===z.length?J:J.filter((e=>{const t=B.find((t=>t.id===e));return!!t&&z.every((e=>t.label.includes(e)))}))),[J,B,z]),Q=p((()=>{if($){if(null===H)return!0;return!!U.every((e=>P.includes(e)))}return!!Y.every((e=>P.includes(e)))}),[$,H,Y,U,P]),_=p((()=>{if($){if(null===H)return!0;return!!U.every((e=>j.includes(e)))}return!!Y.every((e=>j.includes(e)))}),[$,H,Y,U,j]),K=d((()=>{e.length&&g([]),n.length&&h([])}),[e,n,g,h]),q=d((()=>{if($){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,...Y]))),h(j.filter((e=>!Y.includes(e))))}),[Y,g,h,$,H,P,j,U]),ee=d((()=>{if($){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,...Y]))),g(P.filter((e=>!Y.includes(e))))}),[Y,g,h,$,H,P,j,U]),te=d((async e=>{if(e[0].isIntersecting&&!Z&&f){D(!0);try{await f()}finally{D(!1)}}}),[Z,f]);return o((()=>{if("undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver(te,{root:null,rootMargin:"100px",threshold:.1}),t=L.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}}),[te]),t.createElement(bv,{ref:E,role:"region","aria-label":"デュアルリストボックス"},t.createElement(vv,{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:()=>A(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:()=>A(1)},"選択済みアイテム",(e.length>0||n.length>0)&&t.createElement(xv,null,e.length+n.length)))),t.createElement(yv,null,t.createElement(dv.Provider,{value:{filterWords:z,includedIds:P,excludedIds:j,activeSection:H,onIncludedChange:g,onExcludedChange:h,setActiveSection:T}},t.createElement(wv,{isShow:0===I,id:"list-items-panel",role:"tabpanel","aria-labelledby":"list-items-tab"},t.createElement(Ev,{hasMenu:!(!c&&!y)},t.createElement(Iv,null,t.createElement(X,{name:"search",size:"sm",color:N.basic[600]}),t.createElement("input",{"aria-label":"アイテムを検索",disabled:$&&null===H,placeholder:"検索",type:"text",value:O,onChange:R}),O&&t.createElement(Av,{type:"button","aria-label":"検索をリセット",onClick:S})),(c||y)&&t.createElement(pd,null,t.createElement(ud,{trigger:t.createElement(kv,{type:"button"},t.createElement(X,{name:"more_vert",color:N.basic[900]}))},y&&t.createElement(Kv,{pageSize:v,pageSizeOptions:x,onPageSizeChange:y}),c)),t.createElement(Mv,null,m?t.createElement(ir,{width:"16px"}):t.createElement(t.Fragment,null,$&&null===H?"-":$?U.length.toLocaleString("en-US"):Y.length.toLocaleString("en-US"),"件")),t.createElement(Hv,null,!l&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:Q,onClick:q},t.createElement(X,{name:"check_thin",color:Q?N.basic[400]:N.blue[500]}),"全て追加")),!s&&t.createElement("li",null,t.createElement("button",{type:"button",disabled:_,onClick:ee},t.createElement(X,{name:"forbid",color:_?N.basic[400]:N.red[500]}),"全て除外")))),t.createElement(Cv,null,W,t.createElement("div",{ref:L,style:{height:"20px"}},m&&t.createElement(Uv,null,"読み込み中...")))),t.createElement(Nv,{isShow:1===I},t.createElement(Vv,null,t.createElement(Dv,null,0!==e.length&&t.createElement(Ov,null,t.createElement(X,{name:"check_thin",color:N.blue[500]}),e.length),0!==n.length&&t.createElement(Rv,null,t.createElement(X,{name:"forbid",color:N.red[500]}),n.length)),t.createElement(Sv,null,t.createElement(Nt,{type:"button",color:"basicLight",size:"small",disabled:!e.length&&!n.length,onClick:K},"選択をクリア"))),t.createElement(Zv,null,!!e.length&&t.createElement(Tv,null,t.createElement(X,{name:"check_thin",color:N.blue[500]}),"追加"),qv(e).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(tx,{label:e.groupName}),e.items.map((e=>t.createElement(ex,{key:e.id,id:e.id},e.label)))))),!!n.length&&t.createElement(Tv,null,t.createElement(X,{name:"forbid",color:N.red[500]}),"除外"),qv(n).map((e=>t.createElement(b,{key:e.groupName||"_"},e.groupName&&t.createElement(tx,{label:e.groupName}),e.items.map((e=>t.createElement(ex,{key:e.id,id:e.id},e.label)))))))))))}));nx.displayName="DualListBox2";const rx=e.forwardRef((function({children:t},n){const r=G();return e.createElement(J,{ref:n,display:"flex",alignItems:"center"},e.createElement(It,{pr:.5},e.createElement(X,{name:"alert",color:r.palette.danger.main,size:"md"})),e.createElement(oe,{color:r.palette.danger.main},t))})),ix=v.div`
|
|
2206
2205
|
display: flex;
|
|
2207
2206
|
justify-content: center;
|
|
2208
2207
|
align-items: center;
|