npm - @bikdotai/bik-component-library - Versions diffs - 0.0.862-beta.0 → 0.0.862 - Mend

@bikdotai/bik-component-library 0.0.862-beta.0 → 0.0.862

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 (102) hide show

package/dist/esm/components/datePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Calendar from 'react-calendar';\nimport { Button } from '@src/components/button';\nimport { PickerContainer } from '@src/components/datePicker/DatePicker.styled';\nimport { TimePicker } from '@src/components/datePicker/TimePicker';\n\nexport type DatePickerProps = {\n\tselectRange: boolean;\n\tselectedDates?: Date[]; // for range selection\n\tselectedDate?: Date; // for single date selection\n\tonSelectRange?: (startDate: Date, endDate: Date) => void; // for range selection\n\tonSelectDate?: (date: Date) => void; // for single date selection\n\tminDate?: Date;\n\tmaxDate?: Date;\n\tmaxRangeLimit?: number \| null;\n\tshowTimePicker?: boolean;\n\ttimeInterval?: number; // in minutes, default 30\n};\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n\tconst [selectedDates, setSelectedDates] = useState<\n\t\tArray<Date \| null> \| undefined\n\t>();\n\tconst [fromTime, setFromTime] = useState('00:00');\n\tconst [toTime, setToTime] = useState('23:59');\n\n\tuseEffect(() => {\n\t\tif (props.selectedDates) {\n\t\t\tsetSelectedDates(props.selectedDates);\n\t\t\t// Extract time from selectedDates if showTimePicker is enabled\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tif (props.selectedDates[0]) {\n\t\t\t\t\tconst hours = props.selectedDates[0].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[0].getMinutes();\n\t\t\t\t\tsetFromTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (props.selectedDates[1]) {\n\t\t\t\t\tconst hours = props.selectedDates[1].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[1].getMinutes();\n\t\t\t\t\tsetToTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tsetSelectedDates([null, null]);\n\t\t\t// Reset time pickers to default when no dates are selected\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tsetFromTime('00:00');\n\t\t\t\tsetToTime('23:59');\n\t\t\t}\n\t\t}\n\t}, [props.selectedDates, props.showTimePicker]);\n\n\tconst [selectedDate, setSelectedDate] = useState(props.selectedDate);\n\tconst maxRangeLimit =\n\t\tprops.maxRangeLimit === null\n\t\t\t? null\n\t\t\t: props.maxRangeLimit === undefined\n\t\t\t? 180\n\t\t\t: props.maxRangeLimit;\n\n\tfunction handleRangeSelection(date: Date[]) {\n\t\t// Apply time to dates if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate[0].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\tif (props.showTimePicker && toTime) {\n\t\t\tconst [hours, minutes] = toTime.split(':').map(Number);\n\t\t\tdate[1].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectRange?.(date[0], date[1]);\n\t\t}\n\t\tsetSelectedDates([date[0], date[1]]);\n\t}\n\n\tfunction handleTimeChange(newFromTime?: string, newToTime?: string) {\n\t\tif (Array.isArray(selectedDates) && selectedDates[0] && selectedDates[1]) {\n\t\t\t// Apply time to existing date objects\n\t\t\tif (newFromTime) {\n\t\t\t\tconst [hours, minutes] = newFromTime.split(':').map(Number);\n\t\t\t\tselectedDates[0].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\tif (newToTime) {\n\t\t\t\tconst [hours, minutes] = newToTime.split(':').map(Number);\n\t\t\t\tselectedDates[1].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\t// Only trigger callback if time picker is not shown (shouldn't happen, but for safety)\n\t\t\tif (!props.showTimePicker) {\n\t\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleFromTimeChange(time: string) {\n\t\tsetFromTime(time);\n\t\thandleTimeChange(time, toTime);\n\t}\n\n\tfunction handleToTimeChange(time: string) {\n\t\tsetToTime(time);\n\t\thandleTimeChange(fromTime, time);\n\t}\n\n\tfunction handleSingleDateSelection(date: Date) {\n\t\t// Apply time if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate.setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectDate?.(date);\n\t\t}\n\t\tsetSelectedDate(date);\n\t}\n\n\tconst tileDisabled = ({ date, view }) => {\n\t\tif (!Array.isArray(selectedDates)) return false;\n\n\t\tconst [start, end] = selectedDates;\n\n\t\tif (start && !end && maxRangeLimit !== null) {\n\t\t\tconst diffInDays = Math.round(\n\t\t\t\t(date - (start as unknown as number)) / (1000 * 60 * 60 * 24),\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tview === 'month' &&\n\t\t\t\t(diffInDays < -maxRangeLimit \|\| diffInDays > maxRangeLimit)\n\t\t\t);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tfunction onClickDay(date: Date) {\n\t\tif (!Array.isArray(selectedDates)) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t\treturn;\n\t\t}\n\n\t\tconst [start, end] = selectedDates;\n\t\t// Check if the start date is not selected yet\n\t\tif (!start) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\n\t\t// Check if only the start date is selected\n\t\telse if (start && !end) {\n\t\t\tsetSelectedDates([start, date]);\n\t\t} // Reset the range if both start and end dates are already selected\n\t\telse {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\t}\n\n\tfunction handleSaveClick() {\n\t\tif (\n\t\t\tprops.selectRange &&\n\t\t\tArray.isArray(selectedDates) &&\n\t\t\tselectedDates[0] &&\n\t\t\tselectedDates[1]\n\t\t) {\n\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t} else if (!props.selectRange && selectedDate) {\n\t\t\tprops.onSelectDate?.(selectedDate);\n\t\t}\n\t}\n\n\treturn (\n\t\t<PickerContainer selectRange={props.selectRange}>\n\t\t\t<Calendar\n\t\t\t\tonChange={(date) => {\n\t\t\t\t\tif (props.selectRange && props.onSelectRange) {\n\t\t\t\t\t\thandleRangeSelection(date);\n\t\t\t\t\t} else if (props.onSelectDate) {\n\t\t\t\t\t\thandleSingleDateSelection(date);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\ttileDisabled={tileDisabled}\n\t\t\t\tonClickDay={onClickDay}\n\t\t\t\tvalue={(props.selectRange ? selectedDates : selectedDate) as Date}\n\t\t\t\tselectRange={props.selectRange}\n\t\t\t\tminDate={props.minDate}\n\t\t\t\tmaxDate={props.maxDate}\n\t\t\t\tkey={'bik-calendar'}\n\t\t\t/>\n\t\t\t{props.showTimePicker && props.selectRange && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tfromTime={fromTime}\n\t\t\t\t\t\ttoTime={toTime}\n\t\t\t\t\t\tonFromTimeChange={handleFromTimeChange}\n\t\t\t\t\t\tonToTimeChange={handleToTimeChange}\n\t\t\t\t\t\ttimeInterval={props.timeInterval}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"date-picker-save-button-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\t\tonClick={handleSaveClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PickerContainer>\n\t);\n};\n"],"names":["DatePicker","props","selectedDates","setSelectedDates","useState","fromTime","setFromTime","toTime","setToTime","useEffect","hours","minutes","selectedDate","setSelectedDate","maxRangeLimit","handleRangeSelection","date","handleTimeChange","newFromTime","newToTime","handleFromTimeChange","time","handleToTimeChange","handleSingleDateSelection","tileDisabled","view","start","end","diffInDays","onClickDay","handleSaveClick","jsxs","PickerContainer","jsx","Calendar","Fragment","TimePicker","Button"],"mappings":";;;;;;AAmBO,MAAMA,IAAwC,CAACC,MAAU;AAC/D,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAA,GAGpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,OAAO,GAC1C,CAACG,GAAQC,CAAS,IAAIJ,EAAS,OAAO;AAE5C,EAAAK,EAAU,MAAM;AACf,QAAIR,EAAM;AAGT,UAFAE,EAAiBF,EAAM,aAAa,GAEhCA,EAAM,gBAAgB;AACzB,YAAIA,EAAM,cAAc,CAAC,GAAG;AAC3B,gBAAMS,IAAQT,EAAM,cAAc,CAAC,EAAE,SAAA,GAC/BU,IAAUV,EAAM,cAAc,CAAC,EAAE,WAAA;AACvC,UAAAK;AAAA,YACC,GAAGI,EAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EACtC,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QAEpB;AACA,YAAIV,EAAM,cAAc,CAAC,GAAG;AAC3B,gBAAMS,IAAQT,EAAM,cAAc,CAAC,EAAE,SAAA,GAC/BU,IAAUV,EAAM,cAAc,CAAC,EAAE,WAAA;AACvC,UAAAO;AAAA,YACC,GAAGE,EAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EACtC,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QAEpB;AAAA,MACD;AAAA;AAEA,MAAAR,EAAiB,CAAC,MAAM,IAAI,CAAC,GAEzBF,EAAM,mBACTK,EAAY,OAAO,GACnBE,EAAU,OAAO;AAAA,EAGpB,GAAG,CAACP,EAAM,eAAeA,EAAM,cAAc,CAAC;AAE9C,QAAM,CAACW,GAAcC,CAAe,IAAIT,EAASH,EAAM,YAAY,GAC7Da,IACLb,EAAM,kBAAkB,OACrB,OACAA,EAAM,kBAAkB,SACxB,MACAA,EAAM;AAEV,WAASc,EAAqBC,GAAc;AAE3C,QAAIf,EAAM,kBAAkBI,GAAU;AACrC,YAAM,CAACK,GAAOC,CAAO,IAAIN,EAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACvD,MAAAW,EAAK,CAAC,EAAE,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACtC;AAEA,QAAIV,EAAM,kBAAkBM,GAAQ;AACnC,YAAM,CAACG,GAAOC,CAAO,IAAIJ,EAAO,MAAM,GAAG,EAAE,IAAI,MAAM;AACrD,MAAAS,EAAK,CAAC,EAAE,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACtC;AAGA,IAAKV,EAAM,kBACVA,EAAM,gBAAgBe,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GAEvCb,EAAiB,CAACa,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,CAAC;AAAA,EACpC;AAEA,WAASC,EAAiBC,GAAsBC,GAAoB;AACnE,QAAI,MAAM,QAAQjB,CAAa,KAAKA,EAAc,CAAC,KAAKA,EAAc,CAAC,GAAG;AAEzE,UAAIgB,GAAa;AAChB,cAAM,CAACR,GAAOC,CAAO,IAAIO,EAAY,MAAM,GAAG,EAAE,IAAI,MAAM;AAC1D,QAAAhB,EAAc,CAAC,EAAE,SAASQ,GAAOC,GAAS,GAAG,CAAC;AAAA,MAC/C;AAEA,UAAIQ,GAAW;AACd,cAAM,CAACT,GAAOC,CAAO,IAAIQ,EAAU,MAAM,GAAG,EAAE,IAAI,MAAM;AACxD,QAAAjB,EAAc,CAAC,EAAE,SAASQ,GAAOC,GAAS,GAAG,CAAC;AAAA,MAC/C;AAGA,MAAKV,EAAM,kBACVA,EAAM,gBAAgBC,EAAc,CAAC,GAAGA,EAAc,CAAC,CAAC;AAAA,IAE1D;AAAA,EACD;AAEA,WAASkB,EAAqBC,GAAc;AAC3C,IAAAf,EAAYe,CAAI,GAChBJ,EAAiBI,GAAMd,CAAM;AAAA,EAC9B;AAEA,WAASe,EAAmBD,GAAc;AACzC,IAAAb,EAAUa,CAAI,GACdJ,EAAiBZ,GAAUgB,CAAI;AAAA,EAChC;AAEA,WAASE,EAA0BP,GAAY;AAE9C,QAAIf,EAAM,kBAAkBI,GAAU;AACrC,YAAM,CAACK,GAAOC,CAAO,IAAIN,EAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACvD,MAAAW,EAAK,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACnC;AAGA,IAAKV,EAAM,kBACVA,EAAM,eAAee,CAAI,GAE1BH,EAAgBG,CAAI;AAAA,EACrB;AAEA,QAAMQ,IAAe,CAAC,EAAE,MAAAR,GAAM,MAAAS,QAAW;AACxC,QAAI,CAAC,MAAM,QAAQvB,CAAa,EAAG,QAAO;AAE1C,UAAM,CAACwB,GAAOC,CAAG,IAAIzB;AAErB,QAAIwB,KAAS,CAACC,KAAOb,MAAkB,MAAM;AAC5C,YAAMc,IAAa,KAAK;AAAA,SACtBZ,IAAQU,KAAgC;AAAA,MAAiB;AAG3D,aACCD,MAAS,YACRG,IAAa,CAACd,KAAiBc,IAAad;AAAA,IAE/C;AAEA,WAAO;AAAA,EACR;AAEA,WAASe,EAAWb,GAAY;AAC/B,QAAI,CAAC,MAAM,QAAQd,CAAa,GAAG;AAClC,MAAAC,EAAiB,CAACa,GAAM,IAAI,CAAC;AAC7B;AAAA,IACD;AAEA,UAAM,CAACU,GAAOC,CAAG,IAAIzB;AAErB,IAMCC,EANIuB,IAKIA,KAAS,CAACC,IACD,CAACD,GAAOV,CAAI,IAGZ,CAACA,GAAM,IAAI,IARX,CAACA,GAAM,IAAI,CAKE;AAAA,EAKhC;AAEA,WAASc,IAAkB;AAC1B,IACC7B,EAAM,eACN,MAAM,QAAQC,CAAa,KAC3BA,EAAc,CAAC,KACfA,EAAc,CAAC,IAEfD,EAAM,gBAAgBC,EAAc,CAAC,GAAGA,EAAc,CAAC,CAAC,IAC9C,CAACD,EAAM,eAAeW,KAChCX,EAAM,eAAeW,CAAY;AAAA,EAEnC;AAEA,SACC,gBAAAmB,EAACC,GAAA,EAAgB,aAAa/B,EAAM,aACnC,UAAA;AAAA,IAAA,gBAAAgC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,UAAU,CAAClB,MAAS;AACnB,UAAIf,EAAM,eAAeA,EAAM,gBAC9Bc,EAAqBC,CAAI,IACff,EAAM,gBAChBsB,EAA0BP,CAAI;AAAA,QAEhC;AAAA,QACA,cAAAQ;AAAA,QACA,YAAAK;AAAA,QACA,OAAQ5B,EAAM,cAAcC,IAAgBU;AAAA,QAC5C,aAAaX,EAAM;AAAA,QACnB,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,MAAA;AAAA,MACV;AAAA,IAAA;AAAA,IAELA,EAAM,kBAAkBA,EAAM,eAC9B,gBAAA8B,EAAAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,UAAA/B;AAAA,UACA,QAAAE;AAAA,UACA,kBAAkBa;AAAA,UAClB,gBAAgBE;AAAA,UAChB,cAAcrB,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAErB,gBAAAgC;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,SAAS;AAAA,UAAA;AAAA,UAGV,UAAA,gBAAAA;AAAA,YAACI;AAAA,YAAA;AAAA,cACA,YAAW;AAAA,cACX,MAAK;AAAA,cACL,YAAW;AAAA,cACX,SAASP;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IACD,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Calendar from 'react-calendar';\nimport { Button } from '@src/components/button';\nimport {\n\tDatePickerTippyOverride,\n\tPickerContainer,\n} from '@src/components/datePicker/DatePicker.styled';\nimport { TimePicker } from '@src/components/datePicker/TimePicker';\n\nexport type DatePickerProps = {\n\tselectRange: boolean;\n\tselectedDates?: Date[]; // for range selection\n\tselectedDate?: Date; // for single date selection\n\tonSelectRange?: (startDate: Date, endDate: Date) => void; // for range selection\n\tonSelectDate?: (date: Date) => void; // for single date selection\n\tminDate?: Date;\n\tmaxDate?: Date;\n\tmaxRangeLimit?: number \| null;\n\tshowTimePicker?: boolean;\n\ttimeInterval?: number; // in minutes, default 30\n};\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n\tconst [selectedDates, setSelectedDates] = useState<\n\t\tArray<Date \| null> \| undefined\n\t>();\n\tconst [fromTime, setFromTime] = useState('00:00');\n\tconst [toTime, setToTime] = useState('23:59');\n\n\tuseEffect(() => {\n\t\tif (props.selectedDates) {\n\t\t\tsetSelectedDates(props.selectedDates);\n\t\t\t// Extract time from selectedDates if showTimePicker is enabled\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tif (props.selectedDates[0]) {\n\t\t\t\t\tconst hours = props.selectedDates[0].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[0].getMinutes();\n\t\t\t\t\tsetFromTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (props.selectedDates[1]) {\n\t\t\t\t\tconst hours = props.selectedDates[1].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[1].getMinutes();\n\t\t\t\t\tsetToTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tsetSelectedDates([null, null]);\n\t\t\t// Reset time pickers to default when no dates are selected\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tsetFromTime('00:00');\n\t\t\t\tsetToTime('23:59');\n\t\t\t}\n\t\t}\n\t}, [props.selectedDates, props.showTimePicker]);\n\n\tconst [selectedDate, setSelectedDate] = useState(props.selectedDate);\n\tconst maxRangeLimit =\n\t\tprops.maxRangeLimit === null\n\t\t\t? null\n\t\t\t: props.maxRangeLimit === undefined\n\t\t\t? 180\n\t\t\t: props.maxRangeLimit;\n\n\tfunction handleRangeSelection(date: Date[]) {\n\t\t// Apply time to dates if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate[0].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\tif (props.showTimePicker && toTime) {\n\t\t\tconst [hours, minutes] = toTime.split(':').map(Number);\n\t\t\tdate[1].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectRange?.(date[0], date[1]);\n\t\t}\n\t\tsetSelectedDates([date[0], date[1]]);\n\t}\n\n\tfunction handleTimeChange(newFromTime?: string, newToTime?: string) {\n\t\tif (Array.isArray(selectedDates) && selectedDates[0] && selectedDates[1]) {\n\t\t\t// Apply time to existing date objects\n\t\t\tif (newFromTime) {\n\t\t\t\tconst [hours, minutes] = newFromTime.split(':').map(Number);\n\t\t\t\tselectedDates[0].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\tif (newToTime) {\n\t\t\t\tconst [hours, minutes] = newToTime.split(':').map(Number);\n\t\t\t\tselectedDates[1].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\t// Only trigger callback if time picker is not shown (shouldn't happen, but for safety)\n\t\t\tif (!props.showTimePicker) {\n\t\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleFromTimeChange(time: string) {\n\t\tsetFromTime(time);\n\t\thandleTimeChange(time, toTime);\n\t}\n\n\tfunction handleToTimeChange(time: string) {\n\t\tsetToTime(time);\n\t\thandleTimeChange(fromTime, time);\n\t}\n\n\tfunction handleSingleDateSelection(date: Date) {\n\t\t// Apply time if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate.setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectDate?.(date);\n\t\t}\n\t\tsetSelectedDate(date);\n\t}\n\n\tconst tileDisabled = ({ date, view }) => {\n\t\tif (!Array.isArray(selectedDates)) return false;\n\n\t\tconst [start, end] = selectedDates;\n\n\t\tif (start && !end && maxRangeLimit !== null) {\n\t\t\tconst diffInDays = Math.round(\n\t\t\t\t(date - (start as unknown as number)) / (1000 * 60 * 60 * 24),\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tview === 'month' &&\n\t\t\t\t(diffInDays < -maxRangeLimit \|\| diffInDays > maxRangeLimit)\n\t\t\t);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tfunction onClickDay(date: Date) {\n\t\tif (!Array.isArray(selectedDates)) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t\treturn;\n\t\t}\n\n\t\tconst [start, end] = selectedDates;\n\t\t// Check if the start date is not selected yet\n\t\tif (!start) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\n\t\t// Check if only the start date is selected\n\t\telse if (start && !end) {\n\t\t\tsetSelectedDates([start, date]);\n\t\t} // Reset the range if both start and end dates are already selected\n\t\telse {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\t}\n\n\tfunction handleSaveClick() {\n\t\tif (\n\t\t\tprops.selectRange &&\n\t\t\tArray.isArray(selectedDates) &&\n\t\t\tselectedDates[0] &&\n\t\t\tselectedDates[1]\n\t\t) {\n\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t} else if (!props.selectRange && selectedDate) {\n\t\t\tprops.onSelectDate?.(selectedDate);\n\t\t}\n\t}\n\n\treturn (\n\t\t<PickerContainer selectRange={props.selectRange}>\n\t\t\t<DatePickerTippyOverride />\n\t\t\t<Calendar\n\t\t\t\tonChange={(date) => {\n\t\t\t\t\tif (props.selectRange && props.onSelectRange) {\n\t\t\t\t\t\thandleRangeSelection(date);\n\t\t\t\t\t} else if (props.onSelectDate) {\n\t\t\t\t\t\thandleSingleDateSelection(date);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\ttileDisabled={tileDisabled}\n\t\t\t\tonClickDay={onClickDay}\n\t\t\t\tvalue={(props.selectRange ? selectedDates : selectedDate) as Date}\n\t\t\t\tselectRange={props.selectRange}\n\t\t\t\tminDate={props.minDate}\n\t\t\t\tmaxDate={props.maxDate}\n\t\t\t\tkey={'bik-calendar'}\n\t\t\t/>\n\t\t\t{props.showTimePicker && props.selectRange && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tfromTime={fromTime}\n\t\t\t\t\t\ttoTime={toTime}\n\t\t\t\t\t\tonFromTimeChange={handleFromTimeChange}\n\t\t\t\t\t\tonToTimeChange={handleToTimeChange}\n\t\t\t\t\t\ttimeInterval={props.timeInterval}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"date-picker-save-button-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\t\tonClick={handleSaveClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PickerContainer>\n\t);\n};\n"],"names":["DatePicker","props","selectedDates","setSelectedDates","useState","fromTime","setFromTime","toTime","setToTime","useEffect","hours","minutes","selectedDate","setSelectedDate","maxRangeLimit","handleRangeSelection","date","handleTimeChange","newFromTime","newToTime","handleFromTimeChange","time","handleToTimeChange","handleSingleDateSelection","tileDisabled","view","start","end","diffInDays","onClickDay","handleSaveClick","jsxs","PickerContainer","jsx","DatePickerTippyOverride","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}

package/dist/esm/components/datePicker/DatePicker.styled.d.ts CHANGED Viewed

@@ -4,3 +4,13 @@ export declare const PickerContainer: import('styled-components').StyledComponen
 export declare const TimePickerContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TimeInputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TimeLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DatePickerTippyOverride: import('styled-components').GlobalStyleComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import('react').ComponentType<any> | undefined;
+    forwardedAs?: string | import('react').ComponentType<any> | undefined;
+}, import('styled-components').DefaultTheme>;

