npm - @talixo-ds/options-input - Versions diffs - 2.0.1 → 2.0.3 - Mend

@talixo-ds/options-input 2.0.1 → 2.0.3

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.

Files changed (7) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useState as k,useEffect as j,useCallback as Nt,useMemo as $,useRef as Ot}from"react";import Gt from"classnames";import Q from"@mui/material/Box";import ht from"@mui/material/List";import Ht from"@mui/material/Popper";import Ft from"@mui/material/ClickAwayListener";import Vt from"@mui/icons-material/KeyboardArrowDown";import vt from"@mui/icons-material/KeyboardArrowUp";import*as K from"@talixo-ds/icons";import st from"@mui/material/Tooltip";import Y from"@mui/material/Box";import z from"@mui/material/Typography";import*as at from"@talixo-ds/icons";import rt from"@mui/material/Typography";import{jsxs as pt}from"react/jsx-runtime";var M=({min:n,max:e,color:u})=>pt(rt,{variant:"caption",color:u,sx:{my:0},children:[!Number.isNaN(Number(n))&&`min: ${n}`,!Number.isNaN(Number(e))&&!Number.isNaN(Number(n))&&", ",!Number.isNaN(Number(e))&&`max: ${e}`]});var R=n=>n.charAt(0).toUpperCase()+n.slice(1);import{red as lt}from"@mui/material/colors";import{useMemo as dt}from"react";import{jsx as I,jsxs as S}from"react/jsx-runtime";var mt=({item:{quantity:n,details:e,label:u,max:p,min:d,icon:B},displayMinMax:b=!1,disabled:m=!1,error:s=!1})=>{let N=at[R(B)]||null,x=dt(()=>s?lt[700]:n===0||m?"#a4a5b2":"#000000",[s,n,m]);return S(Y,{display:"flex",alignItems:"center",gap:.5,color:x,"data-testid":"option-item",children:[u?I(st,{title:S(Y,{display:"flex",flexDirection:"column",children:[I(z,{variant:"caption",fontWeight:600,sx:{my:0},children:u}),e&&I(z,{variant:"caption",sx:{my:0},children:e}),b&&I(M,{min:d,max:p})]}),placement:"top",arrow:!0,children:I("span",{children:I(N,{fontSize:"medium",sx:{color:x}})})}):I(N,{fontSize:"medium",sx:{color:x}}),I(z,{variant:"h6",color:x,children:n})]})},J=mt;import{useState as ct}from"react";import ut from"classnames";import L from"@mui/material/Box";import A from"@mui/material/Typography";import bt from"@mui/material/ButtonGroup";import ft from"@mui/material/Divider";import xt from"@mui/material/TextField";import yt from"@mui/material/ListItem";import P from"@mui/material/Button";import It from"@mui/icons-material/Add";import gt from"@mui/icons-material/Remove";import*as Xt from"@talixo-ds/icons";import{Fragment as Bt,jsx as l,jsxs as v}from"react/jsx-runtime";var Rt=({item:{id:n,quantity:e=0,label:u,max:p,min:d,icon:B,details:b,inputQuantity:m},onChange:s,onBlur:N,index:x,displayMinMax:w,error:y=!1})=>{let[h,H]=ct(!1),C=Xt[R(B)]||null,_=a=>()=>{let F=!!(d&&e<d);s(a,F?d:e+1)},c=a=>()=>{let F=!!(p&&e>p);return s(a,F?p:e-1)};return v(Bt,{children:[!!x&&l(ft,{sx:{color:a=>a.palette.primary.main}}),v(yt,{sx:{display:"flex",justifyContent:"space-between"},className:ut("options-input__dropdown-item",{"options-input__dropdown-item--empty":!e}),children:[v(L,{display:"flex",alignItems:"center",children:[l(C,{fontSize:"small",sx:{color:"black"}}),l(xt,{onChange:({target:a})=>s(n,a.value),onBlur:N,value:m,variant:"standard",inputProps:{inputMode:"numeric",pattern:"-?[0-9]*",style:{textAlign:"center"},"data-testid":"dropdown-item-input"},InputProps:{disableUnderline:!0},className:"options-input__dropdown-item-input"}),v(L,{display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:2,paddingLeft:1,minWidth:"5rem",children:[l(A,{variant:"caption",fontWeight:600,fontSize:13,sx:{my:0},color:"black",children:u||n}),b&&l(L,{position:"relative",height:"1rem","data-testid":"option-details-container",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1),children:l(A,{variant:"caption",color:"gray",sx:{my:0,zIndex:1e4,position:"fixed",...h&&{backgroundColor:e?"#ffffff":"#eeeeee",border:"thin solid #d3d3d3"}},"data-testid":"option-details",children:b?.length<=15||h?b:`${b?.slice(0,15)}...`})}),w&&l(M,{min:d,max:p,color:"gray"})]})]}),v(bt,{variant:"outlined",size:"small",className:"options-input__dropdown-item-buttons",children:[l(P,{onClick:_(n),disabled:!!(p&&e&&e>=p),className:"options-input__dropdown-item-button",role:"button",color:y?"error":"primary",children:l(It,{sx:{color:y?"black":"primary"}})}),l(P,{onClick:c(n),disabled:!!(e&&d)&&e<=d,className:"options-input__dropdown-item-button",role:"button",color:y?"error":"primary",children:l(gt,{sx:{color:y?"black":"primary"}})})]})]})]})},E=Rt;import{red as W}from"@mui/material/colors";import"@emotion/react";import"@emotion/styled";import{Fragment as Wt,jsx as f,jsxs as T}from"react/jsx-runtime";var ho=({options:n,onChange:e,onFocus:u,onBlur:p,persistentOptions:d=[],defaultValue:B,displayMinMax:b=!1,disabled:m=!1,readOnly:s=!1,id:N,className:x,itemsGap:w=1,containerSx:y=[],error:h=!1,helperText:H,helperTextSx:C,..._})=>{let[c,a]=k([]),[F,q]=k(0),D=Ot(),[U,Z]=k(),V=!!U;j(()=>a(n.map(t=>{let o=B?.[t.id]??0;return{...t,quantity:o,inputQuantity:o}})),[n,B]),j(()=>{q(D?.current?.clientWidth??0)},[D?.current?.clientWidth]);let O=$(()=>c.reduce((t,{quantity:o,id:i,label:X})=>{let r=n.find(G=>G.id===i);return X&&o!==void 0&&(r?.max!==void 0&&r?.max<o||r?.min!==void 0&&r?.min>o)?[...t,X]:t},[]),[c,n]),g=$(()=>h||!!O.length,[h,O]),tt=Nt(t=>{let{currentTarget:o}=t;!m&&!s&&setTimeout(()=>{Z(i=>i?void 0:o)},0)},[m,s,Z]),ot=()=>{u&&u(c.reduce((t,o)=>({...t,[o.id]:o.quantity}),{}))},nt=()=>{p&&p(c.reduce((t,o)=>({...t,[o.id]:o.quantity}),{}))},et=(t,o)=>{let i=Number.isNaN(Number(o))?0:Number(o),X=c.map(r=>{let G=i>(r?.max??1/0)?r?.max:i;return{...r,...t===r.id&&{quantity:i<(r?.min??-1/0)?r?.min:G,inputQuantity:o}}});e&&e(X.reduce((r,G)=>({...r,[G.id]:G.quantity}),{})),a(X)},it=t=>()=>a(c.map(o=>{if(t!==o.id)return o;let i=Number.isNaN(Number(o?.inputQuantity))?0:Number(o?.inputQuantity),X=i>(o?.max??1/0)?o?.max:i;return{...o,inputQuantity:i<(o?.min??-1/0)?o?.min:X}}));return T(Wt,{children:[T(Q,{children:[T(Q,{id:N,onClick:tt,onBlur:nt,onFocus:ot,ref:D,className:Gt("options-input__container",x,{"options-input__container--open":V,"options-input__container--disabled":m,"options-input__container--read-only":s,"options-input__container--error":g}),sx:[{"&:hover":{borderColor:"#d3d3d3"}},...Array.isArray(y)?y:[y],V&&{borderColor:t=>t.palette.primary.main,"&:hover":{borderColor:t=>t.palette.primary.main}},g&&{borderColor:W[700],"&:hover":{borderColor:W[700]}}],"data-testid":_["data-testid"]||"options-input-container",tabIndex:0,children:[f(Q,{display:"flex",gap:w,children:c.filter(({quantity:t,id:o,icon:i})=>!!(K[R(i)]&&(t!==0||d?.includes(o)))).map(t=>f(J,{item:t,disabled:m,displayMinMax:b,error:!!(t?.label&&O.includes(t.label))},t.id))}),!s&&(V?f(vt,{sx:{color:g?W[700]:"primary"}}):f(Vt,{sx:{color:t=>m?t.palette.grey[400]:t.palette.action.focus}}))]}),(H||g)&&f(Q,{sx:{fontSize:"small",...C||{},...g?{color:W[700]}:{}},marginTop:1,marginLeft:2,width:F,children:O.length?(()=>{let t=O.length>1?"s":"";return`Value${t} for ${O.join(", ")} option${t} ${t?"are":"is"} out of range.`})():H})]}),f(Ft,{onClickAway:()=>V&&Z(void 0),children:f(Ht,{open:V,placement:"bottom-start",anchorEl:U,sx:t=>({zIndex:t.zIndex.modal}),children:f(ht,{disablePadding:!0,"data-testid":"options-dropdown-list",className:"options-input__dropdown-items-list",sx:{bgcolor:"Background",border:t=>`thin solid ${g?W[700]:t.palette.primary.main}`},children:c.filter(({icon:t})=>!!K[R(t)]).map((t,o)=>f(E,{item:t,onBlur:it(t.id),onChange:et,index:o,displayMinMax:b,error:g},t.id))})})})]})};export{ho as OptionsInput};
+import{useState as k,useEffect as j,useCallback as Nt,useMemo as $,useRef as Ot}from"react";import Gt from"classnames";import Q from"@mui/material/Box";import ht from"@mui/material/List";import Ht from"@mui/material/Popper";import Ft from"@mui/material/ClickAwayListener";import Vt from"@mui/icons-material/KeyboardArrowDown";import vt from"@mui/icons-material/KeyboardArrowUp";import*as K from"@talixo-ds/icons";import st from"@mui/material/Tooltip";import Y from"@mui/material/Box";import z from"@mui/material/Typography";import*as at from"@talixo-ds/icons";import rt from"@mui/material/Typography";import{jsxs as pt}from"react/jsx-runtime";var M=({min:n,max:e,color:u})=>pt(rt,{variant:"caption",color:u,sx:{my:0},children:[!Number.isNaN(Number(n))&&`min: ${n}`,!Number.isNaN(Number(e))&&!Number.isNaN(Number(n))&&", ",!Number.isNaN(Number(e))&&`max: ${e}`]});var R=n=>n.charAt(0).toUpperCase()+n.slice(1);import{red as lt}from"@mui/material/colors";import{useMemo as dt}from"react";import{jsx as I,jsxs as S}from"react/jsx-runtime";var mt=({item:{quantity:n,details:e,label:u,max:p,min:d,icon:B},displayMinMax:b=!1,disabled:m=!1,error:s=!1})=>{let N=at[R(B)]||null,x=dt(()=>s?lt[700]:n===0||m?"#a4a5b2":"#000000",[s,n,m]);return S(Y,{display:"flex",alignItems:"center",gap:.5,color:x,"data-testid":"option-item",children:[u?I(st,{title:S(Y,{display:"flex",flexDirection:"column",children:[I(z,{variant:"caption",fontWeight:600,sx:{my:0},children:u}),e&&I(z,{variant:"caption",sx:{my:0},children:e}),b&&I(M,{min:d,max:p})]}),placement:"top",arrow:!0,children:I("span",{children:I(N,{fontSize:"medium",sx:{color:x}})})}):I(N,{fontSize:"medium",sx:{color:x}}),I(z,{variant:"h6",color:x,children:n})]})},J=mt;import{useState as ct}from"react";import ut from"classnames";import L from"@mui/material/Box";import A from"@mui/material/Typography";import bt from"@mui/material/ButtonGroup";import ft from"@mui/material/Divider";import xt from"@mui/material/TextField";import yt from"@mui/material/ListItem";import P from"@mui/material/Button";import It from"@mui/icons-material/Add";import gt from"@mui/icons-material/Remove";import*as Xt from"@talixo-ds/icons";import{Fragment as Bt,jsx as l,jsxs as v}from"react/jsx-runtime";var Rt=({item:{id:n,quantity:e=0,label:u,max:p,min:d,icon:B,details:b,inputQuantity:m},onChange:s,onBlur:N,index:x,displayMinMax:w,error:y=!1})=>{let[h,H]=ct(!1),C=Xt[R(B)]||null,_=a=>()=>{let F=!!(d&&e<d);s(a,F?d:e+1)},c=a=>()=>{let F=!!(p&&e>p);return s(a,F?p:e-1)};return v(Bt,{children:[!!x&&l(ft,{sx:{color:a=>a.palette.primary.main}}),v(yt,{sx:{display:"flex",justifyContent:"space-between"},className:ut("options-input__dropdown-item",{"options-input__dropdown-item--empty":!e}),children:[v(L,{display:"flex",alignItems:"center",children:[l(C,{fontSize:"small",sx:{color:"black"}}),l(xt,{onChange:({target:a})=>s(n,a.value),onBlur:N,value:m,variant:"standard",inputProps:{inputMode:"numeric",pattern:"-?[0-9]*",style:{textAlign:"center"},"data-testid":"dropdown-item-input"},InputProps:{disableUnderline:!0},className:"options-input__dropdown-item-input"}),v(L,{display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:2,paddingLeft:1,minWidth:"5rem",children:[l(A,{variant:"caption",fontWeight:600,fontSize:13,sx:{my:0},color:"black",children:u||n}),b&&l(L,{position:"relative",height:"1rem","data-testid":"option-details-container",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1),children:l(A,{variant:"caption",color:"gray",sx:{my:0,zIndex:1e4,position:"fixed",...h&&{backgroundColor:e?"#ffffff":"#eeeeee",border:"thin solid #d3d3d3"}},"data-testid":"option-details",children:b?.length<=15||h?b:`${b?.slice(0,15)}...`})}),w&&l(M,{min:d,max:p,color:"gray"})]})]}),v(bt,{variant:"outlined",size:"small",className:"options-input__dropdown-item-buttons",children:[l(P,{onClick:_(n),disabled:!!(p&&e&&e>=p),className:"options-input__dropdown-item-button",role:"button",color:y?"error":"primary",children:l(It,{sx:{color:y?"black":"primary"}})}),l(P,{onClick:c(n),disabled:!!(e&&d)&&e<=d,className:"options-input__dropdown-item-button",role:"button",color:y?"error":"primary",children:l(gt,{sx:{color:y?"black":"primary"}})})]})]})]})},E=Rt;import{red as W}from"@mui/material/colors";import"@emotion/react";import"@emotion/styled";import{Fragment as Wt,jsx as f,jsxs as T}from"react/jsx-runtime";var ho=({options:n,onChange:e,onFocus:u,onBlur:p,persistentOptions:d=[],defaultValue:B,displayMinMax:b=!1,disabled:m=!1,readOnly:s=!1,id:N,className:x,itemsGap:w=1,containerSx:y=[],error:h=!1,helperText:H,helperTextSx:C,..._})=>{let[c,a]=k([]),[F,q]=k(0),D=Ot(null),[U,Z]=k(),V=!!U;j(()=>a(n.map(t=>{let o=B?.[t.id]??0;return{...t,quantity:o,inputQuantity:o}})),[n,B]),j(()=>{q(D?.current?.clientWidth??0)},[D?.current?.clientWidth]);let O=$(()=>c.reduce((t,{quantity:o,id:i,label:X})=>{let r=n.find(G=>G.id===i);return X&&o!==void 0&&(r?.max!==void 0&&r?.max<o||r?.min!==void 0&&r?.min>o)?[...t,X]:t},[]),[c,n]),g=$(()=>h||!!O.length,[h,O]),tt=Nt(t=>{let{currentTarget:o}=t;!m&&!s&&setTimeout(()=>{Z(i=>i?void 0:o)},0)},[m,s,Z]),ot=()=>{u&&u(c.reduce((t,o)=>({...t,[o.id]:o.quantity}),{}))},nt=()=>{p&&p(c.reduce((t,o)=>({...t,[o.id]:o.quantity}),{}))},et=(t,o)=>{let i=Number.isNaN(Number(o))?0:Number(o),X=c.map(r=>{let G=i>(r?.max??1/0)?r?.max:i;return{...r,...t===r.id&&{quantity:i<(r?.min??-1/0)?r?.min:G,inputQuantity:o}}});e&&e(X.reduce((r,G)=>({...r,[G.id]:G.quantity}),{})),a(X)},it=t=>()=>a(c.map(o=>{if(t!==o.id)return o;let i=Number.isNaN(Number(o?.inputQuantity))?0:Number(o?.inputQuantity),X=i>(o?.max??1/0)?o?.max:i;return{...o,inputQuantity:i<(o?.min??-1/0)?o?.min:X}}));return T(Wt,{children:[T(Q,{children:[T(Q,{id:N,onClick:tt,onBlur:nt,onFocus:ot,ref:D,className:Gt("options-input__container",x,{"options-input__container--open":V,"options-input__container--disabled":m,"options-input__container--read-only":s,"options-input__container--error":g}),sx:[{"&:hover":{borderColor:"#d3d3d3"}},...Array.isArray(y)?y:[y],V&&{borderColor:t=>t.palette.primary.main,"&:hover":{borderColor:t=>t.palette.primary.main}},g&&{borderColor:W[700],"&:hover":{borderColor:W[700]}}],"data-testid":_["data-testid"]||"options-input-container",tabIndex:0,children:[f(Q,{display:"flex",gap:w,children:c.filter(({quantity:t,id:o,icon:i})=>!!(K[R(i)]&&(t!==0||d?.includes(o)))).map(t=>f(J,{item:t,disabled:m,displayMinMax:b,error:!!(t?.label&&O.includes(t.label))},t.id))}),!s&&(V?f(vt,{sx:{color:g?W[700]:"primary"}}):f(Vt,{sx:{color:t=>m?t.palette.grey[400]:t.palette.action.focus}}))]}),(H||g)&&f(Q,{sx:{fontSize:"small",...C||{},...g?{color:W[700]}:{}},marginTop:1,marginLeft:2,width:F,children:O.length?(()=>{let t=O.length>1?"s":"";return`Value${t} for ${O.join(", ")} option${t} ${t?"are":"is"} out of range.`})():H})]}),f(Ft,{onClickAway:()=>V&&Z(void 0),children:f(Ht,{open:V,placement:"bottom-start",anchorEl:U,sx:t=>({zIndex:t.zIndex.modal}),children:f(ht,{disablePadding:!0,"data-testid":"options-dropdown-list",className:"options-input__dropdown-items-list",sx:{bgcolor:"Background",border:t=>`thin solid ${g?W[700]:t.palette.primary.main}`},children:c.filter(({icon:t})=>!!K[R(t)]).map((t,o)=>f(E,{item:t,onBlur:it(t.id),onChange:et,index:o,displayMinMax:b,error:g},t.id))})})})]})};export{ho as OptionsInput};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/options-input.tsx","../../src/components/options-input-content-item.tsx","../../src/components/min-max-value-label.tsx","../../src/utils.ts","../../src/components/options-input-dropdown-item.tsx"],"sourcesContent":["import React, {\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef\n} from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport List from \"@mui/material/List\";\nimport Popper from \"@mui/material/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport type { SxProps } from \"@mui/material\";\nimport type { OptionsInputOption, OptionsInputValue } from \"./types\";\nimport OptionsInputContentItem from \"./components/options-input-content-item\";\nimport OptionsInputDropdownItem from \"./components/options-input-dropdown-item\";\nimport { capitalize } from \"./utils\";\nimport { red } from \"@mui/material/colors\";\nimport \"./styles.scss\";\n\nimport \"@emotion/react\";\nimport \"@emotion/styled\";\n\nexport type OptionsInputProps = {\n\t/** Array of objects representing options available to choose from /\n\toptions: OptionsInputOption[];\n\t/* Object with default values of some options /\n\tdefaultValue?: OptionsInputValue;\n\t/* Array with ids of options which should remain displayed even if value is 0 /\n\tpersistentOptions?: string[];\n\t/* Boolean to determine if input is disabled /\n\tdisabled?: boolean;\n\t/* Boolean to determine if input is readOnly /\n\treadOnly?: boolean;\n\t/* Boolean to determine if min and max input values should be displayed /\n\tdisplayMinMax?: boolean;\n\t/* Function which handles options input value change /\n\tonChange?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input focus event /\n\tonFocus?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input blur event /\n\tonBlur?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* className attached to an input container /\n\tclassName?: string;\n\t/* id attached to an input container /\n\tid?: string;\n\t/* data test id attached to an input container /\n\t\"data-testid\"?: string;\n\t/* Gap between input items /\n\titemsGap?: string \| number;\n\t/* Custom styles for container /\n\tcontainerSx?: SxProps;\n\t/* Flag indicating if there is an validation error /\n\terror?: boolean;\n\t/* Additional content displayed with small font under the input /\n\thelperText?: ReactNode;\n\t/* Custom styles for helper text container /\n\thelperTextSx?: SxProps;\n};\n\nexport const OptionsInput = ({\n\toptions,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tpersistentOptions = [],\n\tdefaultValue,\n\tdisplayMinMax = false,\n\tdisabled = false,\n\treadOnly = false,\n\tid,\n\tclassName,\n\titemsGap = 1,\n\tcontainerSx = [],\n\terror = false,\n\thelperText,\n\thelperTextSx,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst inputContainerRef = useRef<HTMLElement>();\n\tconst [anchorEl, setAnchorEl] = useState<undefined \| HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tuseEffect(\n\t\t() =>\n\t\t\tsetCurrentOptions(\n\t\t\t\toptions.map((option) => {\n\t\t\t\t\tconst quantity = defaultValue?.[option.id] ?? 0;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...option,\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tinputQuantity: quantity\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t),\n\t\t[options, defaultValue]\n\t);\n\n\tuseEffect(() => {\n\t\tsetInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);\n\t}, [inputContainerRef?.current?.clientWidth]);\n\n\tconst optionsExceedingBoundaries = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce((exceedingOptions, { quantity, id, label }) => {\n\t\t\t\tconst option = options.find((option) => option.id === id);\n\n\t\t\t\tif (\n\t\t\t\t\tlabel &&\n\t\t\t\t\tquantity !== undefined &&\n\t\t\t\t\t((option?.max !== undefined && option?.max < quantity) \|\|\n\t\t\t\t\t\t(option?.min !== undefined && option?.min > quantity))\n\t\t\t\t) {\n\t\t\t\t\treturn [...exceedingOptions, label];\n\t\t\t\t}\n\n\t\t\t\treturn exceedingOptions;\n\t\t\t}, [] as string[]),\n\t\t[currentOptions, options]\n\t);\n\n\tconst isError = useMemo(\n\t\t() => error \|\| !!optionsExceedingBoundaries.length,\n\t\t[error, optionsExceedingBoundaries]\n\t);\n\n\tconst toggleInput = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement>) => {\n\t\t\tconst { currentTarget } = event;\n\n\t\t\tif (!disabled && !readOnly) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tsetAnchorEl((currentAnchor) =>\n\t\t\t\t\t\tcurrentAnchor ? undefined : currentTarget\n\t\t\t\t\t);\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t},\n\t\t[disabled, readOnly, setAnchorEl]\n\t);\n\n\tconst onInputFocus = () => {\n\t\tif (onFocus) {\n\t\t\tonFocus(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onInputBlur = () => {\n\t\tif (onBlur) {\n\t\t\tonBlur(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onValueChange = (optionId: string, newValue: string \| number) => {\n\t\tconst newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);\n\n\t\tconst newCurrentOptions = currentOptions.map((option) => {\n\t\t\tconst maxQuantity =\n\t\t\t\tnewQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;\n\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\t...(optionId === option.id && {\n\t\t\t\t\tquantity:\n\t\t\t\t\t\tnewQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,\n\t\t\t\t\tinputQuantity: newValue\n\t\t\t\t})\n\t\t\t};\n\t\t});\n\n\t\tif (onChange) {\n\t\t\tonChange(\n\t\t\t\tnewCurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentOptions(newCurrentOptions);\n\t};\n\n\tconst onDropdownItemBlur = (optionId: string) => () =>\n\t\tsetCurrentOptions(\n\t\t\tcurrentOptions.map((option) => {\n\t\t\t\tif (optionId !== option.id) return option;\n\n\t\t\t\tconst finalQuantity = Number.isNaN(Number(option?.inputQuantity))\n\t\t\t\t\t? 0\n\t\t\t\t\t: Number(option?.inputQuantity);\n\t\t\t\tconst maxQuantity =\n\t\t\t\t\tfinalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;\n\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\tinputQuantity:\n\t\t\t\t\t\tfinalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Box>\n\t\t\t\t<Box\n\t\t\t\t\tid={id}\n\t\t\t\t\tonClick={toggleInput}\n\t\t\t\t\tonBlur={onInputBlur}\n\t\t\t\t\tonFocus={onInputFocus}\n\t\t\t\t\tref={inputContainerRef}\n\t\t\t\t\tclassName={classNames(\"options-input__container\", className, {\n\t\t\t\t\t\t\"options-input__container--open\": open,\n\t\t\t\t\t\t\"options-input__container--disabled\": disabled,\n\t\t\t\t\t\t\"options-input__container--read-only\": readOnly,\n\t\t\t\t\t\t\"options-input__container--error\": isError\n\t\t\t\t\t})}\n\t\t\t\t\tsx={[\n\t\t\t\t\t\t{ \"&:hover\": { borderColor: \"#d3d3d3\" } },\n\t\t\t\t\t\t...(Array.isArray(containerSx) ? containerSx : [containerSx]),\n\t\t\t\t\t\topen && {\n\t\t\t\t\t\t\tborderColor: (theme) => theme.palette.primary.main,\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: (theme) => theme.palette.primary.main }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisError && {\n\t\t\t\t\t\t\tborderColor: red[700],\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: red[700] }\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tdata-testid={rest[\"data-testid\"] \|\| \"options-input-container\"}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={itemsGap}>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ quantity, id: optionId, icon }) =>\n\t\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\t\tDesignSystemIcons[\n\t\t\t\t\t\t\t\t\t\t\tcapitalize(icon) as keyof typeof DesignSystemIcons\n\t\t\t\t\t\t\t\t\t\t] &&\n\t\t\t\t\t\t\t\t\t\t(quantity !== 0 \|\| persistentOptions?.includes(optionId))\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option) => (\n\t\t\t\t\t\t\t\t<OptionsInputContentItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t\t\t!!(option?.label && optionsExceedingBoundaries.includes(option.label))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t\t{!readOnly &&\n\t\t\t\t\t\t(open ? (\n\t\t\t\t\t\t\t<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : \"primary\" }} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KeyboardArrowDownIcon\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: (theme) =>\n\t\t\t\t\t\t\t\t\t\tdisabled ? theme.palette.grey[400] : theme.palette.action.focus\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t{(helperText \|\| isError) && (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tfontSize: \"small\",\n\t\t\t\t\t\t\t...(helperTextSx \|\| {}),\n\t\t\t\t\t\t\t...(isError ? { color: red[700] } : {})\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmarginTop={1}\n\t\t\t\t\t\tmarginLeft={2}\n\t\t\t\t\t\twidth={inputContainerWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsExceedingBoundaries.length\n\t\t\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\t\t\tconst messagePluralForm =\n\t\t\t\t\t\t\t\t\t\toptionsExceedingBoundaries.length > 1 ? \"s\" : \"\";\n\n\t\t\t\t\t\t\t\t\treturn `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(\", \")} option${messagePluralForm} ${messagePluralForm ? \"are\" : \"is\"} out of range.`;\n\t\t\t\t\t\t\t\t})()\n\t\t\t\t\t\t\t: helperText}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</Box>\n\t\t\t<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>\n\t\t\t\t<Popper\n\t\t\t\t\topen={open}\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\tanchorEl={anchorEl}\n\t\t\t\t\tsx={(theme) => ({ zIndex: theme.zIndex.modal })}\n\t\t\t\t>\n\t\t\t\t\t<List\n\t\t\t\t\t\tdisablePadding\n\t\t\t\t\t\tdata-testid=\"options-dropdown-list\"\n\t\t\t\t\t\tclassName=\"options-input__dropdown-items-list\"\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: \"Background\",\n\t\t\t\t\t\t\tborder: (theme) =>\n\t\t\t\t\t\t\t\t`thin solid ${isError ? red[700] : theme.palette.primary.main}`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ icon }) =>\n\t\t\t\t\t\t\t\t\t!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option, index) => (\n\t\t\t\t\t\t\t\t<OptionsInputDropdownItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tonBlur={onDropdownItemBlur(option.id)}\n\t\t\t\t\t\t\t\t\tonChange={onValueChange}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={isError}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t</Popper>\n\t\t\t</ClickAwayListener>\n\t\t</>\n\t);\n};\n","import Tooltip from \"@mui/material/Tooltip\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\nimport { red } from \"@mui/material/colors\";\nimport { useMemo } from \"react\";\n\nexport type OptionsInputContentItemProps = {\n\titem: OptionsInputOption;\n\tdisabled?: boolean;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false\n}: OptionsInputContentItemProps) => {\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\tconst itemsColor = useMemo(() => {\n\t\tconst defaultItemColor = quantity === 0 \|\| disabled ? \"#a4a5b2\" : \"#000000\";\n\n\t\treturn error ? red[700] : defaultItemColor;\n\t}, [error, quantity, disabled]);\n\n\treturn (\n\t\t<Box\n\t\t\tdisplay=\"flex\"\n\t\t\talignItems=\"center\"\n\t\t\tgap={0.5}\n\t\t\tcolor={itemsColor}\n\t\t\tdata-testid=\"option-item\"\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<Tooltip\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Box display=\"flex\" flexDirection=\"column\">\n\t\t\t\t\t\t\t<Typography variant=\"caption\" fontWeight={600} sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t\t<Typography variant=\"caption\" sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} />}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tarrow\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography variant=\"h6\" color={itemsColor}>\n\t\t\t\t{quantity}\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n\nexport default OptionsInputContentItem;\n","import Typography, { type TypographyProps } from \"@mui/material/Typography\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?: TypographyProps[\"color\"];\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" color={color} sx={{ my: 0 }}>\n\t\t{!Number.isNaN(Number(min)) && `min: ${min}`}\n\t\t{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && \", \"}\n\t\t{!Number.isNaN(Number(max)) && `max: ${max}`}\n\t</Typography>\n);\n","export const capitalize = (str: string) =>\n\tstr.charAt(0).toUpperCase() + str.slice(1);\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport ButtonGroup from \"@mui/material/ButtonGroup\";\nimport Divider from \"@mui/material/Divider\";\nimport TextField from \"@mui/material/TextField\";\nimport ListItem from \"@mui/material/ListItem\";\nimport Button from \"@mui/material/Button\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\n\nexport type OptionsInputDropdownItemProps = {\n\titem: OptionsInputOption;\n\tonBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n\tonChange: (id: string, value: number \| string) => void;\n\tindex: number;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputDropdownItem = ({\n\titem: { id, quantity = 0, label, max, min, icon, details, inputQuantity },\n\tonChange,\n\tonBlur,\n\tindex,\n\tdisplayMinMax,\n\terror = false\n}: OptionsInputDropdownItemProps) => {\n\tconst [shouldDisplayFullDetails, setShouldDisplayFullDetails] =\n\t\tuseState<boolean>(false);\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\n\tconst onIncrement = (inputId: string) => () => {\n\t\tconst isValueBelowMin = !!(min && quantity < min);\n\n\t\tonChange(inputId, (isValueBelowMin ? min : quantity + 1)!);\n\t};\n\n\tconst onDecrement = (inputId: string) => () => {\n\t\tconst isValueAboveMax = !!(max && quantity > max);\n\n\t\treturn onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{!!index && (\n\t\t\t\t<Divider sx={{ color: (theme) => theme.palette.primary.main }} />\n\t\t\t)}\n\t\t\t<ListItem\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"space-between\"\n\t\t\t\t}}\n\t\t\t\tclassName={classNames(\"options-input__dropdown-item\", {\n\t\t\t\t\t\"options-input__dropdown-item--empty\": !quantity\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Box display=\"flex\" alignItems=\"center\">\n\t\t\t\t\t<Icon fontSize=\"small\" sx={{ color: \"black\" }} />\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tonChange={({ target }) => onChange(id, target.value)}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\tvalue={inputQuantity}\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\tinputMode: \"numeric\",\n\t\t\t\t\t\t\tpattern: \"-?[0-9]*\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\ttextAlign: \"center\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"data-testid\": \"dropdown-item-input\"\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-no-duplicate-props\n\t\t\t\t\t\tInputProps={{ disableUnderline: true }}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdisplay=\"flex\"\n\t\t\t\t\t\tflexDirection=\"column\"\n\t\t\t\t\t\tjustifyContent=\"center\"\n\t\t\t\t\t\tpaddingRight={2}\n\t\t\t\t\t\tpaddingLeft={1}\n\t\t\t\t\t\tminWidth=\"5rem\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfontSize={13}\n\t\t\t\t\t\t\tsx={{ my: 0 }}\n\t\t\t\t\t\t\tcolor=\"black\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label \|\| id}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tposition=\"relative\"\n\t\t\t\t\t\t\t\theight=\"1rem\"\n\t\t\t\t\t\t\t\tdata-testid=\"option-details-container\"\n\t\t\t\t\t\t\t\tonMouseEnter={() => setShouldDisplayFullDetails(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setShouldDisplayFullDetails(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\t\tmy: 0,\n\t\t\t\t\t\t\t\t\t\tzIndex: 10000,\n\t\t\t\t\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t\t\t\t\t\t...(shouldDisplayFullDetails && {\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: quantity ? \"#ffffff\" : \"#eeeeee\",\n\t\t\t\t\t\t\t\t\t\t\tborder: \"thin solid #d3d3d3\"\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-testid=\"option-details\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{details?.length <= 15 \|\| shouldDisplayFullDetails\n\t\t\t\t\t\t\t\t\t\t? details\n\t\t\t\t\t\t\t\t\t\t: `${details?.slice(0, 15)}...`}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} color=\"gray\" />}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"options-input__dropdown-item-buttons\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onIncrement(id)}\n\t\t\t\t\t\tdisabled={!!(max && quantity && quantity >= max)}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AddIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onDecrement(id)}\n\t\t\t\t\t\tdisabled={!!(quantity && min) && quantity <= min}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RemoveIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonGroup>\n\t\t\t</ListItem>\n\t\t</>\n\t);\n};\n\nexport default OptionsInputDropdownItem;\n"],"mappings":"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","names":["useState","useEffect","useCallback","useMemo","useRef","classNames","Box","List","Popper","ClickAwayListener","KeyboardArrowDownIcon","KeyboardArrowUpIcon","DesignSystemIcons","Tooltip","Box","Typography","DesignSystemIcons","Typography","jsxs","MinMaxValueLabel","min","max","color","capitalize","str","red","useMemo","jsx","jsxs","OptionsInputContentItem","quantity","details","label","max","min","icon","displayMinMax","disabled","error","Icon","DesignSystemIcons","capitalize","itemsColor","Box","Tooltip","Typography","MinMaxValueLabel","options_input_content_item_default","useState","classNames","Box","Typography","ButtonGroup","Divider","TextField","ListItem","Button","AddIcon","RemoveIcon","DesignSystemIcons","Fragment","jsx","jsxs","OptionsInputDropdownItem","id","quantity","label","max","min","icon","details","inputQuantity","onChange","onBlur","index","displayMinMax","error","shouldDisplayFullDetails","setShouldDisplayFullDetails","useState","Icon","DesignSystemIcons","capitalize","onIncrement","inputId","isValueBelowMin","onDecrement","isValueAboveMax","Divider","theme","ListItem","classNames","Box","TextField","target","Typography","MinMaxValueLabel","ButtonGroup","Button","AddIcon","RemoveIcon","options_input_dropdown_item_default","red","Fragment","jsx","jsxs","OptionsInput","options","onChange","onFocus","onBlur","persistentOptions","defaultValue","displayMinMax","disabled","readOnly","id","className","itemsGap","containerSx","error","helperText","helperTextSx","rest","currentOptions","setCurrentOptions","useState","inputContainerWidth","setInputContainerWidth","inputContainerRef","useRef","anchorEl","setAnchorEl","open","useEffect","option","quantity","optionsExceedingBoundaries","useMemo","exceedingOptions","label","isError","toggleInput","useCallback","event","currentTarget","currentAnchor","onInputFocus","currentValues","currentOption","onInputBlur","onValueChange","optionId","newValue","newQuantity","newCurrentOptions","maxQuantity","onDropdownItemBlur","finalQuantity","Box","classNames","theme","red","icon","DesignSystemIcons","capitalize","options_input_content_item_default","KeyboardArrowUpIcon","KeyboardArrowDownIcon","messagePluralForm","ClickAwayListener","Popper","List","index","options_input_dropdown_item_default"]}
1	+ {"version":3,"sources":["../../src/options-input.tsx","../../src/components/options-input-content-item.tsx","../../src/components/min-max-value-label.tsx","../../src/utils.ts","../../src/components/options-input-dropdown-item.tsx"],"sourcesContent":["import React, {\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef\n} from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport List from \"@mui/material/List\";\nimport Popper from \"@mui/material/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport type { SxProps } from \"@mui/material\";\nimport type { OptionsInputOption, OptionsInputValue } from \"./types\";\nimport OptionsInputContentItem from \"./components/options-input-content-item\";\nimport OptionsInputDropdownItem from \"./components/options-input-dropdown-item\";\nimport { capitalize } from \"./utils\";\nimport { red } from \"@mui/material/colors\";\nimport \"./styles.scss\";\n\nimport \"@emotion/react\";\nimport \"@emotion/styled\";\n\nexport type OptionsInputProps = {\n\t/** Array of objects representing options available to choose from /\n\toptions: OptionsInputOption[];\n\t/* Object with default values of some options /\n\tdefaultValue?: OptionsInputValue;\n\t/* Array with ids of options which should remain displayed even if value is 0 /\n\tpersistentOptions?: string[];\n\t/* Boolean to determine if input is disabled /\n\tdisabled?: boolean;\n\t/* Boolean to determine if input is readOnly /\n\treadOnly?: boolean;\n\t/* Boolean to determine if min and max input values should be displayed /\n\tdisplayMinMax?: boolean;\n\t/* Function which handles options input value change /\n\tonChange?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input focus event /\n\tonFocus?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input blur event /\n\tonBlur?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* className attached to an input container /\n\tclassName?: string;\n\t/* id attached to an input container /\n\tid?: string;\n\t/* data test id attached to an input container /\n\t\"data-testid\"?: string;\n\t/* Gap between input items /\n\titemsGap?: string \| number;\n\t/* Custom styles for container /\n\tcontainerSx?: SxProps;\n\t/* Flag indicating if there is a validation error /\n\terror?: boolean;\n\t/* Additional content displayed with small font under the input /\n\thelperText?: ReactNode;\n\t/* Custom styles for helper text container /\n\thelperTextSx?: SxProps;\n};\n\nexport const OptionsInput = ({\n\toptions,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tpersistentOptions = [],\n\tdefaultValue,\n\tdisplayMinMax = false,\n\tdisabled = false,\n\treadOnly = false,\n\tid,\n\tclassName,\n\titemsGap = 1,\n\tcontainerSx = [],\n\terror = false,\n\thelperText,\n\thelperTextSx,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst inputContainerRef = useRef<HTMLElement>(null);\n\tconst [anchorEl, setAnchorEl] = useState<undefined \| HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tuseEffect(\n\t\t() =>\n\t\t\tsetCurrentOptions(\n\t\t\t\toptions.map((option) => {\n\t\t\t\t\tconst quantity = defaultValue?.[option.id] ?? 0;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...option,\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tinputQuantity: quantity\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t),\n\t\t[options, defaultValue]\n\t);\n\n\tuseEffect(() => {\n\t\tsetInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);\n\t}, [inputContainerRef?.current?.clientWidth]);\n\n\tconst optionsExceedingBoundaries = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce((exceedingOptions, { quantity, id, label }) => {\n\t\t\t\tconst option = options.find((option) => option.id === id);\n\n\t\t\t\tif (\n\t\t\t\t\tlabel &&\n\t\t\t\t\tquantity !== undefined &&\n\t\t\t\t\t((option?.max !== undefined && option?.max < quantity) \|\|\n\t\t\t\t\t\t(option?.min !== undefined && option?.min > quantity))\n\t\t\t\t) {\n\t\t\t\t\treturn [...exceedingOptions, label];\n\t\t\t\t}\n\n\t\t\t\treturn exceedingOptions;\n\t\t\t}, [] as string[]),\n\t\t[currentOptions, options]\n\t);\n\n\tconst isError = useMemo(\n\t\t() => error \|\| !!optionsExceedingBoundaries.length,\n\t\t[error, optionsExceedingBoundaries]\n\t);\n\n\tconst toggleInput = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement>) => {\n\t\t\tconst { currentTarget } = event;\n\n\t\t\tif (!disabled && !readOnly) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tsetAnchorEl((currentAnchor) =>\n\t\t\t\t\t\tcurrentAnchor ? undefined : currentTarget\n\t\t\t\t\t);\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t},\n\t\t[disabled, readOnly, setAnchorEl]\n\t);\n\n\tconst onInputFocus = () => {\n\t\tif (onFocus) {\n\t\t\tonFocus(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onInputBlur = () => {\n\t\tif (onBlur) {\n\t\t\tonBlur(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onValueChange = (optionId: string, newValue: string \| number) => {\n\t\tconst newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);\n\n\t\tconst newCurrentOptions = currentOptions.map((option) => {\n\t\t\tconst maxQuantity =\n\t\t\t\tnewQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;\n\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\t...(optionId === option.id && {\n\t\t\t\t\tquantity:\n\t\t\t\t\t\tnewQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,\n\t\t\t\t\tinputQuantity: newValue\n\t\t\t\t})\n\t\t\t};\n\t\t});\n\n\t\tif (onChange) {\n\t\t\tonChange(\n\t\t\t\tnewCurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentOptions(newCurrentOptions);\n\t};\n\n\tconst onDropdownItemBlur = (optionId: string) => () =>\n\t\tsetCurrentOptions(\n\t\t\tcurrentOptions.map((option) => {\n\t\t\t\tif (optionId !== option.id) return option;\n\n\t\t\t\tconst finalQuantity = Number.isNaN(Number(option?.inputQuantity))\n\t\t\t\t\t? 0\n\t\t\t\t\t: Number(option?.inputQuantity);\n\t\t\t\tconst maxQuantity =\n\t\t\t\t\tfinalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;\n\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\tinputQuantity:\n\t\t\t\t\t\tfinalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Box>\n\t\t\t\t<Box\n\t\t\t\t\tid={id}\n\t\t\t\t\tonClick={toggleInput}\n\t\t\t\t\tonBlur={onInputBlur}\n\t\t\t\t\tonFocus={onInputFocus}\n\t\t\t\t\tref={inputContainerRef}\n\t\t\t\t\tclassName={classNames(\"options-input__container\", className, {\n\t\t\t\t\t\t\"options-input__container--open\": open,\n\t\t\t\t\t\t\"options-input__container--disabled\": disabled,\n\t\t\t\t\t\t\"options-input__container--read-only\": readOnly,\n\t\t\t\t\t\t\"options-input__container--error\": isError\n\t\t\t\t\t})}\n\t\t\t\t\tsx={[\n\t\t\t\t\t\t{ \"&:hover\": { borderColor: \"#d3d3d3\" } },\n\t\t\t\t\t\t...(Array.isArray(containerSx) ? containerSx : [containerSx]),\n\t\t\t\t\t\topen && {\n\t\t\t\t\t\t\tborderColor: (theme) => theme.palette.primary.main,\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: (theme) => theme.palette.primary.main }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisError && {\n\t\t\t\t\t\t\tborderColor: red[700],\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: red[700] }\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tdata-testid={rest[\"data-testid\"] \|\| \"options-input-container\"}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={itemsGap}>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ quantity, id: optionId, icon }) =>\n\t\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\t\tDesignSystemIcons[\n\t\t\t\t\t\t\t\t\t\t\tcapitalize(icon) as keyof typeof DesignSystemIcons\n\t\t\t\t\t\t\t\t\t\t] &&\n\t\t\t\t\t\t\t\t\t\t(quantity !== 0 \|\| persistentOptions?.includes(optionId))\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option) => (\n\t\t\t\t\t\t\t\t<OptionsInputContentItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t\t\t!!(option?.label && optionsExceedingBoundaries.includes(option.label))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t\t{!readOnly &&\n\t\t\t\t\t\t(open ? (\n\t\t\t\t\t\t\t<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : \"primary\" }} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KeyboardArrowDownIcon\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: (theme) =>\n\t\t\t\t\t\t\t\t\t\tdisabled ? theme.palette.grey[400] : theme.palette.action.focus\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t{(helperText \|\| isError) && (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tfontSize: \"small\",\n\t\t\t\t\t\t\t...(helperTextSx \|\| {}),\n\t\t\t\t\t\t\t...(isError ? { color: red[700] } : {})\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmarginTop={1}\n\t\t\t\t\t\tmarginLeft={2}\n\t\t\t\t\t\twidth={inputContainerWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsExceedingBoundaries.length\n\t\t\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\t\t\tconst messagePluralForm =\n\t\t\t\t\t\t\t\t\t\toptionsExceedingBoundaries.length > 1 ? \"s\" : \"\";\n\n\t\t\t\t\t\t\t\t\treturn `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(\", \")} option${messagePluralForm} ${messagePluralForm ? \"are\" : \"is\"} out of range.`;\n\t\t\t\t\t\t\t\t})()\n\t\t\t\t\t\t\t: helperText}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</Box>\n\t\t\t<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>\n\t\t\t\t<Popper\n\t\t\t\t\topen={open}\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\tanchorEl={anchorEl}\n\t\t\t\t\tsx={(theme) => ({ zIndex: theme.zIndex.modal })}\n\t\t\t\t>\n\t\t\t\t\t<List\n\t\t\t\t\t\tdisablePadding\n\t\t\t\t\t\tdata-testid=\"options-dropdown-list\"\n\t\t\t\t\t\tclassName=\"options-input__dropdown-items-list\"\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: \"Background\",\n\t\t\t\t\t\t\tborder: (theme) =>\n\t\t\t\t\t\t\t\t`thin solid ${isError ? red[700] : theme.palette.primary.main}`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ icon }) =>\n\t\t\t\t\t\t\t\t\t!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option, index) => (\n\t\t\t\t\t\t\t\t<OptionsInputDropdownItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tonBlur={onDropdownItemBlur(option.id)}\n\t\t\t\t\t\t\t\t\tonChange={onValueChange}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={isError}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t</Popper>\n\t\t\t</ClickAwayListener>\n\t\t</>\n\t);\n};\n","import Tooltip from \"@mui/material/Tooltip\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\nimport { red } from \"@mui/material/colors\";\nimport { useMemo } from \"react\";\n\nexport type OptionsInputContentItemProps = {\n\titem: OptionsInputOption;\n\tdisabled?: boolean;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false\n}: OptionsInputContentItemProps) => {\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\tconst itemsColor = useMemo(() => {\n\t\tconst defaultItemColor = quantity === 0 \|\| disabled ? \"#a4a5b2\" : \"#000000\";\n\n\t\treturn error ? red[700] : defaultItemColor;\n\t}, [error, quantity, disabled]);\n\n\treturn (\n\t\t<Box\n\t\t\tdisplay=\"flex\"\n\t\t\talignItems=\"center\"\n\t\t\tgap={0.5}\n\t\t\tcolor={itemsColor}\n\t\t\tdata-testid=\"option-item\"\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<Tooltip\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Box display=\"flex\" flexDirection=\"column\">\n\t\t\t\t\t\t\t<Typography variant=\"caption\" fontWeight={600} sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t\t<Typography variant=\"caption\" sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} />}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tarrow\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography variant=\"h6\" color={itemsColor}>\n\t\t\t\t{quantity}\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n\nexport default OptionsInputContentItem;\n","import Typography, { type TypographyProps } from \"@mui/material/Typography\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?: TypographyProps[\"color\"];\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" color={color} sx={{ my: 0 }}>\n\t\t{!Number.isNaN(Number(min)) && `min: ${min}`}\n\t\t{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && \", \"}\n\t\t{!Number.isNaN(Number(max)) && `max: ${max}`}\n\t</Typography>\n);\n","export const capitalize = (str: string) =>\n\tstr.charAt(0).toUpperCase() + str.slice(1);\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport ButtonGroup from \"@mui/material/ButtonGroup\";\nimport Divider from \"@mui/material/Divider\";\nimport TextField from \"@mui/material/TextField\";\nimport ListItem from \"@mui/material/ListItem\";\nimport Button from \"@mui/material/Button\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\n\nexport type OptionsInputDropdownItemProps = {\n\titem: OptionsInputOption;\n\tonBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n\tonChange: (id: string, value: number \| string) => void;\n\tindex: number;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputDropdownItem = ({\n\titem: { id, quantity = 0, label, max, min, icon, details, inputQuantity },\n\tonChange,\n\tonBlur,\n\tindex,\n\tdisplayMinMax,\n\terror = false\n}: OptionsInputDropdownItemProps) => {\n\tconst [shouldDisplayFullDetails, setShouldDisplayFullDetails] =\n\t\tuseState<boolean>(false);\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\n\tconst onIncrement = (inputId: string) => () => {\n\t\tconst isValueBelowMin = !!(min && quantity < min);\n\n\t\tonChange(inputId, (isValueBelowMin ? min : quantity + 1)!);\n\t};\n\n\tconst onDecrement = (inputId: string) => () => {\n\t\tconst isValueAboveMax = !!(max && quantity > max);\n\n\t\treturn onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{!!index && (\n\t\t\t\t<Divider sx={{ color: (theme) => theme.palette.primary.main }} />\n\t\t\t)}\n\t\t\t<ListItem\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"space-between\"\n\t\t\t\t}}\n\t\t\t\tclassName={classNames(\"options-input__dropdown-item\", {\n\t\t\t\t\t\"options-input__dropdown-item--empty\": !quantity\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Box display=\"flex\" alignItems=\"center\">\n\t\t\t\t\t<Icon fontSize=\"small\" sx={{ color: \"black\" }} />\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tonChange={({ target }) => onChange(id, target.value)}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\tvalue={inputQuantity}\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\tinputMode: \"numeric\",\n\t\t\t\t\t\t\tpattern: \"-?[0-9]*\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\ttextAlign: \"center\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"data-testid\": \"dropdown-item-input\"\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-no-duplicate-props\n\t\t\t\t\t\tInputProps={{ disableUnderline: true }}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdisplay=\"flex\"\n\t\t\t\t\t\tflexDirection=\"column\"\n\t\t\t\t\t\tjustifyContent=\"center\"\n\t\t\t\t\t\tpaddingRight={2}\n\t\t\t\t\t\tpaddingLeft={1}\n\t\t\t\t\t\tminWidth=\"5rem\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfontSize={13}\n\t\t\t\t\t\t\tsx={{ my: 0 }}\n\t\t\t\t\t\t\tcolor=\"black\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label \|\| id}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tposition=\"relative\"\n\t\t\t\t\t\t\t\theight=\"1rem\"\n\t\t\t\t\t\t\t\tdata-testid=\"option-details-container\"\n\t\t\t\t\t\t\t\tonMouseEnter={() => setShouldDisplayFullDetails(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setShouldDisplayFullDetails(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\t\tmy: 0,\n\t\t\t\t\t\t\t\t\t\tzIndex: 10000,\n\t\t\t\t\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t\t\t\t\t\t...(shouldDisplayFullDetails && {\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: quantity ? \"#ffffff\" : \"#eeeeee\",\n\t\t\t\t\t\t\t\t\t\t\tborder: \"thin solid #d3d3d3\"\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-testid=\"option-details\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{details?.length <= 15 \|\| shouldDisplayFullDetails\n\t\t\t\t\t\t\t\t\t\t? details\n\t\t\t\t\t\t\t\t\t\t: `${details?.slice(0, 15)}...`}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} color=\"gray\" />}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"options-input__dropdown-item-buttons\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onIncrement(id)}\n\t\t\t\t\t\tdisabled={!!(max && quantity && quantity >= max)}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AddIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onDecrement(id)}\n\t\t\t\t\t\tdisabled={!!(quantity && min) && quantity <= min}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RemoveIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonGroup>\n\t\t\t</ListItem>\n\t\t</>\n\t);\n};\n\nexport default OptionsInputDropdownItem;\n"],"mappings":"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","names":["useState","useEffect","useCallback","useMemo","useRef","classNames","Box","List","Popper","ClickAwayListener","KeyboardArrowDownIcon","KeyboardArrowUpIcon","DesignSystemIcons","Tooltip","Box","Typography","DesignSystemIcons","Typography","jsxs","MinMaxValueLabel","min","max","color","capitalize","str","red","useMemo","jsx","jsxs","OptionsInputContentItem","quantity","details","label","max","min","icon","displayMinMax","disabled","error","Icon","DesignSystemIcons","capitalize","itemsColor","Box","Tooltip","Typography","MinMaxValueLabel","options_input_content_item_default","useState","classNames","Box","Typography","ButtonGroup","Divider","TextField","ListItem","Button","AddIcon","RemoveIcon","DesignSystemIcons","Fragment","jsx","jsxs","OptionsInputDropdownItem","id","quantity","label","max","min","icon","details","inputQuantity","onChange","onBlur","index","displayMinMax","error","shouldDisplayFullDetails","setShouldDisplayFullDetails","useState","Icon","DesignSystemIcons","capitalize","onIncrement","inputId","isValueBelowMin","onDecrement","isValueAboveMax","Divider","theme","ListItem","classNames","Box","TextField","target","Typography","MinMaxValueLabel","ButtonGroup","Button","AddIcon","RemoveIcon","options_input_dropdown_item_default","red","Fragment","jsx","jsxs","OptionsInput","options","onChange","onFocus","onBlur","persistentOptions","defaultValue","displayMinMax","disabled","readOnly","id","className","itemsGap","containerSx","error","helperText","helperTextSx","rest","currentOptions","setCurrentOptions","useState","inputContainerWidth","setInputContainerWidth","inputContainerRef","useRef","anchorEl","setAnchorEl","open","useEffect","option","quantity","optionsExceedingBoundaries","useMemo","exceedingOptions","label","isError","toggleInput","useCallback","event","currentTarget","currentAnchor","onInputFocus","currentValues","currentOption","onInputBlur","onValueChange","optionId","newValue","newQuantity","newCurrentOptions","maxQuantity","onDropdownItemBlur","finalQuantity","Box","classNames","theme","red","icon","DesignSystemIcons","capitalize","options_input_content_item_default","KeyboardArrowUpIcon","KeyboardArrowDownIcon","messagePluralForm","ClickAwayListener","Popper","List","index","options_input_dropdown_item_default"]}

