npm - @bikdotai/bik-component-library - Versions diffs - 0.0.850-beta.1 → 0.0.850-beta.3 - Mend

@bikdotai/bik-component-library 0.0.850-beta.1 → 0.0.850-beta.3

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

package/dist/cjs/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 {\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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"}
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":"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"}

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

@@ -1,33 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../constants/Theme.js"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=n(e),i=t=>t.selectRange?`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../constants/Theme.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=a(e),n=t=>t.selectRange?`
       border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     `:`
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
-    `,a=o.default.div`
+    `,d=o.default.div`
 	position: relative;
 	z-index: 99999;
 	width: fit-content;
 	background: ${r.COLORS.text.white};
-	border: none !important;
-	border-radius: 8px !important;
+	border: 1px solid ${r.COLORS.stroke.primary};
+	border-radius: 4px;
 	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: 8px;
-		border-top-right-radius: 8px;
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
 	}
 	> :last-child {
-		border-bottom-left-radius: 8px;
-		border-bottom-right-radius: 8px;
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
 	}
 	.react-calendar {
 		background: ${r.COLORS.text.white};
-		border: none !important;
+		border: none;
 		box-shadow: none;
 		border-radius: 0;
 		color: ${r.COLORS.text.primary};
@@ -111,7 +110,7 @@
 							border-bottom-right-radius: 0 !important;
 						}
 						&.react-calendar__tile--rangeEnd {
-							${t=>i(t)}
+							${t=>n(t)}
 							border-top-left-radius: 4px !important;
 							border-bottom-left-radius: 4px !important;
 							&:enabled:hover {
@@ -210,7 +209,7 @@
 			background-color: #f0f0f0 !important;
 		}
 	}
-`,d=o.default.div`
+`,i=o.default.div`
 	display: flex;
 	gap: 10px;
 	padding: 16px;
@@ -218,23 +217,18 @@
 	box-sizing: border-box;
 	width: 100%;
 	max-width: 350px;
-`,p=o.default.div`
+`,b=o.default.div`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	flex: 1;
 	min-width: 0;
 	max-width: 154px;
-`,b=o.default.div`
+`,p=o.default.div`
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	color: ${r.COLORS.content.secondary};
-`,c=e.createGlobalStyle`
-	.tippy-box:has(> .tippy-content > ${a}) {
-		background: transparent !important;
-		border-radius: 8px !important;
-	}
-`;exports.DatePickerTippyOverride=c;exports.PickerContainer=a;exports.TimeInputWrapper=p;exports.TimeLabel=b;exports.TimePickerContainer=d;
+`;exports.PickerContainer=d;exports.TimeInputWrapper=b;exports.TimeLabel=p;exports.TimePickerContainer=i;
 //# sourceMappingURL=DatePicker.styled.js.map