package/dist/esm/components/datePicker/DatePicker.styled.js CHANGED Viewed

@@ -1,34 +1,35 @@
-import t from "styled-components";
+import t, { createGlobalStyle as e } from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-const e = (o) => o.selectRange ? `
+const a = (o) => o.selectRange ? `
       border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     ` : `
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
-    `, d = t.div`
+    `, n = t.div`
 	position: relative;
 	z-index: 99999;
 	width: fit-content;
 	background: ${r.text.white};
-	border: 1px solid ${r.stroke.primary};
-	border-radius: 4px;
+	border: none !important;
+	border-radius: 8px !important;
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	overflow: hidden;
 	/* Clip content to respect border-radius */
 	> :first-of-type {
-		border-top-left-radius: 4px;
-		border-top-right-radius: 4px;
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
 	}
 	> :last-child {
-		border-bottom-left-radius: 4px;
-		border-bottom-right-radius: 4px;
+		border-bottom-left-radius: 8px;
+		border-bottom-right-radius: 8px;
 	}
 	.react-calendar {
 		background: ${r.text.white};
-		border: none;
+		border: none !important;
 		box-shadow: none;
 		border-radius: 0;
 		color: ${r.text.primary};
@@ -112,7 +113,7 @@ const e = (o) => o.selectRange ? `
 							border-bottom-right-radius: 0 !important;
 						}
 						&.react-calendar__tile--rangeEnd {
-							${(o) => e(o)}
+							${(o) => a(o)}
 							border-top-left-radius: 4px !important;
 							border-bottom-left-radius: 4px !important;
 							&:enabled:hover {
@@ -211,7 +212,7 @@ const e = (o) => o.selectRange ? `
 			background-color: #f0f0f0 !important;
 		}
 	}