package/dist/index.d.mts CHANGED Viewed

@@ -45,7 +45,7 @@ type OptionsInputProps = {
     itemsGap?: string | number;
     /** Custom styles for container */
     containerSx?: SxProps;
-    /** Flag indicating if there is an validation error */
+    /** Flag indicating if there is a validation error */
     error?: boolean;
     /** Additional content displayed with small font under the input */
     helperText?: ReactNode;

package/dist/index.d.ts CHANGED Viewed

@@ -45,7 +45,7 @@ type OptionsInputProps = {
     itemsGap?: string | number;
     /** Custom styles for container */
     containerSx?: SxProps;
-    /** Flag indicating if there is an validation error */
+    /** Flag indicating if there is a validation error */
     error?: boolean;
     /** Additional content displayed with small font under the input */
     helperText?: ReactNode;

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var Bt=Object.create;var C=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Gt=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var Ht=(o,n)=>{for(var p in n)C(o,p,{get:n[p],enumerable:!0})},A=(o,n,p,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of Ot(n))!ht.call(o,s)&&s!==p&&C(o,s,{get:()=>n[s],enumerable:!(l=Nt(n,s))||l.enumerable});return o};var i=(o,n,p)=>(p=o!=null?Bt(Gt(o)):{},A(n||!o||!o.__esModule?C(p,"default",{value:o,enumerable:!0}):p,o)),Ft=o=>A(C({},"__esModule",{value:!0}),o);var Qt={};Ht(Qt,{OptionsInput:()=>Mt});module.exports=Ft(Qt);var d=require("react"),dt=i(require("classnames")),M=i(require("@mui/material/Box")),mt=i(require("@mui/material/List")),ct=i(require("@mui/material/Popper")),ut=i(require("@mui/material/ClickAwayListener")),bt=i(require("@mui/icons-material/KeyboardArrowDown")),ft=i(require("@mui/icons-material/KeyboardArrowUp")),lt=i(require("@talixo-ds/icons"));var j=i(require("@mui/material/Tooltip")),U=i(require("@mui/material/Box")),D=i(require("@mui/material/Typography")),Vt=i(require("@talixo-ds/icons"));var P=i(require("@mui/material/Typography")),E=require("react/jsx-runtime"),_=({min:o,max:n,color:p})=>(0,E.jsxs)(P.default,{variant:"caption",color:p,sx:{my:0},children:[!Number.isNaN(Number(o))&&`min: ${o}`,!Number.isNaN(Number(n))&&!Number.isNaN(Number(o))&&", ",!Number.isNaN(Number(n))&&`max: ${n}`]});var N=o=>o.charAt(0).toUpperCase()+o.slice(1);var $=require("@mui/material/colors"),K=require("react"),u=require("react/jsx-runtime"),vt=({item:{quantity:o,details:n,label:p,max:l,min:s,icon:O},displayMinMax:I=!1,disabled:x=!1,error:b=!1})=>{let G=Vt[N(O)]||null,g=(0,K.useMemo)(()=>b?$.red[700]:o===0||x?"#a4a5b2":"#000000",[b,o,x]);return(0,u.jsxs)(U.default,{display:"flex",alignItems:"center",gap:.5,color:g,"data-testid":"option-item",children:[p?(0,u.jsx)(j.default,{title:(0,u.jsxs)(U.default,{display:"flex",flexDirection:"column",children:[(0,u.jsx)(D.default,{variant:"caption",fontWeight:600,sx:{my:0},children:p}),n&&(0,u.jsx)(D.default,{variant:"caption",sx:{my:0},children:n}),I&&(0,u.jsx)(_,{min:s,max:l})]}),placement:"top",arrow:!0,children:(0,u.jsx)("span",{children:(0,u.jsx)(G,{fontSize:"medium",sx:{color:g}})})}):(0,u.jsx)(G,{fontSize:"medium",sx:{color:g}}),(0,u.jsx)(D.default,{variant:"h6",color:g,children:o})]})},q=vt;var tt=require("react"),ot=i(require("classnames")),Z=i(require("@mui/material/Box")),Y=i(require("@mui/material/Typography")),nt=i(require("@mui/material/ButtonGroup")),et=i(require("@mui/material/Divider")),it=i(require("@mui/material/TextField")),rt=i(require("@mui/material/ListItem")),S=i(require("@mui/material/Button")),pt=i(require("@mui/icons-material/Add")),st=i(require("@mui/icons-material/Remove")),Wt=i(require("@talixo-ds/icons"));var r=require("react/jsx-runtime"),wt=({item:{id:o,quantity:n=0,label:p,max:l,min:s,icon:O,details:I,inputQuantity:x},onChange:b,onBlur:G,index:g,displayMinMax:Q,error:X=!1})=>{let[V,v]=(0,tt.useState)(!1),z=Wt[N(O)]||null,L=f=>()=>{let W=!!(s&&n<s);b(f,W?s:n+1)},y=f=>()=>{let W=!!(l&&n>l);return b(f,W?l:n-1)};return(0,r.jsxs)(r.Fragment,{children:[!!g&&(0,r.jsx)(et.default,{sx:{color:f=>f.palette.primary.main}}),(0,r.jsxs)(rt.default,{sx:{display:"flex",justifyContent:"space-between"},className:(0,ot.default)("options-input__dropdown-item",{"options-input__dropdown-item--empty":!n}),children:[(0,r.jsxs)(Z.default,{display:"flex",alignItems:"center",children:[(0,r.jsx)(z,{fontSize:"small",sx:{color:"black"}}),(0,r.jsx)(it.default,{onChange:({target:f})=>b(o,f.value),onBlur:G,value:x,variant:"standard",inputProps:{inputMode:"numeric",pattern:"-?[0-9]*",style:{textAlign:"center"},"data-testid":"dropdown-item-input"},InputProps:{disableUnderline:!0},className:"options-input__dropdown-item-input"}),(0,r.jsxs)(Z.default,{display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:2,paddingLeft:1,minWidth:"5rem",children:[(0,r.jsx)(Y.default,{variant:"caption",fontWeight:600,fontSize:13,sx:{my:0},color:"black",children:p||o}),I&&(0,r.jsx)(Z.default,{position:"relative",height:"1rem","data-testid":"option-details-container",onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1),children:(0,r.jsx)(Y.default,{variant:"caption",color:"gray",sx:{my:0,zIndex:1e4,position:"fixed",...V&&{backgroundColor:n?"#ffffff":"#eeeeee",border:"thin solid #d3d3d3"}},"data-testid":"option-details",children:I?.length<=15||V?I:`${I?.slice(0,15)}...`})}),Q&&(0,r.jsx)(_,{min:s,max:l,color:"gray"})]})]}),(0,r.jsxs)(nt.default,{variant:"outlined",size:"small",className:"options-input__dropdown-item-buttons",children:[(0,r.jsx)(S.default,{onClick:L(o),disabled:!!(l&&n&&n>=l),className:"options-input__dropdown-item-button",role:"button",color:X?"error":"primary",children:(0,r.jsx)(pt.default,{sx:{color:X?"black":"primary"}})}),(0,r.jsx)(S.default,{onClick:y(o),disabled:!!(n&&s)&&n<=s,className:"options-input__dropdown-item-button",role:"button",color:X?"error":"primary",children:(0,r.jsx)(st.default,{sx:{color:X?"black":"primary"}})})]})]})]})},at=wt;var F=require("@mui/material/colors");var Kt=require("@emotion/react"),qt=require("@emotion/styled"),a=require("react/jsx-runtime"),Mt=({options:o,onChange:n,onFocus:p,onBlur:l,persistentOptions:s=[],defaultValue:O,displayMinMax:I=!1,disabled:x=!1,readOnly:b=!1,id:G,className:g,itemsGap:Q=1,containerSx:X=[],error:V=!1,helperText:v,helperTextSx:z,...L})=>{let[y,f]=(0,d.useState)([]),[W,xt]=(0,d.useState)(0),k=(0,d.useRef)(),[J,T]=(0,d.useState)(),w=!!J;(0,d.useEffect)(()=>f(o.map(t=>{let e=O?.[t.id]??0;return{...t,quantity:e,inputQuantity:e}})),[o,O]),(0,d.useEffect)(()=>{xt(k?.current?.clientWidth??0)},[k?.current?.clientWidth]);let h=(0,d.useMemo)(()=>y.reduce((t,{quantity:e,id:m,label:B})=>{let c=o.find(H=>H.id===m);return B&&e!==void 0&&(c?.max!==void 0&&c?.max<e||c?.min!==void 0&&c?.min>e)?[...t,B]:t},[]),[y,o]),R=(0,d.useMemo)(()=>V||!!h.length,[V,h]),yt=(0,d.useCallback)(t=>{let{currentTarget:e}=t;!x&&!b&&setTimeout(()=>{T(m=>m?void 0:e)},0)},[x,b,T]),It=()=>{p&&p(y.reduce((t,e)=>({...t,[e.id]:e.quantity}),{}))},gt=()=>{l&&l(y.reduce((t,e)=>({...t,[e.id]:e.quantity}),{}))},Xt=(t,e)=>{let m=Number.isNaN(Number(e))?0:Number(e),B=y.map(c=>{let H=m>(c?.max??1/0)?c?.max:m;return{...c,...t===c.id&&{quantity:m<(c?.min??-1/0)?c?.min:H,inputQuantity:e}}});n&&n(B.reduce((c,H)=>({...c,[H.id]:H.quantity}),{})),f(B)},Rt=t=>()=>f(y.map(e=>{if(t!==e.id)return e;let m=Number.isNaN(Number(e?.inputQuantity))?0:Number(e?.inputQuantity),B=m>(e?.max??1/0)?e?.max:m;return{...e,inputQuantity:m<(e?.min??-1/0)?e?.min:B}}));return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(M.default,{children:[(0,a.jsxs)(M.default,{id:G,onClick:yt,onBlur:gt,onFocus:It,ref:k,className:(0,dt.default)("options-input__container",g,{"options-input__container--open":w,"options-input__container--disabled":x,"options-input__container--read-only":b,"options-input__container--error":R}),sx:[{"&:hover":{borderColor:"#d3d3d3"}},...Array.isArray(X)?X:[X],w&&{borderColor:t=>t.palette.primary.main,"&:hover":{borderColor:t=>t.palette.primary.main}},R&&{borderColor:F.red[700],"&:hover":{borderColor:F.red[700]}}],"data-testid":L["data-testid"]||"options-input-container",tabIndex:0,children:[(0,a.jsx)(M.default,{display:"flex",gap:Q,children:y.filter(({quantity:t,id:e,icon:m})=>!!(lt[N(m)]&&(t!==0||s?.includes(e)))).map(t=>(0,a.jsx)(q,{item:t,disabled:x,displayMinMax:I,error:!!(t?.label&&h.includes(t.label))},t.id))}),!b&&(w?(0,a.jsx)(ft.default,{sx:{color:R?F.red[700]:"primary"}}):(0,a.jsx)(bt.default,{sx:{color:t=>x?t.palette.grey[400]:t.palette.action.focus}}))]}),(v||R)&&(0,a.jsx)(M.default,{sx:{fontSize:"small",...z||{},...R?{color:F.red[700]}:{}},marginTop:1,marginLeft:2,width:W,children:h.length?(()=>{let t=h.length>1?"s":"";return`Value${t} for ${h.join(", ")} option${t} ${t?"are":"is"} out of range.`})():v})]}),(0,a.jsx)(ut.default,{onClickAway:()=>w&&T(void 0),children:(0,a.jsx)(ct.default,{open:w,placement:"bottom-start",anchorEl:J,sx:t=>({zIndex:t.zIndex.modal}),children:(0,a.jsx)(mt.default,{disablePadding:!0,"data-testid":"options-dropdown-list",className:"options-input__dropdown-items-list",sx:{bgcolor:"Background",border:t=>`thin solid ${R?F.red[700]:t.palette.primary.main}`},children:y.filter(({icon:t})=>!!lt[N(t)]).map((t,e)=>(0,a.jsx)(at,{item:t,onBlur:Rt(t.id),onChange:Xt,index:e,displayMinMax:I,error:R},t.id))})})})]})};0&&(module.exports={OptionsInput});
+"use strict";var Bt=Object.create;var C=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Gt=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var Ht=(o,n)=>{for(var p in n)C(o,p,{get:n[p],enumerable:!0})},A=(o,n,p,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of Ot(n))!ht.call(o,s)&&s!==p&&C(o,s,{get:()=>n[s],enumerable:!(l=Nt(n,s))||l.enumerable});return o};var i=(o,n,p)=>(p=o!=null?Bt(Gt(o)):{},A(n||!o||!o.__esModule?C(p,"default",{value:o,enumerable:!0}):p,o)),Ft=o=>A(C({},"__esModule",{value:!0}),o);var Qt={};Ht(Qt,{OptionsInput:()=>Mt});module.exports=Ft(Qt);var d=require("react"),dt=i(require("classnames")),M=i(require("@mui/material/Box")),mt=i(require("@mui/material/List")),ct=i(require("@mui/material/Popper")),ut=i(require("@mui/material/ClickAwayListener")),bt=i(require("@mui/icons-material/KeyboardArrowDown")),ft=i(require("@mui/icons-material/KeyboardArrowUp")),lt=i(require("@talixo-ds/icons"));var j=i(require("@mui/material/Tooltip")),U=i(require("@mui/material/Box")),D=i(require("@mui/material/Typography")),Vt=i(require("@talixo-ds/icons"));var P=i(require("@mui/material/Typography")),E=require("react/jsx-runtime"),_=({min:o,max:n,color:p})=>(0,E.jsxs)(P.default,{variant:"caption",color:p,sx:{my:0},children:[!Number.isNaN(Number(o))&&`min: ${o}`,!Number.isNaN(Number(n))&&!Number.isNaN(Number(o))&&", ",!Number.isNaN(Number(n))&&`max: ${n}`]});var N=o=>o.charAt(0).toUpperCase()+o.slice(1);var $=require("@mui/material/colors"),K=require("react"),u=require("react/jsx-runtime"),vt=({item:{quantity:o,details:n,label:p,max:l,min:s,icon:O},displayMinMax:I=!1,disabled:x=!1,error:b=!1})=>{let G=Vt[N(O)]||null,g=(0,K.useMemo)(()=>b?$.red[700]:o===0||x?"#a4a5b2":"#000000",[b,o,x]);return(0,u.jsxs)(U.default,{display:"flex",alignItems:"center",gap:.5,color:g,"data-testid":"option-item",children:[p?(0,u.jsx)(j.default,{title:(0,u.jsxs)(U.default,{display:"flex",flexDirection:"column",children:[(0,u.jsx)(D.default,{variant:"caption",fontWeight:600,sx:{my:0},children:p}),n&&(0,u.jsx)(D.default,{variant:"caption",sx:{my:0},children:n}),I&&(0,u.jsx)(_,{min:s,max:l})]}),placement:"top",arrow:!0,children:(0,u.jsx)("span",{children:(0,u.jsx)(G,{fontSize:"medium",sx:{color:g}})})}):(0,u.jsx)(G,{fontSize:"medium",sx:{color:g}}),(0,u.jsx)(D.default,{variant:"h6",color:g,children:o})]})},q=vt;var tt=require("react"),ot=i(require("classnames")),Z=i(require("@mui/material/Box")),Y=i(require("@mui/material/Typography")),nt=i(require("@mui/material/ButtonGroup")),et=i(require("@mui/material/Divider")),it=i(require("@mui/material/TextField")),rt=i(require("@mui/material/ListItem")),S=i(require("@mui/material/Button")),pt=i(require("@mui/icons-material/Add")),st=i(require("@mui/icons-material/Remove")),Wt=i(require("@talixo-ds/icons"));var r=require("react/jsx-runtime"),wt=({item:{id:o,quantity:n=0,label:p,max:l,min:s,icon:O,details:I,inputQuantity:x},onChange:b,onBlur:G,index:g,displayMinMax:Q,error:X=!1})=>{let[V,v]=(0,tt.useState)(!1),z=Wt[N(O)]||null,L=f=>()=>{let W=!!(s&&n<s);b(f,W?s:n+1)},y=f=>()=>{let W=!!(l&&n>l);return b(f,W?l:n-1)};return(0,r.jsxs)(r.Fragment,{children:[!!g&&(0,r.jsx)(et.default,{sx:{color:f=>f.palette.primary.main}}),(0,r.jsxs)(rt.default,{sx:{display:"flex",justifyContent:"space-between"},className:(0,ot.default)("options-input__dropdown-item",{"options-input__dropdown-item--empty":!n}),children:[(0,r.jsxs)(Z.default,{display:"flex",alignItems:"center",children:[(0,r.jsx)(z,{fontSize:"small",sx:{color:"black"}}),(0,r.jsx)(it.default,{onChange:({target:f})=>b(o,f.value),onBlur:G,value:x,variant:"standard",inputProps:{inputMode:"numeric",pattern:"-?[0-9]*",style:{textAlign:"center"},"data-testid":"dropdown-item-input"},InputProps:{disableUnderline:!0},className:"options-input__dropdown-item-input"}),(0,r.jsxs)(Z.default,{display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:2,paddingLeft:1,minWidth:"5rem",children:[(0,r.jsx)(Y.default,{variant:"caption",fontWeight:600,fontSize:13,sx:{my:0},color:"black",children:p||o}),I&&(0,r.jsx)(Z.default,{position:"relative",height:"1rem","data-testid":"option-details-container",onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1),children:(0,r.jsx)(Y.default,{variant:"caption",color:"gray",sx:{my:0,zIndex:1e4,position:"fixed",...V&&{backgroundColor:n?"#ffffff":"#eeeeee",border:"thin solid #d3d3d3"}},"data-testid":"option-details",children:I?.length<=15||V?I:`${I?.slice(0,15)}...`})}),Q&&(0,r.jsx)(_,{min:s,max:l,color:"gray"})]})]}),(0,r.jsxs)(nt.default,{variant:"outlined",size:"small",className:"options-input__dropdown-item-buttons",children:[(0,r.jsx)(S.default,{onClick:L(o),disabled:!!(l&&n&&n>=l),className:"options-input__dropdown-item-button",role:"button",color:X?"error":"primary",children:(0,r.jsx)(pt.default,{sx:{color:X?"black":"primary"}})}),(0,r.jsx)(S.default,{onClick:y(o),disabled:!!(n&&s)&&n<=s,className:"options-input__dropdown-item-button",role:"button",color:X?"error":"primary",children:(0,r.jsx)(st.default,{sx:{color:X?"black":"primary"}})})]})]})]})},at=wt;var F=require("@mui/material/colors");var Kt=require("@emotion/react"),qt=require("@emotion/styled"),a=require("react/jsx-runtime"),Mt=({options:o,onChange:n,onFocus:p,onBlur:l,persistentOptions:s=[],defaultValue:O,displayMinMax:I=!1,disabled:x=!1,readOnly:b=!1,id:G,className:g,itemsGap:Q=1,containerSx:X=[],error:V=!1,helperText:v,helperTextSx:z,...L})=>{let[y,f]=(0,d.useState)([]),[W,xt]=(0,d.useState)(0),k=(0,d.useRef)(null),[J,T]=(0,d.useState)(),w=!!J;(0,d.useEffect)(()=>f(o.map(t=>{let e=O?.[t.id]??0;return{...t,quantity:e,inputQuantity:e}})),[o,O]),(0,d.useEffect)(()=>{xt(k?.current?.clientWidth??0)},[k?.current?.clientWidth]);let h=(0,d.useMemo)(()=>y.reduce((t,{quantity:e,id:m,label:B})=>{let c=o.find(H=>H.id===m);return B&&e!==void 0&&(c?.max!==void 0&&c?.max<e||c?.min!==void 0&&c?.min>e)?[...t,B]:t},[]),[y,o]),R=(0,d.useMemo)(()=>V||!!h.length,[V,h]),yt=(0,d.useCallback)(t=>{let{currentTarget:e}=t;!x&&!b&&setTimeout(()=>{T(m=>m?void 0:e)},0)},[x,b,T]),It=()=>{p&&p(y.reduce((t,e)=>({...t,[e.id]:e.quantity}),{}))},gt=()=>{l&&l(y.reduce((t,e)=>({...t,[e.id]:e.quantity}),{}))},Xt=(t,e)=>{let m=Number.isNaN(Number(e))?0:Number(e),B=y.map(c=>{let H=m>(c?.max??1/0)?c?.max:m;return{...c,...t===c.id&&{quantity:m<(c?.min??-1/0)?c?.min:H,inputQuantity:e}}});n&&n(B.reduce((c,H)=>({...c,[H.id]:H.quantity}),{})),f(B)},Rt=t=>()=>f(y.map(e=>{if(t!==e.id)return e;let m=Number.isNaN(Number(e?.inputQuantity))?0:Number(e?.inputQuantity),B=m>(e?.max??1/0)?e?.max:m;return{...e,inputQuantity:m<(e?.min??-1/0)?e?.min:B}}));return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(M.default,{children:[(0,a.jsxs)(M.default,{id:G,onClick:yt,onBlur:gt,onFocus:It,ref:k,className:(0,dt.default)("options-input__container",g,{"options-input__container--open":w,"options-input__container--disabled":x,"options-input__container--read-only":b,"options-input__container--error":R}),sx:[{"&:hover":{borderColor:"#d3d3d3"}},...Array.isArray(X)?X:[X],w&&{borderColor:t=>t.palette.primary.main,"&:hover":{borderColor:t=>t.palette.primary.main}},R&&{borderColor:F.red[700],"&:hover":{borderColor:F.red[700]}}],"data-testid":L["data-testid"]||"options-input-container",tabIndex:0,children:[(0,a.jsx)(M.default,{display:"flex",gap:Q,children:y.filter(({quantity:t,id:e,icon:m})=>!!(lt[N(m)]&&(t!==0||s?.includes(e)))).map(t=>(0,a.jsx)(q,{item:t,disabled:x,displayMinMax:I,error:!!(t?.label&&h.includes(t.label))},t.id))}),!b&&(w?(0,a.jsx)(ft.default,{sx:{color:R?F.red[700]:"primary"}}):(0,a.jsx)(bt.default,{sx:{color:t=>x?t.palette.grey[400]:t.palette.action.focus}}))]}),(v||R)&&(0,a.jsx)(M.default,{sx:{fontSize:"small",...z||{},...R?{color:F.red[700]}:{}},marginTop:1,marginLeft:2,width:W,children:h.length?(()=>{let t=h.length>1?"s":"";return`Value${t} for ${h.join(", ")} option${t} ${t?"are":"is"} out of range.`})():v})]}),(0,a.jsx)(ut.default,{onClickAway:()=>w&&T(void 0),children:(0,a.jsx)(ct.default,{open:w,placement:"bottom-start",anchorEl:J,sx:t=>({zIndex:t.zIndex.modal}),children:(0,a.jsx)(mt.default,{disablePadding:!0,"data-testid":"options-dropdown-list",className:"options-input__dropdown-items-list",sx:{bgcolor:"Background",border:t=>`thin solid ${R?F.red[700]:t.palette.primary.main}`},children:y.filter(({icon:t})=>!!lt[N(t)]).map((t,e)=>(0,a.jsx)(at,{item:t,onBlur:Rt(t.id),onChange:Xt,index:e,displayMinMax:I,error:R},t.id))})})})]})};0&&(module.exports={OptionsInput});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/options-input.tsx","../src/components/options-input-content-item.tsx","../src/components/min-max-value-label.tsx","../src/utils.ts","../src/components/options-input-dropdown-item.tsx"],"sourcesContent":["export * from \"./options-input\";\nexport * from \"./types\";\n","import React, {\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef\n} from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport List from \"@mui/material/List\";\nimport Popper from \"@mui/material/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport type { SxProps } from \"@mui/material\";\nimport type { OptionsInputOption, OptionsInputValue } from \"./types\";\nimport OptionsInputContentItem from \"./components/options-input-content-item\";\nimport OptionsInputDropdownItem from \"./components/options-input-dropdown-item\";\nimport { capitalize } from \"./utils\";\nimport { red } from \"@mui/material/colors\";\nimport \"./styles.scss\";\n\nimport \"@emotion/react\";\nimport \"@emotion/styled\";\n\nexport type OptionsInputProps = {\n\t/** Array of objects representing options available to choose from /\n\toptions: OptionsInputOption[];\n\t/* Object with default values of some options /\n\tdefaultValue?: OptionsInputValue;\n\t/* Array with ids of options which should remain displayed even if value is 0 /\n\tpersistentOptions?: string[];\n\t/* Boolean to determine if input is disabled /\n\tdisabled?: boolean;\n\t/* Boolean to determine if input is readOnly /\n\treadOnly?: boolean;\n\t/* Boolean to determine if min and max input values should be displayed /\n\tdisplayMinMax?: boolean;\n\t/* Function which handles options input value change /\n\tonChange?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input focus event /\n\tonFocus?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input blur event /\n\tonBlur?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* className attached to an input container /\n\tclassName?: string;\n\t/* id attached to an input container /\n\tid?: string;\n\t/* data test id attached to an input container /\n\t\"data-testid\"?: string;\n\t/* Gap between input items /\n\titemsGap?: string \| number;\n\t/* Custom styles for container /\n\tcontainerSx?: SxProps;\n\t/* Flag indicating if there is an validation error /\n\terror?: boolean;\n\t/* Additional content displayed with small font under the input /\n\thelperText?: ReactNode;\n\t/* Custom styles for helper text container /\n\thelperTextSx?: SxProps;\n};\n\nexport const OptionsInput = ({\n\toptions,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tpersistentOptions = [],\n\tdefaultValue,\n\tdisplayMinMax = false,\n\tdisabled = false,\n\treadOnly = false,\n\tid,\n\tclassName,\n\titemsGap = 1,\n\tcontainerSx = [],\n\terror = false,\n\thelperText,\n\thelperTextSx,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst inputContainerRef = useRef<HTMLElement>();\n\tconst [anchorEl, setAnchorEl] = useState<undefined \| HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tuseEffect(\n\t\t() =>\n\t\t\tsetCurrentOptions(\n\t\t\t\toptions.map((option) => {\n\t\t\t\t\tconst quantity = defaultValue?.[option.id] ?? 0;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...option,\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tinputQuantity: quantity\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t),\n\t\t[options, defaultValue]\n\t);\n\n\tuseEffect(() => {\n\t\tsetInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);\n\t}, [inputContainerRef?.current?.clientWidth]);\n\n\tconst optionsExceedingBoundaries = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce((exceedingOptions, { quantity, id, label }) => {\n\t\t\t\tconst option = options.find((option) => option.id === id);\n\n\t\t\t\tif (\n\t\t\t\t\tlabel &&\n\t\t\t\t\tquantity !== undefined &&\n\t\t\t\t\t((option?.max !== undefined && option?.max < quantity) \|\|\n\t\t\t\t\t\t(option?.min !== undefined && option?.min > quantity))\n\t\t\t\t) {\n\t\t\t\t\treturn [...exceedingOptions, label];\n\t\t\t\t}\n\n\t\t\t\treturn exceedingOptions;\n\t\t\t}, [] as string[]),\n\t\t[currentOptions, options]\n\t);\n\n\tconst isError = useMemo(\n\t\t() => error \|\| !!optionsExceedingBoundaries.length,\n\t\t[error, optionsExceedingBoundaries]\n\t);\n\n\tconst toggleInput = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement>) => {\n\t\t\tconst { currentTarget } = event;\n\n\t\t\tif (!disabled && !readOnly) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tsetAnchorEl((currentAnchor) =>\n\t\t\t\t\t\tcurrentAnchor ? undefined : currentTarget\n\t\t\t\t\t);\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t},\n\t\t[disabled, readOnly, setAnchorEl]\n\t);\n\n\tconst onInputFocus = () => {\n\t\tif (onFocus) {\n\t\t\tonFocus(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onInputBlur = () => {\n\t\tif (onBlur) {\n\t\t\tonBlur(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onValueChange = (optionId: string, newValue: string \| number) => {\n\t\tconst newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);\n\n\t\tconst newCurrentOptions = currentOptions.map((option) => {\n\t\t\tconst maxQuantity =\n\t\t\t\tnewQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;\n\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\t...(optionId === option.id && {\n\t\t\t\t\tquantity:\n\t\t\t\t\t\tnewQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,\n\t\t\t\t\tinputQuantity: newValue\n\t\t\t\t})\n\t\t\t};\n\t\t});\n\n\t\tif (onChange) {\n\t\t\tonChange(\n\t\t\t\tnewCurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentOptions(newCurrentOptions);\n\t};\n\n\tconst onDropdownItemBlur = (optionId: string) => () =>\n\t\tsetCurrentOptions(\n\t\t\tcurrentOptions.map((option) => {\n\t\t\t\tif (optionId !== option.id) return option;\n\n\t\t\t\tconst finalQuantity = Number.isNaN(Number(option?.inputQuantity))\n\t\t\t\t\t? 0\n\t\t\t\t\t: Number(option?.inputQuantity);\n\t\t\t\tconst maxQuantity =\n\t\t\t\t\tfinalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;\n\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\tinputQuantity:\n\t\t\t\t\t\tfinalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Box>\n\t\t\t\t<Box\n\t\t\t\t\tid={id}\n\t\t\t\t\tonClick={toggleInput}\n\t\t\t\t\tonBlur={onInputBlur}\n\t\t\t\t\tonFocus={onInputFocus}\n\t\t\t\t\tref={inputContainerRef}\n\t\t\t\t\tclassName={classNames(\"options-input__container\", className, {\n\t\t\t\t\t\t\"options-input__container--open\": open,\n\t\t\t\t\t\t\"options-input__container--disabled\": disabled,\n\t\t\t\t\t\t\"options-input__container--read-only\": readOnly,\n\t\t\t\t\t\t\"options-input__container--error\": isError\n\t\t\t\t\t})}\n\t\t\t\t\tsx={[\n\t\t\t\t\t\t{ \"&:hover\": { borderColor: \"#d3d3d3\" } },\n\t\t\t\t\t\t...(Array.isArray(containerSx) ? containerSx : [containerSx]),\n\t\t\t\t\t\topen && {\n\t\t\t\t\t\t\tborderColor: (theme) => theme.palette.primary.main,\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: (theme) => theme.palette.primary.main }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisError && {\n\t\t\t\t\t\t\tborderColor: red[700],\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: red[700] }\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tdata-testid={rest[\"data-testid\"] \|\| \"options-input-container\"}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={itemsGap}>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ quantity, id: optionId, icon }) =>\n\t\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\t\tDesignSystemIcons[\n\t\t\t\t\t\t\t\t\t\t\tcapitalize(icon) as keyof typeof DesignSystemIcons\n\t\t\t\t\t\t\t\t\t\t] &&\n\t\t\t\t\t\t\t\t\t\t(quantity !== 0 \|\| persistentOptions?.includes(optionId))\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option) => (\n\t\t\t\t\t\t\t\t<OptionsInputContentItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t\t\t!!(option?.label && optionsExceedingBoundaries.includes(option.label))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t\t{!readOnly &&\n\t\t\t\t\t\t(open ? (\n\t\t\t\t\t\t\t<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : \"primary\" }} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KeyboardArrowDownIcon\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: (theme) =>\n\t\t\t\t\t\t\t\t\t\tdisabled ? theme.palette.grey[400] : theme.palette.action.focus\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t{(helperText \|\| isError) && (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tfontSize: \"small\",\n\t\t\t\t\t\t\t...(helperTextSx \|\| {}),\n\t\t\t\t\t\t\t...(isError ? { color: red[700] } : {})\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmarginTop={1}\n\t\t\t\t\t\tmarginLeft={2}\n\t\t\t\t\t\twidth={inputContainerWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsExceedingBoundaries.length\n\t\t\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\t\t\tconst messagePluralForm =\n\t\t\t\t\t\t\t\t\t\toptionsExceedingBoundaries.length > 1 ? \"s\" : \"\";\n\n\t\t\t\t\t\t\t\t\treturn `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(\", \")} option${messagePluralForm} ${messagePluralForm ? \"are\" : \"is\"} out of range.`;\n\t\t\t\t\t\t\t\t})()\n\t\t\t\t\t\t\t: helperText}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</Box>\n\t\t\t<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>\n\t\t\t\t<Popper\n\t\t\t\t\topen={open}\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\tanchorEl={anchorEl}\n\t\t\t\t\tsx={(theme) => ({ zIndex: theme.zIndex.modal })}\n\t\t\t\t>\n\t\t\t\t\t<List\n\t\t\t\t\t\tdisablePadding\n\t\t\t\t\t\tdata-testid=\"options-dropdown-list\"\n\t\t\t\t\t\tclassName=\"options-input__dropdown-items-list\"\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: \"Background\",\n\t\t\t\t\t\t\tborder: (theme) =>\n\t\t\t\t\t\t\t\t`thin solid ${isError ? red[700] : theme.palette.primary.main}`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ icon }) =>\n\t\t\t\t\t\t\t\t\t!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option, index) => (\n\t\t\t\t\t\t\t\t<OptionsInputDropdownItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tonBlur={onDropdownItemBlur(option.id)}\n\t\t\t\t\t\t\t\t\tonChange={onValueChange}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={isError}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t</Popper>\n\t\t\t</ClickAwayListener>\n\t\t</>\n\t);\n};\n","import Tooltip from \"@mui/material/Tooltip\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\nimport { red } from \"@mui/material/colors\";\nimport { useMemo } from \"react\";\n\nexport type OptionsInputContentItemProps = {\n\titem: OptionsInputOption;\n\tdisabled?: boolean;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false\n}: OptionsInputContentItemProps) => {\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\tconst itemsColor = useMemo(() => {\n\t\tconst defaultItemColor = quantity === 0 \|\| disabled ? \"#a4a5b2\" : \"#000000\";\n\n\t\treturn error ? red[700] : defaultItemColor;\n\t}, [error, quantity, disabled]);\n\n\treturn (\n\t\t<Box\n\t\t\tdisplay=\"flex\"\n\t\t\talignItems=\"center\"\n\t\t\tgap={0.5}\n\t\t\tcolor={itemsColor}\n\t\t\tdata-testid=\"option-item\"\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<Tooltip\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Box display=\"flex\" flexDirection=\"column\">\n\t\t\t\t\t\t\t<Typography variant=\"caption\" fontWeight={600} sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t\t<Typography variant=\"caption\" sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} />}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tarrow\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography variant=\"h6\" color={itemsColor}>\n\t\t\t\t{quantity}\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n\nexport default OptionsInputContentItem;\n","import Typography, { type TypographyProps } from \"@mui/material/Typography\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?: TypographyProps[\"color\"];\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" color={color} sx={{ my: 0 }}>\n\t\t{!Number.isNaN(Number(min)) && `min: ${min}`}\n\t\t{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && \", \"}\n\t\t{!Number.isNaN(Number(max)) && `max: ${max}`}\n\t</Typography>\n);\n","export const capitalize = (str: string) =>\n\tstr.charAt(0).toUpperCase() + str.slice(1);\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport ButtonGroup from \"@mui/material/ButtonGroup\";\nimport Divider from \"@mui/material/Divider\";\nimport TextField from \"@mui/material/TextField\";\nimport ListItem from \"@mui/material/ListItem\";\nimport Button from \"@mui/material/Button\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\n\nexport type OptionsInputDropdownItemProps = {\n\titem: OptionsInputOption;\n\tonBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n\tonChange: (id: string, value: number \| string) => void;\n\tindex: number;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputDropdownItem = ({\n\titem: { id, quantity = 0, label, max, min, icon, details, inputQuantity },\n\tonChange,\n\tonBlur,\n\tindex,\n\tdisplayMinMax,\n\terror = false\n}: OptionsInputDropdownItemProps) => {\n\tconst [shouldDisplayFullDetails, setShouldDisplayFullDetails] =\n\t\tuseState<boolean>(false);\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\n\tconst onIncrement = (inputId: string) => () => {\n\t\tconst isValueBelowMin = !!(min && quantity < min);\n\n\t\tonChange(inputId, (isValueBelowMin ? min : quantity + 1)!);\n\t};\n\n\tconst onDecrement = (inputId: string) => () => {\n\t\tconst isValueAboveMax = !!(max && quantity > max);\n\n\t\treturn onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{!!index && (\n\t\t\t\t<Divider sx={{ color: (theme) => theme.palette.primary.main }} />\n\t\t\t)}\n\t\t\t<ListItem\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"space-between\"\n\t\t\t\t}}\n\t\t\t\tclassName={classNames(\"options-input__dropdown-item\", {\n\t\t\t\t\t\"options-input__dropdown-item--empty\": !quantity\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Box display=\"flex\" alignItems=\"center\">\n\t\t\t\t\t<Icon fontSize=\"small\" sx={{ color: \"black\" }} />\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tonChange={({ target }) => onChange(id, target.value)}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\tvalue={inputQuantity}\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\tinputMode: \"numeric\",\n\t\t\t\t\t\t\tpattern: \"-?[0-9]*\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\ttextAlign: \"center\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"data-testid\": \"dropdown-item-input\"\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-no-duplicate-props\n\t\t\t\t\t\tInputProps={{ disableUnderline: true }}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdisplay=\"flex\"\n\t\t\t\t\t\tflexDirection=\"column\"\n\t\t\t\t\t\tjustifyContent=\"center\"\n\t\t\t\t\t\tpaddingRight={2}\n\t\t\t\t\t\tpaddingLeft={1}\n\t\t\t\t\t\tminWidth=\"5rem\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfontSize={13}\n\t\t\t\t\t\t\tsx={{ my: 0 }}\n\t\t\t\t\t\t\tcolor=\"black\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label \|\| id}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tposition=\"relative\"\n\t\t\t\t\t\t\t\theight=\"1rem\"\n\t\t\t\t\t\t\t\tdata-testid=\"option-details-container\"\n\t\t\t\t\t\t\t\tonMouseEnter={() => setShouldDisplayFullDetails(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setShouldDisplayFullDetails(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\t\tmy: 0,\n\t\t\t\t\t\t\t\t\t\tzIndex: 10000,\n\t\t\t\t\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t\t\t\t\t\t...(shouldDisplayFullDetails && {\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: quantity ? \"#ffffff\" : \"#eeeeee\",\n\t\t\t\t\t\t\t\t\t\t\tborder: \"thin solid #d3d3d3\"\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-testid=\"option-details\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{details?.length <= 15 \|\| shouldDisplayFullDetails\n\t\t\t\t\t\t\t\t\t\t? details\n\t\t\t\t\t\t\t\t\t\t: `${details?.slice(0, 15)}...`}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} color=\"gray\" />}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"options-input__dropdown-item-buttons\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onIncrement(id)}\n\t\t\t\t\t\tdisabled={!!(max && quantity && quantity >= max)}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AddIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onDecrement(id)}\n\t\t\t\t\t\tdisabled={!!(quantity && min) && quantity <= min}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RemoveIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonGroup>\n\t\t\t</ListItem>\n\t\t</>\n\t);\n};\n\nexport default OptionsInputDropdownItem;\n"],"mappings":"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","names":["src_exports","__export","OptionsInput","__toCommonJS","import_react","import_classnames","import_Box","import_List","import_Popper","import_ClickAwayListener","import_KeyboardArrowDown","import_KeyboardArrowUp","DesignSystemIcons","import_Tooltip","import_Box","import_Typography","DesignSystemIcons","import_Typography","import_jsx_runtime","MinMaxValueLabel","min","max","color","Typography","capitalize","str","import_colors","import_react","import_jsx_runtime","OptionsInputContentItem","quantity","details","label","max","min","icon","displayMinMax","disabled","error","Icon","DesignSystemIcons","capitalize","itemsColor","Box","Tooltip","Typography","MinMaxValueLabel","options_input_content_item_default","import_react","import_classnames","import_Box","import_Typography","import_ButtonGroup","import_Divider","import_TextField","import_ListItem","import_Button","import_Add","import_Remove","DesignSystemIcons","import_jsx_runtime","OptionsInputDropdownItem","id","quantity","label","max","min","icon","details","inputQuantity","onChange","onBlur","index","displayMinMax","error","shouldDisplayFullDetails","setShouldDisplayFullDetails","Icon","DesignSystemIcons","capitalize","onIncrement","inputId","isValueBelowMin","onDecrement","isValueAboveMax","Divider","theme","ListItem","classNames","Box","TextField","target","Typography","MinMaxValueLabel","ButtonGroup","Button","AddIcon","RemoveIcon","options_input_dropdown_item_default","import_colors","import_react","import_styled","import_jsx_runtime","OptionsInput","options","onChange","onFocus","onBlur","persistentOptions","defaultValue","displayMinMax","disabled","readOnly","id","className","itemsGap","containerSx","error","helperText","helperTextSx","rest","currentOptions","setCurrentOptions","inputContainerWidth","setInputContainerWidth","inputContainerRef","anchorEl","setAnchorEl","open","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","event","currentTarget","currentAnchor","onInputFocus","currentValues","currentOption","onInputBlur","onValueChange","optionId","newValue","newQuantity","newCurrentOptions","maxQuantity","onDropdownItemBlur","finalQuantity","Box","classNames","theme","icon","DesignSystemIcons","capitalize","options_input_content_item_default","KeyboardArrowUpIcon","KeyboardArrowDownIcon","messagePluralForm","ClickAwayListener","Popper","List","index","options_input_dropdown_item_default"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/options-input.tsx","../src/components/options-input-content-item.tsx","../src/components/min-max-value-label.tsx","../src/utils.ts","../src/components/options-input-dropdown-item.tsx"],"sourcesContent":["export * from \"./options-input\";\nexport * from \"./types\";\n","import React, {\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef\n} from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport List from \"@mui/material/List\";\nimport Popper from \"@mui/material/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport type { SxProps } from \"@mui/material\";\nimport type { OptionsInputOption, OptionsInputValue } from \"./types\";\nimport OptionsInputContentItem from \"./components/options-input-content-item\";\nimport OptionsInputDropdownItem from \"./components/options-input-dropdown-item\";\nimport { capitalize } from \"./utils\";\nimport { red } from \"@mui/material/colors\";\nimport \"./styles.scss\";\n\nimport \"@emotion/react\";\nimport \"@emotion/styled\";\n\nexport type OptionsInputProps = {\n\t/** Array of objects representing options available to choose from /\n\toptions: OptionsInputOption[];\n\t/* Object with default values of some options /\n\tdefaultValue?: OptionsInputValue;\n\t/* Array with ids of options which should remain displayed even if value is 0 /\n\tpersistentOptions?: string[];\n\t/* Boolean to determine if input is disabled /\n\tdisabled?: boolean;\n\t/* Boolean to determine if input is readOnly /\n\treadOnly?: boolean;\n\t/* Boolean to determine if min and max input values should be displayed /\n\tdisplayMinMax?: boolean;\n\t/* Function which handles options input value change /\n\tonChange?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input focus event /\n\tonFocus?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* Function which handles options input blur event /\n\tonBlur?: (OptionsInputValue: OptionsInputValue) => void;\n\t/* className attached to an input container /\n\tclassName?: string;\n\t/* id attached to an input container /\n\tid?: string;\n\t/* data test id attached to an input container /\n\t\"data-testid\"?: string;\n\t/* Gap between input items /\n\titemsGap?: string \| number;\n\t/* Custom styles for container /\n\tcontainerSx?: SxProps;\n\t/* Flag indicating if there is a validation error /\n\terror?: boolean;\n\t/* Additional content displayed with small font under the input /\n\thelperText?: ReactNode;\n\t/* Custom styles for helper text container /\n\thelperTextSx?: SxProps;\n};\n\nexport const OptionsInput = ({\n\toptions,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tpersistentOptions = [],\n\tdefaultValue,\n\tdisplayMinMax = false,\n\tdisabled = false,\n\treadOnly = false,\n\tid,\n\tclassName,\n\titemsGap = 1,\n\tcontainerSx = [],\n\terror = false,\n\thelperText,\n\thelperTextSx,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst inputContainerRef = useRef<HTMLElement>(null);\n\tconst [anchorEl, setAnchorEl] = useState<undefined \| HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tuseEffect(\n\t\t() =>\n\t\t\tsetCurrentOptions(\n\t\t\t\toptions.map((option) => {\n\t\t\t\t\tconst quantity = defaultValue?.[option.id] ?? 0;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...option,\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tinputQuantity: quantity\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t),\n\t\t[options, defaultValue]\n\t);\n\n\tuseEffect(() => {\n\t\tsetInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);\n\t}, [inputContainerRef?.current?.clientWidth]);\n\n\tconst optionsExceedingBoundaries = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce((exceedingOptions, { quantity, id, label }) => {\n\t\t\t\tconst option = options.find((option) => option.id === id);\n\n\t\t\t\tif (\n\t\t\t\t\tlabel &&\n\t\t\t\t\tquantity !== undefined &&\n\t\t\t\t\t((option?.max !== undefined && option?.max < quantity) \|\|\n\t\t\t\t\t\t(option?.min !== undefined && option?.min > quantity))\n\t\t\t\t) {\n\t\t\t\t\treturn [...exceedingOptions, label];\n\t\t\t\t}\n\n\t\t\t\treturn exceedingOptions;\n\t\t\t}, [] as string[]),\n\t\t[currentOptions, options]\n\t);\n\n\tconst isError = useMemo(\n\t\t() => error \|\| !!optionsExceedingBoundaries.length,\n\t\t[error, optionsExceedingBoundaries]\n\t);\n\n\tconst toggleInput = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement>) => {\n\t\t\tconst { currentTarget } = event;\n\n\t\t\tif (!disabled && !readOnly) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tsetAnchorEl((currentAnchor) =>\n\t\t\t\t\t\tcurrentAnchor ? undefined : currentTarget\n\t\t\t\t\t);\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t},\n\t\t[disabled, readOnly, setAnchorEl]\n\t);\n\n\tconst onInputFocus = () => {\n\t\tif (onFocus) {\n\t\t\tonFocus(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onInputBlur = () => {\n\t\tif (onBlur) {\n\t\t\tonBlur(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onValueChange = (optionId: string, newValue: string \| number) => {\n\t\tconst newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);\n\n\t\tconst newCurrentOptions = currentOptions.map((option) => {\n\t\t\tconst maxQuantity =\n\t\t\t\tnewQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;\n\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\t...(optionId === option.id && {\n\t\t\t\t\tquantity:\n\t\t\t\t\t\tnewQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,\n\t\t\t\t\tinputQuantity: newValue\n\t\t\t\t})\n\t\t\t};\n\t\t});\n\n\t\tif (onChange) {\n\t\t\tonChange(\n\t\t\t\tnewCurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentOptions(newCurrentOptions);\n\t};\n\n\tconst onDropdownItemBlur = (optionId: string) => () =>\n\t\tsetCurrentOptions(\n\t\t\tcurrentOptions.map((option) => {\n\t\t\t\tif (optionId !== option.id) return option;\n\n\t\t\t\tconst finalQuantity = Number.isNaN(Number(option?.inputQuantity))\n\t\t\t\t\t? 0\n\t\t\t\t\t: Number(option?.inputQuantity);\n\t\t\t\tconst maxQuantity =\n\t\t\t\t\tfinalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;\n\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\tinputQuantity:\n\t\t\t\t\t\tfinalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Box>\n\t\t\t\t<Box\n\t\t\t\t\tid={id}\n\t\t\t\t\tonClick={toggleInput}\n\t\t\t\t\tonBlur={onInputBlur}\n\t\t\t\t\tonFocus={onInputFocus}\n\t\t\t\t\tref={inputContainerRef}\n\t\t\t\t\tclassName={classNames(\"options-input__container\", className, {\n\t\t\t\t\t\t\"options-input__container--open\": open,\n\t\t\t\t\t\t\"options-input__container--disabled\": disabled,\n\t\t\t\t\t\t\"options-input__container--read-only\": readOnly,\n\t\t\t\t\t\t\"options-input__container--error\": isError\n\t\t\t\t\t})}\n\t\t\t\t\tsx={[\n\t\t\t\t\t\t{ \"&:hover\": { borderColor: \"#d3d3d3\" } },\n\t\t\t\t\t\t...(Array.isArray(containerSx) ? containerSx : [containerSx]),\n\t\t\t\t\t\topen && {\n\t\t\t\t\t\t\tborderColor: (theme) => theme.palette.primary.main,\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: (theme) => theme.palette.primary.main }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisError && {\n\t\t\t\t\t\t\tborderColor: red[700],\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: red[700] }\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tdata-testid={rest[\"data-testid\"] \|\| \"options-input-container\"}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={itemsGap}>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ quantity, id: optionId, icon }) =>\n\t\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\t\tDesignSystemIcons[\n\t\t\t\t\t\t\t\t\t\t\tcapitalize(icon) as keyof typeof DesignSystemIcons\n\t\t\t\t\t\t\t\t\t\t] &&\n\t\t\t\t\t\t\t\t\t\t(quantity !== 0 \|\| persistentOptions?.includes(optionId))\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option) => (\n\t\t\t\t\t\t\t\t<OptionsInputContentItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t\t\t!!(option?.label && optionsExceedingBoundaries.includes(option.label))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t\t{!readOnly &&\n\t\t\t\t\t\t(open ? (\n\t\t\t\t\t\t\t<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : \"primary\" }} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KeyboardArrowDownIcon\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: (theme) =>\n\t\t\t\t\t\t\t\t\t\tdisabled ? theme.palette.grey[400] : theme.palette.action.focus\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t{(helperText \|\| isError) && (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tfontSize: \"small\",\n\t\t\t\t\t\t\t...(helperTextSx \|\| {}),\n\t\t\t\t\t\t\t...(isError ? { color: red[700] } : {})\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmarginTop={1}\n\t\t\t\t\t\tmarginLeft={2}\n\t\t\t\t\t\twidth={inputContainerWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsExceedingBoundaries.length\n\t\t\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\t\t\tconst messagePluralForm =\n\t\t\t\t\t\t\t\t\t\toptionsExceedingBoundaries.length > 1 ? \"s\" : \"\";\n\n\t\t\t\t\t\t\t\t\treturn `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(\", \")} option${messagePluralForm} ${messagePluralForm ? \"are\" : \"is\"} out of range.`;\n\t\t\t\t\t\t\t\t})()\n\t\t\t\t\t\t\t: helperText}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</Box>\n\t\t\t<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>\n\t\t\t\t<Popper\n\t\t\t\t\topen={open}\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\tanchorEl={anchorEl}\n\t\t\t\t\tsx={(theme) => ({ zIndex: theme.zIndex.modal })}\n\t\t\t\t>\n\t\t\t\t\t<List\n\t\t\t\t\t\tdisablePadding\n\t\t\t\t\t\tdata-testid=\"options-dropdown-list\"\n\t\t\t\t\t\tclassName=\"options-input__dropdown-items-list\"\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: \"Background\",\n\t\t\t\t\t\t\tborder: (theme) =>\n\t\t\t\t\t\t\t\t`thin solid ${isError ? red[700] : theme.palette.primary.main}`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ icon }) =>\n\t\t\t\t\t\t\t\t\t!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option, index) => (\n\t\t\t\t\t\t\t\t<OptionsInputDropdownItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tonBlur={onDropdownItemBlur(option.id)}\n\t\t\t\t\t\t\t\t\tonChange={onValueChange}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={isError}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t</Popper>\n\t\t\t</ClickAwayListener>\n\t\t</>\n\t);\n};\n","import Tooltip from \"@mui/material/Tooltip\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\nimport { red } from \"@mui/material/colors\";\nimport { useMemo } from \"react\";\n\nexport type OptionsInputContentItemProps = {\n\titem: OptionsInputOption;\n\tdisabled?: boolean;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false\n}: OptionsInputContentItemProps) => {\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\tconst itemsColor = useMemo(() => {\n\t\tconst defaultItemColor = quantity === 0 \|\| disabled ? \"#a4a5b2\" : \"#000000\";\n\n\t\treturn error ? red[700] : defaultItemColor;\n\t}, [error, quantity, disabled]);\n\n\treturn (\n\t\t<Box\n\t\t\tdisplay=\"flex\"\n\t\t\talignItems=\"center\"\n\t\t\tgap={0.5}\n\t\t\tcolor={itemsColor}\n\t\t\tdata-testid=\"option-item\"\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<Tooltip\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Box display=\"flex\" flexDirection=\"column\">\n\t\t\t\t\t\t\t<Typography variant=\"caption\" fontWeight={600} sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t\t<Typography variant=\"caption\" sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} />}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tarrow\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography variant=\"h6\" color={itemsColor}>\n\t\t\t\t{quantity}\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n\nexport default OptionsInputContentItem;\n","import Typography, { type TypographyProps } from \"@mui/material/Typography\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?: TypographyProps[\"color\"];\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" color={color} sx={{ my: 0 }}>\n\t\t{!Number.isNaN(Number(min)) && `min: ${min}`}\n\t\t{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && \", \"}\n\t\t{!Number.isNaN(Number(max)) && `max: ${max}`}\n\t</Typography>\n);\n","export const capitalize = (str: string) =>\n\tstr.charAt(0).toUpperCase() + str.slice(1);\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport ButtonGroup from \"@mui/material/ButtonGroup\";\nimport Divider from \"@mui/material/Divider\";\nimport TextField from \"@mui/material/TextField\";\nimport ListItem from \"@mui/material/ListItem\";\nimport Button from \"@mui/material/Button\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\n\nexport type OptionsInputDropdownItemProps = {\n\titem: OptionsInputOption;\n\tonBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n\tonChange: (id: string, value: number \| string) => void;\n\tindex: number;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputDropdownItem = ({\n\titem: { id, quantity = 0, label, max, min, icon, details, inputQuantity },\n\tonChange,\n\tonBlur,\n\tindex,\n\tdisplayMinMax,\n\terror = false\n}: OptionsInputDropdownItemProps) => {\n\tconst [shouldDisplayFullDetails, setShouldDisplayFullDetails] =\n\t\tuseState<boolean>(false);\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] \|\| null;\n\n\tconst onIncrement = (inputId: string) => () => {\n\t\tconst isValueBelowMin = !!(min && quantity < min);\n\n\t\tonChange(inputId, (isValueBelowMin ? min : quantity + 1)!);\n\t};\n\n\tconst onDecrement = (inputId: string) => () => {\n\t\tconst isValueAboveMax = !!(max && quantity > max);\n\n\t\treturn onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{!!index && (\n\t\t\t\t<Divider sx={{ color: (theme) => theme.palette.primary.main }} />\n\t\t\t)}\n\t\t\t<ListItem\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"space-between\"\n\t\t\t\t}}\n\t\t\t\tclassName={classNames(\"options-input__dropdown-item\", {\n\t\t\t\t\t\"options-input__dropdown-item--empty\": !quantity\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Box display=\"flex\" alignItems=\"center\">\n\t\t\t\t\t<Icon fontSize=\"small\" sx={{ color: \"black\" }} />\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tonChange={({ target }) => onChange(id, target.value)}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\tvalue={inputQuantity}\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\tinputMode: \"numeric\",\n\t\t\t\t\t\t\tpattern: \"-?[0-9]*\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\ttextAlign: \"center\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"data-testid\": \"dropdown-item-input\"\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-no-duplicate-props\n\t\t\t\t\t\tInputProps={{ disableUnderline: true }}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdisplay=\"flex\"\n\t\t\t\t\t\tflexDirection=\"column\"\n\t\t\t\t\t\tjustifyContent=\"center\"\n\t\t\t\t\t\tpaddingRight={2}\n\t\t\t\t\t\tpaddingLeft={1}\n\t\t\t\t\t\tminWidth=\"5rem\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfontSize={13}\n\t\t\t\t\t\t\tsx={{ my: 0 }}\n\t\t\t\t\t\t\tcolor=\"black\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label \|\| id}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tposition=\"relative\"\n\t\t\t\t\t\t\t\theight=\"1rem\"\n\t\t\t\t\t\t\t\tdata-testid=\"option-details-container\"\n\t\t\t\t\t\t\t\tonMouseEnter={() => setShouldDisplayFullDetails(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setShouldDisplayFullDetails(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\t\tmy: 0,\n\t\t\t\t\t\t\t\t\t\tzIndex: 10000,\n\t\t\t\t\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t\t\t\t\t\t...(shouldDisplayFullDetails && {\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: quantity ? \"#ffffff\" : \"#eeeeee\",\n\t\t\t\t\t\t\t\t\t\t\tborder: \"thin solid #d3d3d3\"\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-testid=\"option-details\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{details?.length <= 15 \|\| shouldDisplayFullDetails\n\t\t\t\t\t\t\t\t\t\t? details\n\t\t\t\t\t\t\t\t\t\t: `${details?.slice(0, 15)}...`}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} color=\"gray\" />}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"options-input__dropdown-item-buttons\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onIncrement(id)}\n\t\t\t\t\t\tdisabled={!!(max && quantity && quantity >= max)}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AddIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onDecrement(id)}\n\t\t\t\t\t\tdisabled={!!(quantity && min) && quantity <= min}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RemoveIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonGroup>\n\t\t\t</ListItem>\n\t\t</>\n\t);\n};\n\nexport default OptionsInputDropdownItem;\n"],"mappings":"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","names":["index_exports","__export","OptionsInput","__toCommonJS","import_react","import_classnames","import_Box","import_List","import_Popper","import_ClickAwayListener","import_KeyboardArrowDown","import_KeyboardArrowUp","DesignSystemIcons","import_Tooltip","import_Box","import_Typography","DesignSystemIcons","import_Typography","import_jsx_runtime","MinMaxValueLabel","min","max","color","Typography","capitalize","str","import_colors","import_react","import_jsx_runtime","OptionsInputContentItem","quantity","details","label","max","min","icon","displayMinMax","disabled","error","Icon","DesignSystemIcons","capitalize","itemsColor","Box","Tooltip","Typography","MinMaxValueLabel","options_input_content_item_default","import_react","import_classnames","import_Box","import_Typography","import_ButtonGroup","import_Divider","import_TextField","import_ListItem","import_Button","import_Add","import_Remove","DesignSystemIcons","import_jsx_runtime","OptionsInputDropdownItem","id","quantity","label","max","min","icon","details","inputQuantity","onChange","onBlur","index","displayMinMax","error","shouldDisplayFullDetails","setShouldDisplayFullDetails","Icon","DesignSystemIcons","capitalize","onIncrement","inputId","isValueBelowMin","onDecrement","isValueAboveMax","Divider","theme","ListItem","classNames","Box","TextField","target","Typography","MinMaxValueLabel","ButtonGroup","Button","AddIcon","RemoveIcon","options_input_dropdown_item_default","import_colors","import_react","import_styled","import_jsx_runtime","OptionsInput","options","onChange","onFocus","onBlur","persistentOptions","defaultValue","displayMinMax","disabled","readOnly","id","className","itemsGap","containerSx","error","helperText","helperTextSx","rest","currentOptions","setCurrentOptions","inputContainerWidth","setInputContainerWidth","inputContainerRef","anchorEl","setAnchorEl","open","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","event","currentTarget","currentAnchor","onInputFocus","currentValues","currentOption","onInputBlur","onValueChange","optionId","newValue","newQuantity","newCurrentOptions","maxQuantity","onDropdownItemBlur","finalQuantity","Box","classNames","theme","icon","DesignSystemIcons","capitalize","options_input_content_item_default","KeyboardArrowUpIcon","KeyboardArrowDownIcon","messagePluralForm","ClickAwayListener","Popper","List","index","options_input_dropdown_item_default"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@talixo-ds/options-input",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"types": "./dist/index.d.ts",
 	"publishConfig": {
 		"access": "public"
@@ -24,7 +24,9 @@
 			"require": "./dist/index.css"
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"*.css"
+	],
 	"files": [
 		"dist"
 	],
@@ -35,12 +37,12 @@
 		"check-exports": "attw --pack ."
 	},
 	"dependencies": {
-		"@emotion/react": "^11.13.0",
-		"@emotion/styled": "^11.13.0",
-		"@mui/icons-material": "^5.16.4",
-		"@mui/material": "^5.16.4",
-		"@talixo-ds/icons": "^1.0.8",
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.0",
+		"@mui/icons-material": "^6.4.2",
+		"@mui/material": "^6.4.2",
+		"@talixo-ds/icons": "^1.0.9",
 		"classnames": "^2.5.1"
 	},
-	"gitHead": "b78b9e5e144f63572f86eae48420da91c2171299"
+	"gitHead": "45a9f4fd9e2eb13fd8dd939b05c53064858e696b"
 }