npm - @bikdotai/bik-component-library - Versions diffs - 0.0.830-beta.3 → 0.0.830-beta.4 - Mend

@bikdotai/bik-component-library 0.0.830-beta.3 → 0.0.830-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/cjs/components/dropdown/ChipInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),a=require("react"),y=require("../../utils/StringUtils.js"),u=require("../../constants/Theme.js"),D=require("../../assets/icons/chevronDown.svg.js"),g=require("../../assets/icons/cross.svg.js"),I=require("../../assets/icons/errorInfo.svg.js"),j=require("../input/Input.styled.js"),d=require("../TypographyStyle.js"),E=require("./Common.styled.js"),W=require("../tag/Tag.js"),V=require("../tooltips/Tooltip.js"),O=n=>n.length===1?100:n.length===2?40:34,U=({chips:n,onDeleteChip:c,containerStyle:h={},sizeToUse:i="default",isDropdownOpened:k,placeholder:b="Select..",errorMessage:l="",showLabelsOnMoreHover:v=!1})=>{const[f,N]=a.useState(),[m,x]=a.useState(0),[p,w]=a.useState([]);return a.useEffect(()=>{if(!n)return;let r=0;const t=O(n);let o=n.filter(s=>(r+=s.label.length,r<=t));o.length===0&&n.length>0&&(o=[n[0]]),N(o);const C=n.filter(s=>!o.includes(s)).map(s=>s.label);w(C),x(n.length-o.length)},[n]),e.jsxDEV(e.Fragment,{children:[e.jsxDEV(E.ChipInputWrapper,{style:{...h},error:!!l,children:[e.jsxDEV("div",{className:"chips-container",children:[f?.map((r,t)=>e.jsxDEV("div",{style:{zIndex:2},children:e.jsxDEV(W.Tag,{tagText:y.default.truncateText(r.selectedLabel||r.label,40),TrailingIcon:()=>e.jsxDEV(g.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{c(r)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:77,columnNumber:10},void 0),children:r.selectedLabel||r.label},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:71,columnNumber:8},void 0)},t,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:70,columnNumber:7},void 0)),!!m&&e.jsxDEV("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsxDEV(V.Tooltip,{body:"",placement:"bottom",tooltipContent:v&&p.length>0?e.jsxDEV("div",{style:{padding:"4px"},children:p.map((r,t)=>e.jsxDEV(d.BodyCaption,{style:{color:u.COLORS.text.white},children:r},t,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:106,columnNumber:13},void 0))},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:104,columnNumber:11},void 0):void 0,children:e.jsxDEV(d.BodyCaption,{color:u.COLORS.content.placeholder,children:`+${m} more`},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:117,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:99,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:92,columnNumber:7},void 0),n.length===0&&e.jsxDEV("div",{style:{color:u.COLORS.content.placeholder},children:b},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:125,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:68,columnNumber:5},void 0),e.jsxDEV("div",{children:e.jsxDEV(D.default,{style:{transform:k?"rotate(180deg)":"rotate(0deg)"},width:i==="x-small"?16:i==="small"?20:24,height:i==="x-small"?16:i==="small"?20:24,color:u.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:132,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:131,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:67,columnNumber:4},void 0),!!l&&e.jsxDEV(j.InputFooter,{invalid:!0,children:[!!l&&e.jsxDEV(I.default,{width:16,height:16},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:148,columnNumber:25},void 0),l]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:147,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:66,columnNumber:3},void 0)};exports.default=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),a=require("react"),D=require("../../utils/StringUtils.js"),u=require("../../constants/Theme.js"),g=require("../../assets/icons/chevronDown.svg.js"),I=require("../../assets/icons/cross.svg.js"),j=require("../../assets/icons/errorInfo.svg.js"),E=require("../input/Input.styled.js"),d=require("../TypographyStyle.js"),W=require("./Common.styled.js"),V=require("../tag/Tag.js"),O=require("../tooltips/Tooltip.js"),U=n=>n.length===1?100:n.length===2?40:34,q=({chips:n,onDeleteChip:c,containerStyle:h={},sizeToUse:i="default",isDropdownOpened:k,placeholder:b="Select..",errorMessage:l="",showLabelsOnMoreHover:v=!1,placeholderColor:f})=>{const[N,x]=a.useState(),[m,w]=a.useState(0),[p,C]=a.useState([]);return a.useEffect(()=>{if(!n)return;let r=0;const t=U(n);let o=n.filter(s=>(r+=s.label.length,r<=t));o.length===0&&n.length>0&&(o=[n[0]]),x(o);const y=n.filter(s=>!o.includes(s)).map(s=>s.label);C(y),w(n.length-o.length)},[n]),e.jsxDEV(e.Fragment,{children:[e.jsxDEV(W.ChipInputWrapper,{style:{...h},error:!!l,children:[e.jsxDEV("div",{className:"chips-container",children:[N?.map((r,t)=>e.jsxDEV("div",{style:{zIndex:2},children:e.jsxDEV(V.Tag,{tagText:D.default.truncateText(r.selectedLabel||r.label,40),TrailingIcon:()=>e.jsxDEV(I.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{c(r)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:79,columnNumber:10},void 0),children:r.selectedLabel||r.label},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:73,columnNumber:8},void 0)},t,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:72,columnNumber:7},void 0)),!!m&&e.jsxDEV("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsxDEV(O.Tooltip,{body:"",placement:"bottom",tooltipContent:v&&p.length>0?e.jsxDEV("div",{style:{padding:"4px"},children:p.map((r,t)=>e.jsxDEV(d.BodyCaption,{style:{color:u.COLORS.text.white},children:r},t,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:108,columnNumber:13},void 0))},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:106,columnNumber:11},void 0):void 0,children:e.jsxDEV(d.BodyCaption,{color:u.COLORS.content.placeholder,children:`+${m} more`},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:119,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:101,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:94,columnNumber:7},void 0),n.length===0&&e.jsxDEV("div",{style:{color:f??u.COLORS.content.placeholder},children:b},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:127,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:70,columnNumber:5},void 0),e.jsxDEV("div",{children:e.jsxDEV(g.default,{style:{transform:k?"rotate(180deg)":"rotate(0deg)"},width:i==="x-small"?16:i==="small"?20:24,height:i==="x-small"?16:i==="small"?20:24,color:u.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:136,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:135,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:69,columnNumber:4},void 0),!!l&&e.jsxDEV(E.InputFooter,{invalid:!0,children:[!!l&&e.jsxDEV(j.default,{width:16,height:16},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:152,columnNumber:25},void 0),l]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:151,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",lineNumber:68,columnNumber:3},void 0)};exports.default=q;
 //# sourceMappingURL=ChipInput.js.map

package/dist/cjs/components/dropdown/ChipInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\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)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div ~~style~~={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxDEV","Fragment","ChipInputWrapper","chip","index","Tag","StringUtils","CrossIcon","this","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"+~~iBAwBMA~~,EAAwBC,GACzBA,EAAM,SAAW,EAAU,IAC3BA,EAAM,SAAW,EAAU,GACxB,GAGFC,EAAsC,CAAC,CAC5C,MAAAD,EACA,aAAAE,EACA,eAAAC,EAAiB,CAAA,EACjB,UAAAC,EAAY,UACZ,iBAAAC,EACA,YAAAC,EAAc,WACd,aAAAC,EAAe,GACf,sBAAAC,EAAwB,~~EACzB~~,IAAM,CACL,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAA,EACxB,CAACC,EAAqBC,CAAsB,EAAIF,EAAAA,SAAS,CAAC,EAC1D,CAACG,EAAwBC,CAAyB,EAAIJ,EAAAA,SAE1D,CAAA,CAAE,EAEJK,OAAAA,EAAAA,UAAU,IAAM,CACf,GAAI,~~CAAChB~~,EAAO,OACZ,~~IAAIiB~~,EAAiB,EACrB,MAAMC,~~EAAWnB~~,EAAqBC,CAAK,EAC3C,~~IAAIS~~,~~EAAUT~~,EAAM,~~OAAQmB~~,IAC3BF,GAAkBE,EAAO,MAAM,OACxBF,GAAkBC,EACzB,EACGT,EAAQ,SAAW,~~GAAKT~~,EAAM,OAAS,~~IAC1CS~~,EAAU,~~CAACT~~,EAAM,CAAC,CAAC,~~GAEpBU~~,EAAWD,CAAO,EAElB,MAAMW,~~EADiBpB~~,EAAM,~~OAAQmB~~,GAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAKA,GAAWA,EAAO,KAAK,EAC1DJ,EAA0BK,CAAM,EAChCP,~~EAAuBb~~,EAAM,~~OAASS~~,EAAQ,MAAM,CACrD,EAAG,~~CAACT~~,CAAK,CAAC,~~EAGTqB~~,EAAAA,OAAAC,WAAA,CACC,SAAA,CAAAD,SAACE,EAAAA,iBAAA,CAAiB,MAAO,CAAE,~~GAAGpB~~,GAAkB,MAAO,CAAC,CAACI,EACxD,SAAA,~~CAAAc~~,EAAAA,OAAC,MAAA,CAAI,UAAU,kBACb,SAAA,CAAAZ,GAAS,IAAI,CAACe,EAAMC,IACpBJ,EAAAA,OAAC,OAAgB,MAAO,CAAE,OAAQ,CAAA,EACjC,SAAAA,EAAAA,OAACK,EAAAA,IAAA,CACA,QAASC,EAAAA,QAAY,aACpBH,EAAK,eAAiBA,EAAK,MAC3B,EAAA,EAED,aAAc,IACbH,EAAAA,OAACO,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,~~CACd1B~~,~~EAAasB~~,CAAI,CAClB,CAAA,EAND,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,EAAA,EAAAK,MAAA,EAUA,SAAAL,EAAK,eAAiBA,EAAK,KAAA,EAhB7B,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAK,MAAA,GADSJ,EAAV,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAmBA,CACA,EACA,CAAC,CAACjB,GACFS,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,OAAQ,EACR,cAAe,MAAA,EAGhB,SAAAA,EAAAA,OAACS,EAAAA,QAAA,CACA,KAAM,GACN,UAAU,SACV,~~eACCtB~~,~~GAAyBM~~,EAAuB,OAAS,WACvD,MAAA,CAAI,MAAO,CAAE,QAAS,OACrB,SAAAA,EAAuB,IAAI,CAACiB,EAAON,IACnCJ,EAAAA,OAACW,EAAAA,YAAA,CACA,MAAO,CAAE,MAAOC,SAAO,KAAK,KAAA,EAG3B,SAAAF,CAAA,EAFIN,EAFN,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,EAAA,EAAAI,MAAA,CAMA,CAAA,EARF,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,EAAA,EAAAA,MASA,EACG,OAGL,SAAAR,EAAAA,OAACW,EAAAA,aAAY,MAAOC,EAAAA,OAAO,QAAQ,YACjC,SAAA,IAAIrB,CAAmB,OAAA,EADzB,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,CAAA,EAAAiB,MAEA,CAAA,EApBD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,~~GAAA~~,aAAA,CAAA,EAAAA,MAAA,CAqBA,EA5BD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,~~EAgCA7B~~,EAAM,SAAW,~~GACjBqB~~,EAAAA,OAAC,MAAA,~~CAAI~~,MAAO,CAAE,~~MAAOY~~,EAAAA,OAAO,QAAQ,~~aAClC~~,~~SAAA3B~~,CAAA,~~EADF~~,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,CAAA,~~EAAAuB~~,~~MAEA~~,~~CAAA~~,CAAA,~~EA3DF~~,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,~~MA6DA~~,WAEC,MAAA,CACA,SAAAR,EAAAA,OAACa,EAAAA,QAAA,CACA,MAAO,CACN,~~UAAW7B~~,EAAmB,iBAAmB,cAAA,EAElD,MACCD,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,OACCA,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,~~MAAO6B~~,EAAAA,OAAO,QAAQ,OAAA,EAVvB,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,CAAA,EAAAJ,MAAA,CAWA,EAZD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAaA,CAAA,CAAA,~~EA7ED~~,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,~~MA8EA~~,EACC,CAAC,~~CAACtB~~,~~GACFc~~,SAACc,EAAAA,YAAA,CAAY,QAAS,GACpB,SAAA,CAAA,CAAC,~~CAAC5B~~,~~GAAgBc~~,SAACe,EAAAA,SAAU,MAAO,GAAI,OAAQ,IAA9B,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,EAAA,EAAAP,MAAkC,~~EACpDtB~~,CAAA,CAAA,EAFF,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,IAAA,aAAA,CAAA,~~EAAAsB~~,MAGA,CAAA,CAAA,~~EApFF~~,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,~~MAsFA~~,CAEF"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n\tplaceholderColor?: string;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n\tplaceholderColor,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\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)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ color: placeholderColor ?? COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","placeholderColor","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxDEV","Fragment","ChipInputWrapper","chip","index","Tag","StringUtils","CrossIcon","this","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/cjs/components/dropdown/Dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),o=require("react"),n=require("../../constants/Theme.js"),B=require("../../assets/icons/chevronDown.svg.js"),_=require("../input/context/InputStyleProvider.js"),G=require("./ChipInput.js"),J=require("./DropdownPopover/index.js"),K=require("./OpenedDropdown/utils/iterationOnOptions.js"),Q=require("../input/Input.js");function O(){}const S=({placeHolder:d,size:y,onSelect:D,defaultOptions:c,disabled:i,solidDisabled:l,noErrorHint:C,placeHolderHeight:b,showPlaceholderWhenSelected:W=!1,inputStyle:E={},inputType:x="default",onDeleteChip:R,truncatedText:I,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:V=!1,showLabelsOnMoreHover:j=!1,value:u,showSelected:p=!1,onDropdownVisbilityChange:U,...e})=>{const[v,q]=o.useState(!1),[w,g]=o.useState(!1),s=y??"default",M=o.useRef(),[a,m]=o.useState(c??[]);function T(r){Array.isArray(r)?m([...r]):m([r]),D?.(r)}o.useEffect(()=>{const r=[];e?.options?.forEach(h=>{h.options?h.options.forEach(k=>{k.selected&&r.push({...k,label:k.label})}):h.selected&&r.push(h)}),m([...r])},[e.options]),o.useEffect(()=>{c&&m([...c])},[c]);const A=K.getSelectedOptionsAsText(a),F=W?d:A??d??"Select an option",f=e.buttonWidth,N=f??e.width??"100%",z=e.dropdownWidth??N;return t.jsxDEV(t.Fragment,{children:t.jsxDEV(_.InputStyleContext.Provider,{value:{InputWrapper:{height:b||(s==="x-small"?24:s==="small"?32:48),width:N,...f?{maxWidth:f}:{},zIndex:1,cursor:"pointer",padding:s==="x-small"?"4px 8px":"6px 8px",backgroundColor:i&&l?n.COLORS.background.base:e.version==="3.0"?v||w?n.COLORS.surface.hovered:n.COLORS.surface.standard:p&&u!==void 0?n.BASE_COLORS.positive[100]:w?n.COLORS.background.inactive:n.COLORS.surface.standard,transition:"background-color 0.3s ease",...E},input:{minHeight:"100%",maxWidth:"100%",color:i&&l?n.COLORS.content.secondary:p&&u!==void 0?n.COLORS.content.positive:"inherit"}},children:t.jsxDEV("div",{onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),style:e.width?{width:e.width}:void 0,children:t.jsxDEV(J.DropdownPopover,{"data-test":e["data-test"],ref:M,onSelect:T,disabled:i,...e,onDropdownVisbilityChange:r=>{q(r),U?.(r)},width:z,children:[x=="default"&&t.jsxDEV(Q.Input,{version:e.version,noErrorHint:C,state:i?"disabled":"none",solidDisabled:l,value:u===void 0?F:u,errorMessage:e.error,variant:s,placeholder:d??"Select an option",onChangeText:O,leftIcon:L&&a[0]?.leadingIcon?{icon:()=>t.jsxDEV(t.Fragment,{children:a[0]?.leadingIcon},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:211,columnNumber:25},void 0)}:void 0,rightIcon:{icon:()=>t.jsxDEV("div",{style:{display:"flex"},children:[V&&a[0]?.trailingIcon,t.jsxDEV(B.default,{style:{transform:v?"rotate(180deg)":"rotate(0deg)"},onClick:O,width:s==="x-small"?16:s==="small"?20:24,height:s==="x-small"?16:s==="small"?20:24,color:p?n.COLORS.content.positive:n.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:224,columnNumber:12},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:217,columnNumber:11},void 0)},truncateText:I??!0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:198,columnNumber:8},void 0),x=="chip"&&t.jsxDEV(G.default,{placeholder:d??"Select options",chips:a,onDeleteChip:r=>{R?.(r)},errorMessage:e.error,isDropdownOpened:v,sizeToUse:s,containerStyle:{width:e.width??"100%",cursor:"pointer",...i&&l?{backgroundColor:n.COLORS.background.base,pointerEvents:"none"}:{}},showLabelsOnMoreHover:j},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:258,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:179,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:170,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:128,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:127,columnNumber:3},void 0)};S.displayName="Dropdown";exports.Dropdown=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),i=require("react"),n=require("../../constants/Theme.js"),B=require("../../assets/icons/chevronDown.svg.js"),_=require("../input/context/InputStyleProvider.js"),G=require("./ChipInput.js"),J=require("./DropdownPopover/index.js"),K=require("./OpenedDropdown/utils/iterationOnOptions.js"),Q=require("../input/Input.js");function N(){}const S=({placeHolder:d,size:y,onSelect:C,defaultOptions:l,disabled:s,solidDisabled:a,noErrorHint:D,placeHolderHeight:b,showPlaceholderWhenSelected:W=!1,inputStyle:E={},inputType:x="default",onDeleteChip:R,truncatedText:I,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:V=!1,showLabelsOnMoreHover:j=!1,value:u,showSelected:p=!1,onDropdownVisbilityChange:U,...e})=>{const[v,q]=i.useState(!1),[w,O]=i.useState(!1),o=y??"default",M=i.useRef(),[c,m]=i.useState(l??[]);function T(r){Array.isArray(r)?m([...r]):m([r]),C?.(r)}i.useEffect(()=>{const r=[];e?.options?.forEach(h=>{h.options?h.options.forEach(k=>{k.selected&&r.push({...k,label:k.label})}):h.selected&&r.push(h)}),m([...r])},[e.options]),i.useEffect(()=>{l&&m([...l])},[l]);const A=K.getSelectedOptionsAsText(c),F=W?d:A??d??"Select an option",f=e.buttonWidth,g=f??e.width??"100%",z=e.dropdownWidth??g;return t.jsxDEV(t.Fragment,{children:t.jsxDEV(_.InputStyleContext.Provider,{value:{InputWrapper:{height:b||(o==="x-small"?24:o==="small"?32:48),width:g,...f?{maxWidth:f}:{},zIndex:1,cursor:"pointer",padding:o==="x-small"?"4px 8px":"6px 8px",backgroundColor:s&&a?n.COLORS.background.base:e.version==="3.0"?v||w?n.COLORS.surface.hovered:n.COLORS.surface.standard:p&&u!==void 0?n.BASE_COLORS.positive[100]:w?n.COLORS.background.inactive:n.COLORS.surface.standard,transition:"background-color 0.3s ease",...E},input:{minHeight:"100%",maxWidth:"100%",color:s&&a?n.COLORS.content.secondary:p&&u!==void 0?n.COLORS.content.positive:"inherit"}},children:t.jsxDEV("div",{onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),style:e.width?{width:e.width}:void 0,children:t.jsxDEV(J.DropdownPopover,{"data-test":e["data-test"],ref:M,onSelect:T,disabled:s,...e,onDropdownVisbilityChange:r=>{q(r),U?.(r)},width:z,children:[x=="default"&&t.jsxDEV(Q.Input,{version:e.version,noErrorHint:D,state:s?"disabled":"none",solidDisabled:a,value:u===void 0?F:u,errorMessage:e.error,variant:o,placeholder:d??"Select an option",onChangeText:N,leftIcon:L&&c[0]?.leadingIcon?{icon:()=>t.jsxDEV(t.Fragment,{children:c[0]?.leadingIcon},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:211,columnNumber:25},void 0)}:void 0,rightIcon:{icon:()=>t.jsxDEV("div",{style:{display:"flex"},children:[V&&c[0]?.trailingIcon,t.jsxDEV(B.default,{style:{transform:v?"rotate(180deg)":"rotate(0deg)"},onClick:N,width:o==="x-small"?16:o==="small"?20:24,height:o==="x-small"?16:o==="small"?20:24,color:p?n.COLORS.content.positive:n.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:224,columnNumber:12},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:217,columnNumber:11},void 0)},truncateText:I??!0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:198,columnNumber:8},void 0),x=="chip"&&t.jsxDEV(G.default,{placeholder:d??"Select options",placeholderColor:s&&a?n.COLORS.content.secondary:void 0,chips:c,onDeleteChip:r=>{R?.(r)},errorMessage:e.error,isDropdownOpened:v,sizeToUse:o,containerStyle:{width:e.width??"100%",cursor:"pointer",...s&&a?{backgroundColor:n.COLORS.background.base,pointerEvents:"none"}:{}},showLabelsOnMoreHover:j},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:258,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:179,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:170,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:128,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:127,columnNumber:3},void 0)};S.displayName="Dropdown";exports.Dropdown=S;
 //# sourceMappingURL=Dropdown.js.map

package/dist/cjs/components/dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' \| 'small' \| 'x-small';\n\tdisabled?: boolean;\n\t/** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. /\n\tsolidDisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' \| 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/* Fired when the dropdown opens/closes. Runs alongside internal open state. /\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/* empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tsolidDisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption \| DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t: openDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened \|\| isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.content.secondary\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t...(disabled && solidDisabled\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.background.base,\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","solidDisabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsxDEV","Fragment","InputStyleContext","COLORS","BASE_COLORS","DropdownPopover","isOpen","Input","this","DownIcon","ChipInput","chip"],"mappings":"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"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' \| 'small' \| 'x-small';\n\tdisabled?: boolean;\n\t/** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. /\n\tsolidDisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' \| 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/* Fired when the dropdown opens/closes. Runs alongside internal open state. /\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/* empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tsolidDisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption \| DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t: openDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened \|\| isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.content.secondary\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tplaceholderColor={\n\t\t\t\t\t\t\t\t\tdisabled && solidDisabled ? COLORS.content.secondary : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t...(disabled && solidDisabled\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.background.base,\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","solidDisabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsxDEV","Fragment","InputStyleContext","COLORS","BASE_COLORS","DropdownPopover","isOpen","Input","this","DownIcon","ChipInput","chip"],"mappings":"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"}

package/dist/cjs/components/input/Input.styled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),s=({isActive:t,isInvalid:r,hightlightInputColor:o})=>t?o||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,h=t=>t.hideBorder?0:t.version==="2.0"?.5:1,x=i.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),s=({isActive:t,isInvalid:r,hightlightInputColor:o})=>t?o||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,h=t=>t.hideBorder?0:t.version==="2.0"?.5:1,c=i.default.div`
 	border-radius: ${t=>t.version==="2.0"?8:4}px;
 	background: ${t=>["disabled","read-only","disabled-invalid"].includes(t.state)?e.COLORS.background.base:"#fff"};
 	border: ${t=>h(t)}px solid
@@ -19,9 +19,16 @@
 					input,
 					textarea {
 						color: ${e.COLORS.content.secondary};
+						-webkit-text-fill-color: ${e.COLORS.content.secondary};
+						opacity: 1;
+						&::placeholder {
+							color: ${e.COLORS.content.secondary};
+							-webkit-text-fill-color: ${e.COLORS.content.secondary};
+							opacity: 1;
+						}
 					}
 			  `:""};
-`,c=i.default.div`
+`,x=i.default.div`
 	min-height: ${t=>t.iconSize};
 	min-width: ${t=>t.iconSize};
 	display: flex;
@@ -120,7 +127,7 @@
 `,f=i.default(n.BodySecondary)`
 	color: ${e.COLORS.content.secondary} !important;
 	margin-top: ${t=>t.position==="BOTTOM"?"8px":"0px"};
-`,v=i.default(n.BodyCaption)`
+`,y=i.default(n.BodyCaption)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${t=>t.invalid?e.COLORS.content.negative:e.COLORS.content.secondary} !important;
@@ -134,7 +141,7 @@
 		width: 16px;
 		height: 16px;
 	}
-`,y=i.default.div`
+`,v=i.default.div`
 	${t=>t.width?`width: ${t.width}`:""};
 	${t=>t.height&&t.type=="multiline"?`height: ${t.height}`:""};
 	${t=>t.state==="disabled"||t.state==="disabled-invalid"?a.css`
@@ -165,5 +172,5 @@
 	margin-right: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
 	font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
 	line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
-`;exports.IconHolder=c;exports.InputContainer=g;exports.InputContainerSmall=u;exports.InputContainerXSmall=m;exports.InputFooter=v;exports.InputHeader=p;exports.InputWrapper=x;exports.MaxCharStyle=f;exports.PrefixHolder=$;exports.RootContainer=y;exports.SuffixHolder=b;
+`;exports.IconHolder=x;exports.InputContainer=g;exports.InputContainerSmall=u;exports.InputContainerXSmall=m;exports.InputFooter=y;exports.InputHeader=p;exports.InputWrapper=c;exports.MaxCharStyle=f;exports.PrefixHolder=$;exports.RootContainer=v;exports.SuffixHolder=b;
 //# sourceMappingURL=Input.styled.js.map

package/dist/cjs/components/input/Input.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
1	+ {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t&::placeholder {\n\t\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

package/dist/esm/components/dropdown/ChipInput.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ interface ChipInputProps {
     sizeToUse?: 'default' | 'small' | 'x-small';
     errorMessage?: string;
     showLabelsOnMoreHover?: boolean;
+    placeholderColor?: string;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

package/dist/esm/components/dropdown/ChipInput.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { jsxDEV as e, Fragment as x } from "react/jsx-dev-runtime";
-import { useState as l, useEffect as y } from "react";
-import I from "../../utils/StringUtils.js";
+import { jsxDEV as e, Fragment as y } from "react/jsx-dev-runtime";
+import { useState as l, useEffect as I } from "react";
+import D from "../../utils/StringUtils.js";
 import { COLORS as a } from "../../constants/Theme.js";
-import D from "../../assets/icons/chevronDown.svg.js";
-import W from "../../assets/icons/cross.svg.js";
-import U from "../../assets/icons/errorInfo.svg.js";
-import { InputFooter as O } from "../input/Input.styled.js";
+import W from "../../assets/icons/chevronDown.svg.js";
+import U from "../../assets/icons/cross.svg.js";
+import O from "../../assets/icons/errorInfo.svg.js";
+import { InputFooter as S } from "../input/Input.styled.js";
 import { BodyCaption as d } from "../TypographyStyle.js";
-import { ChipInputWrapper as S } from "./Common.styled.js";
-import { Tag as L } from "../tag/Tag.js";
-import { Tooltip as E } from "../tooltips/Tooltip.js";
-const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
+import { ChipInputWrapper as L } from "./Common.styled.js";
+import { Tag as E } from "../tag/Tag.js";
+import { Tooltip as R } from "../tooltips/Tooltip.js";
+const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
   chips: r,
   onDeleteChip: c,
   containerStyle: h = {},
@@ -18,29 +18,30 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
   isDropdownOpened: k,
   placeholder: b = "Select..",
   errorMessage: m = "",
-  showLabelsOnMoreHover: v = !1
+  showLabelsOnMoreHover: v = !1,
+  placeholderColor: f
 }) => {
-  const [f, N] = l(), [p, w] = l(0), [u, C] = l([]);
-  return y(() => {
+  const [N, w] = l(), [p, C] = l(0), [u, g] = l([]);
+  return I(() => {
     if (!r) return;
     let n = 0;
-    const o = R(r);
+    const o = A(r);
     let t = r.filter((i) => (n += i.label.length, n <= o));
-    t.length === 0 && r.length > 0 && (t = [r[0]]), N(t);
-    const g = r.filter((i) => !t.includes(i)).map((i) => i.label);
-    C(g), w(r.length - t.length);
-  }, [r]), /* @__PURE__ */ e(x, { children: [
-    /* @__PURE__ */ e(S, { style: { ...h }, error: !!m, children: [
+    t.length === 0 && r.length > 0 && (t = [r[0]]), w(t);
+    const x = r.filter((i) => !t.includes(i)).map((i) => i.label);
+    g(x), C(r.length - t.length);
+  }, [r]), /* @__PURE__ */ e(y, { children: [
+    /* @__PURE__ */ e(L, { style: { ...h }, error: !!m, children: [
       /* @__PURE__ */ e("div", { className: "chips-container", children: [
-        f?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
-          L,
+        N?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
+          E,
           {
-            tagText: I.truncateText(
+            tagText: D.truncateText(
               n.selectedLabel || n.label,
               40
             ),
             TrailingIcon: () => /* @__PURE__ */ e(
-              W,
+              U,
               {
                 width: 12,
                 height: 12,
@@ -53,7 +54,7 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
               !1,
               {
                 fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                lineNumber: 77,
+                lineNumber: 79,
                 columnNumber: 10
               },
               void 0
@@ -64,13 +65,13 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
           !1,
           {
             fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-            lineNumber: 71,
+            lineNumber: 73,
             columnNumber: 8
           },
           void 0
         ) }, o, !1, {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 70,
+          lineNumber: 72,
           columnNumber: 7
         }, void 0)),
         !!p && /* @__PURE__ */ e(
@@ -82,7 +83,7 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
               pointerEvents: "auto"
             },
             children: /* @__PURE__ */ e(
-              E,
+              R,
               {
                 body: "",
                 placement: "bottom",
@@ -96,18 +97,18 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
                   !1,
                   {
                     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                    lineNumber: 106,
+                    lineNumber: 108,
                     columnNumber: 13
                   },
                   void 0
                 )) }, void 0, !1, {
                   fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                  lineNumber: 104,
+                  lineNumber: 106,
                   columnNumber: 11
                 }, void 0) : void 0,
                 children: /* @__PURE__ */ e(d, { color: a.content.placeholder, children: `+${p} more` }, void 0, !1, {
                   fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                  lineNumber: 117,
+                  lineNumber: 119,
                   columnNumber: 9
                 }, void 0)
               },
@@ -115,7 +116,7 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
               !1,
               {
                 fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                lineNumber: 99,
+                lineNumber: 101,
                 columnNumber: 8
               },
               void 0
@@ -125,23 +126,33 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
           !1,
           {
             fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-            lineNumber: 92,
+            lineNumber: 94,
             columnNumber: 7
           },
           void 0
         ),
-        r.length === 0 && /* @__PURE__ */ e("div", { style: { color: a.content.placeholder }, children: b }, void 0, !1, {
-          fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 125,
-          columnNumber: 7
-        }, void 0)
+        r.length === 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            style: { color: f ?? a.content.placeholder },
+            children: b
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
+            lineNumber: 127,
+            columnNumber: 7
+          },
+          void 0
+        )
       ] }, void 0, !0, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 68,
+        lineNumber: 70,
         columnNumber: 5
       }, void 0),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        D,
+        W,
         {
           style: {
             transform: k ? "rotate(180deg)" : "rotate(0deg)"
@@ -154,39 +165,39 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
         !1,
         {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 132,
+          lineNumber: 136,
           columnNumber: 6
         },
         void 0
       ) }, void 0, !1, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 131,
+        lineNumber: 135,
         columnNumber: 5
       }, void 0)
     ] }, void 0, !0, {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-      lineNumber: 67,
+      lineNumber: 69,
       columnNumber: 4
     }, void 0),
-    !!m && /* @__PURE__ */ e(O, { invalid: !0, children: [
-      !!m && /* @__PURE__ */ e(U, { width: 16, height: 16 }, void 0, !1, {
+    !!m && /* @__PURE__ */ e(S, { invalid: !0, children: [
+      !!m && /* @__PURE__ */ e(O, { width: 16, height: 16 }, void 0, !1, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 148,
+        lineNumber: 152,
         columnNumber: 25
       }, void 0),
       m
     ] }, void 0, !0, {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-      lineNumber: 147,
+      lineNumber: 151,
       columnNumber: 5
     }, void 0)
   ] }, void 0, !0, {
     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-    lineNumber: 66,
+    lineNumber: 68,
     columnNumber: 3
   }, void 0);
 };
 export {
-  K as default
+  P as default
 };
 //# sourceMappingURL=ChipInput.js.map

package/dist/esm/components/dropdown/ChipInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\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)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div ~~style~~={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxDEV","Fragment","ChipInputWrapper","chip","index","Tag","StringUtils","CrossIcon","this","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":";;;;;;;;;;;;~~AAwBA~~,MAAMA,IAAuB,CAACC,MACzBA,EAAM,WAAW,IAAU,MAC3BA,EAAM,WAAW,IAAU,KACxB,IAGFC,IAAsC,CAAC;AAAA,EAC5C,OAAAD;AAAA,EACA,cAAAE;AAAA,EACA,gBAAAC,IAAiB,CAAA;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,kBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC,IAAe;AAAA,EACf,uBAAAC,IAAwB;~~AACzB~~,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAA,GACxB,CAACC,GAAqBC,CAAsB,IAAIF,EAAS,CAAC,GAC1D,CAACG,GAAwBC,CAAyB,IAAIJ,EAE1D,CAAA,CAAE;AAEJ,SAAAK,EAAU,MAAM;AACf,QAAI,~~CAAChB~~,EAAO;AACZ,~~QAAIiB~~,IAAiB;AACrB,UAAMC,~~IAAWnB~~,EAAqBC,CAAK;AAC3C,~~QAAIS~~,~~IAAUT~~,EAAM,OAAO,~~CAACmB~~,OAC3BF,KAAkBE,EAAO,MAAM,QACxBF,KAAkBC,EACzB;AACD,IAAIT,EAAQ,WAAW,~~KAAKT~~,EAAM,SAAS,~~MAC1CS~~,IAAU,~~CAACT~~,EAAM,CAAC,CAAC,~~IAEpBU~~,EAAWD,CAAO;AAElB,UAAMW,~~IADiBpB~~,EAAM,OAAO,~~CAACmB~~,MAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAI,CAACA,MAAWA,EAAO,KAAK;AAC1D,IAAAJ,EAA0BK,CAAM,GAChCP,~~EAAuBb~~,EAAM,~~SAASS~~,EAAQ,MAAM;AAAA,EACrD,GAAG,~~CAACT~~,CAAK,CAAC,GAGT,~~gBAAAqB~~,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,OAAO,EAAE,~~GAAGpB~~,KAAkB,OAAO,CAAC,CAACI,GACxD,UAAA;AAAA,MAAA,~~gBAAAc~~,EAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,QAAAZ,GAAS,IAAI,CAACe,GAAMC,MACpB,gBAAAJ,EAAC,SAAgB,OAAO,EAAE,QAAQ,EAAA,GACjC,UAAA,gBAAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,SAASC,EAAY;AAAA,cACpBH,EAAK,iBAAiBA,EAAK;AAAA,cAC3B;AAAA,YAAA;AAAA,YAED,cAAc,MACb,gBAAAH;AAAA,cAACO;AAAAA,cAAA;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,OAAO,EAAE,QAAQ,UAAA;AAAA,gBACjB,SAAS,MAAM;AACd,~~kBAAA1B~~,~~EAAasB~~,CAAI;AAAA,gBAClB;AAAA,cAAA;AAAA,cAND;AAAA,cAAA;AAAA,cAAA;AAAA,gBAAA,UAAA;AAAA,gBAAA,YAAA;AAAA,gBAAA,cAAA;AAAA,cAAA;AAAA,cAAAK;AAAAA,YAAA;AAAA,YAUA,UAAAL,EAAK,iBAAiBA,EAAK;AAAA,UAAA;AAAA,UAhB7B;AAAA,UAAA;AAAA,UAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAA;AAAA,UAAAK;AAAAA,QAAA,KADSJ,GAAV,IAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA,GAAAI,MAmBA,CACA;AAAA,QACA,CAAC,CAACjB,KACF,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,eAAe;AAAA,YAAA;AAAA,YAGhB,UAAA,gBAAAA;AAAA,cAACS;AAAA,cAAA;AAAA,gBACA,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,~~gBACCtB~~,~~KAAyBM~~,EAAuB,SAAS,sBACvD,OAAA,EAAI,OAAO,EAAE,SAAS,SACrB,UAAAA,EAAuB,IAAI,CAACiB,GAAON,MACnC,gBAAAJ;AAAA,kBAACW;AAAA,kBAAA;AAAA,oBACA,OAAO,EAAE,OAAOC,EAAO,KAAK,MAAA;AAAA,oBAG3B,UAAAF;AAAA,kBAAA;AAAA,kBAFIN;AAAA,kBAFN;AAAA,kBAAA;AAAA,oBAAA,UAAA;AAAA,oBAAA,YAAA;AAAA,oBAAA,cAAA;AAAA,kBAAA;AAAA,kBAAAI;AAAAA,gBAAA,CAMA,EAAA,GARF,QAAA,IAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBAAA,GAAAA,MASA,IACG;AAAA,gBAGL,UAAA,gBAAAR,EAACW,KAAY,OAAOC,EAAO,QAAQ,aACjC,UAAA,IAAIrB,CAAmB,QAAA,GADzB,QAAA,IAAA;AAAA,kBAAA,UAAA;AAAA,kBAAA,YAAA;AAAA,kBAAA,cAAA;AAAA,gBAAA,GAAAiB,MAEA;AAAA,cAAA;AAAA,cApBD;AAAA,cAAA;AAAA,cAAA;AAAA,gBAAA,UAAA;AAAA,gBAAA,YAAA;AAAA,gBAAA,cAAA;AAAA,cAAA;AAAA,cAAAA;AAAAA,YAAA;AAAA,UAqBA;AAAA,UA5BD;AAAA,UAAA;AAAA,UAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAA;AAAA,UAAAA;AAAAA,QAAA;AAAA,~~QAgCA7B~~,EAAM,WAAW,KACjB,~~gBAAAqB~~,~~EAAC~~,~~OAAA~~,~~EAAI~~,OAAO,EAAE,~~OAAOY~~,EAAO,QAAQ,~~eAClC~~,~~UAAA3B~~,~~EAAA~~,~~GADF~~,~~QAAA,IAAA~~;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,~~UAAA~~,cAAA;AAAA,~~QAAA~~,~~GAAAuB~~,~~MAEA~~;AAAA,~~MAAA~~,EAAA,~~GA3DF~~,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAAA,~~MA6DA~~;AAAA,wBAEC,OAAA,EACA,UAAA,gBAAAR;AAAA,QAACa;AAAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,~~WAAW7B~~,IAAmB,mBAAmB;AAAA,UAAA;AAAA,UAElD,OACCD,MAAc,YAAY,KAAKA,MAAc,UAAU,KAAK;AAAA,UAE7D,QACCA,MAAc,YAAY,KAAKA,MAAc,UAAU,KAAK;AAAA,UAE7D,~~OAAO6B~~,EAAO,QAAQ;AAAA,QAAA;AAAA,QAVvB;AAAA,QAAA;AAAA,QAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA;AAAA,QAAAJ;AAAAA,MAAA,EAWA,GAZD,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAAA,MAaA;AAAA,IAAA,EAAA,~~GA7ED~~,QAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAA,~~MA8EA~~;AAAA,IACC,CAAC,~~CAACtB~~,KACF,~~gBAAAc~~,EAACc,GAAA,EAAY,SAAS,IACpB,UAAA;AAAA,MAAA,CAAC,~~CAAC5B~~,KAAgB,~~gBAAAc~~,EAACe,KAAU,OAAO,IAAI,QAAQ,MAA9B,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAAP,MAAkC;AAAA,~~MACpDtB~~;AAAA,IAAA,EAAA,GAFF,QAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,~~GAAAsB~~,MAGA;AAAA,EAAA,EAAA,~~GApFF~~,QAAA,IAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,~~MAsFA~~;AAEF;"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n\tplaceholderColor?: string;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n\tplaceholderColor,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\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)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ color: placeholderColor ?? COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","placeholderColor","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxDEV","Fragment","ChipInputWrapper","chip","index","Tag","StringUtils","CrossIcon","this","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Dropdown.js CHANGED Viewed

@@ -10,13 +10,13 @@ import { Input as Z } from "../input/Input.js";
 function S() {
 }
 const $ = ({
-  placeHolder: a,
+  placeHolder: d,
   size: C,
-  onSelect: D,
-  defaultOptions: d,
+  onSelect: I,
+  defaultOptions: l,
   disabled: i,
-  solidDisabled: l,
-  noErrorHint: I,
+  solidDisabled: s,
+  noErrorHint: D,
   placeHolderHeight: b,
   showPlaceholderWhenSelected: U = !1,
   inputStyle: E = {},
@@ -31,11 +31,11 @@ const $ = ({
   onDropdownVisbilityChange: V,
   ...e
 }) => {
-  const [h, L] = k(!1), [x, N] = k(!1), n = C ?? "default", z = q(), [s, c] = k(
-    d ?? []
+  const [h, L] = k(!1), [x, N] = k(!1), n = C ?? "default", z = q(), [a, c] = k(
+    l ?? []
   );
   function F(r) {
-    Array.isArray(r) ? c([...r]) : c([r]), D?.(r);
+    Array.isArray(r) ? c([...r]) : c([r]), I?.(r);
   }
   W(() => {
     const r = [];
@@ -48,9 +48,9 @@ const $ = ({
       }) : u.selected && r.push(u);
     }), c([...r]);
   }, [e.options]), W(() => {
-    d && c([...d]);
-  }, [d]);
-  const j = Y(s), B = U ? a : j ?? a ?? "Select an option", f = e.buttonWidth, g = f ?? e.width ?? "100%", _ = e.dropdownWidth ?? g;
+    l && c([...l]);
+  }, [l]);
+  const j = Y(a), B = U ? d : j ?? d ?? "Select an option", f = e.buttonWidth, g = f ?? e.width ?? "100%", _ = e.dropdownWidth ?? g;
   return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
     K.Provider,
     {
@@ -62,14 +62,14 @@ const $ = ({
           zIndex: 1,
           cursor: "pointer",
           padding: n === "x-small" ? "4px 8px" : "6px 8px",
-          backgroundColor: i && l ? o.background.base : e.version === "3.0" ? h || x ? o.surface.hovered : o.surface.standard : p && m !== void 0 ? G.positive[100] : x ? o.background.inactive : o.surface.standard,
+          backgroundColor: i && s ? o.background.base : e.version === "3.0" ? h || x ? o.surface.hovered : o.surface.standard : p && m !== void 0 ? G.positive[100] : x ? o.background.inactive : o.surface.standard,
           transition: "background-color 0.3s ease",
           ...E
         },
         input: {
           minHeight: "100%",
           maxWidth: "100%",
-          color: i && l ? o.content.secondary : p && m !== void 0 ? o.content.positive : "inherit"
+          color: i && s ? o.content.secondary : p && m !== void 0 ? o.content.positive : "inherit"
         }
       },
       children: /* @__PURE__ */ t(
@@ -95,16 +95,16 @@ const $ = ({
                   Z,
                   {
                     version: e.version,
-                    noErrorHint: I,
+                    noErrorHint: D,
                     state: i ? "disabled" : "none",
-                    solidDisabled: l,
+                    solidDisabled: s,
                     value: m === void 0 ? B : m,
                     errorMessage: e.error,
                     variant: n,
-                    placeholder: a ?? "Select an option",
+                    placeholder: d ?? "Select an option",
                     onChangeText: S,
-                    leftIcon: A && s[0]?.leadingIcon ? {
-                      icon: () => /* @__PURE__ */ t(y, { children: s[0]?.leadingIcon }, void 0, !1, {
+                    leftIcon: A && a[0]?.leadingIcon ? {
+                      icon: () => /* @__PURE__ */ t(y, { children: a[0]?.leadingIcon }, void 0, !1, {
                         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
                         lineNumber: 211,
                         columnNumber: 25
@@ -118,7 +118,7 @@ const $ = ({
                             display: "flex"
                           },
                           children: [
-                            R && s[0]?.trailingIcon,
+                            R && a[0]?.trailingIcon,
                             /* @__PURE__ */ t(
                               J,
                               {
@@ -165,8 +165,9 @@ const $ = ({
                 w == "chip" && /* @__PURE__ */ t(
                   Q,
                   {
-                    placeholder: a ?? "Select options",
-                    chips: s,
+                    placeholder: d ?? "Select options",
+                    placeholderColor: i && s ? o.content.secondary : void 0,
+                    chips: a,
                     onDeleteChip: (r) => {
                       O?.(r);
                     },
@@ -176,7 +177,7 @@ const $ = ({
                     containerStyle: {
                       width: e.width ?? "100%",
                       cursor: "pointer",
-                      ...i && l ? {
+                      ...i && s ? {
                         backgroundColor: o.background.base,
                         pointerEvents: "none"
                       } : {}

package/dist/esm/components/dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' \| 'small' \| 'x-small';\n\tdisabled?: boolean;\n\t/** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. /\n\tsolidDisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' \| 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/* Fired when the dropdown opens/closes. Runs alongside internal open state. /\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/* empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tsolidDisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption \| DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t: openDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened \|\| isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.content.secondary\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t...(disabled && solidDisabled\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.background.base,\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","solidDisabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsxDEV","Fragment","InputStyleContext","COLORS","BASE_COLORS","DropdownPopover","isOpen","Input","this","DownIcon","ChipInput","chip"],"mappings":"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"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' \| 'small' \| 'x-small';\n\tdisabled?: boolean;\n\t/** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. /\n\tsolidDisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' \| 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/* Fired when the dropdown opens/closes. Runs alongside internal open state. /\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/* empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tsolidDisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption \| DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t: openDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened \|\| isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.content.secondary\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tplaceholderColor={\n\t\t\t\t\t\t\t\t\tdisabled && solidDisabled ? COLORS.content.secondary : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t...(disabled && solidDisabled\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.background.base,\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","solidDisabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsxDEV","Fragment","InputStyleContext","COLORS","BASE_COLORS","DropdownPopover","isOpen","Input","this","DownIcon","ChipInput","chip"],"mappings":"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"}

package/dist/esm/components/input/Input.styled.js CHANGED Viewed

@@ -26,6 +26,13 @@ const s = ({ isActive: t, isInvalid: h, hightlightInputColor: o }) => t ? o || e
 					input,
 					textarea {
 						color: ${e.content.secondary};
+						-webkit-text-fill-color: ${e.content.secondary};
+						opacity: 1;
+						&::placeholder {
+							color: ${e.content.secondary};
+							-webkit-text-fill-color: ${e.content.secondary};
+							opacity: 1;
+						}
 					}
 			  ` : ""};
 `, u = i.div`

package/dist/esm/components/input/Input.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
1	+ {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t&::placeholder {\n\t\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.830-beta.3",
+	"version": "0.0.830-beta.4",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",