-`, i = t.div`
+`, p = t.div`
 	display: flex;
 	gap: 10px;
 	padding: 16px;
@@ -226,17 +227,23 @@ const e = (o) => o.selectRange ? `
 	flex: 1;
 	min-width: 0;
 	max-width: 154px;
-`, p = t.div`
+`, c = t.div`
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	color: ${r.content.secondary};
+`, l = e`
+	.tippy-box:has(> .tippy-content > ${n}) {
+		background: transparent !important;
+		border-radius: 8px !important;
+	}
 `;
 export {
-  d as PickerContainer,
+  l as DatePickerTippyOverride,
+  n as PickerContainer,
   b as TimeInputWrapper,
-  p as TimeLabel,
-  i as TimePickerContainer
+  c as TimeLabel,
+  p as TimePickerContainer
 };
 //# sourceMappingURL=DatePicker.styled.js.map

package/dist/esm/components/datePicker/DatePicker.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\n\t/* Clip content to respect border-radius /\n\t> :first-of-type {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/ While picking the end date, the tile under the cursor (the\n\t\t\t\t prospective endpoint) should match the selected start date —\n\t\t\t\t brand background + white text — instead of falling through to\n\t\t\t\t the generic grey :hover above. The in-between preview stays\n\t\t\t\t brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: none !important;\n\tborder-radius: 8px !important;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\toverflow: hidden;\n\n\t/* Clip content to respect border-radius /\n\t> :first-of-type {\n\t\tborder-top-left-radius: 8px;\n\t\tborder-top-right-radius: 8px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 8px;\n\t\tborder-bottom-right-radius: 8px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none !important;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/ While picking the end date, the tile under the cursor (the\n\t\t\t\t prospective endpoint) should match the selected start date —\n\t\t\t\t brand background + white text — instead of falling through to\n\t\t\t\t the generic grey :hover above. The in-between preview stays\n\t\t\t\t brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n\nexport const DatePickerTippyOverride = createGlobalStyle`\n\t.tippy-box:has(> .tippy-content > ${PickerContainer}) {\n\t\tbackground: transparent !important;\n\t\tborder-radius: 8px !important;\n\t}\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel","DatePickerTippyOverride","createGlobalStyle"],"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 { jsxs as m, Fragment as S, jsx as e } from "react/jsx-runtime";
-import { useState as s, useEffect as w } from "react";
-import L from "../../utils/StringUtils.js";
+import { jsxs as m, Fragment as w, jsx as e } from "react/jsx-runtime";
+import { useState as s, useEffect as L } from "react";
+import R from "../../utils/StringUtils.js";
 import { COLORS as d } from "../../constants/Theme.js";
-import R from "../../assets/icons/chevronDown.svg.js";
-import E from "../../assets/icons/cross.svg.js";
-import j from "../../assets/icons/errorInfo.svg.js";
-import { InputFooter as A } from "../input/Input.styled.js";
+import E from "../../assets/icons/chevronDown.svg.js";
+import j from "../../assets/icons/cross.svg.js";
+import A from "../../assets/icons/errorInfo.svg.js";
+import { InputFooter as F } from "../input/Input.styled.js";
 import { BodyCaption as h } from "../TypographyStyle.js";
-import { ChipInputWrapper as F } from "./Common.styled.js";
-import { Tag as T } from "../tag/Tag.js";
-import { Tooltip as k } from "../tooltips/Tooltip.js";
-const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
+import { ChipInputWrapper as T } from "./Common.styled.js";
+import { Tag as k } from "../tag/Tag.js";
+import { Tooltip as B } from "../tooltips/Tooltip.js";
+const D = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, Y = ({
   chips: t,
   onDeleteChip: g,
   containerStyle: f = {},
@@ -18,29 +18,30 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
   isDropdownOpened: u,
   placeholder: C = "Select..",
   errorMessage: a = "",
-  showLabelsOnMoreHover: v = !1
+  showLabelsOnMoreHover: v = !1,
+  placeholderColor: b
 }) => {
-  const [b, x] = s(), [p, y] = s(0), [c, I] = s([]);
-  return w(() => {
+  const [x, y] = s(), [p, I] = s(0), [c, O] = s([]);
+  return L(() => {
     if (!t) return;
     let n = 0;
-    const o = B(t);
+    const o = D(t);
     let r = t.filter((l) => (n += l.label.length, n <= o));
-    r.length === 0 && t.length > 0 && (r = [t[0]]), x(r);
-    const O = t.filter((l) => !r.includes(l)).map((l) => l.label);
-    I(O), y(t.length - r.length);
-  }, [t]), /* @__PURE__ */ m(S, { children: [
-    /* @__PURE__ */ m(F, { style: { ...f }, error: !!a, children: [
+    r.length === 0 && t.length > 0 && (r = [t[0]]), y(r);
+    const S = t.filter((l) => !r.includes(l)).map((l) => l.label);
+    O(S), I(t.length - r.length);
+  }, [t]), /* @__PURE__ */ m(w, { children: [
+    /* @__PURE__ */ m(T, { style: { ...f }, error: !!a, children: [
       /* @__PURE__ */ m("div", { className: "chips-container", children: [
-        b?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
-          T,
+        x?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
+          k,
           {
-            tagText: L.truncateText(
+            tagText: R.truncateText(
               n.selectedLabel || n.label,
               40
             ),
             TrailingIcon: () => /* @__PURE__ */ e(
-              E,
+              j,
               {
                 "data-testid": "chip-remove-icon",
                 width: 12,
@@ -63,7 +64,7 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
               pointerEvents: "auto"
             },
             children: /* @__PURE__ */ e(
-              k,
+              B,
               {
                 body: "",
                 placement: "bottom",
@@ -80,10 +81,16 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
             )
           }
         ),
-        t.length === 0 && /* @__PURE__ */ e("div", { style: { color: d.content.placeholder }, children: C })
+        t.length === 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            style: { color: b ?? d.content.placeholder },
+            children: C
+          }
+        )
       ] }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        R,
+        E,
         {
           style: {
             transform: u ? "rotate(180deg)" : "rotate(0deg)"
@@ -94,13 +101,13 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
         }
       ) })
     ] }),
-    !!a && /* @__PURE__ */ m(A, { invalid: !0, children: [
-      !!a && /* @__PURE__ */ e(j, { width: 16, height: 16 }),
+    !!a && /* @__PURE__ */ m(F, { invalid: !0, children: [
+      !!a && /* @__PURE__ */ e(A, { width: 16, height: 16 }),
       a
     ] })
   ] });
 };
 export {
-  V as default
+  Y 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\tdata-testid=\"chip-remove-icon\"\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","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","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,gBAAAC,EAAC,SAAgB,OAAO,EAAE,QAAQ,EAAA,GACjC,UAAA,gBAAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,SAASC,EAAY;AAAA,cACpBJ,EAAK,iBAAiBA,EAAK;AAAA,cAC3B;AAAA,YAAA;AAAA,YAED,cAAc,MACb,gBAAAE;AAAA,cAACG;AAAAA,cAAA;AAAA,gBACA,eAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,OAAO,EAAE,QAAQ,UAAA;AAAA,gBACjB,SAAS,MAAM;AACd,~~kBAAA3B~~,~~EAAasB~~,CAAI;AAAA,gBAClB;AAAA,cAAA;AAAA,YAAA;AAAA,YAID,UAAAA,EAAK,iBAAiBA,EAAK;AAAA,UAAA;AAAA,QAAA,EAC7B,GAnBSC,CAoBV,CACA;AAAA,QACA,CAAC,CAACb,KACF,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,eAAe;AAAA,YAAA;AAAA,YAGhB,UAAA,gBAAAA;AAAA,cAACI;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,gBAAAC;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACA,OAAO,EAAE,OAAOC,EAAO,KAAK,MAAA;AAAA,oBAG3B,UAAAF;AAAA,kBAAA;AAAA,kBAFIN;AAAA,gBAAA,CAIN,GACF,IACG;AAAA,gBAGL,UAAA,gBAAAC,EAACM,KAAY,OAAOC,EAAO,QAAQ,aACjC,UAAA,IAAIrB,CAAmB,QAAA,CACzB;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,~~QAIDZ~~,EAAM,WAAW,KACjB,~~gBAAA0B~~,~~EAAC~~,~~OAAA~~,~~EAAI~~,OAAO,EAAE,~~OAAOO~~,EAAO,QAAQ,YAAA,~~GAClC~~,~~UAAA3B~~,~~EAAA~~,~~CACF~~;AAAA,~~MAAA~~,GAEF;AAAA,wBAEC,OAAA,EACA,UAAA,~~gBAAAoB~~;AAAA,QAACQ;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,MAAA,EACvB,CACD;AAAA,IAAA,GACD;AAAA,IACC,CAAC,~~CAAC1B~~,KACF,~~gBAAAc~~,EAACc,GAAA,EAAY,SAAS,IACpB,UAAA;AAAA,MAAA,CAAC,~~CAAC5B~~,KAAgB,~~gBAAAmB~~,EAACU,KAAU,OAAO,IAAI,QAAQ,IAAI;AAAA,~~MACpD7B~~;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEF;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\tdata-testid=\"chip-remove-icon\"\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","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Common.styled.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import r from "styled-components";
+import t from "styled-components";
 import { COLORS as i } from "../../constants/Theme.js";
-const p = r.div`
+const p = t.div`
 	position:
 	// if allowEvents is true, then position is relative, else position is absolute
 		${(e) => e?.allowEvents || e?.isChildLoading ? "relative" : "absolute"};
@@ -10,11 +10,12 @@ const p = r.div`
 	height: 100%;
 	z-index: 2;
 	cursor: ${(e) => e?.disabled ? "not-allowed" : "pointer"};
-`, n = r.div`
-	margin-top: 8px;
+`, n = t.div`
+	margin-top: 4px;
 	margin-bottom: 8px;
+	clip-path: inset(0px -20px -20px -20px);
 `;
-r.div`
+t.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -23,7 +24,7 @@ r.div`
 	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
 `;
-const s = r.div`
+const s = t.div`
 	width: 360px;
 	height: 100%;
 	padding: 8px;

package/dist/esm/components/dropdown/Common.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Common.styled.js","sources":["../../../../src/components/dropdown/Common.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OverLapAbs = styled.div<{\n\tdisabled?: boolean;\n\tallowEvents?: boolean;\n\tisChildLoading?: boolean;\n}>`\n\tposition: \n\t// if allowEvents is true, then position is relative, else position is absolute\n\t\t${(props) =>\n\t\tprops?.allowEvents \|\| props?.isChildLoading ? 'relative' : 'absolute'};\n\tleft: 0px;\n\ttop: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 2;\n\tcursor: ${(props) => (props?.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nexport const OpenDropdownContainer = styled.div`\n\tmargin-top: ~~8px~~;\n\tmargin-bottom: 8px;\n`;\n\nexport const LoadingContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tpadding: 6px 8px;\n\tbackground: ${COLORS.surface.hovered};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const ChipInputWrapper = styled.div<{ error?: boolean }>`\n\twidth: 360px;\n\theight: 100%;\n\tpadding: 8px;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.error\n\t\t\t? `1px solid ${COLORS.stroke.negative.vibrant}`\n\t\t\t: `1px solid ${COLORS.stroke.primary}`};\n\t.chips-container {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t}\n`;\n"],"names":["OverLapAbs","styled","props","OpenDropdownContainer","COLORS","ChipInputWrapper"],"mappings":";;AAGO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA,IAO7B,CAACC,MACHA,GAAO,eAAeA,GAAO,iBAAiB,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM5D,CAACA,MAAWA,GAAO,WAAW,gBAAgB,SAAU;AAAA,GAGtDC,IAAwBF,EAAO;AAAA;AAAA;AAAA;~~AAKZA~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKxBG,EAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMC,IAAmBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQ5B,CAACC,MACVA,EAAM,QACH,aAAaE,EAAO,OAAO,SAAS,OAAO,KAC3C,aAAaA,EAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"Common.styled.js","sources":["../../../../src/components/dropdown/Common.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OverLapAbs = styled.div<{\n\tdisabled?: boolean;\n\tallowEvents?: boolean;\n\tisChildLoading?: boolean;\n}>`\n\tposition: \n\t// if allowEvents is true, then position is relative, else position is absolute\n\t\t${(props) =>\n\t\tprops?.allowEvents \|\| props?.isChildLoading ? 'relative' : 'absolute'};\n\tleft: 0px;\n\ttop: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 2;\n\tcursor: ${(props) => (props?.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nexport const OpenDropdownContainer = styled.div`\n\tmargin-top: 4px;\n\tmargin-bottom: 8px;\n\tclip-path: inset(0px -20px -20px -20px);\n`;\n\nexport const LoadingContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tpadding: 6px 8px;\n\tbackground: ${COLORS.surface.hovered};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const ChipInputWrapper = styled.div<{ error?: boolean }>`\n\twidth: 360px;\n\theight: 100%;\n\tpadding: 8px;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.error\n\t\t\t? `1px solid ${COLORS.stroke.negative.vibrant}`\n\t\t\t: `1px solid ${COLORS.stroke.primary}`};\n\t.chips-container {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t}\n`;\n"],"names":["OverLapAbs","styled","props","OpenDropdownContainer","COLORS","ChipInputWrapper"],"mappings":";;AAGO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA,IAO7B,CAACC,MACHA,GAAO,eAAeA,GAAO,iBAAiB,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM5D,CAACA,MAAWA,GAAO,WAAW,gBAAgB,SAAU;AAAA,GAGtDC,IAAwBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAMZA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKxBG,EAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMC,IAAmBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQ5B,CAACC,MACVA,EAAM,QACH,aAAaE,EAAO,OAAO,SAAS,OAAO,KAC3C,aAAaA,EAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -4,6 +4,8 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small' | 'x-small';
     disabled?: boolean;
+    /** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. */
+    solidDisabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;
     placeHolderHeight?: string;