@talixo-ds/options-input 1.0.11 → 2.0.1

package/README.md

@@ -0,0 +1,27 @@
+# @talixo-ds/options-input
+
+## Installation
+
+```bash
+npm install @talixo-ds/options-input
+```
+
+## Importing
+
+```javascript
+import { OptionsInput } from "@talixo-ds/options-input";
+```
+
+## Usage
+
+### CSS Import
+
+```javascript
+import "@talixo-ds/options-input/index.css";
+```
+
+### Component
+
+```jsx
+<OptionsInput options={options} />
+```

package/dist/esm/index.js

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

package/dist/index.js

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

package/package.json

@@ -1,20 +1,37 @@
 {
 	"name": "@talixo-ds/options-input",
-	"version": "1.0.11",
+	"version": "2.0.1",
 	"types": "./dist/index.d.ts",
 	"publishConfig": {
 		"access": "public"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
+	"exports": {
+		"./package.json": "./package.json",
+		".": {
+			"import": {
+				"import": "./dist/esm/index.js",
+				"types": "./dist/index.d.mts"
+			},
+			"require": {
+				"require": "./dist/index.js",
+				"types": "./dist/index.d.ts"
+			}
+		},
+		"./index.css": {
+			"import": "./dist/index.css",
+			"require": "./dist/index.css"
+		}
+	},
 	"sideEffects": false,
 	"files": [
 		"dist"
 	],
 	"scripts": {
-		"build": "rm -rf dist && tsup src/index.ts --tsconfig tsconfig.build.json --config ../../tsup.config.ts && npm run inject-styles",
-		"inject-styles": "echo 'require(\"./index.css\");' | cat - ./dist/index.js > temp && mv temp ./dist/index.js && echo 'import \"./index.css\";' | cat - ./dist/esm/index.js > temp && mv temp ./dist/esm/index.js",
+		"build": "rm -rf dist && tsup src/index.ts --tsconfig tsconfig.build.json --config ../../tsup.config.ts",
 		"test": "vitest",
+		"test:ci": "vitest run",
 		"check-exports": "attw --pack ."
 	},
 	"dependencies": {
@@ -22,8 +39,8 @@
 		"@emotion/styled": "^11.13.0",
 		"@mui/icons-material": "^5.16.4",
 		"@mui/material": "^5.16.4",
-		"@talixo-ds/icons": "^1.0.6",
+		"@talixo-ds/icons": "^1.0.8",
 		"classnames": "^2.5.1"
 	},
-	"gitHead": "0c139f097017e6c87b604ebc33212f3df903eb58"
+	"gitHead": "b78b9e5e144f63572f86eae48420da91c2171299"
 }