@talixo-ds/options-input 2.0.5 → 2.0.6
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.
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../
|
|
1
|
+
{"version":3,"sources":["../../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\n\t\t&--small {\n\t\t\tpadding: 0.125rem;\n\t\t\tgap: 0.5rem;\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,YAIF,CAAA,gCA7BD,QA8BE,QACA,IAAA,MAIF,CAAA,6BACC,IAAA,KAEA,CAAA,oCACC,iBAAA,KAIF,CAAA,mCACC,MAAA,KAIA,CAAA,oCAAA,CAAA,MAAA,CAAA,aACC,UAAA,KAjDF,QAkDE,EAEA,CAJD,oCAIC,CAAA,MAAA,CAAA,YAAA,CAAA,SAAA,CAAA,IACC,MAAA","names":[]}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as Y,useEffect as ot,useCallback as
|
|
1
|
+
import{useState as Y,useEffect as ot,useCallback as S,useMemo as J,useRef as et}from"react";import wt from"classnames";import W from"@mui/material/Box";import Qt from"@mui/material/List";import vt from"@mui/material/Popper";import Ct from"@mui/material/ClickAwayListener";import _t from"@mui/icons-material/KeyboardArrowDown";import Mt from"@mui/icons-material/KeyboardArrowUp";import*as nt from"@talixo-ds/icons";import bt from"@mui/material/Tooltip";import E from"@mui/material/Box";import U from"@mui/material/Typography";import*as ft from"@talixo-ds/icons";import ct from"@mui/material/Typography";import{jsxs as ut}from"react/jsx-runtime";var D=({min:e,max:n,color:m})=>ut(ct,{variant:"caption",sx:{my:0,color:m},children:[!Number.isNaN(Number(e))&&`min: ${e}`,!Number.isNaN(Number(n))&&!Number.isNaN(Number(e))&&", ",!Number.isNaN(Number(n))&&`max: ${n}`]});var B=e=>e.charAt(0).toUpperCase()+e.slice(1);import{red as yt}from"@mui/material/colors";import{useMemo as xt}from"react";import{jsx as g,jsxs as j}from"react/jsx-runtime";var It=({item:{quantity:e,details:n,label:m,max:i,min:d,icon:h},displayMinMax:u=!1,disabled:c=!1,error:a=!1,size:x="medium"})=>{let F=ft[B(h)]||null,I=xt(()=>a?yt[700]:e===0||c?"#a4a5b2":"#000000",[a,e,c]);return j(E,{display:"flex",alignItems:"center",gap:.5,color:I,"data-testid":"option-item",children:[m?g(bt,{title:j(E,{display:"flex",flexDirection:"column",children:[g(U,{variant:"caption",fontWeight:600,sx:{my:0},children:m}),n&&g(U,{variant:"caption",sx:{my:0},children:n}),u&&g(D,{min:d,max:i})]}),placement:"top",arrow:!0,children:g("span",{children:g(F,{fontSize:x,sx:{color:I}})})}):g(F,{fontSize:x,sx:{color:I}}),g(U,{variant:x==="small"?"body2":"h6",sx:x==="small"?{my:.25}:void 0,color:I,children:e})]})},$=It;import{useState as Xt}from"react";import gt from"classnames";import T from"@mui/material/Box";import K from"@mui/material/Typography";import Rt from"@mui/material/ButtonGroup";import Ot from"@mui/material/Divider";import Bt from"@mui/material/TextField";import ht from"@mui/material/ListItem";import q from"@mui/material/Button";import Ft from"@mui/icons-material/Add";import Ht from"@mui/icons-material/Remove";import*as Nt from"@talixo-ds/icons";import{Fragment as Vt,jsx as l,jsxs as v}from"react/jsx-runtime";var Gt=({item:{id:e,quantity:n=0,label:m,max:i,min:d,icon:h,details:u,inputQuantity:c},onChange:a,onBlur:x,index:F,displayMinMax:I,error:b=!1})=>{let[w,Q]=Xt(!1),L=Nt[B(h)]||null,H=f=>()=>{let s=!!(d&&n<d);a(f,s?d:n+1)},_=f=>()=>{let s=!!(i&&n>i);return a(f,s?i:n-1)};return v(Vt,{children:[!!F&&l(Ot,{sx:{color:f=>f.palette.primary.main}}),v(ht,{sx:{display:"flex",justifyContent:"space-between"},className:gt("options-input__dropdown-item",{"options-input__dropdown-item--empty":!n}),children:[v(T,{display:"flex",alignItems:"center",children:[l(L,{fontSize:"small",sx:{color:"black"}}),l(Bt,{onChange:({target:f})=>a(e,f.value),onBlur:x,value:c,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(T,{display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:2,paddingLeft:1,minWidth:"5rem",children:[l(K,{variant:"caption",fontWeight:600,fontSize:13,sx:{my:0},color:"black",children:m||e}),u&&l(T,{position:"relative",height:"1rem","data-testid":"option-details-container",onMouseEnter:()=>Q(!0),onMouseLeave:()=>Q(!1),children:l(K,{variant:"caption",color:"gray",sx:{my:0,zIndex:1e4,position:"fixed",...w&&{backgroundColor:n?"#ffffff":"#eeeeee",border:"thin solid #d3d3d3"}},"data-testid":"option-details",children:u?.length<=15||w?u:`${u?.slice(0,15)}...`})}),I&&l(D,{min:d,max:i,color:"gray"})]})]}),v(Rt,{variant:"outlined",size:"small",className:"options-input__dropdown-item-buttons",children:[l(q,{onClick:H(e),disabled:typeof i=="number"&&typeof n=="number"&&n>=i,className:"options-input__dropdown-item-button",role:"button",color:b?"error":"primary",children:l(Ft,{sx:{color:b?"black":"primary"}})}),l(q,{onClick:_(e),disabled:typeof n=="number"&&typeof d=="number"&&n<=d,className:"options-input__dropdown-item-button",role:"button",color:b?"error":"primary",children:l(Ht,{sx:{color:b?"black":"primary"}})})]})]})]})},tt=Gt;import{red as C}from"@mui/material/colors";import"@emotion/react";import"@emotion/styled";import{Fragment as St,jsx as y,jsxs as A}from"react/jsx-runtime";var Dt=({options:e,onChange:n,onFocus:m,onBlur:i,persistentOptions:d=[],defaultValue:h,displayMinMax:u=!1,disabled:c=!1,readOnly:a=!1,id:x,className:F,itemsGap:I=1,containerSx:b=[],error:w=!1,helperText:Q,helperTextSx:L,size:H="medium",alwaysBorder:_=!1,...f})=>{let[s,z]=Y([]),[it,rt]=Y(0),M=et(!1),k=et(null),[P,Z]=Y(),X=!!P,N=J(()=>s.reduce((t,o)=>({...t,[o.id]:o.quantity}),{}),[s]);ot(()=>z(e.map(t=>{let o=h?.[t.id]??0;return{...t,quantity:o,inputQuantity:o}})),[e,h]),ot(()=>{rt(k?.current?.clientWidth??0)},[k?.current?.clientWidth]);let G=J(()=>s.reduce((t,{quantity:o,id:r,label:O})=>{let p=e.find(V=>V.id===r);return O&&o!==void 0&&(p?.max!==void 0&&p?.max<o||p?.min!==void 0&&p?.min>o)?[...t,O]:t},[]),[s,e]),R=J(()=>w||!!G.length,[w,G]),pt=S(t=>{let{currentTarget:o}=t;!c&&!a&&setTimeout(()=>{Z(r=>r?void 0:o)},0)},[c,a,Z]),st=S(()=>{M.current=!0,m&&m(N)},[N,m]),at=S(()=>{X||(M.current=!1,i&&i(N))},[X,N,i]),lt=S(()=>{X&&(Z(void 0),M.current&&(M.current=!1,i?.(N)))},[X,N,i]),mt=(t,o)=>{let r=Number.isNaN(Number(o))?0:Number(o),O=s.map(p=>{let V=r>(p?.max??1/0)?p?.max:r;return{...p,...t===p.id&&{quantity:r<(p?.min??-1/0)?p?.min:V,inputQuantity:o}}});n&&n(O.reduce((p,V)=>({...p,[V.id]:V.quantity}),{})),z(O)},dt=t=>()=>z(s.map(o=>{if(t!==o.id)return o;let r=Number.isNaN(Number(o?.inputQuantity))?0:Number(o?.inputQuantity),O=r>(o?.max??1/0)?o?.max:r;return{...o,inputQuantity:r<(o?.min??-1/0)?o?.min:O}}));return A(St,{children:[A(W,{children:[A(W,{id:x,onClick:pt,onBlur:at,onFocus:st,ref:k,className:wt("options-input__container",F,{"options-input__container--open":X,"options-input__container--disabled":c,"options-input__container--read-only":a,"options-input__container--error":R,"options-input__container--small":H==="small","options-input__container--always-border":_}),sx:[{"&:hover":{borderColor:"#d3d3d3"}},...Array.isArray(b)?b:[b],_&&{border:"1px solid #d3d3d3","&:hover":{borderColor:t=>t.palette.primary.main}},X&&{borderColor:t=>t.palette.primary.main,"&:hover":{borderColor:t=>t.palette.primary.main}},R&&{borderColor:C[700],"&:hover":{borderColor:C[700]}}],"data-testid":f["data-testid"]||"options-input-container",tabIndex:0,children:[y(W,{display:"flex",gap:I,children:s.filter(({quantity:t,id:o,icon:r})=>!!(nt[B(r)]&&(t!==0||d?.includes(o)))).map(t=>y($,{item:t,disabled:c,displayMinMax:u,error:!!(t?.label&&G.includes(t.label)),size:H},t.id))}),!a&&(X?y(Mt,{sx:{color:R?C[700]:"primary"},fontSize:H}):y(_t,{sx:{color:t=>c?t.palette.grey[400]:t.palette.action.focus},fontSize:H}))]}),(Q||R)&&y(W,{sx:{fontSize:"small",...L||{},...R?{color:C[700]}:{}},marginTop:1,marginLeft:2,width:it,children:G.length?(()=>{let t=G.length>1?"s":"";return`Value${t} for ${G.join(", ")} option${t} ${t?"are":"is"} out of range.`})():Q})]}),y(Ct,{onClickAway:lt,children:y(vt,{open:X,placement:"bottom-start",anchorEl:P,sx:t=>({zIndex:t.zIndex.modal}),children:y(Qt,{disablePadding:!0,"data-testid":"options-dropdown-list",className:"options-input__dropdown-items-list",sx:{bgcolor:"Background",border:t=>`thin solid ${R?C[700]:t.palette.primary.main}`},children:s.filter(({icon:t})=>!!nt[B(t)]).map((t,o)=>y(tt,{item:t,onBlur:dt(t.id),onChange:mt,index:o,displayMinMax:u,error:R},t.id))})})})]})};Dt.displayName="OptionsInput";export{Dt as OptionsInput};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -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 {\n\tOptionsInputOption,\n\tOptionsInputValue,\n\tOptionsInputSize\n} 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\t/** Size of the input */\n\tsize?: OptionsInputSize;\n\t/** Display always with border */\n\talwaysBorder?: boolean;\n};\n\nconst 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\tsize = \"medium\",\n\talwaysBorder = false,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst isFocusedRef = useRef(false);\n\tconst inputContainerRef = useRef<HTMLElement>(null);\n\tconst [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tconst changedOptions = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce(\n\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t...currentValues,\n\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t}),\n\t\t\t\t{}\n\t\t\t) as OptionsInputValue,\n\t\t[currentOptions]\n\t);\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 = useCallback(() => {\n\t\tisFocusedRef.current = true;\n\t\tif (onFocus) {\n\t\t\tonFocus(changedOptions);\n\t\t}\n\t}, [changedOptions, onFocus]);\n\n\tconst onInputBlur = useCallback(() => {\n\t\tif (!open) {\n\t\t\tisFocusedRef.current = false;\n\t\t\tif (onBlur) {\n\t\t\t\tonBlur(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\n\n\tconst handleClickAway = useCallback(() => {\n\t\tif (open) {\n\t\t\tsetAnchorEl(undefined);\n\t\t\tif (isFocusedRef.current) {\n\t\t\t\tisFocusedRef.current = false;\n\t\t\t\tonBlur?.(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\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\t\"options-input__container--small\": size === \"small\",\n\t\t\t\t\t\t\"options-input__container--always-border\": alwaysBorder\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\talwaysBorder && {\n\t\t\t\t\t\t\tborder: \"1px solid #d3d3d3\",\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\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\tsize={size}\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\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: isError ? red[700] : \"primary\"\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tfontSize={size}\n\t\t\t\t\t\t\t/>\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\tfontSize={size}\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={handleClickAway}>\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\nOptionsInput.displayName = \"OptionsInput\";\n\nexport { OptionsInput };\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, OptionsInputSize } 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\tsize?: OptionsInputSize;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false,\n\tsize = \"medium\"\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={size} 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={size} sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography\n\t\t\t\tvariant={size === \"small\" ? \"body2\" : \"h6\"}\n\t\t\t\tsx={size === \"small\" ? { my: 0.25 } : undefined}\n\t\t\t\tcolor={itemsColor}\n\t\t\t>\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","size","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","size","alwaysBorder","rest","currentOptions","setCurrentOptions","useState","inputContainerWidth","setInputContainerWidth","isFocusedRef","useRef","inputContainerRef","anchorEl","setAnchorEl","open","changedOptions","useMemo","currentValues","currentOption","useEffect","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","useCallback","event","currentTarget","currentAnchor","onInputFocus","onInputBlur","handleClickAway","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 {\n\tOptionsInputOption,\n\tOptionsInputValue,\n\tOptionsInputSize\n} 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\t/** Size of the input */\n\tsize?: OptionsInputSize;\n\t/** Display always with border */\n\talwaysBorder?: boolean;\n};\n\nconst 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\tsize = \"medium\",\n\talwaysBorder = false,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst isFocusedRef = useRef(false);\n\tconst inputContainerRef = useRef<HTMLElement>(null);\n\tconst [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tconst changedOptions = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce(\n\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t...currentValues,\n\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t}),\n\t\t\t\t{}\n\t\t\t) as OptionsInputValue,\n\t\t[currentOptions]\n\t);\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 = useCallback(() => {\n\t\tisFocusedRef.current = true;\n\t\tif (onFocus) {\n\t\t\tonFocus(changedOptions);\n\t\t}\n\t}, [changedOptions, onFocus]);\n\n\tconst onInputBlur = useCallback(() => {\n\t\tif (!open) {\n\t\t\tisFocusedRef.current = false;\n\t\t\tif (onBlur) {\n\t\t\t\tonBlur(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\n\n\tconst handleClickAway = useCallback(() => {\n\t\tif (open) {\n\t\t\tsetAnchorEl(undefined);\n\t\t\tif (isFocusedRef.current) {\n\t\t\t\tisFocusedRef.current = false;\n\t\t\t\tonBlur?.(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\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\t\"options-input__container--small\": size === \"small\",\n\t\t\t\t\t\t\"options-input__container--always-border\": alwaysBorder\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\talwaysBorder && {\n\t\t\t\t\t\t\tborder: \"1px solid #d3d3d3\",\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\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\tsize={size}\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\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: isError ? red[700] : \"primary\"\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tfontSize={size}\n\t\t\t\t\t\t\t/>\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\tfontSize={size}\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={handleClickAway}>\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\nOptionsInput.displayName = \"OptionsInput\";\n\nexport { OptionsInput };\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, OptionsInputSize } 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\tsize?: OptionsInputSize;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false,\n\tsize = \"medium\"\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={size} 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={size} sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography\n\t\t\t\tvariant={size === \"small\" ? \"body2\" : \"h6\"}\n\t\t\t\tsx={size === \"small\" ? { my: 0.25 } : undefined}\n\t\t\t\tcolor={itemsColor}\n\t\t\t>\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 from \"@mui/material/Typography\";\nimport type { CSSProperties } from \"react\";\nimport type { Theme } from \"@mui/material\";\nimport type { ResponsiveStyleValue } from \"@mui/system\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?:\n\t\t| ResponsiveStyleValue<CSSProperties[\"color\"] | readonly string[] | undefined>\n\t\t| ((\n\t\t\t\ttheme: Theme\n\t\t ) => ResponsiveStyleValue<\n\t\t\t\tCSSProperties[\"color\"] | readonly string[] | undefined\n\t\t >)\n\t\t| null;\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" sx={{ my: 0, color }}>\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={\n\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\ttypeof max === \"number\" &&\n\t\t\t\t\t\t\t\ttypeof quantity === \"number\" &&\n\t\t\t\t\t\t\t\tquantity >= max\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\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={\n\t\t\t\t\t\t\t!!(typeof quantity === \"number\" && typeof min === \"number\") &&\n\t\t\t\t\t\t\tquantity <= min\n\t\t\t\t\t\t}\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","size","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","size","alwaysBorder","rest","currentOptions","setCurrentOptions","useState","inputContainerWidth","setInputContainerWidth","isFocusedRef","useRef","inputContainerRef","anchorEl","setAnchorEl","open","changedOptions","useMemo","currentValues","currentOption","useEffect","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","useCallback","event","currentTarget","currentAnchor","onInputFocus","onInputBlur","handleClickAway","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.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../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\n\t\t&--small {\n\t\t\tpadding: 0.125rem;\n\t\t\tgap: 0.5rem;\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,YAIF,CAAA,gCA7BD,QA8BE,QACA,IAAA,MAIF,CAAA,6BACC,IAAA,KAEA,CAAA,oCACC,iBAAA,KAIF,CAAA,mCACC,MAAA,KAIA,CAAA,oCAAA,CAAA,MAAA,CAAA,aACC,UAAA,KAjDF,QAkDE,EAEA,CAJD,oCAIC,CAAA,MAAA,CAAA,YAAA,CAAA,SAAA,CAAA,IACC,MAAA","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Gt=Object.create;var
|
|
1
|
+
"use strict";var Gt=Object.create;var W=Object.defineProperty;var Vt=Object.getOwnPropertyDescriptor;var wt=Object.getOwnPropertyNames;var Qt=Object.getPrototypeOf,vt=Object.prototype.hasOwnProperty;var Ct=(o,e)=>{for(var p in e)W(o,p,{get:e[p],enumerable:!0})},j=(o,e,p,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of wt(e))!vt.call(o,l)&&l!==p&&W(o,l,{get:()=>e[l],enumerable:!(a=Vt(e,l))||a.enumerable});return o};var i=(o,e,p)=>(p=o!=null?Gt(Qt(o)):{},j(e||!o||!o.__esModule?W(p,"default",{value:o,enumerable:!0}):p,o)),_t=o=>j(W({},"__esModule",{value:!0}),o);var Lt={};Ct(Lt,{OptionsInput:()=>Xt});module.exports=_t(Lt);var s=require("react"),ut=i(require("classnames")),M=i(require("@mui/material/Box")),bt=i(require("@mui/material/List")),ft=i(require("@mui/material/Popper")),yt=i(require("@mui/material/ClickAwayListener")),xt=i(require("@mui/icons-material/KeyboardArrowDown")),It=i(require("@mui/icons-material/KeyboardArrowUp")),ct=i(require("@talixo-ds/icons"));var q=i(require("@mui/material/Tooltip")),J=i(require("@mui/material/Box")),z=i(require("@mui/material/Typography")),Mt=i(require("@talixo-ds/icons"));var $=i(require("@mui/material/Typography")),K=require("react/jsx-runtime"),L=({min:o,max:e,color:p})=>(0,K.jsxs)($.default,{variant:"caption",sx:{my:0,color:p},children:[!Number.isNaN(Number(o))&&`min: ${o}`,!Number.isNaN(Number(e))&&!Number.isNaN(Number(o))&&", ",!Number.isNaN(Number(e))&&`max: ${e}`]});var F=o=>o.charAt(0).toUpperCase()+o.slice(1);var tt=require("@mui/material/colors"),ot=require("react"),b=require("react/jsx-runtime"),Dt=({item:{quantity:o,details:e,label:p,max:a,min:l,icon:H},displayMinMax:x=!1,disabled:y=!1,error:f=!1,size:g="medium"})=>{let N=Mt[F(H)]||null,R=(0,ot.useMemo)(()=>f?tt.red[700]:o===0||y?"#a4a5b2":"#000000",[f,o,y]);return(0,b.jsxs)(J.default,{display:"flex",alignItems:"center",gap:.5,color:R,"data-testid":"option-item",children:[p?(0,b.jsx)(q.default,{title:(0,b.jsxs)(J.default,{display:"flex",flexDirection:"column",children:[(0,b.jsx)(z.default,{variant:"caption",fontWeight:600,sx:{my:0},children:p}),e&&(0,b.jsx)(z.default,{variant:"caption",sx:{my:0},children:e}),x&&(0,b.jsx)(L,{min:l,max:a})]}),placement:"top",arrow:!0,children:(0,b.jsx)("span",{children:(0,b.jsx)(N,{fontSize:g,sx:{color:R}})})}):(0,b.jsx)(N,{fontSize:g,sx:{color:R}}),(0,b.jsx)(z.default,{variant:g==="small"?"body2":"h6",sx:g==="small"?{my:.25}:void 0,color:R,children:o})]})},et=Dt;var nt=require("react"),it=i(require("classnames")),k=i(require("@mui/material/Box")),A=i(require("@mui/material/Typography")),rt=i(require("@mui/material/ButtonGroup")),pt=i(require("@mui/material/Divider")),st=i(require("@mui/material/TextField")),at=i(require("@mui/material/ListItem")),P=i(require("@mui/material/Button")),lt=i(require("@mui/icons-material/Add")),mt=i(require("@mui/icons-material/Remove")),St=i(require("@talixo-ds/icons"));var r=require("react/jsx-runtime"),Wt=({item:{id:o,quantity:e=0,label:p,max:a,min:l,icon:H,details:x,inputQuantity:y},onChange:f,onBlur:g,index:N,displayMinMax:R,error:I=!1})=>{let[C,_]=(0,nt.useState)(!1),Z=St[F(H)]||null,G=X=>()=>{let u=!!(l&&e<l);f(X,u?l:e+1)},D=X=>()=>{let u=!!(a&&e>a);return f(X,u?a:e-1)};return(0,r.jsxs)(r.Fragment,{children:[!!N&&(0,r.jsx)(pt.default,{sx:{color:X=>X.palette.primary.main}}),(0,r.jsxs)(at.default,{sx:{display:"flex",justifyContent:"space-between"},className:(0,it.default)("options-input__dropdown-item",{"options-input__dropdown-item--empty":!e}),children:[(0,r.jsxs)(k.default,{display:"flex",alignItems:"center",children:[(0,r.jsx)(Z,{fontSize:"small",sx:{color:"black"}}),(0,r.jsx)(st.default,{onChange:({target:X})=>f(o,X.value),onBlur:g,value:y,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)(k.default,{display:"flex",flexDirection:"column",justifyContent:"center",paddingRight:2,paddingLeft:1,minWidth:"5rem",children:[(0,r.jsx)(A.default,{variant:"caption",fontWeight:600,fontSize:13,sx:{my:0},color:"black",children:p||o}),x&&(0,r.jsx)(k.default,{position:"relative",height:"1rem","data-testid":"option-details-container",onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:(0,r.jsx)(A.default,{variant:"caption",color:"gray",sx:{my:0,zIndex:1e4,position:"fixed",...C&&{backgroundColor:e?"#ffffff":"#eeeeee",border:"thin solid #d3d3d3"}},"data-testid":"option-details",children:x?.length<=15||C?x:`${x?.slice(0,15)}...`})}),R&&(0,r.jsx)(L,{min:l,max:a,color:"gray"})]})]}),(0,r.jsxs)(rt.default,{variant:"outlined",size:"small",className:"options-input__dropdown-item-buttons",children:[(0,r.jsx)(P.default,{onClick:G(o),disabled:typeof a=="number"&&typeof e=="number"&&e>=a,className:"options-input__dropdown-item-button",role:"button",color:I?"error":"primary",children:(0,r.jsx)(lt.default,{sx:{color:I?"black":"primary"}})}),(0,r.jsx)(P.default,{onClick:D(o),disabled:typeof e=="number"&&typeof l=="number"&&e<=l,className:"options-input__dropdown-item-button",role:"button",color:I?"error":"primary",children:(0,r.jsx)(mt.default,{sx:{color:I?"black":"primary"}})})]})]})]})},dt=Wt;var v=require("@mui/material/colors");var no=require("@emotion/react"),io=require("@emotion/styled"),m=require("react/jsx-runtime"),Xt=({options:o,onChange:e,onFocus:p,onBlur:a,persistentOptions:l=[],defaultValue:H,displayMinMax:x=!1,disabled:y=!1,readOnly:f=!1,id:g,className:N,itemsGap:R=1,containerSx:I=[],error:C=!1,helperText:_,helperTextSx:Z,size:G="medium",alwaysBorder:D=!1,...X})=>{let[u,U]=(0,s.useState)([]),[gt,Rt]=(0,s.useState)(0),S=(0,s.useRef)(!1),T=(0,s.useRef)(null),[E,Y]=(0,s.useState)(),O=!!E,V=(0,s.useMemo)(()=>u.reduce((t,n)=>({...t,[n.id]:n.quantity}),{}),[u]);(0,s.useEffect)(()=>U(o.map(t=>{let n=H?.[t.id]??0;return{...t,quantity:n,inputQuantity:n}})),[o,H]),(0,s.useEffect)(()=>{Rt(T?.current?.clientWidth??0)},[T?.current?.clientWidth]);let w=(0,s.useMemo)(()=>u.reduce((t,{quantity:n,id:d,label:h})=>{let c=o.find(Q=>Q.id===d);return h&&n!==void 0&&(c?.max!==void 0&&c?.max<n||c?.min!==void 0&&c?.min>n)?[...t,h]:t},[]),[u,o]),B=(0,s.useMemo)(()=>C||!!w.length,[C,w]),Ot=(0,s.useCallback)(t=>{let{currentTarget:n}=t;!y&&!f&&setTimeout(()=>{Y(d=>d?void 0:n)},0)},[y,f,Y]),Bt=(0,s.useCallback)(()=>{S.current=!0,p&&p(V)},[V,p]),ht=(0,s.useCallback)(()=>{O||(S.current=!1,a&&a(V))},[O,V,a]),Ft=(0,s.useCallback)(()=>{O&&(Y(void 0),S.current&&(S.current=!1,a?.(V)))},[O,V,a]),Ht=(t,n)=>{let d=Number.isNaN(Number(n))?0:Number(n),h=u.map(c=>{let Q=d>(c?.max??1/0)?c?.max:d;return{...c,...t===c.id&&{quantity:d<(c?.min??-1/0)?c?.min:Q,inputQuantity:n}}});e&&e(h.reduce((c,Q)=>({...c,[Q.id]:Q.quantity}),{})),U(h)},Nt=t=>()=>U(u.map(n=>{if(t!==n.id)return n;let d=Number.isNaN(Number(n?.inputQuantity))?0:Number(n?.inputQuantity),h=d>(n?.max??1/0)?n?.max:d;return{...n,inputQuantity:d<(n?.min??-1/0)?n?.min:h}}));return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsxs)(M.default,{children:[(0,m.jsxs)(M.default,{id:g,onClick:Ot,onBlur:ht,onFocus:Bt,ref:T,className:(0,ut.default)("options-input__container",N,{"options-input__container--open":O,"options-input__container--disabled":y,"options-input__container--read-only":f,"options-input__container--error":B,"options-input__container--small":G==="small","options-input__container--always-border":D}),sx:[{"&:hover":{borderColor:"#d3d3d3"}},...Array.isArray(I)?I:[I],D&&{border:"1px solid #d3d3d3","&:hover":{borderColor:t=>t.palette.primary.main}},O&&{borderColor:t=>t.palette.primary.main,"&:hover":{borderColor:t=>t.palette.primary.main}},B&&{borderColor:v.red[700],"&:hover":{borderColor:v.red[700]}}],"data-testid":X["data-testid"]||"options-input-container",tabIndex:0,children:[(0,m.jsx)(M.default,{display:"flex",gap:R,children:u.filter(({quantity:t,id:n,icon:d})=>!!(ct[F(d)]&&(t!==0||l?.includes(n)))).map(t=>(0,m.jsx)(et,{item:t,disabled:y,displayMinMax:x,error:!!(t?.label&&w.includes(t.label)),size:G},t.id))}),!f&&(O?(0,m.jsx)(It.default,{sx:{color:B?v.red[700]:"primary"},fontSize:G}):(0,m.jsx)(xt.default,{sx:{color:t=>y?t.palette.grey[400]:t.palette.action.focus},fontSize:G}))]}),(_||B)&&(0,m.jsx)(M.default,{sx:{fontSize:"small",...Z||{},...B?{color:v.red[700]}:{}},marginTop:1,marginLeft:2,width:gt,children:w.length?(()=>{let t=w.length>1?"s":"";return`Value${t} for ${w.join(", ")} option${t} ${t?"are":"is"} out of range.`})():_})]}),(0,m.jsx)(yt.default,{onClickAway:Ft,children:(0,m.jsx)(ft.default,{open:O,placement:"bottom-start",anchorEl:E,sx:t=>({zIndex:t.zIndex.modal}),children:(0,m.jsx)(bt.default,{disablePadding:!0,"data-testid":"options-dropdown-list",className:"options-input__dropdown-items-list",sx:{bgcolor:"Background",border:t=>`thin solid ${B?v.red[700]:t.palette.primary.main}`},children:u.filter(({icon:t})=>!!ct[F(t)]).map((t,n)=>(0,m.jsx)(dt,{item:t,onBlur:Nt(t.id),onChange:Ht,index:n,displayMinMax:x,error:B},t.id))})})})]})};Xt.displayName="OptionsInput";0&&(module.exports={OptionsInput});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -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 {\n\tOptionsInputOption,\n\tOptionsInputValue,\n\tOptionsInputSize\n} 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\t/** Size of the input */\n\tsize?: OptionsInputSize;\n\t/** Display always with border */\n\talwaysBorder?: boolean;\n};\n\nconst 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\tsize = \"medium\",\n\talwaysBorder = false,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst isFocusedRef = useRef(false);\n\tconst inputContainerRef = useRef<HTMLElement>(null);\n\tconst [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tconst changedOptions = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce(\n\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t...currentValues,\n\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t}),\n\t\t\t\t{}\n\t\t\t) as OptionsInputValue,\n\t\t[currentOptions]\n\t);\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 = useCallback(() => {\n\t\tisFocusedRef.current = true;\n\t\tif (onFocus) {\n\t\t\tonFocus(changedOptions);\n\t\t}\n\t}, [changedOptions, onFocus]);\n\n\tconst onInputBlur = useCallback(() => {\n\t\tif (!open) {\n\t\t\tisFocusedRef.current = false;\n\t\t\tif (onBlur) {\n\t\t\t\tonBlur(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\n\n\tconst handleClickAway = useCallback(() => {\n\t\tif (open) {\n\t\t\tsetAnchorEl(undefined);\n\t\t\tif (isFocusedRef.current) {\n\t\t\t\tisFocusedRef.current = false;\n\t\t\t\tonBlur?.(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\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\t\"options-input__container--small\": size === \"small\",\n\t\t\t\t\t\t\"options-input__container--always-border\": alwaysBorder\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\talwaysBorder && {\n\t\t\t\t\t\t\tborder: \"1px solid #d3d3d3\",\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\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\tsize={size}\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\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: isError ? red[700] : \"primary\"\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tfontSize={size}\n\t\t\t\t\t\t\t/>\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\tfontSize={size}\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={handleClickAway}>\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\nOptionsInput.displayName = \"OptionsInput\";\n\nexport { OptionsInput };\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, OptionsInputSize } 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\tsize?: OptionsInputSize;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false,\n\tsize = \"medium\"\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={size} 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={size} sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography\n\t\t\t\tvariant={size === \"small\" ? \"body2\" : \"h6\"}\n\t\t\t\tsx={size === \"small\" ? { my: 0.25 } : undefined}\n\t\t\t\tcolor={itemsColor}\n\t\t\t>\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","size","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","size","alwaysBorder","rest","currentOptions","setCurrentOptions","inputContainerWidth","setInputContainerWidth","isFocusedRef","inputContainerRef","anchorEl","setAnchorEl","open","changedOptions","currentValues","currentOption","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","event","currentTarget","currentAnchor","onInputFocus","onInputBlur","handleClickAway","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 {\n\tOptionsInputOption,\n\tOptionsInputValue,\n\tOptionsInputSize\n} 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\t/** Size of the input */\n\tsize?: OptionsInputSize;\n\t/** Display always with border */\n\talwaysBorder?: boolean;\n};\n\nconst 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\tsize = \"medium\",\n\talwaysBorder = false,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst isFocusedRef = useRef(false);\n\tconst inputContainerRef = useRef<HTMLElement>(null);\n\tconst [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tconst changedOptions = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce(\n\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t...currentValues,\n\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t}),\n\t\t\t\t{}\n\t\t\t) as OptionsInputValue,\n\t\t[currentOptions]\n\t);\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 = useCallback(() => {\n\t\tisFocusedRef.current = true;\n\t\tif (onFocus) {\n\t\t\tonFocus(changedOptions);\n\t\t}\n\t}, [changedOptions, onFocus]);\n\n\tconst onInputBlur = useCallback(() => {\n\t\tif (!open) {\n\t\t\tisFocusedRef.current = false;\n\t\t\tif (onBlur) {\n\t\t\t\tonBlur(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\n\n\tconst handleClickAway = useCallback(() => {\n\t\tif (open) {\n\t\t\tsetAnchorEl(undefined);\n\t\t\tif (isFocusedRef.current) {\n\t\t\t\tisFocusedRef.current = false;\n\t\t\t\tonBlur?.(changedOptions);\n\t\t\t}\n\t\t}\n\t}, [open, changedOptions, onBlur]);\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\t\"options-input__container--small\": size === \"small\",\n\t\t\t\t\t\t\"options-input__container--always-border\": alwaysBorder\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\talwaysBorder && {\n\t\t\t\t\t\t\tborder: \"1px solid #d3d3d3\",\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\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\tsize={size}\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\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: isError ? red[700] : \"primary\"\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tfontSize={size}\n\t\t\t\t\t\t\t/>\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\tfontSize={size}\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={handleClickAway}>\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\nOptionsInput.displayName = \"OptionsInput\";\n\nexport { OptionsInput };\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, OptionsInputSize } 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\tsize?: OptionsInputSize;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false,\n\tsize = \"medium\"\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={size} 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={size} sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography\n\t\t\t\tvariant={size === \"small\" ? \"body2\" : \"h6\"}\n\t\t\t\tsx={size === \"small\" ? { my: 0.25 } : undefined}\n\t\t\t\tcolor={itemsColor}\n\t\t\t>\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 from \"@mui/material/Typography\";\nimport type { CSSProperties } from \"react\";\nimport type { Theme } from \"@mui/material\";\nimport type { ResponsiveStyleValue } from \"@mui/system\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?:\n\t\t| ResponsiveStyleValue<CSSProperties[\"color\"] | readonly string[] | undefined>\n\t\t| ((\n\t\t\t\ttheme: Theme\n\t\t ) => ResponsiveStyleValue<\n\t\t\t\tCSSProperties[\"color\"] | readonly string[] | undefined\n\t\t >)\n\t\t| null;\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" sx={{ my: 0, color }}>\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={\n\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\ttypeof max === \"number\" &&\n\t\t\t\t\t\t\t\ttypeof quantity === \"number\" &&\n\t\t\t\t\t\t\t\tquantity >= max\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\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={\n\t\t\t\t\t\t\t!!(typeof quantity === \"number\" && typeof min === \"number\") &&\n\t\t\t\t\t\t\tquantity <= min\n\t\t\t\t\t\t}\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","size","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","size","alwaysBorder","rest","currentOptions","setCurrentOptions","inputContainerWidth","setInputContainerWidth","isFocusedRef","inputContainerRef","anchorEl","setAnchorEl","open","changedOptions","currentValues","currentOption","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","event","currentTarget","currentAnchor","onInputFocus","onInputBlur","handleClickAway","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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@talixo-ds/options-input",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"types": "./dist/index.d.ts",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"@talixo-ds/icons": "^1.0.10",
|
|
45
45
|
"classnames": "^2.5.1"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "f799effb05eb87664ee91e21f5e279ed347129a9"
|
|
48
48
|
}
|