diff --git a/lib/components/Input/MultiSelectInput/MultiSelectInput.js b/lib/components/Input/MultiSelectInput/MultiSelectInput.js index 0ceb6f30..52270abf 100644 --- a/lib/components/Input/MultiSelectInput/MultiSelectInput.js +++ b/lib/components/Input/MultiSelectInput/MultiSelectInput.js @@ -1,4 +1,4 @@ -"use strict";var ae=Object.defineProperty,ce=Object.defineProperties;var de=Object.getOwnPropertyDescriptors;var I=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var N=(t,r,i)=>r in t?ae(t,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[r]=i,O=(t,r)=>{for(var i in r||(r={}))F.call(r,i)&&N(t,i,r[i]);if(I)for(var i of I(r))L.call(r,i)&&N(t,i,r[i]);return t},q=(t,r)=>ce(t,de(r));var R=(t,r)=>{var i={};for(var o in t)F.call(t,o)&&r.indexOf(o)<0&&(i[o]=t[o]);if(t!=null&&I)for(var o of I(t))r.indexOf(o)<0&&L.call(t,o)&&(i[o]=t[o]);return i};var s=require("react/jsx-runtime"),a=require("react"),fe=require("styled-components"),P=require("../../../shared/array.js"),z=require("../../../shared/key.js"),ve=require("../common/Overlay.js"),xe=require("../../IconButton/IconButton.js"),we=require("../../../hooks/useBooleanState.js"),K=require("../../../hooks/useShortcut.js"),u=require("../../../theme/theme.js"),ye=require("../../../icons/ArrowDownIcon.js"),ge=require("./ChipInput.js"),Ie=require("../../../hooks/usePagination.js");function U(t){return t&&t.__esModule?t:{default:t}}var _=U(a),f=U(fe);const Oe=f.default.div` +"use strict";var ae=Object.defineProperty,ce=Object.defineProperties;var de=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var N=(t,r,i)=>r in t?ae(t,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[r]=i,I=(t,r)=>{for(var i in r||(r={}))P.call(r,i)&&N(t,i,r[i]);if(O)for(var i of O(r))F.call(r,i)&&N(t,i,r[i]);return t},b=(t,r)=>ce(t,de(r));var j=(t,r)=>{var i={};for(var o in t)P.call(t,o)&&r.indexOf(o)<0&&(i[o]=t[o]);if(t!=null&&O)for(var o of O(t))r.indexOf(o)<0&&F.call(t,o)&&(i[o]=t[o]);return i};var s=require("react/jsx-runtime"),a=require("react"),fe=require("styled-components"),L=require("../../../shared/array.js"),z=require("../../../shared/key.js"),ve=require("../common/Overlay.js"),xe=require("../../IconButton/IconButton.js"),we=require("../../../hooks/useBooleanState.js"),K=require("../../../hooks/useShortcut.js"),u=require("../../../theme/theme.js"),ye=require("../../../icons/ArrowDownIcon.js"),ge=require("./ChipInput.js"),Oe=require("../../../hooks/usePagination.js");function U(t){return t&&t.__esModule?t:{default:t}}var h=U(a),f=U(fe);const Ie=f.default.div` width: 100%; & input[type='text'] { @@ -9,9 +9,9 @@ z-index: 2; } } -`,qe=f.default.div` +`,be=f.default.div` position: relative; -`,Re=f.default.div` +`,je=f.default.div` position: absolute; right: 8px; top: 0; @@ -19,7 +19,7 @@ display: flex; align-items: center; gap: 10px; -`,$e=f.default.div` +`,qe=f.default.div` background: ${u.getColor("white")}; height: 34px; padding: 0 20px; @@ -46,7 +46,7 @@ &:disabled { color: ${u.getColor("grey",100)}; } -`,be=f.default.div` +`,Re=f.default.div` background: ${u.getColor("white")}; height: 34px; padding: 0 20px 0 0; @@ -58,7 +58,7 @@ color: ${u.getColor("grey",100)}; line-height: 34px; text-transform: uppercase; -`,je=f.default.div` +`,$e=f.default.div` background: ${u.getColor("white")}; height: 20px; padding: 0 20px; @@ -73,4 +73,4 @@ max-height: 320px; overflow-y: auto; padding-left: ${({withGroups:t})=>t?"20px":"0"}; -`,W=i=>{var o=i,{children:t}=o,r=R(o,["children"]);return s.jsx("span",q(O({},r),{children:t}))},H=i=>{var o=i,{children:t}=o,r=R(o,["children"]);return s.jsx("span",q(O({},r),{children:t}))},h=ke=>{var V=ke,{id:t,placeholder:r,invalid:i,value:o,invalidValue:J=[],emptyResultLabel:Q,children:T=[],onChange:c,removeLabel:X,onSubmit:$,openLabel:Y,readOnly:v=!1,verticalPosition:Ee,onNextPage:Z,onSearchChange:n,disableInternalSearch:C=!1,lockedValues:S=[],"aria-labelledby":Me}=V,ee=R(V,["id","placeholder","invalid","value","invalidValue","emptyResultLabel","children","onChange","removeLabel","onSubmit","openLabel","readOnly","verticalPosition","onNextPage","onSearchChange","disableInternalSearch","lockedValues","aria-labelledby"]);const[B,w]=a.useState(""),[te,re]=a.useState(!1),[b,j,m]=we.useBooleanState(),x=a.useRef(null),A=a.useRef(null),D=a.useRef(null),E=a.useRef(null),M=_.default.Children.toArray(T).filter(e=>a.isValidElement(e)),y=e=>(e==null?void 0:e.type.displayName)==="MultiSelectInput.OptionGroup",k=e=>(e==null?void 0:e.type.displayName)==="MultiSelectInput.Option",oe=M.reduce((e,l)=>{if(y(l))return e;const d=l.props.children,g=l.props.value;if(typeof d!="string")throw new Error("Multi select only accepts string as Option");if(g in e)throw new Error(`Duplicate option value ${g}`);return e[g]={code:g,label:d},e},{}),p=C?M:M.filter(e=>{const l=e.props.value,d=l+e.props.children;return y(e)||!o.includes(l)&&d.toLowerCase().includes(B.toLowerCase())}),le=a.useMemo(()=>p.some(e=>k(e)),[p]),ie=()=>{if(p.length>0&&b){const e=p.findIndex(d=>k(d)),l=p[e].props.value;c==null||c(P.arrayUnique([...o,l])),w(""),n==null||n(""),m()}else!v&&($==null||$())},se=e=>{w(e),n==null||n(e),j()},ne=e=>{c==null||c(o.filter(l=>l!==e))},ue=e=>()=>{var l;c==null||c(P.arrayUnique([...o,e])),w(""),n==null||n(""),m(),(l=x.current)==null||l.focus()},G=()=>{var e;w(""),n==null||n(""),m(),(e=x.current)==null||e.blur()};Ie.usePagination(D,E,Z,b);const pe=()=>j();return K.useShortcut(z.Key.Enter,ie,x),K.useShortcut(z.Key.Escape,G,x),a.useEffect(()=>{p.some(e=>y(e))&&re(!0)},[p]),s.jsxs(Oe,q(O({ref:A,readOnly:v,value:o},ee),{children:[s.jsxs(qe,{children:[s.jsx(ge.ChipInput,{ref:x,id:t,placeholder:r,value:o.map(e=>{var l;return(l=oe[e])!=null?l:{code:e,label:e}}),invalidValue:J,searchValue:B,removeLabel:X,readOnly:v,invalid:i,onSearchChange:se,onRemove:ne,onFocus:pe,lockedValues:S}),!v&&s.jsx(Re,{children:s.jsx(xe.IconButton,{ghost:"borderless",level:"tertiary",size:"small",icon:s.jsx(ye.ArrowDownIcon,{}),title:Y,onClick:j,onFocus:G,tabIndex:0})})]}),b&&!v&&s.jsx(ve.Overlay,{parentRef:A,onClose:G,children:s.jsx(me,{ref:D,withGroups:te,children:le?p.map((e,l)=>{var d;return y(e)?k(p[l+1])?s.jsx(be,{role:"option-group",ref:l===p.length-1?E:void 0,children:_.default.cloneElement(e)},(d=e.props)==null?void 0:d.title):null:s.jsx($e,{onClick:ue(e.props.value),ref:l===p.length-1?E:void 0,children:_.default.cloneElement(e)},e.props.value)}):s.jsx(je,{children:Q})})})]}))};W.displayName="MultiSelectInput.Option";H.displayName="MultiSelectInput.OptionGroup";h.Option=W;h.OptionGroup=H;exports.MultiSelectInput=h; +`,W=i=>{var o=i,{children:t}=o,r=j(o,["children"]);return s.jsx("span",b(I({},r),{children:t}))},H=i=>{var o=i,{children:t}=o,r=j(o,["children"]);return s.jsx("span",b(I({},r),{children:t}))},_=ke=>{var V=ke,{id:t,placeholder:r,invalid:i,value:o,invalidValue:J=[],emptyResultLabel:Q,children:T=[],onChange:c,removeLabel:X,onSubmit:q,openLabel:Y,readOnly:v=!1,verticalPosition:Ee,onNextPage:Z,onSearchChange:n,disableInternalSearch:C=!1,lockedValues:S=[],"aria-labelledby":Me}=V,ee=j(V,["id","placeholder","invalid","value","invalidValue","emptyResultLabel","children","onChange","removeLabel","onSubmit","openLabel","readOnly","verticalPosition","onNextPage","onSearchChange","disableInternalSearch","lockedValues","aria-labelledby"]);const[B,w]=a.useState(""),[te,re]=a.useState(!1),[R,$,m]=we.useBooleanState(),x=a.useRef(null),A=a.useRef(null),D=a.useRef(null),E=a.useRef(null),M=h.default.Children.toArray(T).filter(e=>a.isValidElement(e)),y=e=>(e==null?void 0:e.type.displayName)==="MultiSelectInput.OptionGroup",k=e=>(e==null?void 0:e.type.displayName)==="MultiSelectInput.Option",oe=M.reduce((e,l)=>{if(y(l))return e;const d=l.props.children,g=l.props.value;if(typeof d!="string")throw new Error("Multi select only accepts string as Option");if(Object.prototype.hasOwnProperty.call(e,g))throw new Error(`Duplicate option value ${g}`);return e[g]={code:g,label:d},e},{}),p=C?M:M.filter(e=>{const l=e.props.value,d=l+e.props.children;return y(e)||!o.includes(l)&&d.toLowerCase().includes(B.toLowerCase())}),le=a.useMemo(()=>p.some(e=>k(e)),[p]),ie=()=>{if(p.length>0&&R){const e=p.findIndex(d=>k(d)),l=p[e].props.value;c==null||c(L.arrayUnique([...o,l])),w(""),n==null||n(""),m()}else!v&&(q==null||q())},se=e=>{w(e),n==null||n(e),$()},ne=e=>{c==null||c(o.filter(l=>l!==e))},ue=e=>()=>{var l;c==null||c(L.arrayUnique([...o,e])),w(""),n==null||n(""),m(),(l=x.current)==null||l.focus()},G=()=>{var e;w(""),n==null||n(""),m(),(e=x.current)==null||e.blur()};Oe.usePagination(D,E,Z,R);const pe=()=>$();return K.useShortcut(z.Key.Enter,ie,x),K.useShortcut(z.Key.Escape,G,x),a.useEffect(()=>{p.some(e=>y(e))&&re(!0)},[p]),s.jsxs(Ie,b(I({ref:A,readOnly:v,value:o},ee),{children:[s.jsxs(be,{children:[s.jsx(ge.ChipInput,{ref:x,id:t,placeholder:r,value:o.map(e=>{var l;return(l=oe[e])!=null?l:{code:e,label:e}}),invalidValue:J,searchValue:B,removeLabel:X,readOnly:v,invalid:i,onSearchChange:se,onRemove:ne,onFocus:pe,lockedValues:S}),!v&&s.jsx(je,{children:s.jsx(xe.IconButton,{ghost:"borderless",level:"tertiary",size:"small",icon:s.jsx(ye.ArrowDownIcon,{}),title:Y,onClick:$,onFocus:G,tabIndex:0})})]}),R&&!v&&s.jsx(ve.Overlay,{parentRef:A,onClose:G,children:s.jsx(me,{ref:D,withGroups:te,children:le?p.map((e,l)=>{var d;return y(e)?k(p[l+1])?s.jsx(Re,{role:"option-group",ref:l===p.length-1?E:void 0,children:h.default.cloneElement(e)},(d=e.props)==null?void 0:d.title):null:s.jsx(qe,{onClick:ue(e.props.value),ref:l===p.length-1?E:void 0,children:h.default.cloneElement(e)},e.props.value)}):s.jsx($e,{children:Q})})})]}))};W.displayName="MultiSelectInput.Option";H.displayName="MultiSelectInput.OptionGroup";_.Option=W;_.OptionGroup=H;exports.MultiSelectInput=_; diff --git a/package-lock.json b/package-lock.json index 1580c8b5..62e212e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "akeneo-design-system", - "version": "2.0.1", + "version": "2.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "akeneo-design-system", - "version": "2.0.1", + "version": "2.0.2", "license": "OSL-3.0", "dependencies": { "draft-js": "^0.11.0", diff --git a/package.json b/package.json index 59adf5d6..f1469d0c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "akeneo-design-system", - "version": "2.0.1", + "version": "2.0.2", "description": "Akeneo design system", "files": [ "lib" diff --git a/src/components/Input/MultiSelectInput/MultiSelectInput.tsx b/src/components/Input/MultiSelectInput/MultiSelectInput.tsx index 60bbcf0c..e0765202 100644 --- a/src/components/Input/MultiSelectInput/MultiSelectInput.tsx +++ b/src/components/Input/MultiSelectInput/MultiSelectInput.tsx @@ -253,7 +253,7 @@ const MultiSelectInput = ({ throw new Error('Multi select only accepts string as Option'); } - if (value in indexedChips) { + if (Object.prototype.hasOwnProperty.call(indexedChips, value)) { throw new Error(`Duplicate option value ${value}`); }