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

@bikdotai/bik-component-library 0.0.849-beta.0 → 0.0.849-beta.2

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),j=require("react-calendar"),S=require("./DatePicker.styled.js"),v=require("./TimePicker.js"),w=require("../button/Button.js"),A=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},H=A(j),q=e=>{const[i,c]=r.useState(),[l,m]=r.useState("00:00"),[o,f]=r.useState("23:59");r.useEffect(()=>{if(e.selectedDates){if(c(e.selectedDates),e.showTimePicker){if(e.selectedDates[0]){const t=e.selectedDates[0].getHours(),n=e.selectedDates[0].getMinutes();m(`${t.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`)}if(e.selectedDates[1]){const t=e.selectedDates[1].getHours(),n=e.selectedDates[1].getMinutes();f(`${t.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`)}}}else c([null,null]),e.showTimePicker&&(m("00:00"),f("23:59"))},[e.selectedDates,e.showTimePicker]);const[d,T]=r.useState(e.selectedDate),g=e.maxRangeLimit===null?null:e.maxRangeLimit===void 0?180:e.maxRangeLimit;function k(t){if(e.showTimePicker&&l){const[n,a]=l.split(":").map(Number);t[0].setHours(n,a,0,0)}if(e.showTimePicker&&o){const[n,a]=o.split(":").map(Number);t[1].setHours(n,a,0,0)}e.showTimePicker||e.onSelectRange?.(t[0],t[1]),c([t[0],t[1]])}function h(t,n){if(Array.isArray(i)&&i[0]&&i[1]){if(t){const[a,u]=t.split(":").map(Number);i[0].setHours(a,u,0,0)}if(n){const[a,u]=n.split(":").map(Number);i[1].setHours(a,u,0,0)}e.showTimePicker||e.onSelectRange?.(i[0],i[1])}}function y(t){m(t),h(t,o)}function R(t){f(t),h(l,t)}function x(t){if(e.showTimePicker&&l){const[n,a]=l.split(":").map(Number);t.setHours(n,a,0,0)}e.showTimePicker||e.onSelectDate?.(t),T(t)}const P=({date:t,view:n})=>{if(!Array.isArray(i))return!1;const[a,u]=i;if(a&&!u&&g!==null){const D=Math.round((t-a)/864e5);return n==="month"&&(D<-g||D>g)}return!1};function C(t){if(!Array.isArray(i)){c([t,null]);return}const[n,a]=i;c(n?n&&!a?[n,t]:[t,null]:[t,null])}function b(){e.selectRange&&Array.isArray(i)&&i[0]&&i[1]?e.onSelectRange?.(i[0],i[1]):!e.selectRange&&d&&e.onSelectDate?.(d)}return s.jsxs(S.PickerContainer,{selectRange:e.selectRange,children:[s.jsx(S.DatePickerTippyOverride,{}),s.jsx(H.default,{onChange:t=>{e.selectRange&&e.onSelectRange?k(t):e.onSelectDate&&x(t)},tileDisabled:P,onClickDay:C,value:e.selectRange?i:d,selectRange:e.selectRange,minDate:e.minDate,maxDate:e.maxDate},"bik-calendar"),e.showTimePicker&&e.selectRange&&s.jsxs(s.Fragment,{children:[s.jsx(v.TimePicker,{fromTime:l,toTime:o,onFromTimeChange:y,onToTimeChange:R,timeInterval:e.timeInterval}),s.jsx("div",{className:"date-picker-save-button-container",style:{display:"flex",justifyContent:"flex-end",padding:"16px"},children:s.jsx(w.Button,{buttonType:"primary",size:"small",buttonText:"Save",onClick:b})})]})]})};exports.DatePicker=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),r=require("react"),b=require("react-calendar"),j=require("./DatePicker.styled.js"),v=require("./TimePicker.js"),w=require("../button/Button.js"),A=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},H=A(b),q=e=>{const[i,s]=r.useState(),[l,m]=r.useState("00:00"),[o,f]=r.useState("23:59");r.useEffect(()=>{if(e.selectedDates){if(s(e.selectedDates),e.showTimePicker){if(e.selectedDates[0]){const t=e.selectedDates[0].getHours(),n=e.selectedDates[0].getMinutes();m(`${t.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`)}if(e.selectedDates[1]){const t=e.selectedDates[1].getHours(),n=e.selectedDates[1].getMinutes();f(`${t.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`)}}}else s([null,null]),e.showTimePicker&&(m("00:00"),f("23:59"))},[e.selectedDates,e.showTimePicker]);const[d,S]=r.useState(e.selectedDate),g=e.maxRangeLimit===null?null:e.maxRangeLimit===void 0?180:e.maxRangeLimit;function T(t){if(e.showTimePicker&&l){const[n,a]=l.split(":").map(Number);t[0].setHours(n,a,0,0)}if(e.showTimePicker&&o){const[n,a]=o.split(":").map(Number);t[1].setHours(n,a,0,0)}e.showTimePicker||e.onSelectRange?.(t[0],t[1]),s([t[0],t[1]])}function h(t,n){if(Array.isArray(i)&&i[0]&&i[1]){if(t){const[a,u]=t.split(":").map(Number);i[0].setHours(a,u,0,0)}if(n){const[a,u]=n.split(":").map(Number);i[1].setHours(a,u,0,0)}e.showTimePicker||e.onSelectRange?.(i[0],i[1])}}function k(t){m(t),h(t,o)}function R(t){f(t),h(l,t)}function y(t){if(e.showTimePicker&&l){const[n,a]=l.split(":").map(Number);t.setHours(n,a,0,0)}e.showTimePicker||e.onSelectDate?.(t),S(t)}const x=({date:t,view:n})=>{if(!Array.isArray(i))return!1;const[a,u]=i;if(a&&!u&&g!==null){const D=Math.round((t-a)/864e5);return n==="month"&&(D<-g||D>g)}return!1};function P(t){if(!Array.isArray(i)){s([t,null]);return}const[n,a]=i;s(n?n&&!a?[n,t]:[t,null]:[t,null])}function C(){e.selectRange&&Array.isArray(i)&&i[0]&&i[1]?e.onSelectRange?.(i[0],i[1]):!e.selectRange&&d&&e.onSelectDate?.(d)}return c.jsxs(j.PickerContainer,{selectRange:e.selectRange,children:[c.jsx(H.default,{onChange:t=>{e.selectRange&&e.onSelectRange?T(t):e.onSelectDate&&y(t)},tileDisabled:x,onClickDay:P,value:e.selectRange?i:d,selectRange:e.selectRange,minDate:e.minDate,maxDate:e.maxDate},"bik-calendar"),e.showTimePicker&&e.selectRange&&c.jsxs(c.Fragment,{children:[c.jsx(v.TimePicker,{fromTime:l,toTime:o,onFromTimeChange:k,onToTimeChange:R,timeInterval:e.timeInterval}),c.jsx("div",{className:"date-picker-save-button-container",style:{display:"flex",justifyContent:"flex-end",padding:"16px"},children:c.jsx(w.Button,{buttonType:"primary",size:"small",buttonText:"Save",onClick:C})})]})]})};exports.DatePicker=q;
 //# sourceMappingURL=DatePicker.js.map

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":"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAkBhBA,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,EAGrBI,EAA0BC,EAAAA;AAAAA,qCACFP,CAAe;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\n\t/* Clip content to respect border-radius /\n\t> :first-of-type {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/ While picking the end date, the tile under the cursor (the\n\t\t\t\t prospective endpoint) should match the selected start date —\n\t\t\t\t brand background + white text — instead of falling through to\n\t\t\t\t the generic grey :hover above. The in-between preview stays\n\t\t\t\t brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel"],"mappings":"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"}

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/input/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Ee=require("../../assets/icons/info.svg.js"),l=require("react"),y=require("./Input-helper.js"),ne=require("../TypographyStyle.js"),ie=require("../../constants/Theme.js"),Le=require("../../assets/icons/errorInfo.svg.js"),we=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js"),le=require("../button/Button.js"),He=require("../tooltips/Tooltip.js"),se=l.forwardRef((e,re)=>{const{placeholder:H,leftIcon:R,rightIcon:v,labelText:T,maxCharLimit:a,isRequired:_,hintText:k,type:c,state:j,validate:ae,variant:o,button:h,suffixText:p,prefixText:A,onChangeText:O,value:x,noErrorHint:oe,reset:B,rangeValidation:ce,noKeyDownChange:ue,version:he,noMaxCharCheck:F,labelElement:q,autoGrow:b,minHeight:S,maxHeight:de,labelTextBold:fe,truncateText:xe,maxCharLimitPosition:D,maxCharStyle:P,hightlightInputColor:ge,onKeyDownEvent:z,hideInputHeader:me,hideBorder:ye,inputWrapperStyles:Ie,minCharsToTrigger:K,maxCharAlignment:Ce,isDisabled:N=!1,solidDisabled:V=!1,allowUnsafeInput:ve,leftIconStyle:Te}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},W=R?.icon,X=v?.icon,[M,I]=l.useState(!1),[je,E]=l.useState(!1),[d,U]=l.useState(),G=o==="x-small"?"12px":o==="small"?"18px":"22px",C=l.useContext(we.InputStyleContext),[Y,L]=l.useState(""),be=l.useRef(null),r=re??be;l.useEffect(()=>{L(x||""),!x&&b&&(r.current.style.height=S||"48px")},[x]),l.useEffect(()=>{r.current&&e.onReferenceInit?.(r.current)},[r]),l.useEffect(()=>{const t=r.current;if(t&&["phonenumber","zip","number"].includes(c))return t.addEventListener("wheel",Q,{passive:!1}),()=>{t.removeEventListener("wheel",Q)}},[]),l.useEffect(()=>{B&&L("")},[B]),l.useEffect(()=>{E(!!e.isActive),e.isActive&&r.current?.focus()},[e.isActive]),l.useEffect(()=>{U(e.errorMessage)},[e.errorMessage]),l.useEffect(()=>{I(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&I(!0),e.state==="active"&&r.current?.focus()},[e.state,d]),l.useEffect(()=>{I(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{y.isFunction(t)&&t(...i)},$=()=>c==="zip"?6:2e3,J=t=>{const i=a!==0?a:$(),g=[8],m=K,u=t.target.value;z&&(!u.length||u.length>=m)&&z(t),!ue&&(!u.length||u.length>=m)&&O(x||"",t),!F&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},Q=t=>{t.preventDefault()},Z=t=>{let i=t.target.value;const g=a!==0?a+1:$(),m=K;if(!ve&&y.shouldSanitizeForType(c)&&(i=y.sanitizeUnsafeInput(i)),!F&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||L(i||""),m&&i&&i.length<m)return;O(i,t),b&&(r.current.style.height=`${r.current.scrollHeight}px`,i||(r.current.style.height=S||"48px"));const u=ae||y.validateInput;if(!u||!y.isFunction(u))return;const[Se,Me]=u(i,c,ce);I(!Se),U(e.errorMessage?e.errorMessage:Me)},ee=t=>{e.skipFocus||E(!0),f(e.onFocus?.(t))},te=t=>{e.skipFocus||E(!1),f(e.onBlur?.(t))},w=()=>n.jsxs(n.Fragment,{children:[c!=="multiline"&&n.jsx("input",{className:xe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:r,disabled:N,type:["phonenumber","zip","number"].includes(c)?"number":c,value:Y,onFocus:t=>ee(t),onBlur:t=>te(t),placeholder:H||"Enter here",onChange:Z,onClick:t=>f(e.onClick),onKeyDown:t=>J(t)}),c==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:Y,ref:r,onFocus:t=>ee(t),onBlur:t=>te(t),onClick:t=>f(e.onClick),disabled:N,placeholder:H||"Enter here",onChange:Z,onKeyDown:t=>J(t),maxLength:a>0?a:void 0})]});return n.jsxs(s.RootContainer,{width:e.width,height:e.height,state:j,solidDisabled:V,type:c,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!oe&&(!!k||!!d)&&n.jsxs(s.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(Le.default,{width:16,height:16}),d||k]}),a>0&&D==="BOTTOM"&&n.jsxs(s.MaxCharStyle,{position:"BOTTOM",style:P,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(s.InputWrapper,{variant:o,state:j,solidDisabled:V,width:e.width,isActive:j==="active"||je,isInvalid:M,style:C?.InputWrapper??Ie??{},version:he,height:e.height,hightlightInputColor:ge,hideBorder:ye,children:[!!W&&n.jsx(s.IconHolder,{variant:o,iconSize:G,onClick:()=>f(R?.callback),isLeft:!0,style:{...C?.IconHolder??{},...Te},children:n.jsx(W,{})}),!!A&&n.jsx(s.PrefixHolder,{variant:o,children:A}),o==="default"&&n.jsx(s.InputContainer,{height:e.height,type:e.type,minHeight:S,maxHeight:de,autoGrow:b,children:w()}),o==="small"&&n.jsx(s.InputContainerSmall,{height:e.height,type:e.type,children:w()}),o==="x-small"&&n.jsx(s.InputContainerXSmall,{height:e.height,type:e.type,children:w()}),!!X&&n.jsx(s.IconHolder,{variant:o,iconSize:G,onClick:()=>f(v?.callback),isLeft:!1,"data-test":v?.["data-test"],children:n.jsx(X,{})}),!!p&&n.jsx(s.SuffixHolder,{variant:o,children:p}),h&&h.text&&n.jsx(le.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(le.Button,{...h.buttonProps})]}),!me&&(!!T||!!a)&&n.jsxs(s.InputHeader,{invalid:M,maxCharAlignment:Ce,children:[q&&q,n.jsxs("div",{className:"label__container",children:[fe?n.jsxs(ne.TitleSmall,{children:[T,_?n.jsx("span",{children:"*"}):""]}):n.jsxs(ne.BodySecondary,{children:[T,_?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(He.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Ee.default,{style:{marginTop:-3},width:18,height:18,color:M?ie.COLORS.content.negative:ie.COLORS.content.primary})})})]}),a>0&&D==="TOP"&&n.jsxs(s.MaxCharStyle,{style:P,children:[(x??"").toString()?.length??0,"/",a]})]})]})});se.displayName="Input";exports.Input=se;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Me=require("../../assets/icons/info.svg.js"),r=require("react"),y=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),Ee=require("../../assets/icons/errorInfo.svg.js"),Le=require("./context/InputStyleProvider.js"),l=require("./Input.styled.js"),ie=require("../button/Button.js"),we=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,le)=>{const{placeholder:H,leftIcon:R,rightIcon:v,labelText:T,maxCharLimit:a,isRequired:_,hintText:k,type:c,state:j,validate:se,variant:o,button:h,suffixText:p,prefixText:A,onChangeText:O,value:x,noErrorHint:ae,reset:B,rangeValidation:oe,noKeyDownChange:ce,version:ue,noMaxCharCheck:F,labelElement:q,autoGrow:b,minHeight:S,maxHeight:he,labelTextBold:de,truncateText:fe,maxCharLimitPosition:D,maxCharStyle:P,hightlightInputColor:xe,onKeyDownEvent:z,hideInputHeader:ge,hideBorder:me,inputWrapperStyles:ye,minCharsToTrigger:K,maxCharAlignment:Ie,isDisabled:N=!1,allowUnsafeInput:Ce,leftIconStyle:ve}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},V=R?.icon,W=v?.icon,[M,I]=r.useState(!1),[Te,E]=r.useState(!1),[d,X]=r.useState(),U=o==="x-small"?"12px":o==="small"?"18px":"22px",C=r.useContext(Le.InputStyleContext),[G,L]=r.useState(""),je=r.useRef(null),s=le??je;r.useEffect(()=>{L(x||""),!x&&b&&(s.current.style.height=S||"48px")},[x]),r.useEffect(()=>{s.current&&e.onReferenceInit?.(s.current)},[s]),r.useEffect(()=>{const t=s.current;if(t&&["phonenumber","zip","number"].includes(c))return t.addEventListener("wheel",J,{passive:!1}),()=>{t.removeEventListener("wheel",J)}},[]),r.useEffect(()=>{B&&L("")},[B]),r.useEffect(()=>{E(!!e.isActive),e.isActive&&s.current?.focus()},[e.isActive]),r.useEffect(()=>{X(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{I(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&I(!0),e.state==="active"&&s.current?.focus()},[e.state,d]),r.useEffect(()=>{I(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{y.isFunction(t)&&t(...i)},Y=()=>c==="zip"?6:2e3,$=t=>{const i=a!==0?a:Y(),g=[8],m=K,u=t.target.value;z&&(!u.length||u.length>=m)&&z(t),!ce&&(!u.length||u.length>=m)&&O(x||"",t),!F&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},J=t=>{t.preventDefault()},Q=t=>{let i=t.target.value;const g=a!==0?a+1:Y(),m=K;if(!Ce&&y.shouldSanitizeForType(c)&&(i=y.sanitizeUnsafeInput(i)),!F&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||L(i||""),m&&i&&i.length<m)return;O(i,t),b&&(s.current.style.height=`${s.current.scrollHeight}px`,i||(s.current.style.height=S||"48px"));const u=se||y.validateInput;if(!u||!y.isFunction(u))return;const[be,Se]=u(i,c,oe);I(!be),X(e.errorMessage?e.errorMessage:Se)},Z=t=>{e.skipFocus||E(!0),f(e.onFocus?.(t))},ee=t=>{e.skipFocus||E(!1),f(e.onBlur?.(t))},w=()=>n.jsxs(n.Fragment,{children:[c!=="multiline"&&n.jsx("input",{className:fe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:s,disabled:N,type:["phonenumber","zip","number"].includes(c)?"number":c,value:G,onFocus:t=>Z(t),onBlur:t=>ee(t),placeholder:H||"Enter here",onChange:Q,onClick:t=>f(e.onClick),onKeyDown:t=>$(t)}),c==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:G,ref:s,onFocus:t=>Z(t),onBlur:t=>ee(t),onClick:t=>f(e.onClick),disabled:N,placeholder:H||"Enter here",onChange:Q,onKeyDown:t=>$(t),maxLength:a>0?a:void 0})]});return n.jsxs(l.RootContainer,{width:e.width,height:e.height,state:j,type:c,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!ae&&(!!k||!!d)&&n.jsxs(l.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(Ee.default,{width:16,height:16}),d||k]}),a>0&&D==="BOTTOM"&&n.jsxs(l.MaxCharStyle,{position:"BOTTOM",style:P,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(l.InputWrapper,{variant:o,state:j,width:e.width,isActive:j==="active"||Te,isInvalid:M,style:C?.InputWrapper??ye??{},version:ue,height:e.height,hightlightInputColor:xe,hideBorder:me,children:[!!V&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(R?.callback),isLeft:!0,style:{...C?.IconHolder??{},...ve},children:n.jsx(V,{})}),!!A&&n.jsx(l.PrefixHolder,{variant:o,children:A}),o==="default"&&n.jsx(l.InputContainer,{height:e.height,type:e.type,minHeight:S,maxHeight:he,autoGrow:b,children:w()}),o==="small"&&n.jsx(l.InputContainerSmall,{height:e.height,type:e.type,children:w()}),o==="x-small"&&n.jsx(l.InputContainerXSmall,{height:e.height,type:e.type,children:w()}),!!W&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(v?.callback),isLeft:!1,"data-test":v?.["data-test"],children:n.jsx(W,{})}),!!p&&n.jsx(l.SuffixHolder,{variant:o,children:p}),h&&h.text&&n.jsx(ie.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(ie.Button,{...h.buttonProps})]}),!ge&&(!!T||!!a)&&n.jsxs(l.InputHeader,{invalid:M,maxCharAlignment:Ie,children:[q&&q,n.jsxs("div",{className:"label__container",children:[de?n.jsxs(te.TitleSmall,{children:[T,_?n.jsx("span",{children:"*"}):""]}):n.jsxs(te.BodySecondary,{children:[T,_?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(we.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Me.default,{style:{marginTop:-3},width:18,height:18,color:M?ne.COLORS.content.negative:ne.COLORS.content.primary})})})]}),a>0&&D==="TOP"&&n.jsxs(l.MaxCharStyle,{style:P,children:[(x??"").toString()?.length??0,"/",a]})]})]})});re.displayName="Input";exports.Input=re;
 //# sourceMappingURL=Input.js.map