@talixo-ds/options-input 3.0.1 → 4.0.0

package/dist/esm/{index.js → index.mjs}

@@ -1,2 +1,2 @@
 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};
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,22 +1,22 @@
 {
 	"name": "@talixo-ds/options-input",
-	"version": "3.0.1",
+	"version": "4.0.0",
 	"types": "./dist/index.d.ts",
 	"publishConfig": {
 		"access": "public"
 	},
 	"main": "./dist/index.js",
-	"module": "./dist/esm/index.js",
+	"module": "./dist/esm/index.mjs",
 	"exports": {
 		"./package.json": "./package.json",
 		".": {
 			"import": {
-				"import": "./dist/esm/index.js",
-				"types": "./dist/index.d.mts"
+				"types": "./dist/index.d.mts",
+				"default": "./dist/esm/index.mjs"
 			},
 			"require": {
-				"require": "./dist/index.js",
-				"types": "./dist/index.d.ts"
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
 			}
 		},
 		"./index.css": {
@@ -34,15 +34,23 @@
 		"build": "rm -rf dist && tsup src/index.ts --tsconfig tsconfig.build.json --config ../../tsup.config.ts",
 		"test": "TZ=UTC vitest",
 		"test:ci": "TZ=UTC vitest run",
-		"check-exports": "attw --pack ."
+		"check-exports": "attw --pack . --exclude-entrypoints ./index.css"
 	},
 	"dependencies": {
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
-		"@mui/icons-material": "^7.3.7",
-		"@mui/material": "^7.3.7",
-		"@talixo-ds/icons": "^2.0.1",
+		"@talixo-ds/icons": "3.0.0",
 		"classnames": "^2.5.1"
 	},
-	"gitHead": "0cd8ea867f3a9c4f4c9bb780a7e8f47b58dc26cd"
+	"engines": {
+		"node": ">=24.0.0",
+		"npm": ">=10.0.0"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.0.0",
+		"@emotion/styled": "^11.0.0",
+		"@mui/icons-material": "^7.0.0",
+		"@mui/material": "^7.0.0",
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
+	},
+	"gitHead": "3949efd8460e0446113c9d9adbe51cdaa140458d"
 }