package/dist/cjs/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, { 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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"}
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":"0NAGMA,EAAwBC,GACzBA,EAAM,YACF;AAAA;AAAA;AAAA,MAKA;AAAA;AAAA;AAAA,MAOIC,EAAkBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,eAMvBC,EAAAA,OAAO,KAAK,KAAK;AAAA,qBACXA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgB1BA,EAAAA,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,WAItBA,EAAAA,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAUJA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAS7BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAW5BA,EAAAA,OAAO,WAAW,KAAK;AAAA,cAC5BA,EAAAA,OAAO,KAAK,KAAK;AAAA,qBACVA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQzBA,EAAAA,OAAO,WAAW,KAAK;AAAA,cAC5BA,EAAAA,OAAO,KAAK,KAAK;AAAA,qBACVA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQzBA,EAAAA,OAAO,WAAW,KAAK;AAAA,cAC5BA,EAAAA,OAAO,KAAK,KAAK;AAAA,qBACVA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKzBA,EAAAA,OAAO,WAAW,KAAK;AAAA,cAC5BA,EAAAA,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaXA,EAAAA,OAAO,WAAW,KAAK;AAAA,eAC5BA,EAAAA,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIXA,EAAAA,OAAO,WAAW,KAAK;AAAA,uBACrBA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,SAIpCH,GAAUD,EAAqBC,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIzBG,EAAAA,OAAO,WAAW,KAAK;AAAA,wBACrBA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAa3BA,EAAAA,OAAO,WAAW,KAAK;AAAA,eAC5BA,EAAAA,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIXA,EAAAA,OAAO,WAAW,KAAK;AAAA,uBACrBA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAS7BA,EAAAA,OAAO,WAAW,UAAU;AAAA,YACjCA,EAAAA,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIdA,EAAAA,OAAO,KAAK,KAAK;AAAA;AAAA,mBAEfA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAW9BA,EAAAA,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASRA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvCA,EAAAA,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,YAInBA,EAAAA,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIdA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4B1BC,EAAsBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,eAI3BC,EAAAA,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAMnBE,EAAmBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS1BI,EAAYJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtBC,EAAAA,OAAO,QAAQ,SAAS;AAAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),q=require("../../utils/StringUtils.js"),d=require("../../constants/Theme.js"),S=require("../../assets/icons/chevronDown.svg.js"),R=require("../../assets/icons/cross.svg.js"),I=require("../../assets/icons/errorInfo.svg.js"),L=require("../input/Input.styled.js"),h=require("../TypographyStyle.js"),T=require("./Common.styled.js"),w=require("../tag/Tag.js"),_=require("../tooltips/Tooltip.js"),A=t=>t.length===1?100:t.length===2?40:34,B=({chips:t,onDeleteChip:g,containerStyle:m={},sizeToUse:o="default",isDropdownOpened:p,placeholder:x="Select..",errorMessage:s="",showLabelsOnMoreHover:C=!1,placeholderColor:f})=>{const[j,y]=a.useState(),[c,b]=a.useState(0),[u,v]=a.useState([]);return a.useEffect(()=>{if(!t)return;let n=0;const l=A(t);let r=t.filter(i=>(n+=i.label.length,n<=l));r.length===0&&t.length>0&&(r=[t[0]]),y(r);const O=t.filter(i=>!r.includes(i)).map(i=>i.label);v(O),b(t.length-r.length)},[t]),e.jsxs(e.Fragment,{children:[e.jsxs(T.ChipInputWrapper,{style:{...m},error:!!s,children:[e.jsxs("div",{className:"chips-container",children:[j?.map((n,l)=>e.jsx("div",{style:{zIndex:2},children:e.jsx(w.Tag,{tagText:q.default.truncateText(n.selectedLabel||n.label,40),TrailingIcon:()=>e.jsx(R.default,{"data-testid":"chip-remove-icon",width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(n)}}),children:n.selectedLabel||n.label})},l)),!!c&&e.jsx("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsx(_.Tooltip,{body:"",placement:"bottom",tooltipContent:C&&u.length>0?e.jsx("div",{style:{padding:"4px"},children:u.map((n,l)=>e.jsx(h.BodyCaption,{style:{color:d.COLORS.text.white},children:n},l))}):void 0,children:e.jsx(h.BodyCaption,{color:d.COLORS.content.placeholder,children:`+${c} more`})})}),t.length===0&&e.jsx("div",{style:{color:f??d.COLORS.content.placeholder},children:x})]}),e.jsx("div",{children:e.jsx(S.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:o==="x-small"?16:o==="small"?20:24,height:o==="x-small"?16:o==="small"?20:24,color:d.COLORS.content.primary})})]}),!!s&&e.jsxs(L.InputFooter,{invalid:!0,children:[!!s&&e.jsx(I.default,{width:16,height:16}),s]})]})};exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),O=require("../../utils/StringUtils.js"),d=require("../../constants/Theme.js"),q=require("../../assets/icons/chevronDown.svg.js"),S=require("../../assets/icons/cross.svg.js"),R=require("../../assets/icons/errorInfo.svg.js"),I=require("../input/Input.styled.js"),h=require("../TypographyStyle.js"),L=require("./Common.styled.js"),T=require("../tag/Tag.js"),w=require("../tooltips/Tooltip.js"),_=t=>t.length===1?100:t.length===2?40:34,A=({chips:t,onDeleteChip:g,containerStyle:m={},sizeToUse:o="default",isDropdownOpened:p,placeholder:x="Select..",errorMessage:s="",showLabelsOnMoreHover:C=!1})=>{const[f,j]=a.useState(),[c,y]=a.useState(0),[u,b]=a.useState([]);return a.useEffect(()=>{if(!t)return;let n=0;const l=_(t);let r=t.filter(i=>(n+=i.label.length,n<=l));r.length===0&&t.length>0&&(r=[t[0]]),j(r);const v=t.filter(i=>!r.includes(i)).map(i=>i.label);b(v),y(t.length-r.length)},[t]),e.jsxs(e.Fragment,{children:[e.jsxs(L.ChipInputWrapper,{style:{...m},error:!!s,children:[e.jsxs("div",{className:"chips-container",children:[f?.map((n,l)=>e.jsx("div",{style:{zIndex:2},children:e.jsx(T.Tag,{tagText:O.default.truncateText(n.selectedLabel||n.label,40),TrailingIcon:()=>e.jsx(S.default,{"data-testid":"chip-remove-icon",width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(n)}}),children:n.selectedLabel||n.label})},l)),!!c&&e.jsx("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsx(w.Tooltip,{body:"",placement:"bottom",tooltipContent:C&&u.length>0?e.jsx("div",{style:{padding:"4px"},children:u.map((n,l)=>e.jsx(h.BodyCaption,{style:{color:d.COLORS.text.white},children:n},l))}):void 0,children:e.jsx(h.BodyCaption,{color:d.COLORS.content.placeholder,children:`+${c} more`})})}),t.length===0&&e.jsx("div",{style:{color:d.COLORS.content.placeholder},children:x})]}),e.jsx("div",{children:e.jsx(q.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:o==="x-small"?16:o==="small"?20:24,height:o==="x-small"?16:o==="small"?20:24,color:d.COLORS.content.primary})})]}),!!s&&e.jsxs(I.InputFooter,{invalid:!0,children:[!!s&&e.jsx(R.default,{width:16,height:16}),s]})]})};exports.default=A;
 //# sourceMappingURL=ChipInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n~~\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":"~~2iBAyBMA~~,EAAwBC,GACzBA,EAAM,SAAW,EAAU,IAC3BA,EAAM,SAAW,EAAU,GACxB,GAGFC,EAAsC,CAAC,CAC5C,MAAAD,EACA,aAAAE,EACA,eAAAC,EAAiB,CAAA,EACjB,UAAAC,EAAY,UACZ,iBAAAC,EACA,YAAAC,EAAc,WACd,aAAAC,EAAe,GACf,sBAAAC,EAAwB,~~GACxB~~,~~iBAAAC,CACD,~~IAAM,CACL,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAA,EACxB,CAACC,EAAqBC,CAAsB,EAAIF,EAAAA,SAAS,CAAC,EAC1D,CAACG,EAAwBC,CAAyB,EAAIJ,EAAAA,SAE1D,CAAA,CAAE,EAEJK,OAAAA,EAAAA,UAAU,IAAM,CACf,GAAI,~~CAACjB~~,EAAO,OACZ,~~IAAIkB~~,EAAiB,EACrB,MAAMC,~~EAAWpB~~,EAAqBC,CAAK,EAC3C,~~IAAIU~~,~~EAAUV~~,EAAM,~~OAAQoB~~,IAC3BF,GAAkBE,EAAO,MAAM,OACxBF,GAAkBC,EACzB,EACGT,EAAQ,SAAW,~~GAAKV~~,EAAM,OAAS,~~IAC1CU~~,EAAU,~~CAACV~~,EAAM,CAAC,CAAC,~~GAEpBW~~,EAAWD,CAAO,EAElB,MAAMW,~~EADiBrB~~,EAAM,~~OAAQoB~~,GAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAKA,GAAWA,EAAO,KAAK,EAC1DJ,EAA0BK,CAAM,EAChCP,~~EAAuBd~~,EAAM,~~OAASU~~,EAAQ,MAAM,CACrD,EAAG,~~CAACV~~,CAAK,CAAC,~~EAGTsB~~,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,iBAAA,CAAiB,MAAO,CAAE,~~GAAGrB~~,GAAkB,MAAO,CAAC,CAACI,EACxD,SAAA,~~CAAAe~~,EAAAA,KAAC,MAAA,CAAI,UAAU,kBACb,SAAA,CAAAZ,GAAS,IAAI,CAACe,EAAMC,IACpBC,EAAAA,IAAC,OAAgB,MAAO,CAAE,OAAQ,CAAA,EACjC,SAAAA,EAAAA,IAACC,EAAAA,IAAA,CACA,QAASC,EAAAA,QAAY,aACpBJ,EAAK,eAAiBA,EAAK,MAC3B,EAAA,EAED,aAAc,IACbE,EAAAA,IAACG,EAAAA,QAAA,CACA,cAAY,mBACZ,MAAO,GACP,OAAQ,GACR,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,~~CACd5B~~,~~EAAauB~~,CAAI,CAClB,CAAA,CAAA,EAID,SAAAA,EAAK,eAAiBA,EAAK,KAAA,CAAA,CAC7B,EAnBSC,CAoBV,CACA,EACA,CAAC,CAACb,GACFc,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,OAAQ,EACR,cAAe,MAAA,EAGhB,SAAAA,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAM,GACN,UAAU,SACV,~~eACCvB~~,~~GAAyBO~~,EAAuB,OAAS,QACvD,MAAA,CAAI,MAAO,CAAE,QAAS,OACrB,SAAAA,EAAuB,IAAI,CAACiB,EAAON,IACnCC,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CAAE,MAAOC,SAAO,KAAK,KAAA,EAG3B,SAAAF,CAAA,EAFIN,CAAA,CAIN,EACF,EACG,OAGL,SAAAC,EAAAA,IAACM,EAAAA,aAAY,MAAOC,EAAAA,OAAO,QAAQ,YACjC,SAAA,IAAIrB,CAAmB,OAAA,CACzB,CAAA,CAAA,CACD,CAAA,~~EAIDb~~,EAAM,SAAW,~~GACjB2B~~,EAAAA,IAAC,MAAA,~~CACA~~,MAAO,CAAE,~~MAAOlB~~,~~GAAoByB,~~EAAAA,OAAO,QAAQ,WAAA,~~EAElD~~,~~SAAA5B~~,CAAA,CAAA,~~CACF,~~EAEF,QAEC,MAAA,CACA,~~SAAAqB~~,EAAAA,IAACQ,EAAAA,QAAA,CACA,MAAO,CACN,~~UAAW9B~~,EAAmB,iBAAmB,cAAA,EAElD,MACCD,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,OACCA,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,~~MAAO8B~~,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACvB,CACD,CAAA,EACD,EACC,CAAC,~~CAAC3B~~,~~GACFe~~,OAACc,EAAAA,YAAA,CAAY,QAAS,GACpB,SAAA,CAAA,CAAC,~~CAAC7B~~,~~GAAgBoB~~,EAAAA,IAACU,EAAAA,SAAU,MAAO,GAAI,OAAQ,GAAI,~~EACpD9B~~,CAAA,CAAA,CACF,CAAA,EAEF,CAEF"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\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":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=o(r),p=i.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=o(r),n=i.default.div`
 	position:
 	// if allowEvents is true, then position is relative, else position is absolute
 		${e=>e?.allowEvents||e?.isChildLoading?"relative":"absolute"};
