@talixo-ds/options-input 1.0.7 → 1.0.9
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.
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.options-input__container{border:thin solid transparent;border-radius:.25rem;display:flex;justify-content:space-between;align-items:center;padding:.25rem;gap:1rem;cursor:pointer;width:fit-content}.options-input__container--open{border-bottom-width:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.options-input__container--disabled,.options-input__container--read-only{cursor:unset}.options-input__container--read-only:hover{border-color:transparent}.options-input__dropdown-item{gap:1rem}.options-input__dropdown-item--empty{background-color:#eee}.options-input__dropdown-item-input{width:2rem}.options-input__dropdown-item-buttons>button[role=button]{min-width:2rem;padding:0}.options-input__dropdown-item-buttons>button[role=button][disabled]>svg{color:#0000001f}
|
|
2
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/styles.scss"],"sourcesContent":[".options-input {\n\t&__container {\n\t\tborder: thin solid transparent;\n\t\tborder-radius: 0.25rem;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 0.25rem;\n\t\tgap: 1rem;\n\t\tcursor: pointer;\n\t\twidth: fit-content;\n\n\t\t&--open {\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\t&--disabled {\n\t\t\tcursor: unset;\n\t\t}\n\n\t\t&--read-only {\n\t\t\tcursor: unset;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__dropdown-item {\n\t\tgap: 1rem;\n\n\t\t&--empty {\n\t\t\tbackground-color: #eeeeee;\n\t\t}\n\t}\n\n\t&__dropdown-item-input {\n\t\twidth: 2rem;\n\t}\n\n\t&__dropdown-item-buttons {\n\t\t& > button[role=\"button\"] {\n\t\t\tmin-width: 2rem;\n\t\t\tpadding: 0;\n\n\t\t\t&[disabled] > svg {\n\t\t\t\tcolor: #0000001f;\n\t\t\t}\n\t\t}\n\t}\n}\n"],"mappings":"AACC,CAAA,yBACC,OAAA,KAAA,MAAA,YADD,cAEC,OACA,QAAA,KACA,gBAAA,cACA,YAAA,OALD,QAMC,OACA,IAAA,KACA,OAAA,QACA,MAAA,YAEA,CAAA,+BACC,oBAAA,EACA,0BAAA,EACA,2BAAA,EAGD,CAAA,mCAIA,CAAA,oCAHC,OAAA,MAMA,CAHD,mCAGC,OACC,aAAA,YAKH,CAAA,6BACC,IAAA,KAEA,CAAA,oCACC,iBAAA,KAIF,CAAA,mCACC,MAAA,KAIA,CAAA,oCAAA,CAAA,MAAA,CAAA,aACC,UAAA,KA5CF,QA6CE,EAEA,CAJD,oCAIC,CAAA,MAAA,CAAA,YAAA,CAAA,SAAA,CAAA,IACC,MAAA","names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
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};
|
|
2
|
-
//# sourceMappingURL=index.
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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"]}
|
package/package.json
CHANGED
|
@@ -1,27 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@talixo-ds/options-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"types": "./dist/index.d.ts",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"import": {
|
|
12
|
-
"types": "./dist/index.d.mts",
|
|
13
|
-
"import": "./dist/index.mjs"
|
|
14
|
-
},
|
|
15
|
-
"require": {
|
|
16
|
-
"types": "./dist/index.d.ts",
|
|
17
|
-
"require": "./dist/index.js"
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
"./dist/index.css": {
|
|
21
|
-
"import": "./dist/index.css",
|
|
22
|
-
"require": "./dist/index.css"
|
|
23
|
-
}
|
|
24
|
-
},
|
|
8
|
+
"main": "./dist/index.js",
|
|
9
|
+
"module": "./dist/esm/index.js",
|
|
10
|
+
"sideEffects": false,
|
|
25
11
|
"files": [
|
|
26
12
|
"dist"
|
|
27
13
|
],
|
|
@@ -35,8 +21,8 @@
|
|
|
35
21
|
"@emotion/styled": "^11.13.0",
|
|
36
22
|
"@mui/icons-material": "^5.16.4",
|
|
37
23
|
"@mui/material": "^5.16.4",
|
|
38
|
-
"@talixo-ds/icons": "^1.0.
|
|
24
|
+
"@talixo-ds/icons": "^1.0.6",
|
|
39
25
|
"classnames": "^2.5.1"
|
|
40
26
|
},
|
|
41
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "a3b507cc65a3c1384d1662e1c7290db8a71a8599"
|
|
42
28
|
}
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"]}
|