@cleartrip/ct-design-dropdown 4.0.0 → 5.0.0

package/README.md

@@ -0,0 +1,63 @@
+# Dropdown
+
+A dropdown menu component for selecting from a list of options.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-dropdown
+# or
+pnpm add @cleartrip/ct-design-dropdown
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { Dropdown } from '@cleartrip/ct-design-dropdown';
+
+function Example() {
+  return (
+    <Dropdown>
+      {/* Basic usage */}
+    </Dropdown>
+  );
+}
+```
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { Dropdown } from 'yagami/core/components';
++ import { Dropdown } from '@cleartrip/ct-design-dropdown';
+```

package/dist/Dropdown.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DropdownProps } from './type';
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/dist/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAmB,MAAM,QAAQ,CAAC;AAIxD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyIrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAQ,MAAM,QAAQ,CAAC;AA2E7C,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8HrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}

package/dist/Dropdown.native.d.ts

@@ -0,0 +1,4 @@
+import { DropdownProps } from './type';
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.native.d.ts.map

package/dist/Dropdown.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.native.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.native.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAQ,MAAM,QAAQ,CAAC;AA8C7C,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmLrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/ct-design-dropdown.browser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),i=require("react/jsx-runtime"),n=require("@cleartrip/ct-design-container"),o=require("@cleartrip/ct-design-checkbox"),t=require("styled-components"),r=require("@cleartrip/ct-design-theme"),s=require("react"),l=require("@cleartrip/ct-design-typography"),a=require("@cleartrip/ct-design-tokens"),c=require("react-tiny-virtual-list");function d(e){return e&&e.__esModule?e:{default:e}}var u,p=d(t),h=d(c);exports.DropdownVarient=void 0,(u=exports.DropdownVarient||(exports.DropdownVarient={})).FLAT="FLAT",u.ROUND="ROUND",u.BYLINE="BYLINE",u.BYLINE_SIDE="BYLINE_SIDE";var g,v,m=p.default.div((function(i){var n=i.theme,o=i.backgroundColor,t=i.width,r=i.varient,s=i.height,l=i.css,a=void 0===l?{}:l;return e.__assign(e.__assign({},function(e){var i=e.backgroundColor,n=e.width,o=e.theme,t=e.varient,r=e.height;return{backgroundColor:i,width:n,padding:t===exports.DropdownVarient.ROUND?o.spacing[2]:0,boxShadow:o.elevation.bottomE2,maxHeight:r,overflow:"auto",borderRadius:o.border.radius[12]}}({theme:n,backgroundColor:o,width:t,varient:r,height:s})),a)})),y=p.default.div(v||(v=e.__makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ",";\n\t\tborder-radius: ",";\n\t}\n\tbackground-color: ",";\n\tcolor: ",";\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n\t","\n"],["\n\t&:hover {\n\t\tbackground-color: ",";\n\t\tborder-radius: ",";\n\t}\n\tbackground-color: ",";\n\tcolor: ",";\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n\t","\n"])),(function(e){var i=e.isSelected,n=e.varient,o=e.theme;return i&&[exports.DropdownVarient.FLAT,exports.DropdownVarient.BYLINE].includes(n)?o.color.background.primary:o.color.chip.selectedPrimaryBg}),(function(e){return e.varient===exports.DropdownVarient.ROUND?"4px":""}),(function(e){var i=e.isSelected,n=e.varient,o=e.theme;return i&&[exports.DropdownVarient.FLAT,exports.DropdownVarient.BYLINE].includes(n)?o.color.background.primary:""}),(function(e){return e.isSelected?a.colors.neutral100:""}),(function(i){var n=i.css;return n&&t.css(g||(g=e.__makeTemplateObject(["\n\t","\n "],["\n\t","\n "])),n)})),x=function(t){var a=t.key,c=void 0===a?"":a,d=t.label,u=void 0===d?"":d,p=t.subLabel,h=void 0===p?"":p,g=t.isSelected,v=void 0!==g&&g,m=t.height,x=void 0===m?"":m,C=t.icon,b=void 0===C?null:C,_=t.iconStyle,w=void 0===_?"":_,f=t.onClick,N=t.varient,S=void 0===N?exports.DropdownVarient.FLAT:N,k=t.customColor,D=void 0===k?"primary":k,L=t.isChipSelection,j=void 0!==L&&L,I=t.multiSelect,A=void 0!==I&&I,T=t.sideShow,E=void 0===T?"":T,V=t.styleConfig,B=void 0===V?{}:V,Y=r.useTheme(),q=B.root,F=B.rootcontainer,O=B.iconContainer,R=B.labelContainer,z=B.labelRootContainer,M=B.labelTypography,U=B.subLabelTypography,H=B.bylineSideContainer,P=B.sideShowContainer,G=B.sideShowTypography,J=!b&&!A,K=s.useCallback((function(e){e&&v&&S!==exports.DropdownVarient.BYLINE_SIDE&&e.scrollIntoView({block:"center"})}),[v]);return i.jsx(y,e.__assign({theme:Y,isSelected:v,varient:S,className:null==q?void 0:q.className,css:null==q?void 0:q.css},{children:i.jsxs(n.Container,e.__assign({cursor:"pointer",display:"flex",alignItems:"center",height:x,marginLeft:Y.spacing[4],onClick:f,ref:K,className:null==F?void 0:F.className,css:null==F?void 0:F.css},{children:[j&&i.jsxs(n.Container,e.__assign({display:"flex",alignItems:"center",width:"24px",className:(null==O?void 0:O.className)||w,css:null==O?void 0:O.css},{children:[v&&b&&i.jsx(i.Fragment,{children:b}),A&&!v&&i.jsx(o.Checkbox,{id:"not-checked",checked:!1})]})),i.jsx(n.Container,e.__assign({paddingTop:J?"":Y.spacing[2],paddingBottom:J?"":Y.spacing[2],paddingRight:J?"":Y.spacing[2],paddingLeft:J?"":Y.spacing[4],width:"100%",className:null==z?void 0:z.className,css:null==z?void 0:z.css},{children:S!==exports.DropdownVarient.BYLINE_SIDE?i.jsxs(n.Container,e.__assign({className:null==R?void 0:R.className,css:null==R?void 0:R.css},{children:[i.jsx(l.Typography,e.__assign({variant:exports.DropdownVarient.BYLINE?"HM4":"B2",color:v&&[exports.DropdownVarient.FLAT,exports.DropdownVarient.BYLINE].includes(S)?"neutral":D,styleConfig:M},{children:u})),S===exports.DropdownVarient.BYLINE&&h&&i.jsx(l.Typography,e.__assign({variant:"B3",color:v?"disabled":"tertiary",styleConfig:U},{children:h}))]})):i.jsxs(n.Container,e.__assign({display:"flex",justifyContent:"space-between",className:null==H?void 0:H.className,css:null==H?void 0:H.css},{children:[i.jsxs(n.Container,e.__assign({className:null==R?void 0:R.className,css:null==R?void 0:R.css},{children:[i.jsx(l.Typography,e.__assign({variant:"HM4",color:D,styleConfig:M},{children:u})),h&&i.jsx(l.Typography,e.__assign({variant:"B3",color:"tertiary",styleConfig:U},{children:h}))]})),i.jsx(n.Container,e.__assign({display:"flex",justifyContent:"center",alignItems:"center",className:null==P?void 0:P.className,css:null==P?void 0:P.css},{children:i.jsx(l.Typography,e.__assign({variant:"B3",color:"primary",styleConfig:G},{children:E}))}))]}))}))]}),c)}))};exports.Dropdown=function(t){var s=t.optionList,l=void 0===s?[]:s,a=t.showDropdown,c=void 0===a||a,d=t.width,u=void 0===d?"":d,p=t.height,g=void 0===p?"500px":p,v=t.selectedOption,y=void 0===v?"":v,C=t.icon,b=void 0===C?null:C,_=t.iconStyle,w=void 0===_?"":_,f=t.onClick,N=t.varient,S=void 0===N?exports.DropdownVarient.FLAT:N,k=t.isChipSelection,D=void 0!==k&&k,L=t.multiSelect,j=void 0!==L&&L,I=t.selectAllCustomColor,A=void 0===I?"primary":I,T=t.selectAllClick,E=void 0===T?function(){}:T,V=t.showSelectAll,B=void 0!==V&&V,Y=t.selectAllText,q=void 0===Y?"Select All":Y,F=t.virtualised,O=void 0!==F&&F,R=t.styleConfig,z=void 0===R?{}:R,M=r.useTheme(),U=z.root,H=z.dropdownContainer,P=z.selectAllOption,G=z.dropdownCheckbox;z.divider;var J=z.virtualList,K=z.listDropdown,Q=function(i){var n=i.theme,o=i.width;return e.__assign({},function(e,i){return{backgroundColor:e.color.background.neutral,width:i}}(n,o))}({theme:M,width:u}),W=parseInt(M.size[10].substring(0,M.size[10].length-2))+8,X=parseInt(g.substring(0,g.length-2)),Z=Math.min(l.length*W,X);return i.jsx(m,e.__assign({theme:M,varient:S,height:g},Q,{className:null==U?void 0:U.className,css:null==U?void 0:U.css},{children:c&&i.jsxs(n.Container,e.__assign({css:e.__assign({overflow:"scroll"},null==H?void 0:H.css),className:null==H?void 0:H.className},{children:[B&&i.jsx(x,{label:q,isSelected:Array.isArray(y)&&y.length===l.length,icon:i.jsx(o.Checkbox,{id:"",checked:Array.isArray(y)&&y.length===l.length,selectAll:!0,styleConfig:G}),iconStyle:w,height:M.size[10],onClick:E,varient:S,customColor:A,isChipSelection:D,multiSelect:!0,styleConfig:P},""),O?i.jsx(h.default,{width:"auto",height:Z,itemCount:l.length,itemSize:W,overscanCount:3,renderItem:function(e){var n=e.index;e.style;var o=l[n];if(!o)return null;var t=o.key,r=o.label,s=o.customColor,a=o.subLabel,c=Array.isArray(y)?y.includes(t):t===y;return i.jsx(x,{sideShow:S===exports.DropdownVarient.BYLINE_SIDE?t:"",label:r,subLabel:a,isSelected:c,icon:b,iconStyle:w,height:M.size[10],onClick:function(){null==f||f(t,c)},varient:S,customColor:s,isChipSelection:D,multiSelect:j,styleConfig:K},t)},className:null==J?void 0:J.className,style:null==J?void 0:J.css}):l.map((function(e){var n=e.key,o=e.label,t=e.customColor,r=e.subLabel,s=Array.isArray(y)?y.includes(n):n===y;return i.jsx(x,{sideShow:S===exports.DropdownVarient.BYLINE_SIDE?n:"",label:o,subLabel:r,isSelected:s,icon:b,iconStyle:w,height:M.size[10],onClick:function(){null==f||f(n,s)},varient:S,customColor:t,isChipSelection:D,multiSelect:j,styleConfig:K},n)}))]}))}))};
+"use strict";var e=require("react/jsx-runtime"),o=require("react"),t=require("@cleartrip/ct-design-typography"),r=require("@cleartrip/ct-design-style-manager"),n=require("@cleartrip/ct-design-icons");const i=e=>({flex:1,height:e,justifyContent:"center",paddingHorizontal:12}),a=r.makeStyles(()=>({root:{width:"100%",backgroundColor:"#fff",position:"relative"},dropDownItemListContainer:{width:"100%",maxHeight:240,borderRadius:5,position:"absolute",overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.22,shadowRadius:2.22,elevation:3,backgroundColor:"#fff"},dropDownItemContainer:{width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12},chevronDownContainer:{height:24,left:3,paddingRight:12},scrollArea:{maxHeight:240,overflowY:"auto"}})),l=({item:o,index:n,isSelected:i,dropdownItem:a,onSelect:l,customItemContainer:s=[],customItemTextContainer:d={}})=>{const c=r.useStyles(()=>({root:{backgroundColor:i?"#1a1a1a":"#fff",cursor:"pointer",width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12}}),[i]),p=r.useWebMergeStyles([c.root,...s],[c.root,s]);return e.jsx("div",{className:p,onClick:()=>l(o,n),children:e.jsx(t.Typography,{styleConfig:d,variant:t.TypographyVariant.HM4,color:i?t.TypographyColor.NEUTRAL:t.TypographyColor.PRIMARY,children:a})})};exports.Dropdown=({placeHolder:s,itemList:d,height:c=40,styleConfig:p={},dropDownValue:u,defaultSelectedIndex:h,onItemSelect:g,renderItem:m,showDropDownListOnTop:C=!0})=>{const{placeHolderContainer:y=[],placeHolderTextContainer:f=[],dropDownItemListContainer:w=[],dropDownItemContainer:x=[],dropDownItemTextContainer:v={}}=p,I=o.useRef(null),[b,S]=o.useState(!1),[T,D]=o.useState(null!=h?h:-1);o.useEffect(()=>{if(!b)return;const e=e=>{I.current&&!I.current.contains(e.target)&&S(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[b]);const H=r.useStyles(e=>({placeHolderContainer:{width:"100%",height:c,backgroundColor:"#fff",borderRadius:5,flexDirection:"row",alignItems:"center",borderColor:b?e.color.border.primary:"#e0e0e0",borderWidth:1},placeHolderTextContainer:i(c)}),[b,c]),j=(e,o)=>{D(o),null==g||g(e,o),S(!1)},M=C,R=r.useWebMergeStyles([a.root],[]),L=r.useWebMergeStyles([H.placeHolderContainer,...y],[H.placeHolderContainer,y]),k=r.useWebMergeStyles([H.placeHolderTextContainer],[H.placeHolderTextContainer]),N=r.useWebMergeStyles([a.chevronDownContainer],[]),W=M?{bottom:c}:{top:c},A=r.useWebMergeStyles([a.dropDownItemListContainer,W,a.scrollArea,...w],[M,c,w]);return e.jsxs("div",{ref:I,className:R,children:[e.jsxs("div",{className:L,onClick:()=>S(e=>!e),children:[e.jsx("div",{className:k,children:e.jsx(t.Typography,{color:u.length>0?t.TypographyColor.PRIMARY:t.TypographyColor.DISABLED,lineClamp:1,styleConfig:{root:f},variant:t.TypographyVariant.HM4,children:u.length>0?u:s})}),e.jsx("div",{className:N,children:e.jsx(n.ChevronDown,{})})]}),b&&e.jsx("div",{className:A,children:d.map((o,t)=>{const r=(null==m?void 0:m(o,t))||(null==o?void 0:o.label),n=t===T;return e.jsx(l,{item:o,index:t,isSelected:n,dropdownItem:r,onSelect:j,customItemContainer:x,customItemTextContainer:v},`${o.value}-${t}`)})})]})};
 //# sourceMappingURL=ct-design-dropdown.browser.cjs.js.map

package/dist/ct-design-dropdown.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-dropdown.browser.cjs.js","sources":["../packages/components/Dropdown/src/type.ts","../packages/components/Dropdown/src/StyledDropdown/style.ts","../packages/components/Dropdown/src/StyledDropdown/StyledDropdown.tsx","../packages/components/Dropdown/src/DropdownOption/StyledDropdownOption/StyledDropdownOption.tsx","../packages/components/Dropdown/src/DropdownOption/DropdownOption.tsx","../packages/components/Dropdown/src/Dropdown.tsx","../packages/components/Dropdown/src/style.ts"],"sourcesContent":[null,null,null,null,null,null,null],"names":["DropdownVarient","StyledDropdown","styled","default","div","_a","theme","backgroundColor","width","varient","height","_b","css","__assign","padding","ROUND","spacing","boxShadow","elevation","bottomE2","maxHeight","overflow","borderRadius","border","radius","getStyledDropdownStyles","StyledDropdownOption","isSelected","FLAT","BYLINE","includes","color","background","primary","chip","selectedPrimaryBg","props","colors","neutral100","CSS","templateObject_1","__makeTemplateObject","DropdownOption","key","_c","label","_d","subLabel","_e","_f","_g","icon","_h","iconStyle","onClick","_j","_k","customColor","_l","isChipSelection","_m","multiSelect","_o","sideShow","_p","styleConfig","useTheme","root","rootcontainer","iconContainer","labelContainer","labelRootContainer","labelTypography","subLabelTypography","bylineSideContainer","sideShowContainer","sideShowTypography","noIconPresent","scrollIntoOption","useCallback","htmlNode","BYLINE_SIDE","scrollIntoView","block","_jsx","className","children","_jsxs","Container","cursor","display","alignItems","marginLeft","ref","_Fragment","Checkbox","id","checked","paddingTop","paddingBottom","paddingRight","paddingLeft","Typography","variant","justifyContent","jsx","optionList","showDropdown","selectedOption","selectAllCustomColor","selectAllClick","showSelectAll","_q","selectAllText","_r","virtualised","_s","dropdownContainer","selectAllOption","dropdownCheckbox","virtualList","listDropdown","dropdownStyles","neutral","getDefaultDropdownStyles","getDropdownStyles","singleItemSize","parseInt","size","substring","length","heightInt","virtualListHeight","Math","min","jsxs","Array","isArray","selectAll","VirtualList","itemCount","itemSize","overscanCount","renderItem","index","style","option","map"],"mappings":"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"}
+{"version":3,"file":"ct-design-dropdown.browser.cjs.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["getPlaceHolderTextContainerStyles","height","flex","justifyContent","paddingHorizontal","staticStyles","makeStyles","root","width","backgroundColor","position","dropDownItemListContainer","maxHeight","borderRadius","overflow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","dropDownItemContainer","paddingVertical","chevronDownContainer","left","paddingRight","scrollArea","overflowY","DropdownListItem","item","index","isSelected","dropdownItem","onSelect","customItemContainer","customItemTextContainer","itemDynamicStyles","useStyles","cursor","mergedItemClassName","useWebMergeStyles","_jsx","className","onClick","children","Typography","styleConfig","variant","TypographyVariant","HM4","color","TypographyColor","NEUTRAL","PRIMARY","placeHolder","itemList","dropDownValue","defaultSelectedIndex","onItemSelect","renderItem","showDropDownListOnTop","placeHolderContainer","customPlaceHolderContainer","placeHolderTextContainer","customPlaceHolderTextContainer","customDropDownItemListContainer","customDropDownItemContainer","dropDownItemTextContainer","rootRef","useRef","focus","setFocus","useState","singleSelectIndex","setSingleSelectIndex","useEffect","handleOutside","event","current","contains","target","document","addEventListener","removeEventListener","dynamicStyles","theme","flexDirection","alignItems","borderColor","border","primary","borderWidth","singleSelectClickHandler","isShownOnTop","mergedRootClassName","mergedPlaceHolderClassName","mergedPlaceHolderTextClassName","mergedChevronClassName","listPositionStyle","bottom","top","mergedListClassName","_jsxs","ref","state","length","DISABLED","lineClamp","jsx","ChevronDown","map","label","value"],"mappings":"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"}

package/dist/ct-design-dropdown.browser.esm.js

@@ -1,2 +1,2 @@
-import{__assign as e,__makeTemplateObject as i}from"tslib";import{jsx as o,jsxs as t,Fragment as n}from"react/jsx-runtime";import{Container as l}from"@cleartrip/ct-design-container";import{Checkbox as r}from"@cleartrip/ct-design-checkbox";import c,{css as s}from"styled-components";import{useTheme as a}from"@cleartrip/ct-design-theme";import{useCallback as d}from"react";import{Typography as u}from"@cleartrip/ct-design-typography";import{colors as v}from"@cleartrip/ct-design-tokens";import h from"react-tiny-virtual-list";var m;!function(e){e.FLAT="FLAT",e.ROUND="ROUND",e.BYLINE="BYLINE",e.BYLINE_SIDE="BYLINE_SIDE"}(m||(m={}));var p,g,y=c.div((function(i){var o=i.theme,t=i.backgroundColor,n=i.width,l=i.varient,r=i.height,c=i.css,s=void 0===c?{}:c;return e(e({},function(e){var i=e.backgroundColor,o=e.width,t=e.theme,n=e.varient,l=e.height;return{backgroundColor:i,width:o,padding:n===m.ROUND?t.spacing[2]:0,boxShadow:t.elevation.bottomE2,maxHeight:l,overflow:"auto",borderRadius:t.border.radius[12]}}({theme:o,backgroundColor:t,width:n,varient:l,height:r})),s)})),f=c.div(g||(g=i(["\n\t&:hover {\n\t\tbackground-color: ",";\n\t\tborder-radius: ",";\n\t}\n\tbackground-color: ",";\n\tcolor: ",";\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n\t","\n"],["\n\t&:hover {\n\t\tbackground-color: ",";\n\t\tborder-radius: ",";\n\t}\n\tbackground-color: ",";\n\tcolor: ",";\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n\t","\n"])),(function(e){var i=e.isSelected,o=e.varient,t=e.theme;return i&&[m.FLAT,m.BYLINE].includes(o)?t.color.background.primary:t.color.chip.selectedPrimaryBg}),(function(e){return e.varient===m.ROUND?"4px":""}),(function(e){var i=e.isSelected,o=e.varient,t=e.theme;return i&&[m.FLAT,m.BYLINE].includes(o)?t.color.background.primary:""}),(function(e){return e.isSelected?v.neutral100:""}),(function(e){var o=e.css;return o&&s(p||(p=i(["\n\t","\n "],["\n\t","\n "])),o)})),b=function(i){var c=i.key,s=void 0===c?"":c,v=i.label,h=void 0===v?"":v,p=i.subLabel,g=void 0===p?"":p,y=i.isSelected,b=void 0!==y&&y,C=i.height,N=void 0===C?"":C,S=i.icon,L=void 0===S?null:S,k=i.iconStyle,w=void 0===k?"":k,I=i.onClick,A=i.varient,E=void 0===A?m.FLAT:A,x=i.customColor,B=void 0===x?"primary":x,Y=i.isChipSelection,D=void 0!==Y&&Y,T=i.multiSelect,F=void 0!==T&&T,R=i.sideShow,z=void 0===R?"":R,O=i.styleConfig,_=void 0===O?{}:O,U=a(),j=_.root,H=_.rootcontainer,M=_.iconContainer,P=_.labelContainer,V=_.labelRootContainer,q=_.labelTypography,G=_.subLabelTypography,J=_.bylineSideContainer,K=_.sideShowContainer,Q=_.sideShowTypography,W=!L&&!F,X=d((function(e){e&&b&&E!==m.BYLINE_SIDE&&e.scrollIntoView({block:"center"})}),[b]);return o(f,e({theme:U,isSelected:b,varient:E,className:null==j?void 0:j.className,css:null==j?void 0:j.css},{children:t(l,e({cursor:"pointer",display:"flex",alignItems:"center",height:N,marginLeft:U.spacing[4],onClick:I,ref:X,className:null==H?void 0:H.className,css:null==H?void 0:H.css},{children:[D&&t(l,e({display:"flex",alignItems:"center",width:"24px",className:(null==M?void 0:M.className)||w,css:null==M?void 0:M.css},{children:[b&&L&&o(n,{children:L}),F&&!b&&o(r,{id:"not-checked",checked:!1})]})),o(l,e({paddingTop:W?"":U.spacing[2],paddingBottom:W?"":U.spacing[2],paddingRight:W?"":U.spacing[2],paddingLeft:W?"":U.spacing[4],width:"100%",className:null==V?void 0:V.className,css:null==V?void 0:V.css},{children:E!==m.BYLINE_SIDE?t(l,e({className:null==P?void 0:P.className,css:null==P?void 0:P.css},{children:[o(u,e({variant:m.BYLINE?"HM4":"B2",color:b&&[m.FLAT,m.BYLINE].includes(E)?"neutral":B,styleConfig:q},{children:h})),E===m.BYLINE&&g&&o(u,e({variant:"B3",color:b?"disabled":"tertiary",styleConfig:G},{children:g}))]})):t(l,e({display:"flex",justifyContent:"space-between",className:null==J?void 0:J.className,css:null==J?void 0:J.css},{children:[t(l,e({className:null==P?void 0:P.className,css:null==P?void 0:P.css},{children:[o(u,e({variant:"HM4",color:B,styleConfig:q},{children:h})),g&&o(u,e({variant:"B3",color:"tertiary",styleConfig:G},{children:g}))]})),o(l,e({display:"flex",justifyContent:"center",alignItems:"center",className:null==K?void 0:K.className,css:null==K?void 0:K.css},{children:o(u,e({variant:"B3",color:"primary",styleConfig:Q},{children:z}))}))]}))}))]}),s)}))},C=function(i){var n=i.optionList,c=void 0===n?[]:n,s=i.showDropdown,d=void 0===s||s,u=i.width,v=void 0===u?"":u,p=i.height,g=void 0===p?"500px":p,f=i.selectedOption,C=void 0===f?"":f,N=i.icon,S=void 0===N?null:N,L=i.iconStyle,k=void 0===L?"":L,w=i.onClick,I=i.varient,A=void 0===I?m.FLAT:I,E=i.isChipSelection,x=void 0!==E&&E,B=i.multiSelect,Y=void 0!==B&&B,D=i.selectAllCustomColor,T=void 0===D?"primary":D,F=i.selectAllClick,R=void 0===F?function(){}:F,z=i.showSelectAll,O=void 0!==z&&z,_=i.selectAllText,U=void 0===_?"Select All":_,j=i.virtualised,H=void 0!==j&&j,M=i.styleConfig,P=void 0===M?{}:M,V=a(),q=P.root,G=P.dropdownContainer,J=P.selectAllOption,K=P.dropdownCheckbox;P.divider;var Q=P.virtualList,W=P.listDropdown,X=function(i){var o=i.theme,t=i.width;return e({},function(e,i){return{backgroundColor:e.color.background.neutral,width:i}}(o,t))}({theme:V,width:v}),Z=parseInt(V.size[10].substring(0,V.size[10].length-2))+8,$=parseInt(g.substring(0,g.length-2)),ee=Math.min(c.length*Z,$);return o(y,e({theme:V,varient:A,height:g},X,{className:null==q?void 0:q.className,css:null==q?void 0:q.css},{children:d&&t(l,e({css:e({overflow:"scroll"},null==G?void 0:G.css),className:null==G?void 0:G.className},{children:[O&&o(b,{label:U,isSelected:Array.isArray(C)&&C.length===c.length,icon:o(r,{id:"",checked:Array.isArray(C)&&C.length===c.length,selectAll:!0,styleConfig:K}),iconStyle:k,height:V.size[10],onClick:R,varient:A,customColor:T,isChipSelection:x,multiSelect:!0,styleConfig:J},""),H?o(h,{width:"auto",height:ee,itemCount:c.length,itemSize:Z,overscanCount:3,renderItem:function(e){var i=e.index;e.style;var t=c[i];if(!t)return null;var n=t.key,l=t.label,r=t.customColor,s=t.subLabel,a=Array.isArray(C)?C.includes(n):n===C;return o(b,{sideShow:A===m.BYLINE_SIDE?n:"",label:l,subLabel:s,isSelected:a,icon:S,iconStyle:k,height:V.size[10],onClick:function(){null==w||w(n,a)},varient:A,customColor:r,isChipSelection:x,multiSelect:Y,styleConfig:W},n)},className:null==Q?void 0:Q.className,style:null==Q?void 0:Q.css}):c.map((function(e){var i=e.key,t=e.label,n=e.customColor,l=e.subLabel,r=Array.isArray(C)?C.includes(i):i===C;return o(b,{sideShow:A===m.BYLINE_SIDE?i:"",label:t,subLabel:l,isSelected:r,icon:S,iconStyle:k,height:V.size[10],onClick:function(){null==w||w(i,r)},varient:A,customColor:n,isChipSelection:x,multiSelect:Y,styleConfig:W},i)}))]}))}))};export{C as Dropdown,m as DropdownVarient};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as t,useState as r,useEffect as n}from"react";import{Typography as i,TypographyColor as a,TypographyVariant as l}from"@cleartrip/ct-design-typography";import{makeStyles as d,useStyles as c,useWebMergeStyles as s}from"@cleartrip/ct-design-style-manager";import{ChevronDown as m}from"@cleartrip/ct-design-icons";const p=e=>({flex:1,height:e,justifyContent:"center",paddingHorizontal:12}),h=d(()=>({root:{width:"100%",backgroundColor:"#fff",position:"relative"},dropDownItemListContainer:{width:"100%",maxHeight:240,borderRadius:5,position:"absolute",overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.22,shadowRadius:2.22,elevation:3,backgroundColor:"#fff"},dropDownItemContainer:{width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12},chevronDownContainer:{height:24,left:3,paddingRight:12},scrollArea:{maxHeight:240,overflowY:"auto"}})),u=({item:e,index:t,isSelected:r,dropdownItem:n,onSelect:d,customItemContainer:m=[],customItemTextContainer:p={}})=>{const h=c(()=>({root:{backgroundColor:r?"#1a1a1a":"#fff",cursor:"pointer",width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12}}),[r]),u=s([h.root,...m],[h.root,m]);return o("div",{className:u,onClick:()=>d(e,t),children:o(i,{styleConfig:p,variant:l.HM4,color:r?a.NEUTRAL:a.PRIMARY,children:n})})},C=({placeHolder:d,itemList:C,height:f=40,styleConfig:g={},dropDownValue:w,defaultSelectedIndex:v,onItemSelect:I,renderItem:x,showDropDownListOnTop:H=!0})=>{const{placeHolderContainer:D=[],placeHolderTextContainer:b=[],dropDownItemListContainer:y=[],dropDownItemContainer:L=[],dropDownItemTextContainer:R={}}=g,T=t(null),[N,S]=r(!1),[k,A]=r(null!=v?v:-1);n(()=>{if(!N)return;const e=e=>{T.current&&!T.current.contains(e.target)&&S(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[N]);const j=c(e=>({placeHolderContainer:{width:"100%",height:f,backgroundColor:"#fff",borderRadius:5,flexDirection:"row",alignItems:"center",borderColor:N?e.color.border.primary:"#e0e0e0",borderWidth:1},placeHolderTextContainer:p(f)}),[N,f]),E=(e,o)=>{A(o),null==I||I(e,o),S(!1)},M=H,z=s([h.root],[]),O=s([j.placeHolderContainer,...D],[j.placeHolderContainer,D]),V=s([j.placeHolderTextContainer],[j.placeHolderTextContainer]),Y=s([h.chevronDownContainer],[]),P=M?{bottom:f}:{top:f},$=s([h.dropDownItemListContainer,P,h.scrollArea,...y],[M,f,y]);return e("div",{ref:T,className:z,children:[e("div",{className:O,onClick:()=>S(e=>!e),children:[o("div",{className:V,children:o(i,{color:w.length>0?a.PRIMARY:a.DISABLED,lineClamp:1,styleConfig:{root:b},variant:l.HM4,children:w.length>0?w:d})}),o("div",{className:Y,children:o(m,{})})]}),N&&o("div",{className:$,children:C.map((e,t)=>{const r=(null==x?void 0:x(e,t))||(null==e?void 0:e.label);return o(u,{item:e,index:t,isSelected:t===k,dropdownItem:r,onSelect:E,customItemContainer:L,customItemTextContainer:R},`${e.value}-${t}`)})})]})};export{C as Dropdown};
 //# sourceMappingURL=ct-design-dropdown.browser.esm.js.map

package/dist/ct-design-dropdown.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-dropdown.browser.esm.js","sources":["../packages/components/Dropdown/src/type.ts","../packages/components/Dropdown/src/StyledDropdown/style.ts","../packages/components/Dropdown/src/StyledDropdown/StyledDropdown.tsx","../packages/components/Dropdown/src/DropdownOption/StyledDropdownOption/StyledDropdownOption.tsx","../packages/components/Dropdown/src/DropdownOption/DropdownOption.tsx","../packages/components/Dropdown/src/Dropdown.tsx","../packages/components/Dropdown/src/style.ts"],"sourcesContent":[null,null,null,null,null,null,null],"names":["DropdownVarient","StyledDropdown","styled","div","_a","theme","backgroundColor","width","varient","height","_b","css","__assign","padding","ROUND","spacing","boxShadow","elevation","bottomE2","maxHeight","overflow","borderRadius","border","radius","getStyledDropdownStyles","StyledDropdownOption","isSelected","FLAT","BYLINE","includes","color","background","primary","chip","selectedPrimaryBg","props","colors","neutral100","CSS","templateObject_1","__makeTemplateObject","DropdownOption","key","_c","label","_d","subLabel","_e","_f","_g","icon","_h","iconStyle","onClick","_j","_k","customColor","_l","isChipSelection","_m","multiSelect","_o","sideShow","_p","styleConfig","useTheme","root","rootcontainer","iconContainer","labelContainer","labelRootContainer","labelTypography","subLabelTypography","bylineSideContainer","sideShowContainer","sideShowTypography","noIconPresent","scrollIntoOption","useCallback","htmlNode","BYLINE_SIDE","scrollIntoView","block","_jsx","className","children","_jsxs","Container","cursor","display","alignItems","marginLeft","ref","_Fragment","Checkbox","id","checked","paddingTop","paddingBottom","paddingRight","paddingLeft","Typography","variant","justifyContent","Dropdown","optionList","showDropdown","selectedOption","selectAllCustomColor","selectAllClick","showSelectAll","_q","selectAllText","_r","virtualised","_s","dropdownContainer","selectAllOption","dropdownCheckbox","virtualList","listDropdown","dropdownStyles","neutral","getDefaultDropdownStyles","getDropdownStyles","singleItemSize","parseInt","size","substring","length","heightInt","virtualListHeight","Math","min","Array","isArray","selectAll","VirtualList","itemCount","itemSize","overscanCount","renderItem","index","style","option","map"],"mappings":"ihBA8BYA,GAAZ,SAAYA,GACXA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,YAAA,aACA,CALD,CAAYA,IAAAA,EAKX,CAAA,IC9BM,QCDDC,EAAiBC,EAAOC,KAC5B,SAACC,GAAE,IAAAC,UAAOC,oBAAiBC,UAAOC,YAASC,WAAQC,EAAAN,EAAAO,IAAAA,OAAG,IAAAD,EAAG,CAAA,EAAEA,EAAO,OAAAE,EAAAA,EAAA,CAAA,EDA7B,SAACR,GACtC,IAAAE,EAAeF,EAAAE,gBACfC,EAAKH,EAAAG,MACLF,EAAKD,EAAAC,MACLG,EAAOJ,EAAAI,QACPC,EAAML,EAAAK,OAEN,MAAO,CACLH,gBAAeA,EACfC,MAAKA,EACLM,QAASL,IAAYR,EAAgBc,MAAQT,EAAMU,QAAQ,GAAK,EAChEC,UAAWX,EAAMY,UAAUC,SAC3BC,UAAWV,EACXW,SAAU,OACVC,aAAchB,EAAMiB,OAAOC,OAAO,IAEtC,CCfOC,CAAwB,CAAEnB,MAAKA,EAAEC,gBAAeA,EAAEC,QAAOC,UAASC,YAClEE,EAF6D,ICAvDc,EAAuBvB,EAAOC,wLAIvC,wCAKoC,yBAC4C,+BAK7E,eACyD,qDAO9D,SAjBoB,SAACC,GAAE,IAAAsB,eAAYlB,EAAOJ,EAAAI,QAAEH,EAAKD,EAAAC,MAChD,OAAAqB,GAAc,CAAC1B,EAAgB2B,KAAM3B,EAAgB4B,QAAQC,SAASrB,GACnEH,EAAMyB,MAAMC,WAAWC,QACvB3B,EAAMyB,MAAMG,KAAKC,iBAFpB,IAGgB,SAAC9B,GAAgB,OAAPA,EAAAI,UAAoBR,EAAgBc,MAAQ,MAAQ,EAA7C,IAEf,SAACV,GAAE,IAAAsB,eAAYlB,EAAOJ,EAAAI,QAAEH,EAAKD,EAAAC,MAChD,OAAAqB,GAAc,CAAC1B,EAAgB2B,KAAM3B,EAAgB4B,QAAQC,SAASrB,GACnEH,EAAMyB,MAAMC,WAAWC,QACvB,EAFH,IAGQ,SAACG,GAAU,OAACA,EAAMT,WAAaU,EAAOC,WAAa,MAG1D,SAACjC,GAAE,IAAAO,EAAGP,EAAAO,IACP,OAAAA,GACA2B,EAAGC,IAAAA,EAAAC,EAAA,CAAA,OAAA,OAAA,CAAA,OACoC,SAAtC7B,EAFD,IChBI8B,EAAgD,SAACrC,OACrDM,EAAQN,EAAAsC,IAARA,OAAM,IAAAhC,EAAA,KACNiC,EAAAvC,EAAAwC,MAAAA,OAAK,IAAAD,EAAG,GAAEA,EACVE,aAAAC,aAAW,GAAED,EACbE,EAAkB3C,EAAAsB,WAAlBA,OAAa,IAAAqB,KACbC,EAAA5C,EAAAK,OAAAA,OAAM,IAAAuC,EAAG,GAAEA,EACXC,SAAAC,aAAO,KAAID,EACXE,EAAc/C,EAAAgD,UAAdA,OAAY,IAAAD,EAAA,KACZE,YACAC,EAAAlD,EAAAI,QAAAA,OAAO,IAAA8C,EAAGtD,EAAgB2B,OAC1B4B,EAAAnD,EAAAoD,YAAAA,OAAW,IAAAD,EAAG,UAASA,EACvBE,oBAAAC,cAAuBD,EACvBE,EAAmBvD,EAAAwD,YAAnBA,OAAc,IAAAD,KACdE,EAAAzD,EAAA0D,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,gBAAAC,OAAc,IAAAD,EAAA,CAAA,EAAEA,EAEV1D,EAAQ4D,IAEZC,EAUEF,EAAWE,KATbC,EASEH,EAAWG,cARbC,EAQEJ,EAAWI,cAPbC,EAOEL,EAPYK,eACdC,EAMEN,EAAWM,mBALbC,EAKEP,EALaO,gBACfC,EAIER,EAJgBQ,mBAClBC,EAGET,EAHiBS,oBACnBC,EAEEV,EAAWU,kBADbC,EACEX,EAAWW,mBAETC,GAAiB1B,IAASU,EAE1BiB,EAAmBC,GACvB,SAACC,GACKA,GAAYrD,GAAclB,IAAYR,EAAgBgF,aACxDD,EAASE,eAAe,CAAEC,MAAO,UAErC,GACA,CAACxD,IAGH,OACEyD,EAAC1D,EACCb,EAAA,CAAAP,MAAOA,EACPqB,WAAYA,EACZlB,QAASA,EACT4E,UAAWlB,aAAA,EAAAA,EAAMkB,UACjBzE,IAAKuD,aAAA,EAAAA,EAAMvD,KAAG,CAAA0E,SAEdC,EAACC,EAAS3E,EAAA,CAER4E,OAAO,UACPC,QAAQ,OACRC,WAAW,SACXjF,OAAQA,EACRkF,WAAYtF,EAAMU,QAAQ,GAC1BsC,QAASA,EACTuC,IAAKf,EACLO,UAAWjB,eAAAA,EAAeiB,UAC1BzE,IAAKwD,eAAAA,EAAexD,KAAG,CAAA0E,SAAA,CAEtB3B,GACC4B,EAACC,KACCE,QAAQ,OACRC,WAAW,SACXnF,MAAO,OACP6E,WAAWhB,aAAA,EAAAA,EAAegB,YAAahC,EACvCzC,IAAKyD,eAAAA,EAAezD,KAAG,CAAA0E,SAAA,CAEtB3D,GAAcwB,GAAQiC,EAAAU,EAAA,CAAAR,SAAGnC,IACzBU,IAAgBlC,GAAcyD,EAACW,GAASC,GAAI,cAAeC,SAAS,QAIzEb,EAACI,EACC3E,EAAA,CAAAqF,WAAarB,EAAmC,GAAnBvE,EAAMU,QAAQ,GAC3CmF,cAAgBtB,EAAmC,GAAnBvE,EAAMU,QAAQ,GAC9CoF,aAAevB,EAAmC,GAAnBvE,EAAMU,QAAQ,GAC7CqF,YAAcxB,EAAmC,GAAnBvE,EAAMU,QAAQ,GAC5CR,MAAM,OACN6E,UAAWd,aAAA,EAAAA,EAAoBc,UAC/BzE,IAAK2D,aAAA,EAAAA,EAAoB3D,KAAG,CAAA0E,SAE3B7E,IAAYR,EAAgBgF,YAC3BM,EAACC,EAAS3E,EAAA,CAACwE,UAAWf,eAAAA,EAAgBe,UAAWzE,IAAK0D,aAAc,EAAdA,EAAgB1D,KACpE,CAAA0E,SAAA,CAAAF,EAACkB,EACCzF,EAAA,CAAA0F,QAAStG,EAAgB4B,OAAS,MAAQ,KAC1CE,MACEJ,GAAc,CAAC1B,EAAgB2B,KAAM3B,EAAgB4B,QAAQC,SAASrB,GAClE,UACAgD,EAENQ,YAAaO,GAAe,CAAAc,SAE3BzC,KAEFpC,IAAYR,EAAgB4B,QAAUkB,GACrCqC,EAACkB,EAAUzF,EAAA,CAAC0F,QAAQ,KAAKxE,MAAOJ,EAAa,WAAa,WAAYsC,YAAaQ,GAChF,CAAAa,SAAAvC,SAKPwC,EAACC,KACCE,QAAQ,OACRc,eAAgB,gBAChBnB,UAAWX,aAAA,EAAAA,EAAqBW,UAChCzE,IAAK8D,aAAA,EAAAA,EAAqB9D,KAAG,CAAA0E,SAAA,CAE7BC,EAACC,EAAS3E,EAAA,CAACwE,UAAWf,aAAA,EAAAA,EAAgBe,UAAWzE,IAAK0D,aAAc,EAAdA,EAAgB1D,KACpE,CAAA0E,SAAA,CAAAF,EAACkB,EAAWzF,EAAA,CAAA0F,QAAS,MAAOxE,MAAO0B,EAAaQ,YAAaO,aAC1D3B,KAEFE,GACCqC,EAACkB,EAAUzF,EAAA,CAAC0F,QAAQ,KAAKxE,MAAO,WAAYkC,YAAaQ,GACtD,CAAAa,SAAAvC,SAIPqC,EAACI,EAAS3E,EAAA,CACR6E,QAAQ,OACRc,eAAe,SACfb,WAAW,SACXN,UAAWV,aAAiB,EAAjBA,EAAmBU,UAC9BzE,IAAK+D,aAAA,EAAAA,EAAmB/D,KAExB,CAAA0E,SAAAF,EAACkB,EAAWzF,EAAA,CAAA0F,QAAQ,KAAKxE,MAAO,UAAWkC,YAAaW,aACrDb,kBA7ENpB,KAsFb,ECvIM8D,EAAoC,SAACpG,OACzCM,EAAeN,EAAAqG,WAAfA,OAAU,IAAA/F,EAAG,GAAEA,EACfiC,EAAmBvC,EAAAsG,aAAnBA,OAAY,IAAA/D,GAAOA,EACnBE,EAAUzC,EAAAG,MAAVA,OAAK,IAAAsC,EAAG,GAAEA,EACVE,EAAA3C,EAAAK,OAAAA,OAAS,IAAAsC,EAAA,QAAOA,EAChBC,mBAAA2D,OAAiB,IAAA3D,EAAA,GAAEA,EACnBC,EAAW7C,EAAA8C,KAAXA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAA/C,EAAAgD,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAAOjD,EAAAiD,QACPC,EAA8BlD,EAAAI,QAA9BA,OAAO,IAAA8C,EAAGtD,EAAgB2B,KAAI2B,EAC9BC,EAAuBnD,EAAAsD,gBAAvBA,OAAe,IAAAH,GAAQA,EACvBE,EAAArD,EAAAwD,YAAAA,OAAc,IAAAH,KACdE,EAAAvD,EAAAwG,qBAAAA,OAAuB,IAAAjD,EAAA,UAASA,EAChCE,EAAyBzD,EAAAyG,eAAzBA,OAAc,IAAAhD,EAAG,WAAO,IACxBE,EAAA3D,EAAA0G,cAAAA,OAAgB,IAAA/C,GAAKA,EACrBgD,EAA4B3G,EAAA4G,cAA5BA,OAAa,IAAAD,EAAG,aAAYA,EAC5BE,EAAmB7G,EAAA8G,YAAnBA,OAAW,IAAAD,GAAQA,EACnBE,EAAA/G,EAAA4D,YAAAA,OAAc,IAAAmD,EAAA,CAAE,EAAAA,EAEV9G,EAAQ4D,IACNC,EACNF,EAAWE,KADCkD,EACZpD,EAAWoD,kBADoBC,EAC/BrD,EAAWqD,gBADqCC,EAChDtD,EAAWsD,iBAAXtD,UAD2E,IAAAuD,EAC3EvD,cADwFwD,EACxFxD,eACIyD,ECvByB,SAACrH,OAAEC,EAAKD,EAAAC,MAAEE,EAAKH,EAAAG,MAC9C,OAAAK,EAAA,CAAA,EARsC,SAACP,EAAcE,GACrD,MAAO,CACLD,gBAAiBD,EAAMyB,MAAMC,WAAW2F,QACxCnH,MAAKA,EAET,CAIOoH,CAAyBtH,EAAOE,GAEvC,CDmByBqH,CAAkB,CACvCvH,MAAKA,EACLE,MAAKA,IAgCDsH,EAAiBC,SAASzH,EAAM0H,KAAK,IAAIC,UAAU,EAAG3H,EAAM0H,KAAK,IAAIE,OAAS,IAAM,EACpFC,EAAYJ,SAASrH,EAAOuH,UAAU,EAAGvH,EAAOwH,OAAS,IACzDE,GAAoBC,KAAKC,IAAI5B,EAAWwB,OAASJ,EAAgBK,GAEvE,OACE/C,EAAClF,EACCW,EAAA,CAAAP,MAAOA,EACPG,QAASA,EACTC,OAAQA,GACJgH,EACJ,CAAArC,UAAWlB,aAAA,EAAAA,EAAMkB,UACjBzE,IAAKuD,aAAI,EAAJA,EAAMvD,KAAG,CAAA0E,SAEbqB,GACCpB,EAACC,EAAU3E,EAAA,CAAAD,IAAOC,EAAA,CAAAQ,SAAU,UAAagG,aAAA,EAAAA,EAAmBzG,KAAOyE,UAAWgC,aAAiB,EAAjBA,EAAmBhC,WAC9F,CAAAC,SAAA,CAAAyB,GACC3B,EAAC1C,EAAc,CAEbG,MAAOoE,EACPtF,WAAY4G,MAAMC,QAAQ5B,IAAmBA,EAAesB,SAAWxB,EAAWwB,OAClF/E,KACEiC,EAACW,EACC,CAAAC,GAAG,GACHC,QAASsC,MAAMC,QAAQ5B,IAAmBA,EAAesB,SAAWxB,EAAWwB,OAC/EO,WAAS,EACTxE,YAAasD,IAGjBlE,UAAWA,EACX3C,OAAQJ,EAAM0H,KAAK,IACnB1E,QAASwD,EACTrG,QAASA,EACTgD,YAAaoD,EACblD,gBAAiBA,EACjBE,aAAa,EACbI,YAAaqD,GAlBR,IAqBRH,EACC/B,EAACsD,EACC,CAAAlI,MAAM,OACNE,OAAQ0H,GACRO,UAAWjC,EAAWwB,OACtBU,SAAUd,EACVe,cAAe,EACfC,WA1EW,SAACzI,OAAE0I,EAAK1I,EAAA0I,MAAO1I,EAAA2I,MACpC,IAAMC,EAASvC,EAAWqC,GAC1B,IAAKE,EAAQ,OAAO,KACZ,IAAAtG,EAAsCsG,MAAjCpG,EAAiCoG,EAAMpG,MAAhCY,EAA0BwF,EAAfxF,YAAEV,EAAakG,WACxCtH,EAAa4G,MAAMC,QAAQ5B,GAAkBA,EAAe9E,SAASa,GAAOA,IAAQiE,EAK1F,OACExB,EAAC1C,EAEC,CAAAqB,SAAUtD,IAAYR,EAAgBgF,YAActC,EAAM,GAC1DE,MAAOA,EACPE,SAAUA,EACVpB,WAAYA,EACZwB,KAAMA,EACNE,UAAWA,EACX3C,OAAQJ,EAAM0H,KAAK,IACnB1E,QAbW,WACbA,SAAAA,EAAUX,EAAKhB,EACjB,EAYIlB,QAASA,EACTgD,YAAaA,EACbE,gBAAiBA,EACjBE,YAAaA,EACbI,YAAawD,GAbR9E,EAgBX,EAgDY0C,UAAWmC,aAAA,EAAAA,EAAanC,UACxB2D,MAAOxB,aAAA,EAAAA,EAAa5G,MAGtB8F,EAAWwC,KAAI,SAACD,GACN,IAAAtG,EAAsCsG,MAAjCpG,EAAiCoG,EAAMpG,MAAhCY,EAA0BwF,EAAfxF,YAAEV,EAAakG,WACxCtH,EAAa4G,MAAMC,QAAQ5B,GAAkBA,EAAe9E,SAASa,GAAOA,IAAQiE,EAK1F,OACExB,EAAC1C,EAEC,CAAAqB,SAAUtD,IAAYR,EAAgBgF,YAActC,EAAM,GAC1DE,MAAOA,EACPE,SAAUA,EACVpB,WAAYA,EACZwB,KAAMA,EACNE,UAAWA,EACX3C,OAAQJ,EAAM0H,KAAK,IACnB1E,QAbW,WACbA,SAAAA,EAAUX,EAAKhB,EACjB,EAYIlB,QAASA,EACTgD,YAAaA,EACbE,gBAAiBA,EACjBE,YAAaA,EACbI,YAAawD,GAbR9E,EAgBV,UAMb"}
+{"version":3,"file":"ct-design-dropdown.browser.esm.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["getPlaceHolderTextContainerStyles","height","flex","justifyContent","paddingHorizontal","staticStyles","makeStyles","root","width","backgroundColor","position","dropDownItemListContainer","maxHeight","borderRadius","overflow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","dropDownItemContainer","paddingVertical","chevronDownContainer","left","paddingRight","scrollArea","overflowY","DropdownListItem","item","index","isSelected","dropdownItem","onSelect","customItemContainer","customItemTextContainer","itemDynamicStyles","useStyles","cursor","mergedItemClassName","useWebMergeStyles","_jsx","className","onClick","children","Typography","styleConfig","variant","TypographyVariant","HM4","color","TypographyColor","NEUTRAL","PRIMARY","Dropdown","placeHolder","itemList","dropDownValue","defaultSelectedIndex","onItemSelect","renderItem","showDropDownListOnTop","placeHolderContainer","customPlaceHolderContainer","placeHolderTextContainer","customPlaceHolderTextContainer","customDropDownItemListContainer","customDropDownItemContainer","dropDownItemTextContainer","rootRef","useRef","focus","setFocus","useState","singleSelectIndex","setSingleSelectIndex","useEffect","handleOutside","event","current","contains","target","document","addEventListener","removeEventListener","dynamicStyles","theme","flexDirection","alignItems","borderColor","border","primary","borderWidth","singleSelectClickHandler","isShownOnTop","mergedRootClassName","mergedPlaceHolderClassName","mergedPlaceHolderTextClassName","mergedChevronClassName","listPositionStyle","bottom","top","mergedListClassName","_jsxs","ref","state","length","DISABLED","lineClamp","ChevronDown","map","label","value"],"mappings":"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"}

package/dist/ct-design-dropdown.cjs.js

@@ -1,123 +1,120 @@
 'use strict';
 
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var ctDesignContainer = require('@cleartrip/ct-design-container');
-var ctDesignCheckbox = require('@cleartrip/ct-design-checkbox');
-var styled = require('styled-components');
-var ctDesignTheme = require('@cleartrip/ct-design-theme');
 var react = require('react');
 var ctDesignTypography = require('@cleartrip/ct-design-typography');
-var ctDesignTokens = require('@cleartrip/ct-design-tokens');
-var VirtualList = require('react-tiny-virtual-list');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var ctDesignIcons = require('@cleartrip/ct-design-icons');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-var VirtualList__default = /*#__PURE__*/_interopDefault(VirtualList);
-
-exports.DropdownVarient = void 0;
-(function (DropdownVarient) {
-    DropdownVarient["FLAT"] = "FLAT";
-    DropdownVarient["ROUND"] = "ROUND";
-    DropdownVarient["BYLINE"] = "BYLINE";
-    DropdownVarient["BYLINE_SIDE"] = "BYLINE_SIDE";
-})(exports.DropdownVarient || (exports.DropdownVarient = {}));
-
-var getStyledDropdownStyles = function (_a) {
-    var backgroundColor = _a.backgroundColor, width = _a.width, theme = _a.theme, varient = _a.varient, height = _a.height;
-    return {
-        backgroundColor: backgroundColor,
-        width: width,
-        padding: varient === exports.DropdownVarient.ROUND ? theme.spacing[2] : 0,
-        boxShadow: theme.elevation.bottomE2,
-        maxHeight: height,
-        overflow: 'auto',
-        borderRadius: theme.border.radius[12],
-    };
-};
-
-var StyledDropdown = styled__default.default.div(function (_a) {
-    var theme = _a.theme, backgroundColor = _a.backgroundColor, width = _a.width, varient = _a.varient, height = _a.height, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (tslib.__assign(tslib.__assign({}, getStyledDropdownStyles({ theme: theme, backgroundColor: backgroundColor, width: width, varient: varient, height: height })), css));
+const getChevronContainerStyles = () => ({
+    height: 24,
+    left: 3,
+    paddingRight: 12,
 });
-
-var getDefaultDropdownStyles = function (theme, width) {
-    return {
-        backgroundColor: theme.color.background.neutral,
-        width: width,
-    };
-};
-var getDropdownStyles = function (_a) {
-    var theme = _a.theme, width = _a.width;
-    return tslib.__assign({}, getDefaultDropdownStyles(theme, width));
-};
-
-var StyledDropdownOption = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t}\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n\t", "\n"], ["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t}\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n\t", "\n"])), function (_a) {
-    var isSelected = _a.isSelected, varient = _a.varient, theme = _a.theme;
-    return isSelected && [exports.DropdownVarient.FLAT, exports.DropdownVarient.BYLINE].includes(varient)
-        ? theme.color.background.primary
-        : theme.color.chip.selectedPrimaryBg;
-}, function (_a) {
-    var varient = _a.varient;
-    return (varient === exports.DropdownVarient.ROUND ? '4px' : '');
-}, function (_a) {
-    var isSelected = _a.isSelected, varient = _a.varient, theme = _a.theme;
-    return isSelected && [exports.DropdownVarient.FLAT, exports.DropdownVarient.BYLINE].includes(varient)
-        ? theme.color.background.primary
-        : '';
-}, function (props) { return (props.isSelected ? ctDesignTokens.colors.neutral100 : ''); }, function (_a) {
-    var css = _a.css;
-    return css && styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
+const getPlaceHolderTextContainerStyles = (height) => ({
+    flex: 1,
+    height,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
 });
-var templateObject_1, templateObject_2;
 
-var DropdownOption = function (_a) {
-    var _b = _a.key, key = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.subLabel, subLabel = _d === void 0 ? '' : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, _f = _a.height, height = _f === void 0 ? '' : _f, _g = _a.icon, icon = _g === void 0 ? null : _g, _h = _a.iconStyle, iconStyle = _h === void 0 ? '' : _h, onClick = _a.onClick, _j = _a.varient, varient = _j === void 0 ? exports.DropdownVarient.FLAT : _j, _k = _a.customColor, customColor = _k === void 0 ? 'primary' : _k, _l = _a.isChipSelection, isChipSelection = _l === void 0 ? false : _l, _m = _a.multiSelect, multiSelect = _m === void 0 ? false : _m, _o = _a.sideShow, sideShow = _o === void 0 ? '' : _o, _p = _a.styleConfig, styleConfig = _p === void 0 ? {} : _p;
-    var theme = ctDesignTheme.useTheme();
-    var root = styleConfig.root, rootcontainer = styleConfig.rootcontainer, iconContainer = styleConfig.iconContainer, labelContainer = styleConfig.labelContainer, labelRootContainer = styleConfig.labelRootContainer, labelTypography = styleConfig.labelTypography, subLabelTypography = styleConfig.subLabelTypography, bylineSideContainer = styleConfig.bylineSideContainer, sideShowContainer = styleConfig.sideShowContainer, sideShowTypography = styleConfig.sideShowTypography;
-    var noIconPresent = !icon && !multiSelect;
-    var scrollIntoOption = react.useCallback(function (htmlNode) {
-        if (htmlNode && isSelected && varient !== exports.DropdownVarient.BYLINE_SIDE) {
-            htmlNode.scrollIntoView({ block: 'center' });
-        }
-    }, [isSelected]);
-    return (jsxRuntime.jsx(StyledDropdownOption, tslib.__assign({ theme: theme, isSelected: isSelected, varient: varient, className: root === null || root === void 0 ? void 0 : root.className, css: root === null || root === void 0 ? void 0 : root.css }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ cursor: 'pointer', display: 'flex', alignItems: 'center', height: height, marginLeft: theme.spacing[4], onClick: onClick, ref: scrollIntoOption, className: rootcontainer === null || rootcontainer === void 0 ? void 0 : rootcontainer.className, css: rootcontainer === null || rootcontainer === void 0 ? void 0 : rootcontainer.css }, { children: [isChipSelection && (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', width: '24px', className: (iconContainer === null || iconContainer === void 0 ? void 0 : iconContainer.className) || iconStyle, css: iconContainer === null || iconContainer === void 0 ? void 0 : iconContainer.css }, { children: [isSelected && icon && jsxRuntime.jsx(jsxRuntime.Fragment, { children: icon }), multiSelect && !isSelected && jsxRuntime.jsx(ctDesignCheckbox.Checkbox, { id: 'not-checked', checked: false })] }))), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ paddingTop: !noIconPresent ? theme.spacing[2] : '', paddingBottom: !noIconPresent ? theme.spacing[2] : '', paddingRight: !noIconPresent ? theme.spacing[2] : '', paddingLeft: !noIconPresent ? theme.spacing[4] : '', width: '100%', className: labelRootContainer === null || labelRootContainer === void 0 ? void 0 : labelRootContainer.className, css: labelRootContainer === null || labelRootContainer === void 0 ? void 0 : labelRootContainer.css }, { children: varient !== exports.DropdownVarient.BYLINE_SIDE ? (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: labelContainer === null || labelContainer === void 0 ? void 0 : labelContainer.className, css: labelContainer === null || labelContainer === void 0 ? void 0 : labelContainer.css }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: exports.DropdownVarient.BYLINE ? 'HM4' : 'B2', color: isSelected && [exports.DropdownVarient.FLAT, exports.DropdownVarient.BYLINE].includes(varient)
-                                    ? 'neutral'
-                                    : customColor, styleConfig: labelTypography }, { children: label })), varient === exports.DropdownVarient.BYLINE && subLabel && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', color: isSelected ? 'disabled' : 'tertiary', styleConfig: subLabelTypography }, { children: subLabel })))] }))) : (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', justifyContent: 'space-between', className: bylineSideContainer === null || bylineSideContainer === void 0 ? void 0 : bylineSideContainer.className, css: bylineSideContainer === null || bylineSideContainer === void 0 ? void 0 : bylineSideContainer.css }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: labelContainer === null || labelContainer === void 0 ? void 0 : labelContainer.className, css: labelContainer === null || labelContainer === void 0 ? void 0 : labelContainer.css }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM4', color: customColor, styleConfig: labelTypography }, { children: label })), subLabel && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', color: 'tertiary', styleConfig: subLabelTypography }, { children: subLabel })))] })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', className: sideShowContainer === null || sideShowContainer === void 0 ? void 0 : sideShowContainer.className, css: sideShowContainer === null || sideShowContainer === void 0 ? void 0 : sideShowContainer.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', color: 'primary', styleConfig: sideShowTypography }, { children: sideShow })) }))] }))) }))] }), key) })));
+const staticStyles = ctDesignStyleManager.makeStyles(() => ({
+    root: {
+        width: '100%',
+        backgroundColor: '#fff',
+        position: 'relative',
+    },
+    dropDownItemListContainer: {
+        width: '100%',
+        maxHeight: 240,
+        borderRadius: 5,
+        position: 'absolute',
+        overflow: 'hidden',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.22,
+        shadowRadius: 2.22,
+        elevation: 3,
+        backgroundColor: '#fff',
+    },
+    dropDownItemContainer: {
+        width: '100%',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    chevronDownContainer: getChevronContainerStyles(),
+    scrollArea: {
+        maxHeight: 240,
+        overflowY: 'auto',
+    },
+}));
+const DropdownListItem = ({ item, index, isSelected, dropdownItem, onSelect, customItemContainer = [], customItemTextContainer = {}, }) => {
+    const itemDynamicStyles = ctDesignStyleManager.useStyles(() => ({
+        root: {
+            backgroundColor: isSelected ? '#1a1a1a' : '#fff',
+            cursor: 'pointer',
+            width: '100%',
+            justifyContent: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+        },
+    }), [isSelected]);
+    const mergedItemClassName = ctDesignStyleManager.useWebMergeStyles([itemDynamicStyles.root, ...customItemContainer], [itemDynamicStyles.root, customItemContainer]);
+    return (jsxRuntime.jsx("div", { className: mergedItemClassName, onClick: () => onSelect(item, index), children: jsxRuntime.jsx(ctDesignTypography.Typography, { styleConfig: customItemTextContainer, variant: ctDesignTypography.TypographyVariant.HM4, color: isSelected ? ctDesignTypography.TypographyColor.NEUTRAL : ctDesignTypography.TypographyColor.PRIMARY, children: dropdownItem }) }));
 };
-
-var Dropdown = function (_a) {
-    var _b = _a.optionList, optionList = _b === void 0 ? [] : _b, _c = _a.showDropdown, showDropdown = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? '500px' : _e, _f = _a.selectedOption, selectedOption = _f === void 0 ? '' : _f, _g = _a.icon, icon = _g === void 0 ? null : _g, _h = _a.iconStyle, iconStyle = _h === void 0 ? '' : _h, onClick = _a.onClick, _j = _a.varient, varient = _j === void 0 ? exports.DropdownVarient.FLAT : _j, _k = _a.isChipSelection, isChipSelection = _k === void 0 ? false : _k, _l = _a.multiSelect, multiSelect = _l === void 0 ? false : _l, _m = _a.selectAllCustomColor, selectAllCustomColor = _m === void 0 ? 'primary' : _m, _o = _a.selectAllClick, selectAllClick = _o === void 0 ? function () { } : _o, _p = _a.showSelectAll, showSelectAll = _p === void 0 ? false : _p, _q = _a.selectAllText, selectAllText = _q === void 0 ? 'Select All' : _q, _r = _a.virtualised, virtualised = _r === void 0 ? false : _r, _s = _a.styleConfig, styleConfig = _s === void 0 ? {} : _s;
-    var theme = ctDesignTheme.useTheme();
-    var root = styleConfig.root, dropdownContainer = styleConfig.dropdownContainer, selectAllOption = styleConfig.selectAllOption, dropdownCheckbox = styleConfig.dropdownCheckbox; styleConfig.divider; var virtualList = styleConfig.virtualList, listDropdown = styleConfig.listDropdown;
-    var dropdownStyles = getDropdownStyles({
-        theme: theme,
-        width: width,
-    });
-    var optionRenderer = function (_a) {
-        var index = _a.index; _a.style;
-        var option = optionList[index];
-        if (!option)
-            return null;
-        var key = option.key, label = option.label, customColor = option.customColor, subLabel = option.subLabel;
-        var isSelected = Array.isArray(selectedOption) ? selectedOption.includes(key) : key === selectedOption;
-        var setKey = function () {
-            onClick === null || onClick === void 0 ? void 0 : onClick(key, isSelected);
+const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDownValue, defaultSelectedIndex, onItemSelect, renderItem, showDropDownListOnTop = true, }) => {
+    const { placeHolderContainer: customPlaceHolderContainer = [], placeHolderTextContainer: customPlaceHolderTextContainer = [], dropDownItemListContainer: customDropDownItemListContainer = [], dropDownItemContainer: customDropDownItemContainer = [], dropDownItemTextContainer = {}, } = styleConfig;
+    const rootRef = react.useRef(null);
+    const [focus, setFocus] = react.useState(false);
+    const [singleSelectIndex, setSingleSelectIndex] = react.useState(defaultSelectedIndex !== null && defaultSelectedIndex !== void 0 ? defaultSelectedIndex : -1);
+    react.useEffect(() => {
+        if (!focus)
+            return;
+        const handleOutside = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target)) {
+                setFocus(false);
+            }
         };
-        return (jsxRuntime.jsx(DropdownOption, { sideShow: varient === exports.DropdownVarient.BYLINE_SIDE ? key : '', label: label, subLabel: subLabel, isSelected: isSelected, icon: icon, iconStyle: iconStyle, height: theme.size[10], onClick: setKey, varient: varient, customColor: customColor, isChipSelection: isChipSelection, multiSelect: multiSelect, styleConfig: listDropdown }, key));
+        document.addEventListener('mousedown', handleOutside);
+        return () => document.removeEventListener('mousedown', handleOutside);
+    }, [focus]);
+    const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+        placeHolderContainer: {
+            width: '100%',
+            height,
+            backgroundColor: '#fff',
+            borderRadius: 5,
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderColor: focus ? theme.color.border.primary : '#e0e0e0',
+            borderWidth: 1,
+        },
+        placeHolderTextContainer: getPlaceHolderTextContainerStyles(height),
+    }), [focus, height]);
+    const singleSelectClickHandler = (item, index) => {
+        setSingleSelectIndex(index);
+        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item, index);
+        setFocus(false);
     };