@@ -8,10 +8,9 @@
 	height: 100%;
 	z-index: 2;
 	cursor: ${e=>e?.disabled?"not-allowed":"pointer"};
-`,n=i.default.div`
-	margin-top: 4px;
+`,a=i.default.div`
+	margin-top: 8px;
 	margin-bottom: 8px;
-	clip-path: inset(0px -20px -20px -20px);
 `;i.default.div`
 	display: flex;
 	flex-direction: row;
@@ -20,7 +19,7 @@
 	background: ${t.COLORS.surface.hovered};
 	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 4px;
-`;const a=i.default.div`
+`;const p=i.default.div`
 	width: 360px;
 	height: 100%;
 	padding: 8px;
@@ -35,5 +34,5 @@
 		flex-wrap: wrap;
 		align-items: center;
 	}
-`;exports.ChipInputWrapper=a;exports.OpenDropdownContainer=n;exports.OverLapAbs=p;
+`;exports.ChipInputWrapper=p;exports.OpenDropdownContainer=a;exports.OverLapAbs=n;
 //# sourceMappingURL=Common.styled.js.map

package/dist/cjs/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: ~~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":"0NAGaA,EAAaC,EAAAA,QAAO;AAAA;AAAA;AAAA,IAO5BC,GACHA,GAAO,aAAeA,GAAO,eAAiB,WAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM3DA,GAAWA,GAAO,SAAW,cAAgB,SAAU;AAAA,EAGtDC,EAAwBF,EAAAA,QAAO;AAAA;AAAA;AAAA~~;AAAA~~,~~EAMZA~~,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKxBG,EAAAA,OAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAInC,MAAMC,EAAmBJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQ3BC,GACVA,EAAM,MACH,aAAaE,EAAAA,OAAO,OAAO,SAAS,OAAO,GAC3C,aAAaA,EAAAA,OAAO,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: 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":"0NAGaA,EAAaC,EAAAA,QAAO;AAAA;AAAA;AAAA,IAO5BC,GACHA,GAAO,aAAeA,GAAO,eAAiB,WAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM3DA,GAAWA,GAAO,SAAW,cAAgB,SAAU;AAAA,EAGtDC,EAAwBF,EAAAA,QAAO;AAAA;AAAA;AAAA,EAKZA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKxBG,EAAAA,OAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAInC,MAAMC,EAAmBJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQ3BC,GACVA,EAAM,MACH,aAAaE,EAAAA,OAAO,OAAO,SAAS,OAAO,GAC3C,aAAaA,EAAAA,OAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

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

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

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

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Pe=require("../../../../assets/icons/errorInfo.svg.js"),Ke=require("../../../../assets/icons/refresh-purple.svg.js"),r=require("react"),Ve=require("../../../zeroState/ZeroState.js"),$e=require("../../../../hooks/useOutside.js"),R=require("../../../../constants/Theme.js"),Ne=require("../../hooks/useDropdown.js"),_e=require("./description/Description.js"),ze=require("./menu/FreeFormMenu.js"),Ge=require("./menu/MenuList.js"),Je=require("./menu/SelectAllMenu.js"),Qe=require("./multiSelect/MultiSelectDropdownBottomBar.js"),te=require("./OpennedDropdown.styled.js"),Xe=require("./searchbox/SearchBox.js"),Ye=require("./searchbox/SearchZeroState.js"),V={height:304,width:290},et=({options:q,isSearchable:g,searchPlaceholder:ne,isMultiSelect:l,maxSelections:C,width:I,allowFreeForm:$,height:se,onClose:N,onSelect:re,onSearch:d,version:i,skipSorting:oe,headerRef:ue,hideSelectAll:ce,primaryButtonText:le,onInfiniteScroll:ie,onMultiSelectClear:ae,onDropdownItemClick:E,buttonOptions:de,isSearchLoading:fe,isOptionsLoading:he,optionsErrorState:w,disableSearchOptions:pe,disableSearchedOptionExcept:ge,useDefaultCursor:we,containerStyle:ye={},zeroState:F=void 0,isDraggable:y=!1,onOptionsReorder:O,hideClearButton:Oe=!1,showCheckboxForCustomElement:xe=!1,checkboxActiveColor:A,brandSelectedRow:B})=>{const W=r.useCallback(e=>{if(!y||!l)return e;const t=[],n=[];return e.forEach(u=>{u.options?n.push(u):u.selected?t.push(u):n.push(u)}),[...t,...n]},[y,l]),[j,_]=r.useState(()=>W(q)),z=r.useRef(j),G=r.useRef(!1),H=r.useRef(O);r.useEffect(()=>{_(W(q))},[q,W]),r.useEffect(()=>{z.current=j},[j]),r.useEffect(()=>{H.current=O},[O]),r.useEffect(()=>()=>{G.current&&H.current&&H.current(z.current)},[]);const Se=r.useCallback(e=>{_(e),i==="2.0"?O?.(e):G.current=!0},[O,i]),me=y?j:q,{dropdownOptions:f,search:be,searchedString:s,searchedOptions:x,searchError:Le,retrySearch:Te,onApplyHandler:M,selectAllHandler:Re,onMultiSelectClear:qe,onFreeFormSelect:Ce,onMultiSelectApply:Ee,latestDropdownOptionsRef:je,getSelectedOptions:ke,getCurrentSelectionCount:De}=Ne.useDropdown(i,me,re,oe||y,l,d,pe,ge,C),[Ie,v]=r.useState(I??V.width),[p,Z]=r.useState(null),[k,J]=r.useState(-1),S=r.useRef(null),Q=r.useRef([]),U=r.useRef(null);$e.useOutside(S,()=>{if(Z(null),l&&i==="2.0"){const e=ke(je.current);N?.(e)}else N?.(f)},[ue,Q]),r.useEffect(()=>{const e=setTimeout(()=>{S.current&&S.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]);const Fe=e=>{const t=[];return e.forEach(n=>{if(n.options)n.options.forEach(o=>{o.disabled||t.push(o)});else{const u=n;u.disabled||t.push(u)}}),t};r.useEffect(()=>{const e=n=>{const o=Fe(s&&d?x:f);if(o.length!==0){if(n.key==="ArrowDown")n.preventDefault(),J(a=>{const L=a<o.length-1?a+1:0;return setTimeout(()=>{const T=U.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="ArrowUp")n.preventDefault(),J(a=>{const L=a>0?a-1:o.length-1;return setTimeout(()=>{const T=U.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="Enter"&&k>=0){n.preventDefault();const a=o[k];a&&(M({...a,selected:!a.selected}),E&&E(a))}}},t=S.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[k,s,x,f,d,M,E]);const h=se??V.height,X=typeof h=="number"?g&&l?h-96:g&&!l||!g&&l?h-48:h:h;function Ae(e,t){Z(e&&t?{title:e,description:t}:null)}r.useEffect(()=>{const e=I??V.width;if(p===null)v(e);else if(typeof e=="number")v(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;v(t)}},[p]);const D=[],P=(e=>{if(!l||!C&&C!==0)return e;const n=De(f)>=C;return n?e.map(u=>{if(u.options)return{...u,options:u.options.map(o=>({...o,disabled:o.disabled||!o.selected&&n}))};{const o=u;return{...o,disabled:o.disabled||!o.selected&&n}}}):e})((s&&d?x:f).map(e=>{if(s&&!d)if(e.options){const t={...e};return t.options=t.options.filter(n=>n.label?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||n.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),K=!!g&&s&&P.length===0,m=!s&&!!he,b=!s&&!!w&&!m,Be=!s&&!P.length&&!m&&!b,Y=m||b||Be,We=F?.title||"No results found",He=F?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",Me=w?.title||"Failed to load options",ve=w?.subTitle||"Something went wrong while fetching the list. Please try again",Ze={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:R.COLORS.background.inverseLight,customIconColor:R.COLORS.background.inverseLight,LeadingIcon:Ke.default},ee={IconHolderStyle:{background:R.COLORS.background.negative.light},Icon:c.jsx(Pe.default,{color:R.COLORS.content.negative,width:24,height:24}),...w};ee.actionButton={...Ze,...w?.actionButton??{}};const Ue=m?void 0:b?ee:F;return c.jsxs(te.OpennedDropdownContainer,{version:i,ref:S,tabIndex:-1,style:{width:Ie,...ye,outline:"none"},children:[c.jsxs("div",{style:{width:p?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!g&&c.jsx(Xe.SearchBox,{onSearch:be,version:i,placeholder:ne}),Y?c.jsx("div",{style:{height:h,display:"flex",background:R.COLORS.background.base},children:c.jsx(Ve.ZeroState,{...Ue??{},isLoading:m,title:b?Me:We,subTitle:b?ve:He})}):c.jsxs(te.MenuListContainer,{minHeight:h,maxHeight:X,ref:U,children:[!!l&&!K&&!ce&&c.jsx(Je.SelectAllMenu,{version:i,options:s&&d?x:f,onSelect:Re,checkboxActiveColor:A,brandSelectedRow:B}),!$&&K&&c.jsx(Ye.SearchZeroState,{isLoading:fe,errorMessage:Le,onRetry:Te,height:X,searchedString:s,containerWidth:I,version:i}),$&&(K||!!D.length&&D.every(e=>e===!1))&&c.jsx(ze.FreeFormMenu,{version:i,isMultiSelect:l,onSelect:Ce,searchedString:s,checkboxActiveColor:A,brandSelectedRow:B}),c.jsx(Ge.MenuList,{onInfiniteScroll:ie,onDropdownItemClick:E,version:i,onSelect:M,showDescription:Ae,isMultiSelect:l,options:P,useDefaultCursor:we,ref:Q,focusedIndex:k,isDraggable:y,onOptionsReorder:Se,showCheckboxForCustomElement:xe,checkboxActiveColor:A,brandSelectedRow:B})]}),!!l&&!Y&&i!=="2.0"&&c.jsx(Qe.default,{onClear:()=>{qe(),ae?.()},onApply:Ee,list:s&&d?x:f,buttonText:le,buttonOptions:de,hideClearButton:Oe})]}),!!p&&c.jsx(_e.Description,{title:p.title,description:p.description,version:i})]})};exports.OpenedDropdown=et;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Ue=require("../../../../assets/icons/errorInfo.svg.js"),Pe=require("../../../../assets/icons/refresh-purple.svg.js"),r=require("react"),Ke=require("../../../zeroState/ZeroState.js"),Ve=require("../../../../hooks/useOutside.js"),R=require("../../../../constants/Theme.js"),$e=require("../../hooks/useDropdown.js"),Ne=require("./description/Description.js"),_e=require("./menu/FreeFormMenu.js"),ze=require("./menu/MenuList.js"),Ge=require("./menu/SelectAllMenu.js"),Je=require("./multiSelect/MultiSelectDropdownBottomBar.js"),te=require("./OpennedDropdown.styled.js"),Qe=require("./searchbox/SearchBox.js"),Xe=require("./searchbox/SearchZeroState.js"),V={height:304,width:290},Ye=({options:q,isSearchable:g,isMultiSelect:i,maxSelections:C,width:I,allowFreeForm:$,height:ne,onClose:N,onSelect:se,onSearch:d,version:l,skipSorting:re,headerRef:oe,hideSelectAll:ue,primaryButtonText:ce,onInfiniteScroll:ie,onMultiSelectClear:le,onDropdownItemClick:E,buttonOptions:ae,isSearchLoading:de,isOptionsLoading:fe,optionsErrorState:w,disableSearchOptions:he,disableSearchedOptionExcept:pe,useDefaultCursor:ge,containerStyle:we={},zeroState:F=void 0,isDraggable:y=!1,onOptionsReorder:O,hideClearButton:ye=!1,showCheckboxForCustomElement:Oe=!1,checkboxActiveColor:A,brandSelectedRow:B})=>{const W=r.useCallback(e=>{if(!y||!i)return e;const t=[],n=[];return e.forEach(u=>{u.options?n.push(u):u.selected?t.push(u):n.push(u)}),[...t,...n]},[y,i]),[j,_]=r.useState(()=>W(q)),z=r.useRef(j),G=r.useRef(!1),H=r.useRef(O);r.useEffect(()=>{_(W(q))},[q,W]),r.useEffect(()=>{z.current=j},[j]),r.useEffect(()=>{H.current=O},[O]),r.useEffect(()=>()=>{G.current&&H.current&&H.current(z.current)},[]);const xe=r.useCallback(e=>{_(e),l==="2.0"?O?.(e):G.current=!0},[O,l]),Se=y?j:q,{dropdownOptions:f,search:me,searchedString:s,searchedOptions:x,searchError:be,retrySearch:Le,onApplyHandler:M,selectAllHandler:Te,onMultiSelectClear:Re,onFreeFormSelect:qe,onMultiSelectApply:Ce,latestDropdownOptionsRef:Ee,getSelectedOptions:je,getCurrentSelectionCount:ke}=$e.useDropdown(l,Se,se,re||y,i,d,he,pe,C),[De,v]=r.useState(I??V.width),[p,Z]=r.useState(null),[k,J]=r.useState(-1),S=r.useRef(null),Q=r.useRef([]),U=r.useRef(null);Ve.useOutside(S,()=>{if(Z(null),i&&l==="2.0"){const e=je(Ee.current);N?.(e)}else N?.(f)},[oe,Q]),r.useEffect(()=>{const e=setTimeout(()=>{S.current&&S.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]);const Ie=e=>{const t=[];return e.forEach(n=>{if(n.options)n.options.forEach(o=>{o.disabled||t.push(o)});else{const u=n;u.disabled||t.push(u)}}),t};r.useEffect(()=>{const e=n=>{const o=Ie(s&&d?x:f);if(o.length!==0){if(n.key==="ArrowDown")n.preventDefault(),J(a=>{const L=a<o.length-1?a+1:0;return setTimeout(()=>{const T=U.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="ArrowUp")n.preventDefault(),J(a=>{const L=a>0?a-1:o.length-1;return setTimeout(()=>{const T=U.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="Enter"&&k>=0){n.preventDefault();const a=o[k];a&&(M({...a,selected:!a.selected}),E&&E(a))}}},t=S.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[k,s,x,f,d,M,E]);const h=ne??V.height,X=typeof h=="number"?g&&i?h-96:g&&!i||!g&&i?h-48:h:h;function Fe(e,t){Z(e&&t?{title:e,description:t}:null)}r.useEffect(()=>{const e=I??V.width;if(p===null)v(e);else if(typeof e=="number")v(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;v(t)}},[p]);const D=[],P=(e=>{if(!i||!C&&C!==0)return e;const n=ke(f)>=C;return n?e.map(u=>{if(u.options)return{...u,options:u.options.map(o=>({...o,disabled:o.disabled||!o.selected&&n}))};{const o=u;return{...o,disabled:o.disabled||!o.selected&&n}}}):e})((s&&d?x:f).map(e=>{if(s&&!d)if(e.options){const t={...e};return t.options=t.options.filter(n=>n.label?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||n.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),K=!!g&&s&&P.length===0,m=!s&&!!fe,b=!s&&!!w&&!m,Ae=!s&&!P.length&&!m&&!b,Y=m||b||Ae,Be=F?.title||"No results found",We=F?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",He=w?.title||"Failed to load options",Me=w?.subTitle||"Something went wrong while fetching the list. Please try again",ve={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:R.COLORS.background.inverseLight,customIconColor:R.COLORS.background.inverseLight,LeadingIcon:Pe.default},ee={IconHolderStyle:{background:R.COLORS.background.negative.light},Icon:c.jsx(Ue.default,{color:R.COLORS.content.negative,width:24,height:24}),...w};ee.actionButton={...ve,...w?.actionButton??{}};const Ze=m?void 0:b?ee:F;return c.jsxs(te.OpennedDropdownContainer,{version:l,ref:S,tabIndex:-1,style:{width:De,...we,outline:"none"},children:[c.jsxs("div",{style:{width:p?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!g&&c.jsx(Qe.SearchBox,{onSearch:me,version:l}),Y?c.jsx("div",{style:{height:h,display:"flex",background:R.COLORS.background.base},children:c.jsx(Ke.ZeroState,{...Ze??{},isLoading:m,title:b?He:Be,subTitle:b?Me:We})}):c.jsxs(te.MenuListContainer,{minHeight:h,maxHeight:X,ref:U,children:[!!i&&!K&&!ue&&c.jsx(Ge.SelectAllMenu,{version:l,options:s&&d?x:f,onSelect:Te,checkboxActiveColor:A,brandSelectedRow:B}),!$&&K&&c.jsx(Xe.SearchZeroState,{isLoading:de,errorMessage:be,onRetry:Le,height:X,searchedString:s,containerWidth:I,version:l}),$&&(K||!!D.length&&D.every(e=>e===!1))&&c.jsx(_e.FreeFormMenu,{version:l,isMultiSelect:i,onSelect:qe,searchedString:s,checkboxActiveColor:A,brandSelectedRow:B}),c.jsx(ze.MenuList,{onInfiniteScroll:ie,onDropdownItemClick:E,version:l,onSelect:M,showDescription:Fe,isMultiSelect:i,options:P,useDefaultCursor:ge,ref:Q,focusedIndex:k,isDraggable:y,onOptionsReorder:xe,showCheckboxForCustomElement:Oe,checkboxActiveColor:A,brandSelectedRow:B})]}),!!i&&!Y&&l!=="2.0"&&c.jsx(Je.default,{onClear:()=>{Re(),le?.()},onApply:Ce,list:s&&d?x:f,buttonText:ce,buttonOptions:ae,hideClearButton:ye})]}),!!p&&c.jsx(Ne.Description,{title:p.title,description:p.description,version:l})]})};exports.OpenedDropdown=Ye;
 //# sourceMappingURL=OpennedDropdown.js.map