Extract from 5c5fd45d6265db5f2f751267c2b6c0b77dba12c5

lib/components/Input/MultiSelectInput/ChipInput.js

@@ -1,4 +1,4 @@
-"use strict";var i=require("react/jsx-runtime"),C=require("react"),z=require("styled-components"),S=require("../../../icons/CloseIcon.js"),h=require("../../../icons/LockIcon.js"),r=require("../../../theme/theme.js"),_=require("../../IconButton/IconButton.js"),w=require("../../../hooks/useBooleanState.js"),R=require("../../../hooks/useShortcut.js"),E=require("../../../hooks/useTheme.js"),T=require("../../../shared/key.js");function y(e){return e&&e.__esModule?e:{default:e}}var D=y(C),l=y(z);const F=l.default.ul`
+"use strict";var i=require("react/jsx-runtime"),h=require("react"),w=require("styled-components"),z=require("../../../icons/CloseIcon.js"),C=require("../../../icons/LockIcon.js"),r=require("../../../theme/theme.js"),S=require("../../IconButton/IconButton.js"),_=require("../../../hooks/useBooleanState.js"),R=require("../../../hooks/useShortcut.js"),E=require("../../../hooks/useTheme.js"),T=require("../../../shared/key.js");function y(e){return e&&e.__esModule?e:{default:e}}var D=y(h),l=y(w);const F=l.default.ul`
   border: 1px solid ${({invalid:e})=>e?r.getColor("red",100):r.getColor("grey",80)};
   border-radius: 2px;
   padding: 4px 30px 4px 4px;
@@ -10,7 +10,8 @@
   background: ${({readOnly:e})=>e?r.getColor("grey",20):r.getColor("white")};
   position: relative;
   margin: 0;
-
+  max-height: 440px;
+  overflow-y: auto;
   &:focus-within {
     box-shadow: 0 0 0 2px ${r.getColor("blue",40)};
   }
@@ -50,17 +51,17 @@
   :first-child > ${b} {
     padding-left: 11px;
   }
-`,A=l.default(h.LockIcon)`
+`,A=l.default(C.LockIcon)`
   position: absolute;
   right: 0;
   top: 0;
   margin: 11px;
   color: ${r.getColor("grey",100)};
-`,G=l.default(h.LockIcon)`
+`,G=l.default(C.LockIcon)`
   padding-right: 5px;
-`,H=l.default(_.IconButton)`
+`,H=l.default(S.IconButton)`
   background-color: transparent;
   margin-left: -3px;
   margin-right: 1px;
   color: ${({isErrored:e})=>e?r.getColor("red",100):r.getColor("grey",100)};
-`,J=D.default.forwardRef(({id:e,value:o,invalidValue:g,invalid:c,readOnly:s,placeholder:m,searchValue:d,removeLabel:$,onRemove:a,onSearchChange:I,onFocus:q,lockedValues:n},p)=>{const u=E.useTheme(),[x,v,f]=w.useBooleanState(),j=t=>I(t.target.value),B=()=>{d!==""||o.length===0||(x?a(o[o.length-1].code):v())};return C.useEffect(()=>{f()},[o,d]),R.useShortcut(T.Key.Backspace,B,p),i.jsxs(F,{invalid:c,readOnly:s,children:[o.map((t,L)=>i.jsxs(K,{readOnly:s,isLocked:n==null?void 0:n.includes(t.code),isErrored:g.includes(t.code),isSelected:L===o.length-1&&x,children:[!s&&!(n!=null&&n.includes(t.code))&&i.jsx(H,{title:$,ghost:"borderless",size:"small",level:"tertiary",icon:i.jsx(S.CloseIcon,{color:g.includes(t.code)?u.color.red100:u.color.grey100}),onClick:()=>a(t.code),isErrored:g.includes(t.code)}),(n==null?void 0:n.includes(t.code))&&i.jsx(G,{size:16}),t.label]},t.code)),i.jsxs(M,{children:[i.jsx(b,{type:"text",id:e,value:d,ref:p,placeholder:o.length===0?m:void 0,onChange:j,onBlur:f,"aria-invalid":c,readOnly:s,disabled:s,onFocus:q}),s&&i.jsx(A,{size:16})]})]})});exports.ChipInput=J;
+`,J=D.default.forwardRef(({id:e,value:o,invalidValue:g,invalid:c,readOnly:s,placeholder:m,searchValue:d,removeLabel:$,onRemove:a,onSearchChange:I,onFocus:q,lockedValues:n},p)=>{const u=E.useTheme(),[x,v,f]=_.useBooleanState(),j=t=>I(t.target.value),B=()=>{d!==""||o.length===0||(x?a(o[o.length-1].code):v())};return h.useEffect(()=>{f()},[o,d]),R.useShortcut(T.Key.Backspace,B,p),i.jsxs(F,{invalid:c,readOnly:s,children:[o.map((t,L)=>i.jsxs(K,{readOnly:s,isLocked:n==null?void 0:n.includes(t.code),isErrored:g.includes(t.code),isSelected:L===o.length-1&&x,children:[!s&&!(n!=null&&n.includes(t.code))&&i.jsx(H,{title:$,ghost:"borderless",size:"small",level:"tertiary",icon:i.jsx(z.CloseIcon,{color:g.includes(t.code)?u.color.red100:u.color.grey100}),onClick:()=>a(t.code),isErrored:g.includes(t.code)}),(n==null?void 0:n.includes(t.code))&&i.jsx(G,{size:16}),t.label]},t.code)),i.jsxs(M,{children:[i.jsx(b,{type:"text",id:e,value:d,ref:p,placeholder:o.length===0?m:void 0,onChange:j,onBlur:f,"aria-invalid":c,readOnly:s,disabled:s,onFocus:q}),s&&i.jsx(A,{size:16})]})]})});exports.ChipInput=J;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Akeneo design system",
   "files": [
     "lib"

src/components/Input/MultiSelectInput/ChipInput.tsx

@@ -21,7 +21,8 @@ const Container = styled.ul<AkeneoThemedProps & {readOnly?: boolean; invalid?: b
   background: ${({readOnly}) => (readOnly ? getColor('grey', 20) : getColor('white'))};
   position: relative;
   margin: 0;
-
+  max-height: 440px;
+  overflow-y: auto;
   &:focus-within {
     box-shadow: 0 0 0 2px ${getColor('blue', 40)};
   }