-    var singleItemSize = parseInt(theme.size[10].substring(0, theme.size[10].length - 2)) + 8;
-    var heightInt = parseInt(height.substring(0, height.length - 2));
-    var virtualListHeight = Math.min(optionList.length * singleItemSize, heightInt);
-    return (jsxRuntime.jsx(StyledDropdown, tslib.__assign({ theme: theme, varient: varient, height: height }, dropdownStyles, { className: root === null || root === void 0 ? void 0 : root.className, css: root === null || root === void 0 ? void 0 : root.css }, { children: showDropdown && (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ css: tslib.__assign({ overflow: 'scroll' }, dropdownContainer === null || dropdownContainer === void 0 ? void 0 : dropdownContainer.css), className: dropdownContainer === null || dropdownContainer === void 0 ? void 0 : dropdownContainer.className }, { children: [showSelectAll && (jsxRuntime.jsx(DropdownOption, { label: selectAllText, isSelected: Array.isArray(selectedOption) && selectedOption.length === optionList.length, icon: jsxRuntime.jsx(ctDesignCheckbox.Checkbox, { id: '', checked: Array.isArray(selectedOption) && selectedOption.length === optionList.length, selectAll: true, styleConfig: dropdownCheckbox }), iconStyle: iconStyle, height: theme.size[10], onClick: selectAllClick, varient: varient, customColor: selectAllCustomColor, isChipSelection: isChipSelection, multiSelect: true, styleConfig: selectAllOption }, '')), virtualised ? (jsxRuntime.jsx(VirtualList__default.default, { width: 'auto', height: virtualListHeight, itemCount: optionList.length, itemSize: singleItemSize, overscanCount: 3, renderItem: optionRenderer, className: virtualList === null || virtualList === void 0 ? void 0 : virtualList.className, style: virtualList === null || virtualList === void 0 ? void 0 : virtualList.css })) : (optionList.map(function (option) {
-                    var key = option.key, label = option.label, customColor = option.customColor, subLabel = option.subLabel;
-                    var isSelected = Array.isArray(selectedOption) ? selectedOption.includes(key) : key === selectedOption;
-                    var setKey = function () {
-                        onClick === null || onClick === void 0 ? void 0 : onClick(key, isSelected);
-                    };
-                    return (jsxRuntime.jsx(DropdownOption, { sideShow: varient === exports.DropdownVarient.BYLINE_SIDE ? key : '', label: label, subLabel: subLabel, isSelected: isSelected, icon: icon, iconStyle: iconStyle, height: theme.size[10], onClick: setKey, varient: varient, customColor: customColor, isChipSelection: isChipSelection, multiSelect: multiSelect, styleConfig: listDropdown }, key));
-                }))] }))) })));
+    const toggleDropDown = () => setFocus((state) => !state);
+    const isShownOnTop = showDropDownListOnTop;
+    const mergedRootClassName = ctDesignStyleManager.useWebMergeStyles([staticStyles.root], []);
+    const mergedPlaceHolderClassName = ctDesignStyleManager.useWebMergeStyles([dynamicStyles.placeHolderContainer, ...customPlaceHolderContainer], [dynamicStyles.placeHolderContainer, customPlaceHolderContainer]);
+    const mergedPlaceHolderTextClassName = ctDesignStyleManager.useWebMergeStyles([dynamicStyles.placeHolderTextContainer], [dynamicStyles.placeHolderTextContainer]);
+    const mergedChevronClassName = ctDesignStyleManager.useWebMergeStyles([staticStyles.chevronDownContainer], []);
+    const listPositionStyle = isShownOnTop ? { bottom: height } : { top: height };
+    const mergedListClassName = ctDesignStyleManager.useWebMergeStyles([
+        staticStyles.dropDownItemListContainer,
+        listPositionStyle,
+        staticStyles.scrollArea,
+        ...customDropDownItemListContainer,
+    ], [isShownOnTop, height, customDropDownItemListContainer]);
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxRuntime.jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown, children: [jsxRuntime.jsx("div", { className: mergedPlaceHolderTextClassName, children: jsxRuntime.jsx(ctDesignTypography.Typography, { color: dropDownValue.length > 0 ? ctDesignTypography.TypographyColor.PRIMARY : ctDesignTypography.TypographyColor.DISABLED, lineClamp: 1, styleConfig: { root: customPlaceHolderTextContainer }, variant: ctDesignTypography.TypographyVariant.HM4, children: dropDownValue.length > 0 ? dropDownValue : placeHolder }) }), jsxRuntime.jsx("div", { className: mergedChevronClassName, children: jsxRuntime.jsx(ctDesignIcons.ChevronDown, {}) })] }), focus && (jsxRuntime.jsx("div", { className: mergedListClassName, children: itemList.map((item, index) => {
+                    const dropdownItem = (renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index)) || (item === null || item === void 0 ? void 0 : item.label);
+                    const isSelected = index === singleSelectIndex;
+                    return (jsxRuntime.jsx(DropdownListItem, { item: item, index: index, isSelected: isSelected, dropdownItem: dropdownItem, onSelect: singleSelectClickHandler, customItemContainer: customDropDownItemContainer, customItemTextContainer: dropDownItemTextContainer }, `${item.value}-${index}`));
+                }) }))] }));
 };
 
 exports.Dropdown = Dropdown;