npm - @bikdotai/bik-component-library - Versions diffs - 0.0.868-beta.10 → 0.0.868-beta.12 - Mend

@bikdotai/bik-component-library 0.0.868-beta.10 → 0.0.868-beta.12

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

package/README.md CHANGED Viewed

@@ -10,9 +10,6 @@
 - [Editor](docs/editor/01-overview.md) — the rich-text editor: props, ref API, toolbar, email mode, customisation
 - [FunnelChart & ComparisonBarChart](docs/charts/funnel-and-comparison-charts.md) — the analytics charts behind the Helpdesk AI Impact tab: branching funnel geometry, the shared chart card/palette/format helpers, and the zero states
 - [Channel Playground](src/components/channel-playground/README.md) — driving the AI on email / WhatsApp / Instagram: the transport seam, the channel skins, and the stream frame protocol
-- [ScheduleBuilder](src/components/schedule-builder/README.md) — the send-now / schedule / recurring picker: the sub-components, the recurrence patch contract, and the run-date maths in `ScheduleHelper`
-- [ComboBox](src/components/combo-box/README.md) — a type-or-pick field: the sanitize / validate / format / filter hooks and why typed text is validated rather than constrained
-- [ChipSelector](src/components/chip-selector/README.md) — chip rows and grids: single vs multi select, `allowEmpty`, and fixed-width chips for grids that must align
 - [Frontend Testing Guide](docs/testing/writing-tests.md) — test authoring, linting, mandate exceptions, required status checks
 ## Testing (Jest + SWC)

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("date-fns"),u=require("react"),q=require("react-calendar"),w=require("../../hooks/useOutside.js"),j=require("../../utils/DateUtils.js"),t=require("../../constants/Theme.js"),x=require("../../assets/icons/calendar.svg.js"),f=require("../TypographyStyle.js"),C=require("./DatePickerWrapper.styled.js"),c=require("./model.js"),P=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},A=P(q),_=({val:e,onChange:S,calendarProps:D,disabled:o,pickerStyles:R,nativeID:p,maxDate:g,minDate:m,dateButtonType:a,dateButtonStyles:L,displayFormat:l,placeholder:h})=>{const[O,i]=u.useState(!1),k=u.useRef(null),d=u.useRef(null);w.useOutside(d,()=>{i(!1)});const n=s=>l?b.format(s,l):s.toLocaleDateString(),y=()=>e?Array.isArray(e)?e?.[0]?.toString()&&e?.[1]?.toString()?`${n(new Date(e[0].toString()))}-${n(new Date(e[1].toString()))}`:`${n(j.default.getPastDate(new Date,30))}-${n(new Date)}`:n(new Date(e.toString())):h??n(new Date);return r.jsxs(r.Fragment,{children:[r.jsxs(C.DateBtn,{id:p,ref:k,bgColor:o?t.COLORS.background.base:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,onClick:()=>i(!O),dateButtonType:a||c.DateButtonType.DEFAULT,style:L,children:[a===c.DateButtonType.LARGE?r.jsx(f.BodyPrimary,{style:{color:o?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:y()}):r.jsx(f.BodySecondary,{style:{color:o?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:y()}),r.jsx(x.default,{width:a===c.DateButtonType.LARGE?24:20,height:a===c.DateButtonType.LARGE?24:20,color:o?t.COLORS.content.inactive:t.COLORS.content.primary})]}),O&&!o&&r.jsx(C.PickerContainer,{ref:d,style:{...R},contentPrimary:t.COLORS.content.primary,subDued:t.COLORS.surface.subdued,brandColor:t.COLORS.background.brand,bgColor:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,children:r.jsx(A.default,{tileClassName:["custom__tile"],className:["custom__calendar"],onChange:s=>{S(s),i(!1)},maxDate:g,minDate:m,value:e?Array.isArray(e)?e.length===2?[new Date(e[0]),new Date(e[1])]:null:new Date(e):null,...D})})]})};exports.DatePickerWrapper=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),m=require("react-calendar"),h=require("../../hooks/useOutside.js"),k=require("../../utils/DateUtils.js"),t=require("../../constants/Theme.js"),b=require("../../assets/icons/calendar.svg.js"),O=require("../TypographyStyle.js"),S=require("./DatePickerWrapper.styled.js"),a=require("./model.js"),w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=w(m),q=({val:e,onChange:d,calendarProps:y,disabled:n,pickerStyles:D,nativeID:C,maxDate:g,minDate:L,dateButtonType:o,dateButtonStyles:f})=>{const[i,c]=s.useState(!1),R=s.useRef(null),u=s.useRef(null);h.useOutside(u,()=>{c(!1)});const l=()=>e?Array.isArray(e)?e?.[0]?.toString()&&e?.[1]?.toString()?`${new Date(e?.[0]?.toString()).toLocaleDateString()}-${new Date(e?.[1]?.toString()).toLocaleDateString()}`:`${k.default.getPastDate(new Date,30).toLocaleDateString()}-${new Date().toLocaleDateString()}`:new Date(e.toString()).toLocaleDateString():new Date().toLocaleDateString();return r.jsxs(r.Fragment,{children:[r.jsxs(S.DateBtn,{id:C,ref:R,bgColor:n?t.COLORS.background.base:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,onClick:()=>c(!i),dateButtonType:o||a.DateButtonType.DEFAULT,style:f,children:[o===a.DateButtonType.LARGE?r.jsx(O.BodyPrimary,{style:{color:n?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:l()}):r.jsx(O.BodySecondary,{style:{color:n?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:l()}),r.jsx(b.default,{width:o===a.DateButtonType.LARGE?24:20,height:o===a.DateButtonType.LARGE?24:20,color:n?t.COLORS.content.inactive:t.COLORS.content.primary})]}),i&&!n&&r.jsx(S.PickerContainer,{ref:u,style:{...D},contentPrimary:t.COLORS.content.primary,subDued:t.COLORS.surface.subdued,brandColor:t.COLORS.background.brand,bgColor:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,children:r.jsx(j.default,{tileClassName:["custom__tile"],className:["custom__calendar"],onChange:p=>{d(p),c(!1)},maxDate:g,minDate:L,value:e?Array.isArray(e)?e.length===2?[new Date(e[0]),new Date(e[1])]:null:new Date(e):null,...y})})]})};exports.DatePickerWrapper=q;
 //# sourceMappingURL=DatePickerWrapper.js.map

package/dist/cjs/components/datePicker/DatePickerWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import ~~{ format as formatDate } from 'date-fns';\nimport~~ React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date \| Date[];\n\tonChange: (val: Date \| Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n\t/*\n\t date-fns format for the button label, e.g. 'dd MMM yyyy' -> \"10 Aug 2026\".\n\t * Omit to keep the locale default (toLocaleDateString).\n\t /\n\tdisplayFormat?: string;\n\t/* Shown instead of a date when `val` is empty. /\n\tplaceholder?: string;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n~~\tdisplayFormat,\n\tplaceholder,\n~~}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement \| null>(null);\n\tconst pickerRef = useRef<HTMLDivElement \| null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\~~t/* Honours `displayFormat` when given, else the locale default. */\n\~~tconst ~~formatOne = (date: Date) =>\n\t\tdisplayFormat ? formatDate(date, displayFormat) : date.toLocaleDateString();\n\n\tconst~~ getDisplayValue = () => {\n\t\~~tif~~ (!val~~) {~~\n\t\t\~~treturn placeholder ?? formatOne(new Date());\n\~~t~~\t}\n\n\t\tif~~ (Array.isArray(val)~~) {~~\n\t\t\~~treturn~~ val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t? `${~~formatOne(~~new Date(val[0].toString()))}-${~~formatOne~~(\n\t\t\t\t\t\~~tnew Date(val~~[1].toString()),\n\t\t\t\t )}`\n\t\t\t\t: `${~~formatOne(~~DateUtils.getPastDate(~~new Date(), 30))}-${formatOne(~~\n\t\t\t\t\t\tnew Date(),\n\t\t\t\t )}~~`;\~~n\t\t}\n\n\t~~\treturn~~ ~~formatOne(~~new Date(val.toString()));\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType \|\| DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t\| ((instance: HTMLDivElement \| null) => void)\n\t\t\t\t\t\t\t\| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t\| null\n\t\t\t\t\t\t\t\| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","~~displayFormat","placeholder","~~showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","~~formatOne","date","formatDate","~~getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"~~kgBAYaA~~,~~EAkBR~~,CAAC,CACL,IAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,iBAAAC,~~EACA,cAAAC,EACA,YAAAC,~~CACD,IAAM,CACL,KAAM,CAACC,EAAYC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAExCC,EAAYC,EAAAA,OAA8B,IAAI,EAC9CC,EAAYD,EAAAA,OAA8B,IAAI,EAEpDE,EAAAA,WAAWD,EAAW,IAAM,CAC3BJ,EAAU,EAAK,CAChB,CAAC,~~EAcD~~,MAAMM,~~EAAaC,GAClBV,EAAgBW,EAAAA,OAAWD,EAAMV,CAAa,EAAIU,EAAK,mBAAA,EAElDE,~~EAAkB,~~IAClBtB~~,~~EAID~~,MAAM,QAAQA,CAAG,~~EACbA~~,IAAM,CAAC,GAAG,~~SAAA~~,~~GAAcA,~~IAAM,CAAC,GAAG,~~WACtC~~,~~GAAGmB~~,~~EAAU~~,IAAI,~~KAAKnB~~,~~EAAI~~,CAAC,~~EAAE~~,~~UAAU~~,~~CAAC~~,~~CAAC~~,~~IAAImB~~,~~EAC7C~~,IAAI,~~KAAKnB~~,~~EAAI~~,CAAC,~~EAAE~~,~~UAAU~~,~~CAAA~~,~~CACzB~~,~~GACD~~,~~GAAGmB~~,~~EAAUI~~,~~UAAU~~,~~YAAY~~,~~IAAI~~,~~KAAQ~~,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~IAAIJ~~,~~MACnD~~,~~IAAK~~,~~CACR~~,~~GAGEA~~,~~EAAU,~~IAAI,~~KAAKnB~~,EAAI,~~SAAA~~,~~CAAU~~,~~CAAC~~,~~EAbjCW~~,~~GAAeQ~~,~~EAAU~~,~~IAAI~~,~~IAAM~~,~~EAe5C~~,~~OACCK,~~EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAACE,EAAAA,QAAA,CACA,~~GAAIrB~~,EACJ,~~IAAKU~~,EACL,~~QAASZ~~,~~EAAWwB~~,SAAO,WAAW,KAAOA,EAAAA,OAAO,QAAQ,SAC5D,YAAaA,EAAAA,OAAO,OAAO,QAC3B,QAAS,~~IAAMd~~,EAAU,CAACD,CAAU,EACpC,~~eAAgBJ~~,~~GAAkBoB~~,EAAAA,eAAe,QACjD,~~MAAOnB~~,EAEN,SAAA,CAAAD,~~IAAmBoB~~,EAAAA,eAAe,MAClCC,EAAAA,IAACC,EAAAA,YAAA,CACA,MAAO,CACN,~~MAAO3B~~,~~EACJwB~~,SAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,QAClB,KAAM,CAAA,EAGN,SAAAL,EAAA,CAAgB,CAAA,EAGlBO,EAAAA,IAACE,EAAAA,cAAA,CACA,MAAO,CACN,~~MAAO5B~~,~~EACJwB~~,SAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,QAClB,KAAM,CAAA,EAGN,SAAAL,EAAA,CAAgB,CAAA,EAGnBO,EAAAA,IAACG,EAAAA,QAAA,CACA,~~MAAOxB~~,~~IAAmBoB~~,EAAAA,eAAe,MAAQ,GAAK,GACtD,~~OAAQpB~~,~~IAAmBoB~~,EAAAA,eAAe,MAAQ,GAAK,GACvD,~~MAAOzB~~,~~EAAWwB~~,EAAAA,OAAO,QAAQ,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAC5D,CAAA,CAAA,~~EAEAf~~,GAAc,~~CAACT~~,~~GACf0B~~,EAAAA,IAACI,EAAAA,gBAAA,CACA,~~IACChB~~,EAMD,MAAO,CACN,~~GAAGb~~,CAAA,EAIJ,~~eAAgBuB~~,EAAAA,OAAO,QAAQ,QAC/B,QAASA,EAAAA,OAAO,QAAQ,QACxB,WAAYA,EAAAA,OAAO,WAAW,MAC9B,QAASA,EAAAA,OAAO,QAAQ,SACxB,YAAaA,EAAAA,OAAO,OAAO,QAE3B,SAAAE,EAAAA,IAACK,EAAAA,QAAA,CACA,cAAe,CAAC,cAAc,EAC9B,UAAW,CAAC,kBAAkB,EAC9B,SAAWC,GAAM,~~CAChBlC~~,~~EAASkC~~,CAAC,~~EACVtB~~,EAAU,EAAK,CAChB,EACA,~~QAAAP~~,EACA,QAAAC,EACA,MACCP,EACG,MAAM,QAAQA,CAAG,EAChBA,EAAI,SAAW,EACd,CAAC,IAAI,KAAKA,EAAI,CAAC,CAAC,EAAG,IAAI,KAAKA,EAAI,CAAC,CAAC,CAAC,EACnC,KACD,IAAI,KAAKA,CAAG,EACb,KAEH,GAAGE,CAAA,CAAA,CACL,CAAA,CACD,EAEF,CAEF"}
1	+ {"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date \| Date[];\n\tonChange: (val: Date \| Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement \| null>(null);\n\tconst pickerRef = useRef<HTMLDivElement \| null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\tconst getDisplayValue = () => {\n\t\treturn val\n\t\t\t? Array.isArray(val)\n\t\t\t\t? val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t\t? `${new Date(val?.[0]?.toString()).toLocaleDateString()}-${new Date(\n\t\t\t\t\t\t\tval?.[1]?.toString(),\n\t\t\t\t\t ).toLocaleDateString()}`\n\t\t\t\t\t: `${DateUtils.getPastDate(\n\t\t\t\t\t\t\tnew Date(),\n\t\t\t\t\t\t\t30,\n\t\t\t\t\t ).toLocaleDateString()}-${new Date().toLocaleDateString()}`\n\t\t\t\t: new Date(val.toString()).toLocaleDateString()\n\t\t\t: new Date().toLocaleDateString();\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType \|\| DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t\| ((instance: HTMLDivElement \| null) => void)\n\t\t\t\t\t\t\t\| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t\| null\n\t\t\t\t\t\t\t\| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"4eAWaA,EAWR,CAAC,CACL,IAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,iBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAYC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAExCC,EAAYC,EAAAA,OAA8B,IAAI,EAC9CC,EAAYD,EAAAA,OAA8B,IAAI,EAEpDE,EAAAA,WAAWD,EAAW,IAAM,CAC3BJ,EAAU,EAAK,CAChB,CAAC,EAaD,MAAMM,EAAkB,IAChBjB,EACJ,MAAM,QAAQA,CAAG,EAChBA,IAAM,CAAC,GAAG,YAAcA,IAAM,CAAC,GAAG,SAAA,EACjC,GAAG,IAAI,KAAKA,IAAM,CAAC,GAAG,SAAA,CAAU,EAAE,oBAAoB,IAAI,IAAI,KAC9DA,IAAM,CAAC,GAAG,SAAA,CAAS,EACjB,mBAAA,CAAoB,GACtB,GAAGkB,EAAAA,QAAU,gBACT,KACJ,EAAA,EACE,oBAAoB,QAAQ,OAAO,oBAAoB,GAC1D,IAAI,KAAKlB,EAAI,UAAU,EAAE,qBAC1B,IAAI,KAAA,EAAO,mBAAA,EAEf,OACCmB,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAACE,EAAAA,QAAA,CACA,GAAIhB,EACJ,IAAKQ,EACL,QAASV,EAAWmB,SAAO,WAAW,KAAOA,EAAAA,OAAO,QAAQ,SAC5D,YAAaA,EAAAA,OAAO,OAAO,QAC3B,QAAS,IAAMX,EAAU,CAACD,CAAU,EACpC,eAAgBF,GAAkBe,EAAAA,eAAe,QACjD,MAAOd,EAEN,SAAA,CAAAD,IAAmBe,EAAAA,eAAe,MAClCC,EAAAA,IAACC,EAAAA,YAAA,CACA,MAAO,CACN,MAAOtB,EACJmB,SAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,QAClB,KAAM,CAAA,EAGN,SAAAL,EAAA,CAAgB,CAAA,EAGlBO,EAAAA,IAACE,EAAAA,cAAA,CACA,MAAO,CACN,MAAOvB,EACJmB,SAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,QAClB,KAAM,CAAA,EAGN,SAAAL,EAAA,CAAgB,CAAA,EAGnBO,EAAAA,IAACG,EAAAA,QAAA,CACA,MAAOnB,IAAmBe,EAAAA,eAAe,MAAQ,GAAK,GACtD,OAAQf,IAAmBe,EAAAA,eAAe,MAAQ,GAAK,GACvD,MAAOpB,EAAWmB,EAAAA,OAAO,QAAQ,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAC5D,CAAA,CAAA,EAEAZ,GAAc,CAACP,GACfqB,EAAAA,IAACI,EAAAA,gBAAA,CACA,IACCb,EAMD,MAAO,CACN,GAAGX,CAAA,EAIJ,eAAgBkB,EAAAA,OAAO,QAAQ,QAC/B,QAASA,EAAAA,OAAO,QAAQ,QACxB,WAAYA,EAAAA,OAAO,WAAW,MAC9B,QAASA,EAAAA,OAAO,QAAQ,SACxB,YAAaA,EAAAA,OAAO,OAAO,QAE3B,SAAAE,EAAAA,IAACK,EAAAA,QAAA,CACA,cAAe,CAAC,cAAc,EAC9B,UAAW,CAAC,kBAAkB,EAC9B,SAAWC,GAAM,CAChB7B,EAAS6B,CAAC,EACVnB,EAAU,EAAK,CAChB,EACA,QAAAL,EACA,QAAAC,EACA,MACCP,EACG,MAAM,QAAQA,CAAG,EAChBA,EAAI,SAAW,EACd,CAAC,IAAI,KAAKA,EAAI,CAAC,CAAC,EAAG,IAAI,KAAKA,EAAI,CAAC,CAAC,CAAC,EACnC,KACD,IAAI,KAAKA,CAAG,EACb,KAEH,GAAGE,CAAA,CAAA,CACL,CAAA,CACD,EAEF,CAEF"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OpennedDropdown.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.tsx"],"sourcesContent":["import ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport RetryIcon from '@src/assets/icons/refresh-purple.svg';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport { useDropdown } from '../../hooks/useDropdown';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tMultiSelectOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from '../../type';\nimport { Description } from './description/Description';\nimport { FreeFormMenu } from './menu/FreeFormMenu';\nimport { MenuList } from './menu/MenuList';\nimport { SelectAllMenu } from './menu/SelectAllMenu';\nimport MultiSelectDropdownBottomBar from './multiSelect/MultiSelectDropdownBottomBar';\nimport {\n\tMenuListContainer,\n\tOpennedDropdownContainer,\n} from './OpennedDropdown.styled';\nimport { SearchBox } from './searchbox/SearchBox';\nimport { SearchZeroState } from './searchbox/SearchZeroState';\n\n/** CONSTANTS /\nconst defaults = {\n\theight: 304,\n\twidth: 290,\n};\n\nexport const OpenedDropdown: React.FC<OpenDropdownProps> = ({\n\toptions,\n\tisSearchable,\n\tsearchPlaceholder,\n\tstaticMenuHeight,\n\tisMultiSelect,\n\tmaxSelections,\n\twidth,\n\tallowFreeForm,\n\theight,\n\tonClose,\n\tonSelect,\n\tonSearch,\n\tversion,\n\tskipSorting,\n\theaderRef,\n\thideSelectAll,\n\tprimaryButtonText,\n\tonInfiniteScroll,\n\tonMultiSelectClear: onMultiSelectClearProp,\n\tonDropdownItemClick,\n\tbuttonOptions,\n\tisSearchLoading,\n\tisOptionsLoading,\n\toptionsErrorState,\n\tdisableSearchOptions,\n\tdisableSearchedOptionExcept,\n\tuseDefaultCursor,\n\tcontainerStyle = {},\n\tzeroState = undefined,\n\tisDraggable = false,\n\tonOptionsReorder,\n\thideClearButton = false,\n\tshowCheckboxForCustomElement = false,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n}) => {\n\t// Sort options with selected at top, unselected at bottom, maintaining order within groups\n\tconst sortOptionsWithSelectedOnTop = useCallback(\n\t\t(opts: DropdownOption[]): DropdownOption[] => {\n\t\t\tif (!isDraggable \|\| !isMultiSelect) return opts;\n\n\t\t\tconst selected: DropdownOption[] = [];\n\t\t\tconst unselected: DropdownOption[] = [];\n\n\t\t\topts.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t// Handle grouped options - maintain grouping\n\t\t\t\t\tunselected.push(option);\n\t\t\t\t} else {\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tif (singleOption.selected) {\n\t\t\t\t\t\tselected.push(option);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tunselected.push(option);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn [...selected, ...unselected];\n\t\t},\n\t\t[isDraggable, isMultiSelect],\n\t);\n\n\tconst [localOptions, setLocalOptions] = useState<DropdownOption[]>(() =>\n\t\tsortOptionsWithSelectedOnTop(options),\n\t);\n\tconst localOptionsRef = useRef<DropdownOption[]>(localOptions);\n\tconst hasReorderedRef = useRef(false);\n\tconst onOptionsReorderRef = useRef(onOptionsReorder);\n\n\tuseEffect(() => {\n\t\tsetLocalOptions(sortOptionsWithSelectedOnTop(options));\n\t}, [options, sortOptionsWithSelectedOnTop]);\n\n\tuseEffect(() => {\n\t\tlocalOptionsRef.current = localOptions;\n\t}, [localOptions]);\n\n\tuseEffect(() => {\n\t\tonOptionsReorderRef.current = onOptionsReorder;\n\t}, [onOptionsReorder]);\n\n\t// Fire onOptionsReorder on unmount (dropdown close from Apply or click-outside)\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (hasReorderedRef.current && onOptionsReorderRef.current) {\n\t\t\t\tonOptionsReorderRef.current(localOptionsRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleOptionsReorder = useCallback(\n\t\t(reorderedOptions: DropdownOption[]) => {\n\t\t\tsetLocalOptions(reorderedOptions);\n\t\t\t// For version 2.0 (no Apply button), apply reorder immediately\n\t\t\tif (version === '2.0') {\n\t\t\t\tonOptionsReorder?.(reorderedOptions);\n\t\t\t} else {\n\t\t\t\t// For version 1.0, defer until Apply/close (handled by unmount cleanup)\n\t\t\t\thasReorderedRef.current = true;\n\t\t\t}\n\t\t},\n\t\t[onOptionsReorder, version],\n\t);\n\n\tconst optionsToUse = isDraggable ? localOptions : options;\n\tconst {\n\t\tdropdownOptions,\n\t\tsearch,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tsearchError,\n\t\tretrySearch,\n\t\tonApplyHandler,\n\t\tselectAllHandler,\n\t\tonMultiSelectClear,\n\t\tonFreeFormSelect,\n\t\tonMultiSelectApply,\n\t\tlatestDropdownOptionsRef,\n\t\tgetSelectedOptions,\n\t\tgetCurrentSelectionCount,\n\t} = useDropdown(\n\t\tversion,\n\t\toptionsToUse,\n\t\tonSelect,\n\t\tskipSorting \|\| isDraggable,\n\t\tisMultiSelect,\n\t\tonSearch,\n\t\tdisableSearchOptions,\n\t\tdisableSearchedOptionExcept,\n\t\tmaxSelections,\n\t);\n\tconst [widthState, setWidthState] = useState(width ?? defaults.width);\n\tconst [descriptionInfo, setDescription] = useState<{\n\t\ttitle: string;\n\t\tdescription: string;\n\t} \| null>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst childRefs = useRef([]);\n\tconst menuListRef = useRef<HTMLDivElement>(null);\n\tuseOutside(\n\t\tref,\n\t\t() => {\n\t\t\tsetDescription(null);\n\t\t\tif (isMultiSelect && version === '2.0') {\n\t\t\t\tconst optionsToSend = getSelectedOptions(\n\t\t\t\t\tlatestDropdownOptionsRef.current,\n\t\t\t\t);\n\t\t\t\tonClose?.(optionsToSend);\n\t\t\t} else {\n\t\t\t\tonClose?.(dropdownOptions);\n\t\t\t}\n\t\t},\n\t\t[headerRef, childRefs],\n\t);\n\n\t// Auto-focus dropdown when it opens for keyboard navigation while preventing scroll to maintain popper positioning\n\tuseEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tif (ref.current) {\n\t\t\t\tref.current.focus({ preventScroll: true });\n\t\t\t}\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, []);\n\n\t// Get flattened selectable options\n\tconst getFlattenedOptions = (opts: DropdownOption[]): SingleOption[] => {\n\t\tconst flattened: SingleOption[] = [];\n\t\topts.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\tconst groupedOption = option as GroupedOption;\n\t\t\t\tgroupedOption.options.forEach((nestedOption) => {\n\t\t\t\t\tif (!nestedOption.disabled) {\n\t\t\t\t\t\tflattened.push(nestedOption);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tflattened.push(singleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn flattened;\n\t};\n\n\t/* Keyboard navigation handler /\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst currentOptions =\n\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions;\n\t\t\tconst flattenedOptions = getFlattenedOptions(currentOptions);\n\n\t\t\tif (flattenedOptions.length === 0) return;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev < flattenedOptions.length - 1 ? prev + 1 : 0;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev > 0 ? prev - 1 : flattenedOptions.length - 1;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'Enter' && focusedIndex >= 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst focusedOption = flattenedOptions[focusedIndex];\n\t\t\t\tif (focusedOption) {\n\t\t\t\t\t// onApplyHandler handles the selection state and calls onSelect internally\n\t\t\t\t\tonApplyHandler({\n\t\t\t\t\t\t...focusedOption,\n\t\t\t\t\t\tselected: !focusedOption.selected,\n\t\t\t\t\t});\n\t\t\t\t\t// Also trigger onDropdownItemClick if provided\n\t\t\t\t\tif (onDropdownItemClick) {\n\t\t\t\t\t\tonDropdownItemClick(focusedOption);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst dropdownElement = ref.current;\n\t\tif (dropdownElement) {\n\t\t\tdropdownElement.addEventListener('keydown', handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdropdownElement.removeEventListener('keydown', handleKeyDown);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tfocusedIndex,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tdropdownOptions,\n\t\tonSearch,\n\t\tonApplyHandler,\n\t\tonDropdownItemClick,\n\t]);\n\n\t// LOCAL CONSTANTS\n\tconst heightToUse = height ?? defaults.height;\n\tconst menuListMaxHeight =\n\t\ttypeof heightToUse === 'number'\n\t\t\t? isSearchable && isMultiSelect\n\t\t\t\t? heightToUse - 96\n\t\t\t\t: (isSearchable && !isMultiSelect) \|\| (!isSearchable && isMultiSelect)\n\t\t\t\t? heightToUse - 48\n\t\t\t\t: heightToUse\n\t\t\t: heightToUse;\n\n\tfunction showDescription(title?: string, description?: string) {\n\t\tif (title && description) {\n\t\t\tsetDescription({\n\t\t\t\ttitle,\n\t\t\t\tdescription,\n\t\t\t});\n\t\t} else {\n\t\t\tsetDescription(null);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst widthToUse = width ?? defaults.width;\n\t\tif (descriptionInfo === null) {\n\t\t\tsetWidthState(widthToUse);\n\t\t} else if (typeof widthToUse === 'number') {\n\t\t\tsetWidthState(widthToUse 2);\n\t\t} else if (typeof widthToUse === 'string') {\n\t\t\tif (widthToUse.endsWith('px')) {\n\t\t\t\tconst newWidth = parseInt(widthToUse.replace('px', '')) * 2;\n\t\t\t\tsetWidthState(newWidth);\n\t\t\t}\n\t\t}\n\t}, [descriptionInfo]);\n\n\t/*\n\t This is to show the search result in a stateless way\n\t */\n\n\tconst exactMatchFound: boolean[] = [];\n\n\tconst processOptionsWithMaxSelections = (\n\t\toptionsToProcess: DropdownOption[],\n\t) => {\n\t\tif (!isMultiSelect \|\| (!maxSelections && maxSelections !== 0)) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Count from the full options list (not the filtered subset) so selections\n\t\t// hidden by a search query are still included in the limit check.\n\t\tconst currentSelectionCount = getCurrentSelectionCount(dropdownOptions);\n\t\tconst maxSelectionsReached = currentSelectionCount >= maxSelections;\n\n\t\tif (!maxSelectionsReached) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Disable unselected options when max selections is reached\n\t\treturn optionsToProcess.map((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\toptions: (option as GroupedOption).options.map((nestedOption) => ({\n\t\t\t\t\t\t...nestedOption,\n\t\t\t\t\t\tdisabled:\n\t\t\t\t\t\t\tnestedOption.disabled \|\|\n\t\t\t\t\t\t\t(!nestedOption.selected && maxSelectionsReached),\n\t\t\t\t\t})),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\treturn {\n\t\t\t\t\t...singleOption,\n\t\t\t\t\tdisabled:\n\t\t\t\t\t\tsingleOption.disabled \|\|\n\t\t\t\t\t\t(!singleOption.selected && maxSelectionsReached),\n\t\t\t\t};\n\t\t\t}\n\t\t});\n\t};\n\n\tconst optionsToShow = processOptionsWithMaxSelections(\n\t\t(searchedString && onSearch ? searchedOptions : dropdownOptions)\n\t\t\t.map((option) => {\n\t\t\t\tif (searchedString && !onSearch) {\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = { ...option } as GroupedOption;\n\t\t\t\t\t\tgroupedOption.options = groupedOption.options.filter((op) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\top.label?.toLowerCase().includes(searchedString.toLowerCase())\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t\t!searchedString \|\| op.label === searchedString,\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn groupedOption.options.length > 0 ? groupedOption : null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase()) \|\|\n\t\t\t\t\t\t\t(option as SingleOption \| MultiSelectOption).searchKey\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase())\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t!searchedString \|\| option.label === searchedString,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn option;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn option;\n\t\t\t})\n\t\t\t.filter((option) => option !== null) as DropdownOption[],\n\t);\n\n\tconst noResultForSearch =\n\t\t!!isSearchable && searchedString && optionsToShow.length === 0;\n\tconst showLoadingState = !searchedString && !!isOptionsLoading;\n\tconst showErrorState =\n\t\t!searchedString && !!optionsErrorState && !showLoadingState;\n\tconst showEmptyState =\n\t\t!searchedString &&\n\t\t!optionsToShow.length &&\n\t\t!showLoadingState &&\n\t\t!showErrorState;\n\tconst showTopLevelZeroState =\n\t\tshowLoadingState \|\| showErrorState \|\| showEmptyState;\n\n\tconst emptyStateTitle = zeroState?.title \|\| 'No results found';\n\tconst emptyStateSubTitle =\n\t\tzeroState?.subTitle \|\|\n\t\t`Please try again later or contact us at support@bik.ai if you require further assistance.`;\n\tconst errorStateTitle = optionsErrorState?.title \|\| 'Failed to load options';\n\tconst errorStateSubTitle =\n\t\toptionsErrorState?.subTitle \|\|\n\t\t'Something went wrong while fetching the list. Please try again';\n\tconst defaultErrorActionButton = {\n\t\tbuttonText: 'Try again',\n\t\tbuttonType: 'text' as const,\n\t\tsize: 'small' as const,\n\t\tbuttonTextColor: COLORS.background.inverseLight,\n\t\tcustomIconColor: COLORS.background.inverseLight,\n\t\tLeadingIcon: RetryIcon,\n\t};\n\n\tconst mergedErrorState = {\n\t\tIconHolderStyle: {\n\t\t\tbackground: COLORS.background.negative.light,\n\t\t},\n\t\tIcon: (\n\t\t\t<ErrorInfoIcon color={COLORS.content.negative} width={24} height={24} />\n\t\t),\n\t\t...optionsErrorState,\n\t};\n\tmergedErrorState.actionButton = {\n\t\t...defaultErrorActionButton,\n\t\t...(optionsErrorState?.actionButton ?? {}),\n\t};\n\tconst zeroStateProps = showLoadingState\n\t\t? undefined\n\t\t: showErrorState\n\t\t? mergedErrorState\n\t\t: zeroState;\n\n\treturn (\n\t\t<OpennedDropdownContainer\n\t\t\tversion={version}\n\t\t\tref={ref}\n\t\t\ttabIndex={-1}\n\t\t\tstyle={{\n\t\t\t\t// maxWidth: descriptionInfo ? 800 : 400,\n\t\t\t\twidth: widthState,\n\t\t\t\t...containerStyle,\n\t\t\t\toutline: 'none',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: descriptionInfo ? '50%' : '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tbackground: 'white',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!isSearchable && (\n\t\t\t\t\t<SearchBox\n\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"dropdown-options-zero-state\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: staticMenuHeight ? menuListMaxHeight : heightToUse,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tbackground: COLORS.background.base,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t{...(zeroStateProps ?? {})}\n\t\t\t\t\t\t\tisLoading={showLoadingState}\n\t\t\t\t\t\t\ttitle={showErrorState ? errorStateTitle : emptyStateTitle}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\tshowErrorState ? errorStateSubTitle : emptyStateSubTitle\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<MenuListContainer\n\t\t\t\t\t\tdata-testid=\"dropdown-menu-list\"\n\t\t\t\t\t\tminHeight={staticMenuHeight ? menuListMaxHeight : undefined}\n\t\t\t\t\t\tmaxHeight={menuListMaxHeight}\n\t\t\t\t\t\tref={menuListRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!isMultiSelect && !noResultForSearch && !hideSelectAll && (\n\t\t\t\t\t\t\t<SelectAllMenu\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect={selectAllHandler}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!allowFreeForm && noResultForSearch && (\n\t\t\t\t\t\t\t<SearchZeroState\n\t\t\t\t\t\t\t\tisLoading={isSearchLoading}\n\t\t\t\t\t\t\t\terrorMessage={searchError}\n\t\t\t\t\t\t\t\tonRetry={retrySearch}\n\t\t\t\t\t\t\t\theight={menuListMaxHeight as number}\n\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\tcontainerWidth={width}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{allowFreeForm &&\n\t\t\t\t\t\t\t(noResultForSearch \|\|\n\t\t\t\t\t\t\t\t(!!exactMatchFound.length &&\n\t\t\t\t\t\t\t\t\texactMatchFound.every((val) => val === false))) && (\n\t\t\t\t\t\t\t\t<FreeFormMenu\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\tonSelect={onFreeFormSelect}\n\t\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\tonInfiniteScroll={onInfiniteScroll}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\tonSelect={onApplyHandler}\n\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\toptions={optionsToShow}\n\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\tref={childRefs}\n\t\t\t\t\t\t\tfocusedIndex={focusedIndex}\n\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\tonOptionsReorder={handleOptionsReorder}\n\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuListContainer>\n\t\t\t\t)}\n\t\t\t\t{!!isMultiSelect && !showTopLevelZeroState && version !== '2.0' && (\n\t\t\t\t\t<MultiSelectDropdownBottomBar\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tonMultiSelectClear();\n\t\t\t\t\t\t\tonMultiSelectClearProp?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={onMultiSelectApply}\n\t\t\t\t\t\tlist={\n\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbuttonText={primaryButtonText}\n\t\t\t\t\t\tbuttonOptions={buttonOptions}\n\t\t\t\t\t\thideClearButton={hideClearButton}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!!descriptionInfo && (\n\t\t\t\t<Description\n\t\t\t\t\ttitle={descriptionInfo.title}\n\t\t\t\t\tdescription={descriptionInfo.description}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</OpennedDropdownContainer>\n\t);\n};\n"],"names":["defaults","OpenedDropdown","options","isSearchable","searchPlaceholder","staticMenuHeight","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","option","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onMultiSelectClear","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","getFlattenedOptions","flattened","nestedOption","singleOption","handleKeyDown","e","flattenedOptions","prev","newIndex","focusedElement","focusedOption","dropdownElement","heightToUse","menuListMaxHeight","showDescription","title","description","widthToUse","newWidth","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","groupedOption","op","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","emptyStateSubTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","COLORS","RetryIcon","mergedErrorState","jsx","ErrorInfoIcon","zeroStateProps","jsxs","OpennedDropdownContainer","SearchBox","ZeroState","MenuListContainer","SelectAllMenu","SearchZeroState","val","FreeFormMenu","MenuList","MultiSelectDropdownBottomBar","Description"],"mappings":"+vBA2BMA,EAAW,CAChB,OAAQ,IACR,MAAO,GACR,EAEaC,GAA8C,CAAC,CAC3D,QAAAC,EACA,aAAAC,EACA,kBAAAC,GACA,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,MAAAC,EACA,cAAAC,EACA,OAAAC,GACA,QAAAC,EACA,SAAAC,GACA,SAAAC,EACA,QAAAC,EACA,YAAAC,GACA,UAAAC,GACA,cAAAC,GACA,kBAAAC,GACA,iBAAAC,GACA,mBAAoBC,GACpB,oBAAAC,EACA,cAAAC,GACA,gBAAAC,GACA,iBAAAC,GACA,kBAAAC,EACA,qBAAAC,GACA,4BAAAC,GACA,iBAAAC,GACA,eAAAC,GAAiB,CAAA,EACjB,UAAAC,EAAY,OACZ,YAAAC,EAAc,GACd,iBAAAC,EACA,gBAAAC,GAAkB,GAClB,6BAAAC,GAA+B,GAC/B,oBAAAC,EACA,iBAAAC,CACD,IAAM,CAEL,MAAMC,EAA+BC,EAAAA,YACnCC,GAA6C,CAC7C,GAAI,CAACR,GAAe,CAACzB,EAAe,OAAOiC,EAE3C,MAAMC,EAA6B,CAAA,EAC7BC,EAA+B,CAAA,EAErC,OAAAF,EAAK,QAASG,GAAW,CACnBA,EAAyB,QAE7BD,EAAW,KAAKC,CAAM,EAEDA,EACJ,SAChBF,EAAS,KAAKE,CAAM,EAEpBD,EAAW,KAAKC,CAAM,CAGzB,CAAC,EAEM,CAAC,GAAGF,EAAU,GAAGC,CAAU,CACnC,EACA,CAACV,EAAazB,CAAa,CAAA,EAGtB,CAACqC,EAAcC,CAAe,EAAIC,EAAAA,SAA2B,IAClER,EAA6BnC,CAAO,CAAA,EAE/B4C,EAAkBC,EAAAA,OAAyBJ,CAAY,EACvDK,EAAkBD,EAAAA,OAAO,EAAK,EAC9BE,EAAsBF,EAAAA,OAAOf,CAAgB,EAEnDkB,EAAAA,UAAU,IAAM,CACfN,EAAgBP,EAA6BnC,CAAO,CAAC,CACtD,EAAG,CAACA,EAASmC,CAA4B,CAAC,EAE1Ca,EAAAA,UAAU,IAAM,CACfJ,EAAgB,QAAUH,CAC3B,EAAG,CAACA,CAAY,CAAC,EAEjBO,EAAAA,UAAU,IAAM,CACfD,EAAoB,QAAUjB,CAC/B,EAAG,CAACA,CAAgB,CAAC,EAGrBkB,EAAAA,UAAU,IACF,IAAM,CACRF,EAAgB,SAAWC,EAAoB,SAClDA,EAAoB,QAAQH,EAAgB,OAAO,CAErD,EACE,CAAA,CAAE,EAEL,MAAMK,GAAuBb,EAAAA,YAC3Bc,GAAuC,CACvCR,EAAgBQ,CAAgB,EAE5BtC,IAAY,MACfkB,IAAmBoB,CAAgB,EAGnCJ,EAAgB,QAAU,EAE5B,EACA,CAAChB,EAAkBlB,CAAO,CAAA,EAGrBuC,GAAetB,EAAcY,EAAezC,EAC5C,CACL,gBAAAoD,EACA,OAAAC,GACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,GACA,YAAAC,GACA,eAAAC,EACA,iBAAAC,GACA,mBAAAC,GACA,iBAAAC,GACA,mBAAAC,GACA,yBAAAC,GACA,mBAAAC,GACA,yBAAAC,EAAA,EACGC,GAAAA,YACHtD,EACAuC,GACAzC,GACAG,IAAegB,EACfzB,EACAO,EACAa,GACAC,GACApB,CAAA,EAEK,CAAC8D,GAAYC,CAAa,EAAIzB,EAAAA,SAASrC,GAASR,EAAS,KAAK,EAC9D,CAACuE,EAAiBC,CAAc,EAAI3B,EAAAA,SAGhC,IAAI,EACR,CAAC4B,EAAcC,CAAe,EAAI7B,EAAAA,SAAiB,EAAE,EACrD8B,EAAM5B,EAAAA,OAAuB,IAAI,EACjC6B,EAAY7B,EAAAA,OAAO,EAAE,EACrB8B,EAAc9B,EAAAA,OAAuB,IAAI,EAC/C+B,GAAAA,WACCH,EACA,IAAM,CAEL,GADAH,EAAe,IAAI,EACflE,GAAiBQ,IAAY,MAAO,CACvC,MAAMiE,EAAgBb,GACrBD,GAAyB,OAAA,EAE1BtD,IAAUoE,CAAa,CACxB,MACCpE,IAAU2C,CAAe,CAE3B,EACA,CAACtC,GAAW4D,CAAS,CAAA,EAItB1B,EAAAA,UAAU,IAAM,CACf,MAAM8B,EAAQ,WAAW,IAAM,CAC1BL,EAAI,SACPA,EAAI,QAAQ,MAAM,CAAE,cAAe,GAAM,CAE3C,EAAG,CAAC,EACJ,MAAO,IAAM,aAAaK,CAAK,CAChC,EAAG,CAAA,CAAE,EAGL,MAAMC,GAAuB1C,GAA2C,CACvE,MAAM2C,EAA4B,CAAA,EAClC,OAAA3C,EAAK,QAASG,GAAW,CACxB,GAAKA,EAAyB,QACPA,EACR,QAAQ,QAASyC,GAAiB,CAC1CA,EAAa,UACjBD,EAAU,KAAKC,CAAY,CAE7B,CAAC,MACK,CACN,MAAMC,EAAe1C,EAChB0C,EAAa,UACjBF,EAAU,KAAKE,CAAY,CAE7B,CACD,CAAC,EACMF,CACR,EAGAhC,EAAAA,UAAU,IAAM,CACf,MAAMmC,EAAiBC,GAAqB,CAG3C,MAAMC,EAAmBN,GADxBzB,GAAkB3C,EAAW4C,EAAkBH,CACW,EAE3D,GAAIiC,EAAiB,SAAW,GAEhC,GAAID,EAAE,MAAQ,YACbA,EAAE,eAAA,EACFZ,EAAiBc,GAAS,CACzB,MAAMC,EAAWD,EAAOD,EAAiB,OAAS,EAAIC,EAAO,EAAI,EAEjE,kBAAW,IAAM,CAChB,MAAME,EAAiBb,EAAY,SAAS,cAC3C,uBAAuBY,CAAQ,IAAA,EAE5BC,GACHA,EAAe,eAAe,CAC7B,MAAO,UACP,SAAU,QAAA,CACV,CAEH,EAAG,CAAC,EACGD,CACR,CAAC,UACSH,EAAE,MAAQ,UACpBA,EAAE,eAAA,EACFZ,EAAiBc,GAAS,CACzB,MAAMC,EAAWD,EAAO,EAAIA,EAAO,EAAID,EAAiB,OAAS,EAEjE,kBAAW,IAAM,CAChB,MAAMG,EAAiBb,EAAY,SAAS,cAC3C,uBAAuBY,CAAQ,IAAA,EAE5BC,GACHA,EAAe,eAAe,CAC7B,MAAO,UACP,SAAU,QAAA,CACV,CAEH,EAAG,CAAC,EACGD,CACR,CAAC,UACSH,EAAE,MAAQ,SAAWb,GAAgB,EAAG,CAClDa,EAAE,eAAA,EACF,MAAMK,EAAgBJ,EAAiBd,CAAY,EAC/CkB,IAEH/B,EAAe,CACd,GAAG+B,EACH,SAAU,CAACA,EAAc,QAAA,CACzB,EAEGtE,GACHA,EAAoBsE,CAAa,EAGpC,EACD,EAEMC,EAAkBjB,EAAI,QAC5B,GAAIiB,EACH,OAAAA,EAAgB,iBAAiB,UAAWP,CAAa,EAClD,IAAM,CACZO,EAAgB,oBAAoB,UAAWP,CAAa,CAC7D,CAEF,EAAG,CACFZ,EACAjB,EACAC,EACAH,EACAzC,EACA+C,EACAvC,CAAA,CACA,EAGD,MAAMwE,EAAcnF,IAAUV,EAAS,OACjC8F,EACL,OAAOD,GAAgB,SACpB1F,GAAgBG,EACfuF,EAAc,GACb1F,GAAgB,CAACG,GAAmB,CAACH,GAAgBG,EACtDuF,EAAc,GACdA,EACDA,EAEJ,SAASE,GAAgBC,EAAgBC,EAAsB,CAE7DzB,EADGwB,GAASC,EACG,CACd,MAAAD,EACA,YAAAC,CAAA,EAGc,IAFd,CAIH,CAEA/C,EAAAA,UAAU,IAAM,CACf,MAAMgD,EAAa1F,GAASR,EAAS,MACrC,GAAIuE,IAAoB,KACvBD,EAAc4B,CAAU,UACd,OAAOA,GAAe,SAChC5B,EAAc4B,EAAa,CAAC,UAClB,OAAOA,GAAe,UAC5BA,EAAW,SAAS,IAAI,EAAG,CAC9B,MAAMC,EAAW,SAASD,EAAW,QAAQ,KAAM,EAAE,CAAC,EAAI,EAC1D5B,EAAc6B,CAAQ,CACvB,CAEF,EAAG,CAAC5B,CAAe,CAAC,EAMpB,MAAM6B,EAA6B,CAAA,EA0C7BC,GAvCLC,GACI,CACJ,GAAI,CAAChG,GAAkB,CAACC,GAAiBA,IAAkB,EAC1D,OAAO+F,EAMR,MAAMC,EADwBpC,GAAyBb,CAAe,GAChB/C,EAEtD,OAAKgG,EAKED,EAAiB,IAAK5D,GAAW,CACvC,GAAKA,EAAyB,QAC7B,MAAO,CACN,GAAGA,EACH,QAAUA,EAAyB,QAAQ,IAAKyC,IAAkB,CACjE,GAAGA,EACH,SACCA,EAAa,UACZ,CAACA,EAAa,UAAYoB,CAAA,EAC3B,CAAA,EAEG,CACN,MAAMnB,EAAe1C,EACrB,MAAO,CACN,GAAG0C,EACH,SACCA,EAAa,UACZ,CAACA,EAAa,UAAYmB,CAAA,CAE9B,CACD,CAAC,EAxBOD,CAyBT,IAGE9C,GAAkB3C,EAAW4C,EAAkBH,GAC9C,IAAKZ,GAAW,CAChB,GAAIc,GAAkB,CAAC3C,EACtB,GAAK6B,EAAyB,QAAS,CACtC,MAAM8D,EAAgB,CAAE,GAAG9D,CAAA,EAC3B,OAAA8D,EAAc,QAAUA,EAAc,QAAQ,OAAQC,GAEpDA,EAAG,OAAO,YAAA,EAAc,SAASjD,EAAe,YAAA,CAAa,GAE7D4C,EAAgB,KACf,CAAC5C,GAAkBiD,EAAG,QAAUjD,CAAA,EAG1B,IAGD,EACP,EAEMgD,EAAc,QAAQ,OAAS,EAAIA,EAAgB,IAC3D,KACC,QACC9D,EAAO,OACJ,YAAA,EACD,SAASc,EAAe,YAAA,CAAa,GACtCd,EAA4C,WAC1C,YAAA,EACD,SAASc,EAAe,YAAA,CAAa,GAEvC4C,EAAgB,KACf,CAAC5C,GAAkBd,EAAO,QAAUc,CAAA,EAE9Bd,GAEA,KAKV,OAAOA,CACR,CAAC,EACA,OAAQA,GAAWA,IAAW,IAAI,CAAA,EAG/BgE,EACL,CAAC,CAACvG,GAAgBqD,GAAkB6C,EAAc,SAAW,EACxDM,EAAmB,CAACnD,GAAkB,CAAC,CAAChC,GACxCoF,EACL,CAACpD,GAAkB,CAAC,CAAC/B,GAAqB,CAACkF,EACtCE,GACL,CAACrD,GACD,CAAC6C,EAAc,QACf,CAACM,GACD,CAACC,EACIE,GACLH,GAAoBC,GAAkBC,GAEjCE,GAAkBjF,GAAW,OAAS,mBACtCkF,GACLlF,GAAW,UACX,4FACKmF,GAAkBxF,GAAmB,OAAS,yBAC9CyF,GACLzF,GAAmB,UACnB,iEACK0F,GAA2B,CAChC,WAAY,YACZ,WAAY,OACZ,KAAM,QACN,gBAAiBC,EAAAA,OAAO,WAAW,aACnC,gBAAiBA,EAAAA,OAAO,WAAW,aACnC,YAAaC,GAAAA,OAAA,EAGRC,GAAmB,CACxB,gBAAiB,CAChB,WAAYF,EAAAA,OAAO,WAAW,SAAS,KAAA,EAExC,KACCG,EAAAA,IAACC,WAAA,CAAc,MAAOJ,EAAAA,OAAO,QAAQ,SAAU,MAAO,GAAI,OAAQ,EAAA,CAAI,EAEvE,GAAG3F,CAAA,EAEJ6F,GAAiB,aAAe,CAC/B,GAAGH,GACH,GAAI1F,GAAmB,cAAgB,CAAA,CAAC,EAEzC,MAAMgG,GAAiBd,EACpB,OACAC,EACAU,GACAxF,EAEH,OACC4F,EAAAA,KAACC,GAAAA,yBAAA,CACA,QAAA7G,EACA,IAAA6D,EACA,SAAU,GACV,MAAO,CAEN,MAAON,GACP,GAAGxC,GACH,QAAS,MAAA,EAGV,SAAA,CAAA6F,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,MAAOnD,EAAkB,MAAQ,OACjC,QAAS,OACT,cAAe,SACf,WAAY,OAAA,EAGZ,SAAA,CAAA,CAAC,CAACpE,GACFoH,EAAAA,IAACK,GAAAA,UAAA,CACA,SAAUrE,GACV,QAAAzC,EACA,YAAaV,EAAA,CAAA,EAId0G,GACAS,EAAAA,IAAC,MAAA,CACA,cAAY,8BACZ,MAAO,CACN,OAAQlH,EAAmByF,EAAoBD,EAC/C,QAAS,OACT,WAAYuB,EAAAA,OAAO,WAAW,IAAA,EAG/B,SAAAG,EAAAA,IAACM,GAAAA,UAAA,CACC,GAAIJ,IAAkB,CAAA,EACvB,UAAWd,EACX,MAAOC,EAAiBK,GAAkBF,GAC1C,SACCH,EAAiBM,GAAqBF,EAAA,CAAA,CAExC,CAAA,EAGDU,EAAAA,KAACI,GAAAA,kBAAA,CACA,cAAY,qBACZ,UAAWzH,EAAmByF,EAAoB,OAClD,UAAWA,EACX,IAAKjB,EAEJ,SAAA,CAAA,CAAC,CAACvE,GAAiB,CAACoG,GAAqB,CAACzF,IAC1CsG,EAAAA,IAACQ,GAAAA,cAAA,CACA,QAAAjH,EACA,QACC0C,GAAkB3C,EAAW4C,EAAkBH,EAEhD,SAAUO,GACV,oBAAA1B,EACA,iBAAAC,CAAA,CAAA,EAID,CAAC3B,GAAiBiG,GAClBa,EAAAA,IAACS,GAAAA,gBAAA,CACA,UAAWzG,GACX,aAAcmC,GACd,QAASC,GACT,OAAQmC,EACR,eAAAtC,EACA,eAAgBhD,EAChB,QAAAM,CAAA,CAAA,EAGDL,IACCiG,GACC,CAAC,CAACN,EAAgB,QAClBA,EAAgB,MAAO6B,GAAQA,IAAQ,EAAK,IAC7CV,EAAAA,IAACW,GAAAA,aAAA,CACA,QAAApH,EACA,cAAAR,EACA,SAAUyD,GACV,eAAAP,EACA,oBAAArB,EACA,iBAAAC,CAAA,CAAA,EAIHmF,EAAAA,IAACY,GAAAA,SAAA,CACA,iBAAAhH,GACA,oBAAAE,EACA,QAAAP,EACA,SAAU8C,EACV,gBAAAmC,GACA,cAAAzF,EACA,QAAS+F,EACT,iBAAAzE,GACA,IAAKgD,EACL,aAAAH,EACA,YAAA1C,EACA,iBAAkBoB,GAClB,6BAAAjB,GACA,oBAAAC,EACA,iBAAAC,CAAA,CAAA,CACD,CAAA,CAAA,EAGD,CAAC,CAAC9B,GAAiB,CAACwG,IAAyBhG,IAAY,OACzDyG,EAAAA,IAACa,GAAAA,QAAA,CACA,QAAS,IAAM,CACdtE,GAAA,EACA1C,KAAA,CACD,EACA,QAAS4C,GACT,KACCR,GAAkB3C,EAAW4C,EAAkBH,EAEhD,WAAYpC,GACZ,cAAAI,GACA,gBAAAW,EAAA,CAAA,CACD,CAAA,CAAA,EAGD,CAAC,CAACsC,GACFgD,EAAAA,IAACc,GAAAA,YAAA,CACA,MAAO9D,EAAgB,MACvB,YAAaA,EAAgB,YAC7B,QAAAzD,CAAA,CAAA,CACD,CAAA,CAAA,CAIJ"}
1	+ {"version":3,"file":"OpennedDropdown.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.tsx"],"sourcesContent":["import ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport RetryIcon from '@src/assets/icons/refresh-purple.svg';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport { useDropdown } from '../../hooks/useDropdown';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tMultiSelectOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from '../../type';\nimport { Description } from './description/Description';\nimport { FreeFormMenu } from './menu/FreeFormMenu';\nimport { MenuList } from './menu/MenuList';\nimport { SelectAllMenu } from './menu/SelectAllMenu';\nimport MultiSelectDropdownBottomBar from './multiSelect/MultiSelectDropdownBottomBar';\nimport {\n\tMenuListContainer,\n\tOpennedDropdownContainer,\n} from './OpennedDropdown.styled';\nimport { SearchBox } from './searchbox/SearchBox';\nimport { SearchZeroState } from './searchbox/SearchZeroState';\n\n/** CONSTANTS /\nconst defaults = {\n\theight: 304,\n\twidth: 290,\n};\n\nexport const OpenedDropdown: React.FC<OpenDropdownProps> = ({\n\toptions,\n\tisSearchable,\n\tsearchPlaceholder,\n\tstaticMenuHeight,\n\tisMultiSelect,\n\tmaxSelections,\n\twidth,\n\tallowFreeForm,\n\theight,\n\tonClose,\n\tonSelect,\n\tonSearch,\n\tversion,\n\tskipSorting,\n\theaderRef,\n\thideSelectAll,\n\tprimaryButtonText,\n\tonInfiniteScroll,\n\tonMultiSelectClear: onMultiSelectClearProp,\n\tonDropdownItemClick,\n\tbuttonOptions,\n\tisSearchLoading,\n\tisOptionsLoading,\n\toptionsErrorState,\n\tdisableSearchOptions,\n\tdisableSearchedOptionExcept,\n\tuseDefaultCursor,\n\tcontainerStyle = {},\n\tzeroState = undefined,\n\tisDraggable = false,\n\tonOptionsReorder,\n\thideClearButton = false,\n\tshowCheckboxForCustomElement = false,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n\tchildrenLayout,\n\tcollapsibleChildren,\n\thideSelectedCount,\n}) => {\n\t// Sort options with selected at top, unselected at bottom, maintaining order within groups\n\tconst sortOptionsWithSelectedOnTop = useCallback(\n\t\t(opts: DropdownOption[]): DropdownOption[] => {\n\t\t\tif (!isDraggable \|\| !isMultiSelect) return opts;\n\n\t\t\tconst selected: DropdownOption[] = [];\n\t\t\tconst unselected: DropdownOption[] = [];\n\n\t\t\topts.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t// Handle grouped options - maintain grouping\n\t\t\t\t\tunselected.push(option);\n\t\t\t\t} else {\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tif (singleOption.selected) {\n\t\t\t\t\t\tselected.push(option);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tunselected.push(option);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn [...selected, ...unselected];\n\t\t},\n\t\t[isDraggable, isMultiSelect],\n\t);\n\n\tconst [localOptions, setLocalOptions] = useState<DropdownOption[]>(() =>\n\t\tsortOptionsWithSelectedOnTop(options),\n\t);\n\tconst localOptionsRef = useRef<DropdownOption[]>(localOptions);\n\tconst hasReorderedRef = useRef(false);\n\tconst onOptionsReorderRef = useRef(onOptionsReorder);\n\n\tuseEffect(() => {\n\t\tsetLocalOptions(sortOptionsWithSelectedOnTop(options));\n\t}, [options, sortOptionsWithSelectedOnTop]);\n\n\tuseEffect(() => {\n\t\tlocalOptionsRef.current = localOptions;\n\t}, [localOptions]);\n\n\tuseEffect(() => {\n\t\tonOptionsReorderRef.current = onOptionsReorder;\n\t}, [onOptionsReorder]);\n\n\t// Fire onOptionsReorder on unmount (dropdown close from Apply or click-outside)\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (hasReorderedRef.current && onOptionsReorderRef.current) {\n\t\t\t\tonOptionsReorderRef.current(localOptionsRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleOptionsReorder = useCallback(\n\t\t(reorderedOptions: DropdownOption[]) => {\n\t\t\tsetLocalOptions(reorderedOptions);\n\t\t\t// For version 2.0 (no Apply button), apply reorder immediately\n\t\t\tif (version === '2.0') {\n\t\t\t\tonOptionsReorder?.(reorderedOptions);\n\t\t\t} else {\n\t\t\t\t// For version 1.0, defer until Apply/close (handled by unmount cleanup)\n\t\t\t\thasReorderedRef.current = true;\n\t\t\t}\n\t\t},\n\t\t[onOptionsReorder, version],\n\t);\n\n\tconst optionsToUse = isDraggable ? localOptions : options;\n\tconst {\n\t\tdropdownOptions,\n\t\tsearch,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tsearchError,\n\t\tretrySearch,\n\t\tonApplyHandler,\n\t\tselectAllHandler,\n\t\tonMultiSelectClear,\n\t\tonFreeFormSelect,\n\t\tonMultiSelectApply,\n\t\tlatestDropdownOptionsRef,\n\t\tgetSelectedOptions,\n\t\tgetCurrentSelectionCount,\n\t} = useDropdown(\n\t\tversion,\n\t\toptionsToUse,\n\t\tonSelect,\n\t\tskipSorting \|\| isDraggable,\n\t\tisMultiSelect,\n\t\tonSearch,\n\t\tdisableSearchOptions,\n\t\tdisableSearchedOptionExcept,\n\t\tmaxSelections,\n\t);\n\tconst [widthState, setWidthState] = useState(width ?? defaults.width);\n\tconst [descriptionInfo, setDescription] = useState<{\n\t\ttitle: string;\n\t\tdescription: string;\n\t} \| null>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst childRefs = useRef([]);\n\tconst menuListRef = useRef<HTMLDivElement>(null);\n\tuseOutside(\n\t\tref,\n\t\t() => {\n\t\t\tsetDescription(null);\n\t\t\tif (isMultiSelect && version === '2.0') {\n\t\t\t\tconst optionsToSend = getSelectedOptions(\n\t\t\t\t\tlatestDropdownOptionsRef.current,\n\t\t\t\t);\n\t\t\t\tonClose?.(optionsToSend);\n\t\t\t} else {\n\t\t\t\tonClose?.(dropdownOptions);\n\t\t\t}\n\t\t},\n\t\t[headerRef, childRefs],\n\t);\n\n\t// Auto-focus dropdown when it opens for keyboard navigation while preventing scroll to maintain popper positioning\n\tuseEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tif (ref.current) {\n\t\t\t\tref.current.focus({ preventScroll: true });\n\t\t\t}\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, []);\n\n\t// Get flattened selectable options\n\tconst getFlattenedOptions = (opts: DropdownOption[]): SingleOption[] => {\n\t\tconst flattened: SingleOption[] = [];\n\t\topts.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\tconst groupedOption = option as GroupedOption;\n\t\t\t\tgroupedOption.options.forEach((nestedOption) => {\n\t\t\t\t\tif (!nestedOption.disabled) {\n\t\t\t\t\t\tflattened.push(nestedOption);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tflattened.push(singleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn flattened;\n\t};\n\n\t/* Keyboard navigation handler /\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst currentOptions =\n\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions;\n\t\t\tconst flattenedOptions = getFlattenedOptions(currentOptions);\n\n\t\t\tif (flattenedOptions.length === 0) return;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev < flattenedOptions.length - 1 ? prev + 1 : 0;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev > 0 ? prev - 1 : flattenedOptions.length - 1;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'Enter' && focusedIndex >= 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst focusedOption = flattenedOptions[focusedIndex];\n\t\t\t\tif (focusedOption) {\n\t\t\t\t\t// onApplyHandler handles the selection state and calls onSelect internally\n\t\t\t\t\tonApplyHandler({\n\t\t\t\t\t\t...focusedOption,\n\t\t\t\t\t\tselected: !focusedOption.selected,\n\t\t\t\t\t});\n\t\t\t\t\t// Also trigger onDropdownItemClick if provided\n\t\t\t\t\tif (onDropdownItemClick) {\n\t\t\t\t\t\tonDropdownItemClick(focusedOption);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst dropdownElement = ref.current;\n\t\tif (dropdownElement) {\n\t\t\tdropdownElement.addEventListener('keydown', handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdropdownElement.removeEventListener('keydown', handleKeyDown);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tfocusedIndex,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tdropdownOptions,\n\t\tonSearch,\n\t\tonApplyHandler,\n\t\tonDropdownItemClick,\n\t]);\n\n\t// LOCAL CONSTANTS\n\tconst heightToUse = height ?? defaults.height;\n\tconst menuListMaxHeight =\n\t\ttypeof heightToUse === 'number'\n\t\t\t? isSearchable && isMultiSelect\n\t\t\t\t? heightToUse - 96\n\t\t\t\t: (isSearchable && !isMultiSelect) \|\| (!isSearchable && isMultiSelect)\n\t\t\t\t? heightToUse - 48\n\t\t\t\t: heightToUse\n\t\t\t: heightToUse;\n\n\tfunction showDescription(title?: string, description?: string) {\n\t\tif (title && description) {\n\t\t\tsetDescription({\n\t\t\t\ttitle,\n\t\t\t\tdescription,\n\t\t\t});\n\t\t} else {\n\t\t\tsetDescription(null);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst widthToUse = width ?? defaults.width;\n\t\tif (descriptionInfo === null) {\n\t\t\tsetWidthState(widthToUse);\n\t\t} else if (typeof widthToUse === 'number') {\n\t\t\tsetWidthState(widthToUse 2);\n\t\t} else if (typeof widthToUse === 'string') {\n\t\t\tif (widthToUse.endsWith('px')) {\n\t\t\t\tconst newWidth = parseInt(widthToUse.replace('px', '')) * 2;\n\t\t\t\tsetWidthState(newWidth);\n\t\t\t}\n\t\t}\n\t}, [descriptionInfo]);\n\n\t/*\n\t This is to show the search result in a stateless way\n\t */\n\n\tconst exactMatchFound: boolean[] = [];\n\n\tconst processOptionsWithMaxSelections = (\n\t\toptionsToProcess: DropdownOption[],\n\t) => {\n\t\tif (!isMultiSelect \|\| (!maxSelections && maxSelections !== 0)) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Count from the full options list (not the filtered subset) so selections\n\t\t// hidden by a search query are still included in the limit check.\n\t\tconst currentSelectionCount = getCurrentSelectionCount(dropdownOptions);\n\t\tconst maxSelectionsReached = currentSelectionCount >= maxSelections;\n\n\t\tif (!maxSelectionsReached) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Disable unselected options when max selections is reached\n\t\treturn optionsToProcess.map((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\toptions: (option as GroupedOption).options.map((nestedOption) => ({\n\t\t\t\t\t\t...nestedOption,\n\t\t\t\t\t\tdisabled:\n\t\t\t\t\t\t\tnestedOption.disabled \|\|\n\t\t\t\t\t\t\t(!nestedOption.selected && maxSelectionsReached),\n\t\t\t\t\t})),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\treturn {\n\t\t\t\t\t...singleOption,\n\t\t\t\t\tdisabled:\n\t\t\t\t\t\tsingleOption.disabled \|\|\n\t\t\t\t\t\t(!singleOption.selected && maxSelectionsReached),\n\t\t\t\t};\n\t\t\t}\n\t\t});\n\t};\n\n\tconst optionsToShow = processOptionsWithMaxSelections(\n\t\t(searchedString && onSearch ? searchedOptions : dropdownOptions)\n\t\t\t.map((option) => {\n\t\t\t\tif (searchedString && !onSearch) {\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = { ...option } as GroupedOption;\n\t\t\t\t\t\tgroupedOption.options = groupedOption.options.filter((op) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\top.label?.toLowerCase().includes(searchedString.toLowerCase())\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t\t!searchedString \|\| op.label === searchedString,\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn groupedOption.options.length > 0 ? groupedOption : null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase()) \|\|\n\t\t\t\t\t\t\t(option as SingleOption \| MultiSelectOption).searchKey\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase())\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t!searchedString \|\| option.label === searchedString,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn option;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn option;\n\t\t\t})\n\t\t\t.filter((option) => option !== null) as DropdownOption[],\n\t);\n\n\tconst noResultForSearch =\n\t\t!!isSearchable && searchedString && optionsToShow.length === 0;\n\tconst showLoadingState = !searchedString && !!isOptionsLoading;\n\tconst showErrorState =\n\t\t!searchedString && !!optionsErrorState && !showLoadingState;\n\tconst showEmptyState =\n\t\t!searchedString &&\n\t\t!optionsToShow.length &&\n\t\t!showLoadingState &&\n\t\t!showErrorState;\n\tconst showTopLevelZeroState =\n\t\tshowLoadingState \|\| showErrorState \|\| showEmptyState;\n\n\tconst emptyStateTitle = zeroState?.title \|\| 'No results found';\n\tconst emptyStateSubTitle =\n\t\tzeroState?.subTitle \|\|\n\t\t`Please try again later or contact us at support@bik.ai if you require further assistance.`;\n\tconst errorStateTitle = optionsErrorState?.title \|\| 'Failed to load options';\n\tconst errorStateSubTitle =\n\t\toptionsErrorState?.subTitle \|\|\n\t\t'Something went wrong while fetching the list. Please try again';\n\tconst defaultErrorActionButton = {\n\t\tbuttonText: 'Try again',\n\t\tbuttonType: 'text' as const,\n\t\tsize: 'small' as const,\n\t\tbuttonTextColor: COLORS.background.inverseLight,\n\t\tcustomIconColor: COLORS.background.inverseLight,\n\t\tLeadingIcon: RetryIcon,\n\t};\n\n\tconst mergedErrorState = {\n\t\tIconHolderStyle: {\n\t\t\tbackground: COLORS.background.negative.light,\n\t\t},\n\t\tIcon: (\n\t\t\t<ErrorInfoIcon color={COLORS.content.negative} width={24} height={24} />\n\t\t),\n\t\t...optionsErrorState,\n\t};\n\tmergedErrorState.actionButton = {\n\t\t...defaultErrorActionButton,\n\t\t...(optionsErrorState?.actionButton ?? {}),\n\t};\n\tconst zeroStateProps = showLoadingState\n\t\t? undefined\n\t\t: showErrorState\n\t\t? mergedErrorState\n\t\t: zeroState;\n\n\treturn (\n\t\t<OpennedDropdownContainer\n\t\t\tversion={version}\n\t\t\tref={ref}\n\t\t\ttabIndex={-1}\n\t\t\tstyle={{\n\t\t\t\t// maxWidth: descriptionInfo ? 800 : 400,\n\t\t\t\twidth: widthState,\n\t\t\t\t...containerStyle,\n\t\t\t\toutline: 'none',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: descriptionInfo ? '50%' : '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tbackground: 'white',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!isSearchable && (\n\t\t\t\t\t<SearchBox\n\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"dropdown-options-zero-state\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: staticMenuHeight ? menuListMaxHeight : heightToUse,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tbackground: COLORS.background.base,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t{...(zeroStateProps ?? {})}\n\t\t\t\t\t\t\tisLoading={showLoadingState}\n\t\t\t\t\t\t\ttitle={showErrorState ? errorStateTitle : emptyStateTitle}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\tshowErrorState ? errorStateSubTitle : emptyStateSubTitle\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<MenuListContainer\n\t\t\t\t\t\tdata-testid=\"dropdown-menu-list\"\n\t\t\t\t\t\tminHeight={staticMenuHeight ? menuListMaxHeight : undefined}\n\t\t\t\t\t\tmaxHeight={menuListMaxHeight}\n\t\t\t\t\t\tref={menuListRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!isMultiSelect && !noResultForSearch && !hideSelectAll && (\n\t\t\t\t\t\t\t<SelectAllMenu\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect={selectAllHandler}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!allowFreeForm && noResultForSearch && (\n\t\t\t\t\t\t\t<SearchZeroState\n\t\t\t\t\t\t\t\tisLoading={isSearchLoading}\n\t\t\t\t\t\t\t\terrorMessage={searchError}\n\t\t\t\t\t\t\t\tonRetry={retrySearch}\n\t\t\t\t\t\t\t\theight={menuListMaxHeight as number}\n\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\tcontainerWidth={width}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{allowFreeForm &&\n\t\t\t\t\t\t\t(noResultForSearch \|\|\n\t\t\t\t\t\t\t\t(!!exactMatchFound.length &&\n\t\t\t\t\t\t\t\t\texactMatchFound.every((val) => val === false))) && (\n\t\t\t\t\t\t\t\t<FreeFormMenu\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\tonSelect={onFreeFormSelect}\n\t\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\tonInfiniteScroll={onInfiniteScroll}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\tonSelect={onApplyHandler}\n\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\toptions={optionsToShow}\n\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\tref={childRefs}\n\t\t\t\t\t\t\tfocusedIndex={focusedIndex}\n\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\tonOptionsReorder={handleOptionsReorder}\n\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\tchildrenLayout={childrenLayout}\n\t\t\t\t\t\t\tcollapsibleChildren={collapsibleChildren}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuListContainer>\n\t\t\t\t)}\n\t\t\t\t{!!isMultiSelect && !showTopLevelZeroState && version !== '2.0' && (\n\t\t\t\t\t<MultiSelectDropdownBottomBar\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tonMultiSelectClear();\n\t\t\t\t\t\t\tonMultiSelectClearProp?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={onMultiSelectApply}\n\t\t\t\t\t\tlist={\n\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbuttonText={primaryButtonText}\n\t\t\t\t\t\tbuttonOptions={buttonOptions}\n\t\t\t\t\t\thideClearButton={hideClearButton}\n\t\t\t\t\t\thideSelectedCount={hideSelectedCount}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!!descriptionInfo && (\n\t\t\t\t<Description\n\t\t\t\t\ttitle={descriptionInfo.title}\n\t\t\t\t\tdescription={descriptionInfo.description}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</OpennedDropdownContainer>\n\t);\n};\n"],"names":["defaults","OpenedDropdown","options","isSearchable","searchPlaceholder","staticMenuHeight","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","childrenLayout","collapsibleChildren","hideSelectedCount","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","option","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onMultiSelectClear","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","getFlattenedOptions","flattened","nestedOption","singleOption","handleKeyDown","e","flattenedOptions","prev","newIndex","focusedElement","focusedOption","dropdownElement","heightToUse","menuListMaxHeight","showDescription","title","description","widthToUse","newWidth","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","groupedOption","op","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","emptyStateSubTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","COLORS","RetryIcon","mergedErrorState","jsx","ErrorInfoIcon","zeroStateProps","jsxs","OpennedDropdownContainer","SearchBox","ZeroState","MenuListContainer","SelectAllMenu","SearchZeroState","val","FreeFormMenu","MenuList","MultiSelectDropdownBottomBar","Description"],"mappings":"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"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js CHANGED Viewed

@@ -1,16 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("../../../../../assets/icons/chevronRight.svg.js"),I=require("react"),E=require("styled-components"),_=require("../../../../TypographyStyle.js"),d=require("../../../../../constants/Theme.js"),U=require("./FreeFormMenu.styled.js"),V=require("../../../../tooltips/Tooltip.js"),L=require("../../../../checkBox/CheckBox.js"),z=require("../../../../list-item/ListItem.js"),P=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=P(E),T=r.default(z.ListItem)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../../../../assets/icons/chevronDownOutline.svg.js"),J=require("../../../../../assets/icons/chevronRight.svg.js"),K=require("../../../../../assets/icons/chevronUpOutline.svg.js"),S=require("react"),Q=require("styled-components"),X=require("../../../../TypographyStyle.js"),l=require("../../../../../constants/Theme.js"),Y=require("./FreeFormMenu.styled.js"),Z=require("../../../../tooltips/Tooltip.js"),k=require("../../../../checkBox/CheckBox.js"),ee=require("../../../../list-item/ListItem.js"),te=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=te(Q),m=r.default(ee.ListItem)`
 	padding: ${e=>e.version==="3.0"?"8px":e.version==="2.0"?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>e.brandSelectedRow?"0":e.version==="2.0"?"2px":"0"};
-`,W=r.default.div`
+`,ne=r.default(m)`
+	padding: 8px !important;
+	margin-top: 0;
+	border-radius: 0;
+`,re=r.default.div`
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: ${({version:e})=>e==="1.0"?"0":"8px"};
 	padding: ${({version:e})=>e==="1.0"?"0":"4px"};
 	min-width: 148px;
-	border: ${({version:e})=>e==="1.0"?`1px solid ${d.DEFAULT_THEME.colorsV2.stroke.primary}`:"none"};
+	border: ${({version:e})=>e==="1.0"?`1px solid ${l.DEFAULT_THEME.colorsV2.stroke.primary}`:"none"};
 	max-height: 248px;
 	overflow-y: auto;
-`,G=r.default.div`
+`,le=r.default.div`
 	display: grid;
 	grid-template-columns: repeat(2, 2.86px);
 	grid-template-rows: repeat(3, 2.86px);
@@ -22,23 +26,36 @@
 	align-self: center;
 	height: fit-content;
 	min-height: 18px;
-`,l=r.default.div`
+`,a=r.default.div`
 	width: 2.86px;
 	height: 2.86px;
 	border-radius: 50%;
-	background-color: ${d.COLORS.content.inactive};
+	background-color: ${l.COLORS.content.inactive};
 	flex-shrink: 0;
-`,F=r.default.div`
+`,w=r.default.div`
 	display: flex;
 	align-content: center;
 	justify-content: center;
 	gap: 8px;
-`,J=r.default.div`
+`,se=r.default.span`
+	align-self: flex-start;
+	flex-shrink: 0;
+	width: 11px;
+	height: 9px;
+	margin-left: 4px;
+	border-left: 1px solid ${l.COLORS.content.placeholder};
+	border-bottom: 1px solid ${l.COLORS.content.placeholder};
+	border-bottom-left-radius: 4px;
+`,de=r.default.span`
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+`,ae=r.default.div`
 	margin-right: -4px;
-`,K=r.default.div`
+`,oe=r.default.div`
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	flex: 1;
-`,m=({onDragStart:e,onDragEnd:a})=>t.jsxs(G,{draggable:!0,onDragStart:e,onDragEnd:a,children:[t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{})]}),N=I.forwardRef(({option:e,isMultiSelect:a,showDescription:f,onSelect:O,last:k,version:s,onDropdownItemClick:S,useDefaultCursor:q,isFocused:M=!1,dataIndex:g=-1,isDraggable:i=!1,onDragStart:o,onDragOver:$,onDrop:w,onDragEnd:u,isDraggedOver:h=!1,showCheckboxForCustomElement:p=!1,checkboxActiveColor:v,brandSelectedRow:C},H)=>{const[R,j]=I.useState(e.selected),b=(n,c)=>{if(!n.children){x(!n.selected);const A=c?{...n,parent:c}:n;S?.(A)}},x=n=>{e.disabled||O({...e,selected:n})},D=()=>{e.description?f(e.label,e.description):f()},y=q?{cursor:"default"}:{};return t.jsx(t.Fragment,{children:t.jsx(V.Tooltip,{body:"",tooltipContent:e.children?t.jsx("div",{style:{backgroundColor:d.DEFAULT_THEME.colorsV2.surface.standard},ref:H,onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1),children:t.jsx(W,{version:s??"2.0",children:e.children.map(n=>t.jsx(T,{version:s,brandSelectedRow:C,style:s!=="1.0"&&(e?.children??[]).length-1?{borderBottom:0}:{},onClick:c=>{c.preventDefault(),b(n,e)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:e.disabled?"inactive":n.selected?"selected":"default"},n.value))})}):t.jsx(t.Fragment,{}),placement:"right-start",hideArrow:!0,children:t.jsx(T,{version:s,brandSelectedRow:C,style:k?{borderBottom:0,...y,...h?{borderTop:`2px solid ${d.COLORS.content.brand}`,opacity:.5}:{}}:{...y,...h?{borderTop:`2px solid ${d.COLORS.content.brand}`,opacity:.5}:{}},onClick:n=>{n.preventDefault(),b(e)},onMouseOver:D,listItem:{value:e.value,label:e.label},subText:e.subText,"data-option-index":g,role:"option",id:`dropdown-option-${g}`,"aria-selected":!!e.selected,onDragOver:i?$:void 0,onDrop:i?w:void 0,leadingIcon:a&&!(p&&e.customComponent)?t.jsxs(F,{children:[i&&t.jsx(m,{onDragStart:o,onDragEnd:u}),t.jsx(L.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:x,activeColor:v}),t.jsx(J,{children:e.leadingIcon})]}):i?t.jsxs(K,{children:[t.jsx(m,{onDragStart:o,onDragEnd:u}),e.leadingIcon&&t.jsx("div",{children:e.leadingIcon})]}):e.leadingIcon?t.jsx(t.Fragment,{children:e.leadingIcon}):void 0,customComponent:a&&p&&e.customComponent?t.jsxs(F,{children:[i&&t.jsx(m,{onDragStart:o,onDragEnd:u}),t.jsx(L.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:x,activeColor:v}),e.customComponent]}):e.customComponent,trailingIcon:e.isFreeForm?t.jsx(U.FreeFormContainer,{children:t.jsx(_.BodyCaption,{style:{color:d.COLORS.content.secondary},children:"Freeform"})}):e.children?t.jsx(B.default,{width:12,height:12}):e.trailingIcon?t.jsx(t.Fragment,{children:e.trailingIcon}):void 0,variant:e.disabled?"inactive":e.selected||!a&&R?"selected":M?"focused":"default"})})})});exports.MenuItem=N;
+`,p=({onDragStart:e,onDragEnd:o})=>t.jsxs(le,{draggable:!0,onDragStart:e,onDragEnd:o,children:[t.jsx(a,{}),t.jsx(a,{}),t.jsx(a,{}),t.jsx(a,{}),t.jsx(a,{}),t.jsx(a,{})]}),ie=S.forwardRef(({option:e,isMultiSelect:o,showDescription:g,onSelect:F,last:$,version:s,onDropdownItemClick:q,useDefaultCursor:R,isFocused:M=!1,dataIndex:b=-1,isDraggable:i=!1,onDragStart:u,onDragOver:D,onDrop:H,onDragEnd:x,isDraggedOver:v=!1,showCheckboxForCustomElement:j=!1,checkboxActiveColor:C,brandSelectedRow:y,childrenLayout:E="flyout",isChildRow:A=!1,isPartiallyChecked:I=!1,isCollapsible:B=!1,isCollapsed:f=!1,onToggleCollapse:_},U)=>{const[V,L]=S.useState(e.selected),d=E==="nested",z=d?ne:m,N=!d&&s==="2.0"?"SMALL":"DEFAULT",O=(n,c)=>{if(!n.children||d){h(!n.selected);const W=c?{...n,parent:c}:n;q?.(W)}},h=n=>{e.disabled||F({...e,selected:n})},P=()=>{e.description?g(e.label,e.description):g()},T=R?{cursor:"default"}:{};return t.jsx(t.Fragment,{children:t.jsx(Z.Tooltip,{body:"",tooltipContent:e.children&&!d?t.jsx("div",{style:{backgroundColor:l.DEFAULT_THEME.colorsV2.surface.standard},ref:U,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),children:t.jsx(re,{version:s??"2.0",children:e.children.map(n=>t.jsx(m,{version:s,brandSelectedRow:y,style:s!=="1.0"&&(e?.children??[]).length-1?{borderBottom:0}:{},onClick:c=>{c.preventDefault(),O(n,e)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:e.disabled?"inactive":n.selected?"selected":"default"},n.value))})}):t.jsx(t.Fragment,{}),placement:"right-start",hideArrow:!0,children:t.jsx(z,{version:s,brandSelectedRow:y,style:$?{borderBottom:0,...T,...v?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}}:{...T,...v?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}},onClick:n=>{n.preventDefault(),O(e)},onMouseOver:P,listItem:{value:e.value,label:e.label},subText:e.subText,"data-option-index":b,role:"option",id:`dropdown-option-${b}`,"aria-selected":!!e.selected,onDragOver:i?D:void 0,onDrop:i?H:void 0,leadingIcon:o&&!(j&&e.customComponent)?t.jsxs(w,{children:[A&&t.jsx(se,{}),i&&t.jsx(p,{onDragStart:u,onDragEnd:x}),t.jsx(k.CheckBox,{size:N,isDisabled:e.disabled??!1,isChecked:!!e.selected||I,isPartiallyChecked:I,onValueChange:h,activeColor:C}),t.jsx(ae,{children:e.leadingIcon})]}):i?t.jsxs(oe,{children:[t.jsx(p,{onDragStart:u,onDragEnd:x}),e.leadingIcon&&t.jsx("div",{children:e.leadingIcon})]}):e.leadingIcon?t.jsx(t.Fragment,{children:e.leadingIcon}):void 0,customComponent:o&&j&&e.customComponent?t.jsxs(w,{children:[i&&t.jsx(p,{onDragStart:u,onDragEnd:x}),t.jsx(k.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:h,activeColor:C}),e.customComponent]}):e.customComponent,trailingIcon:e.isFreeForm?t.jsx(Y.FreeFormContainer,{children:t.jsx(X.BodyCaption,{style:{color:l.COLORS.content.secondary},children:"Freeform"})}):e.children&&d&&B?t.jsx(de,{role:"button","aria-expanded":!f,"aria-label":`${f?"Expand":"Collapse"} ${e.label}`,onClick:n=>{n.preventDefault(),n.stopPropagation(),_?.()},children:f?t.jsx(G.default,{width:16,height:16}):t.jsx(K.default,{width:16,height:16})}):e.children&&!d?t.jsx(J.default,{width:12,height:12}):e.trailingIcon?t.jsx(t.Fragment,{children:e.trailingIcon}):void 0,variant:e.disabled?"inactive":e.selected||!o&&V?"selected":M?"focused":"default"})})})});exports.MenuItem=ie;
 //# sourceMappingURL=MenuItem.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight.svg';\nimport { forwardRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { MultiSelectOption, SingleOption } from '../../../type';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nconst StyledListItem = styled(ListItem)<{\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tbrandSelectedRow?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.version === '3.0'\n\t\t\t? '8px'\n\t\t\t: props.version === '2.0'\n\t\t\t? '8px 12px'\n\t\t\t: '14px 16px'} !important;\n\tcursor: pointer;\n\tmargin-top: ${(props) =>\n\t\tprops.brandSelectedRow ? '0' : props.version === '2.0' ? '2px' : '0'};\n`;\n\nconst StyledChildDropdownContainer = styled.div<{ version: string }>`\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '1.0' ? '0' : '8px')};\n\tpadding: ${({ version }) => (version === '1.0' ? '0' : '4px')};\n\tmin-width: 148px;\n\tborder: ${({ version }) =>\n\t\tversion === '1.0'\n\t\t\t? `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`\n\t\t\t: 'none'};\n\tmax-height: 248px;\n\toverflow-y: auto;\n`;\n\nconst DragHandleContainer = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 2.86px);\n\tgrid-template-rows: repeat(3, 2.86px);\n\tcolumn-gap: 3.8px;\n\trow-gap: 4px;\n\tmargin-right: 8px;\n\tcursor: move;\n\tflex-shrink: 0;\n\talign-self: center;\n\theight: fit-content;\n\tmin-height: 18px;\n`;\n\nconst DragDot = styled.div`\n\twidth: 2.86px;\n\theight: 2.86px;\n\tborder-radius: 50%;\n\tbackground-color: ${COLORS.content.inactive};\n\tflex-shrink: 0;\n`;\n\nconst MultiSelectLeadingContainer = styled.div`\n\tdisplay: flex;\n\talign-content: center;\n\tjustify-content: center;\n\tgap: 8px;\n`;\n\nconst LeadingIconWrapper = styled.div`\n\tmargin-right: -4px;\n`;\n\nconst SingleSelectDragContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tflex: 1;\n`;\n\ninterface DragHandleIconProps {\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n}\n\nconst DragHandleIcon = ({ onDragStart, onDragEnd }: DragHandleIconProps) => (\n\t<DragHandleContainer\n\t\tdraggable\n\t\tonDragStart={onDragStart}\n\t\tonDragEnd={onDragEnd}\n\t>\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t</DragHandleContainer>\n);\n\ninterface MenuItemProps {\n\toption: SingleOption \| MultiSelectOption;\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (option: SingleOption) => void;\n\tonDropdownItemClick?: (option: SingleOption) => void;\n\tlast?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tuseDefaultCursor?: boolean;\n\tisFocused?: boolean;\n\tdataIndex?: number;\n\tisDraggable?: boolean;\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tisDraggedOver?: boolean;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n\t(\n\t\t{\n\t\t\toption,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tlast,\n\t\t\tversion,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tisFocused = false,\n\t\t\tdataIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonDragStart,\n\t\t\tonDragOver,\n\t\t\tonDrop,\n\t\t\tonDragEnd,\n\t\t\tisDraggedOver = false,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t},\n\t\tchildRef,\n\t) => {\n\t\tconst [isChildOptionHovered, setIsChildOptionHovered] = useState(\n\t\t\toption.selected,\n\t\t);\n\n\t\tconst handleOptionClick = (option: SingleOption, parent?: SingleOption) => {\n\t\t\tif (!option.children) {\n\t\t\t\tonCheckHandler(!option.selected);\n\t\t\t\tconst updatedOption = parent ? { ...option, parent } : option;\n\t\t\t\tonDropdownItemClick?.(updatedOption);\n\t\t\t}\n\t\t};\n\n\t\tconst onCheckHandler = (checked: boolean) => {\n\t\t\tif (!option.disabled) {\n\t\t\t\tonSelect({ ...option, selected: checked });\n\t\t\t}\n\t\t};\n\n\t\tconst onHoverIn = () => {\n\t\t\tif (option.description) {\n\t\t\t\tshowDescription(option.label, option.description);\n\t\t\t} else {\n\t\t\t\tshowDescription();\n\t\t\t}\n\t\t};\n\n\t\tconst cursorConfig = useDefaultCursor ? { cursor: 'default' } : {};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Tooltip\n\t\t\t\t\tbody={''}\n\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\toption.children ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.standard,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={childRef}\n\t\t\t\t\t\t\t\tonMouseEnter={() => setIsChildOptionHovered(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setIsChildOptionHovered(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<StyledChildDropdownContainer version={version ?? '2.0'}>\n\t\t\t\t\t\t\t\t\t{option.children.map((child) => (\n\t\t\t\t\t\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tkey={child.value}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tversion !== '1.0' && (option?.children ?? []).length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { borderBottom: 0 }\n\t\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\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\thandleOptionClick(child, option);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tlistItem={{ value: child.value, label: child.label }}\n\t\t\t\t\t\t\t\t\t\t\tsubText={child.subText}\n\t\t\t\t\t\t\t\t\t\t\tleadingIcon={child.leadingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tcustomComponent={child.customComponent}\n\t\t\t\t\t\t\t\t\t\t\ttrailingIcon={child.trailingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: child.selected\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'default'\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))}\n\t\t\t\t\t\t\t\t</StyledChildDropdownContainer>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\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\tplacement={'right-start'}\n\t\t\t\t\thideArrow={true}\n\t\t\t\t>\n\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tlast\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tborderBottom: 0,\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\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 }\n\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\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 }\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\thandleOptionClick(option);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonMouseOver={onHoverIn}\n\t\t\t\t\t\tlistItem={{ value: option.value, label: option.label }}\n\t\t\t\t\t\tsubText={option.subText}\n\t\t\t\t\t\tdata-option-index={dataIndex}\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tid={`dropdown-option-${dataIndex}`}\n\t\t\t\t\t\taria-selected={!!option.selected}\n\t\t\t\t\t\tonDragOver={isDraggable ? onDragOver : undefined}\n\t\t\t\t\t\tonDrop={isDraggable ? onDrop : undefined}\n\t\t\t\t\t\tleadingIcon={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\t!(showCheckboxForCustomElement && option.customComponent) ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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\t<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<LeadingIconWrapper>{option.leadingIcon}</LeadingIconWrapper>\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : isDraggable ? (\n\t\t\t\t\t\t\t\t<SingleSelectDragContainer>\n\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.leadingIcon && <div>{option.leadingIcon}</div>}\n\t\t\t\t\t\t\t\t</SingleSelectDragContainer>\n\t\t\t\t\t\t\t) : option.leadingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.leadingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustomComponent={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\tshowCheckboxForCustomElement &&\n\t\t\t\t\t\t\toption.customComponent ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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\t<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.customComponent}\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\toption.customComponent\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttrailingIcon={\n\t\t\t\t\t\t\toption.isFreeForm ? (\n\t\t\t\t\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\tFreeform\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</FreeFormContainer>\n\t\t\t\t\t\t\t) : option.children ? (\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={12} height={12} />\n\t\t\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.trailingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t: option.selected \|\| (!isMultiSelect && isChildOptionHovered)\n\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t: isFocused\n\t\t\t\t\t\t\t\t? 'focused'\n\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Tooltip>\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["StyledListItem","styled","ListItem","props","StyledChildDropdownContainer","version","DEFAULT_THEME","DragHandleContainer","DragDot","COLORS","MultiSelectLeadingContainer","LeadingIconWrapper","SingleSelectDragContainer","DragHandleIcon","onDragStart","onDragEnd","jsxs","jsx","MenuItem","forwardRef","option","isMultiSelect","showDescription","onSelect","last","onDropdownItemClick","useDefaultCursor","isFocused","dataIndex","isDraggable","onDragOver","onDrop","isDraggedOver","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","childRef","isChildOptionHovered","setIsChildOptionHovered","useState","handleOptionClick","parent","onCheckHandler","updatedOption","checked","onHoverIn","cursorConfig","Fragment","Tooltip","child","e","CheckBox","FreeFormContainer","BodyCaption","ChevronRightIcon"],"mappings":"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"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuItem.tsx"],"sourcesContent":["import ChevronDownIcon from '@src/assets/icons/chevronDownOutline.svg';\nimport ChevronRightIcon from '@src/assets/icons/chevronRight.svg';\nimport ChevronUpIcon from '@src/assets/icons/chevronUpOutline.svg';\nimport { forwardRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { MultiSelectOption, SingleOption } from '../../../type';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nconst StyledListItem = styled(ListItem)<{\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tbrandSelectedRow?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.version === '3.0'\n\t\t\t? '8px'\n\t\t\t: props.version === '2.0'\n\t\t\t? '8px 12px'\n\t\t\t: '14px 16px'} !important;\n\tcursor: pointer;\n\tmargin-top: ${(props) =>\n\t\tprops.brandSelectedRow ? '0' : props.version === '2.0' ? '2px' : '0'};\n`;\n\n/*\n The nested layout pins its own row metrics — 8px padding, an 18px checkbox and\n * square, flush rows — so a group tree reads the same at every `version`. The\n * elbow connector geometry is fixed, so the rows it hangs off have to be too.\n /\nconst StyledNestedListItem = styled(StyledListItem)`\n\tpadding: 8px !important;\n\tmargin-top: 0;\n\tborder-radius: 0;\n`;\n\nconst StyledChildDropdownContainer = styled.div<{ version: string }>`\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '1.0' ? '0' : '8px')};\n\tpadding: ${({ version }) => (version === '1.0' ? '0' : '4px')};\n\tmin-width: 148px;\n\tborder: ${({ version }) =>\n\t\tversion === '1.0'\n\t\t\t? `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`\n\t\t\t: 'none'};\n\tmax-height: 248px;\n\toverflow-y: auto;\n`;\n\nconst DragHandleContainer = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 2.86px);\n\tgrid-template-rows: repeat(3, 2.86px);\n\tcolumn-gap: 3.8px;\n\trow-gap: 4px;\n\tmargin-right: 8px;\n\tcursor: move;\n\tflex-shrink: 0;\n\talign-self: center;\n\theight: fit-content;\n\tmin-height: 18px;\n`;\n\nconst DragDot = styled.div`\n\twidth: 2.86px;\n\theight: 2.86px;\n\tborder-radius: 50%;\n\tbackground-color: ${COLORS.content.inactive};\n\tflex-shrink: 0;\n`;\n\nconst MultiSelectLeadingContainer = styled.div`\n\tdisplay: flex;\n\talign-content: center;\n\tjustify-content: center;\n\tgap: 8px;\n`;\n\n/* Elbow joining a nested child row back to its parent. /\nconst Connector = styled.span`\n\talign-self: flex-start;\n\tflex-shrink: 0;\n\twidth: 11px;\n\theight: 9px;\n\tmargin-left: 4px;\n\tborder-left: 1px solid ${COLORS.content.placeholder};\n\tborder-bottom: 1px solid ${COLORS.content.placeholder};\n\tborder-bottom-left-radius: 4px;\n`;\n\n/* Hit area for the collapse chevron, so clicking it never toggles selection. /\nconst CollapseToggle = styled.span`\n\tdisplay: flex;\n\talign-items: center;\n\tcursor: pointer;\n`;\n\nconst LeadingIconWrapper = styled.div`\n\tmargin-right: -4px;\n`;\n\nconst SingleSelectDragContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tflex: 1;\n`;\n\ninterface DragHandleIconProps {\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n}\n\nconst DragHandleIcon = ({ onDragStart, onDragEnd }: DragHandleIconProps) => (\n\t<DragHandleContainer\n\t\tdraggable\n\t\tonDragStart={onDragStart}\n\t\tonDragEnd={onDragEnd}\n\t>\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t</DragHandleContainer>\n);\n\ninterface MenuItemProps {\n\toption: SingleOption \| MultiSelectOption;\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (option: SingleOption) => void;\n\tonDropdownItemClick?: (option: SingleOption) => void;\n\tlast?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tuseDefaultCursor?: boolean;\n\tisFocused?: boolean;\n\tdataIndex?: number;\n\tisDraggable?: boolean;\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tisDraggedOver?: boolean;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n\tchildrenLayout?: 'flyout' \| 'nested';\n\t/* Indents the row under its parent and draws the elbow connector. /\n\tisChildRow?: boolean;\n\t/* Tri-state for a nested parent whose children are only partly selected. /\n\tisPartiallyChecked?: boolean;\n\t/* Shows the collapse chevron on a nested parent row. */\n\tisCollapsible?: boolean;\n\tisCollapsed?: boolean;\n\tonToggleCollapse?: () => void;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n\t(\n\t\t{\n\t\t\toption,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tlast,\n\t\t\tversion,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tisFocused = false,\n\t\t\tdataIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonDragStart,\n\t\t\tonDragOver,\n\t\t\tonDrop,\n\t\t\tonDragEnd,\n\t\t\tisDraggedOver = false,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t\tchildrenLayout = 'flyout',\n\t\t\tisChildRow = false,\n\t\t\tisPartiallyChecked = false,\n\t\t\tisCollapsible = false,\n\t\t\tisCollapsed = false,\n\t\t\tonToggleCollapse,\n\t\t},\n\t\tchildRef,\n\t) => {\n\t\tconst [isChildOptionHovered, setIsChildOptionHovered] = useState(\n\t\t\toption.selected,\n\t\t);\n\n\t\t// Nested children are rendered inline by MenuList, so there is no flyout\n\t\t// and — unlike the flyout layout — a parent row is itself selectable.\n\t\tconst isNested = childrenLayout === 'nested';\n\t\tconst RowListItem = isNested ? StyledNestedListItem : StyledListItem;\n\t\tconst checkboxSize = !isNested && version === '2.0' ? 'SMALL' : 'DEFAULT';\n\n\t\tconst handleOptionClick = (option: SingleOption, parent?: SingleOption) => {\n\t\t\tif (!option.children \|\| isNested) {\n\t\t\t\tonCheckHandler(!option.selected);\n\t\t\t\tconst updatedOption = parent ? { ...option, parent } : option;\n\t\t\t\tonDropdownItemClick?.(updatedOption);\n\t\t\t}\n\t\t};\n\n\t\tconst onCheckHandler = (checked: boolean) => {\n\t\t\tif (!option.disabled) {\n\t\t\t\tonSelect({ ...option, selected: checked });\n\t\t\t}\n\t\t};\n\n\t\tconst onHoverIn = () => {\n\t\t\tif (option.description) {\n\t\t\t\tshowDescription(option.label, option.description);\n\t\t\t} else {\n\t\t\t\tshowDescription();\n\t\t\t}\n\t\t};\n\n\t\tconst cursorConfig = useDefaultCursor ? { cursor: 'default' } : {};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Tooltip\n\t\t\t\t\tbody={''}\n\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\toption.children && !isNested ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.standard,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={childRef}\n\t\t\t\t\t\t\t\tonMouseEnter={() => setIsChildOptionHovered(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setIsChildOptionHovered(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<StyledChildDropdownContainer version={version ?? '2.0'}>\n\t\t\t\t\t\t\t\t\t{option.children.map((child) => (\n\t\t\t\t\t\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tkey={child.value}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tversion !== '1.0' && (option?.children ?? []).length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { borderBottom: 0 }\n\t\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\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\thandleOptionClick(child, option);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tlistItem={{ value: child.value, label: child.label }}\n\t\t\t\t\t\t\t\t\t\t\tsubText={child.subText}\n\t\t\t\t\t\t\t\t\t\t\tleadingIcon={child.leadingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tcustomComponent={child.customComponent}\n\t\t\t\t\t\t\t\t\t\t\ttrailingIcon={child.trailingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: child.selected\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'default'\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))}\n\t\t\t\t\t\t\t\t</StyledChildDropdownContainer>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\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\tplacement={'right-start'}\n\t\t\t\t\thideArrow={true}\n\t\t\t\t>\n\t\t\t\t\t<RowListItem\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tlast\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tborderBottom: 0,\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\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 }\n\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\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 }\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\thandleOptionClick(option);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonMouseOver={onHoverIn}\n\t\t\t\t\t\tlistItem={{ value: option.value, label: option.label }}\n\t\t\t\t\t\tsubText={option.subText}\n\t\t\t\t\t\tdata-option-index={dataIndex}\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tid={`dropdown-option-${dataIndex}`}\n\t\t\t\t\t\taria-selected={!!option.selected}\n\t\t\t\t\t\tonDragOver={isDraggable ? onDragOver : undefined}\n\t\t\t\t\t\tonDrop={isDraggable ? onDrop : undefined}\n\t\t\t\t\t\tleadingIcon={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\t!(showCheckboxForCustomElement && option.customComponent) ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isChildRow && <Connector />}\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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\t<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={checkboxSize}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected \|\| isPartiallyChecked}\n\t\t\t\t\t\t\t\t\t\tisPartiallyChecked={isPartiallyChecked}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<LeadingIconWrapper>{option.leadingIcon}</LeadingIconWrapper>\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : isDraggable ? (\n\t\t\t\t\t\t\t\t<SingleSelectDragContainer>\n\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.leadingIcon && <div>{option.leadingIcon}</div>}\n\t\t\t\t\t\t\t\t</SingleSelectDragContainer>\n\t\t\t\t\t\t\t) : option.leadingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.leadingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustomComponent={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\tshowCheckboxForCustomElement &&\n\t\t\t\t\t\t\toption.customComponent ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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\t<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.customComponent}\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\toption.customComponent\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttrailingIcon={\n\t\t\t\t\t\t\toption.isFreeForm ? (\n\t\t\t\t\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\tFreeform\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</FreeFormContainer>\n\t\t\t\t\t\t\t) : option.children && isNested && isCollapsible ? (\n\t\t\t\t\t\t\t\t<CollapseToggle\n\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\taria-expanded={!isCollapsed}\n\t\t\t\t\t\t\t\t\taria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${\n\t\t\t\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tonToggleCollapse?.();\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\t\t{isCollapsed ? (\n\t\t\t\t\t\t\t\t\t\t<ChevronDownIcon width={16} height={16} />\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<ChevronUpIcon width={16} height={16} />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</CollapseToggle>\n\t\t\t\t\t\t\t) : option.children && !isNested ? (\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={12} height={12} />\n\t\t\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.trailingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t: option.selected \|\| (!isMultiSelect && isChildOptionHovered)\n\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t: isFocused\n\t\t\t\t\t\t\t\t? 'focused'\n\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Tooltip>\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["StyledListItem","styled","ListItem","props","StyledNestedListItem","StyledChildDropdownContainer","version","DEFAULT_THEME","DragHandleContainer","DragDot","COLORS","MultiSelectLeadingContainer","Connector","CollapseToggle","LeadingIconWrapper","SingleSelectDragContainer","DragHandleIcon","onDragStart","onDragEnd","jsxs","jsx","MenuItem","forwardRef","option","isMultiSelect","showDescription","onSelect","last","onDropdownItemClick","useDefaultCursor","isFocused","dataIndex","isDraggable","onDragOver","onDrop","isDraggedOver","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","childrenLayout","isChildRow","isPartiallyChecked","isCollapsible","isCollapsed","onToggleCollapse","childRef","isChildOptionHovered","setIsChildOptionHovered","useState","isNested","RowListItem","checkboxSize","handleOptionClick","parent","onCheckHandler","updatedOption","checked","onHoverIn","cursorConfig","Fragment","Tooltip","child","e","CheckBox","FreeFormContainer","BodyCaption","ChevronDownIcon","ChevronUpIcon","ChevronRightIcon"],"mappings":"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"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),w=require("./MenuItem.js"),G=require("./MenuList.styled.js"),J=r.forwardRef(({options:d,isMultiSelect:h,showDescription:y,onSelect:O,version:o,onInfiniteScroll:m,onDropdownItemClick:D,useDefaultCursor:M,focusedIndex:E=-1,isDraggable:c=!1,onOptionsReorder:F,showCheckboxForCustomElement:R=!1,checkboxActiveColor:q,brandSelectedRow:L},s)=>{const f=r.useRef(null),g=r.useRef(null),[p,j]=r.useState(null),[P,I]=r.useState(null),T=r.useCallback(()=>{f.current&&f.current.disconnect(),f.current=new IntersectionObserver(n=>{n[0].isIntersecting&&m?.()}),g.current&&f.current.observe(g.current)},[m]);r.useEffect(()=>(T(),()=>{f.current&&f.current.disconnect()}),[T,d]);const _=r.useCallback(n=>e=>{c&&(j(n),e.dataTransfer.effectAllowed="move")},[c]),z=r.useCallback(n=>e=>{c&&(e.preventDefault(),e.dataTransfer.dropEffect="move",I(n))},[c]),A=r.useCallback(n=>e=>{if(!(!c||p===null)){if(e.preventDefault(),p!==n){const l=[...d],[u]=l.splice(p,1);l.splice(n,0,u),F?.(l)}j(null),I(null)}},[c,p,d,F]),B=r.useCallback(()=>{j(null),I(null)},[]),v=new Map;let x=-1;return d.forEach(n=>{if(n.options)n.options.forEach(e=>{e.disabled||(x++,v.set(e,x))});else{const e=n;e.disabled||(x++,v.set(e,x))}}),t.jsx(t.Fragment,{children:d.map((n,e)=>{const l=e===d.length-1;if(n.options){const a=n;return t.jsxs("div",{style:{marginTop:o==="2.0"?2:0},children:[t.jsxs(G.StyledGroupedLabel,{version:o,children:[a.leadingIcon?t.jsx("span",{style:{marginRight:8},children:a.leadingIcon}):null,a.label]}),a.options.map((b,k)=>{const $=v.get(b),H=$===E&&!b.disabled;return t.jsx(w.MenuItem,{version:o,last:k===a.options.length-1,onSelect:O,showDescription:y,onDropdownItemClick:D,isMultiSelect:h,option:b,useDefaultCursor:M,isFocused:H,dataIndex:$,isDraggable:!1,showCheckboxForCustomElement:R,checkboxActiveColor:q,brandSelectedRow:L,ref:i=>{s&&typeof s=="object"&&s.current&&i&&i&&i&&i&&(s.current[e]=i)}},`${e}-${k}`)}),l?t.jsx("span",{ref:g}):null]},e)}const u=n,S=v.get(u),C=S===E&&!u.disabled;return t.jsxs("div",{children:[u.hasDivider&&t.jsx(G.Divider,{}),t.jsx(w.MenuItem,{version:o,last:l,onSelect:O,showDescription:y,onDropdownItemClick:D,isMultiSelect:h,option:u,useDefaultCursor:M,isFocused:C,dataIndex:S,isDraggable:c,onDragStart:_(e),onDragOver:z(e),onDrop:A(e),onDragEnd:B,isDraggedOver:P===e,showCheckboxForCustomElement:R,checkboxActiveColor:q,brandSelectedRow:L,ref:a=>{s&&typeof s=="object"&&s.current&&a&&(s.current[e]=a)}},u.value),l?t.jsx("span",{ref:g}):null]},e)})})});exports.MenuList=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("react"),S=require("./MenuItem.js"),H=require("./MenuList.styled.js"),ee=r.forwardRef(({options:u,isMultiSelect:h,showDescription:y,onSelect:O,version:g,onInfiniteScroll:$,onDropdownItemClick:M,useDefaultCursor:m,focusedIndex:F=-1,isDraggable:d=!1,onOptionsReorder:G,showCheckboxForCustomElement:C=!1,checkboxActiveColor:D,brandSelectedRow:E,childrenLayout:P="flyout",collapsibleChildren:N=!1},c)=>{const i=r.useRef(null),x=r.useRef(null),[I,R]=r.useState(null),[J,T]=r.useState(null),_=r.useCallback(()=>{i.current&&i.current.disconnect(),i.current=new IntersectionObserver(t=>{t[0].isIntersecting&&$?.()}),x.current&&i.current.observe(x.current)},[$]);r.useEffect(()=>(_(),()=>{i.current&&i.current.disconnect()}),[_,u]);const K=r.useCallback(t=>e=>{d&&(R(t),e.dataTransfer.effectAllowed="move")},[d]),Q=r.useCallback(t=>e=>{d&&(e.preventDefault(),e.dataTransfer.dropEffect="move",T(t))},[d]),U=r.useCallback(t=>e=>{if(!(!d||I===null)){if(e.preventDefault(),I!==t){const n=[...u],[a]=n.splice(I,1);n.splice(t,0,a),G?.(n)}R(null),T(null)}},[d,I,u,G]),V=r.useCallback(()=>{R(null),T(null)},[]),q=P==="nested",[W,X]=r.useState([]),L=t=>N&&W.includes(t),Y=t=>{X(e=>e.includes(t)?e.filter(n=>n!==t):[...e,t])},Z=t=>{const e=t.filter(n=>n.selected).length;return e>0&&e<t.length},f=new Map;let o=-1;return u.forEach(t=>{if(t.options)t.options.forEach(e=>{e.disabled||(o++,f.set(e,o))});else{const e=t;e.disabled||(o++,f.set(e,o)),q&&!L(e.value)&&e.children?.forEach(n=>{n.disabled||(o++,f.set(n,o))})}}),l.jsx(l.Fragment,{children:u.map((t,e)=>{const n=e===u.length-1;if(t.options){const s=t;return l.jsxs("div",{style:{marginTop:g==="2.0"?2:0},children:[l.jsxs(H.StyledGroupedLabel,{version:g,children:[s.leadingIcon?l.jsx("span",{style:{marginRight:8},children:s.leadingIcon}):null,s.label]}),s.options.map((p,j)=>{const B=f.get(p),w=B===F&&!p.disabled;return l.jsx(S.MenuItem,{version:g,last:j===s.options.length-1,onSelect:O,showDescription:y,onDropdownItemClick:M,isMultiSelect:h,option:p,useDefaultCursor:m,isFocused:w,dataIndex:B,isDraggable:!1,showCheckboxForCustomElement:C,checkboxActiveColor:D,brandSelectedRow:E,ref:v=>{c&&typeof c=="object"&&c.current&&v&&v&&v&&v&&(c.current[e]=v)}},`${e}-${j}`)}),n?l.jsx("span",{ref:x}):null]},e)}const a=t,k=f.get(a),A=k===F&&!a.disabled,b=q?a.children??[]:[],z=L(a.value)?[]:b;return l.jsxs("div",{children:[a.hasDivider&&l.jsx(H.Divider,{}),l.jsx(S.MenuItem,{version:g,last:n,onSelect:O,showDescription:y,onDropdownItemClick:M,isMultiSelect:h,option:a,useDefaultCursor:m,isFocused:A,dataIndex:k,isDraggable:d,onDragStart:K(e),onDragOver:Q(e),onDrop:U(e),onDragEnd:V,isDraggedOver:J===e,showCheckboxForCustomElement:C,checkboxActiveColor:D,brandSelectedRow:E,childrenLayout:P,isPartiallyChecked:b.length?Z(b):!1,isCollapsible:N&&q&&!!b.length,isCollapsed:L(a.value),onToggleCollapse:()=>Y(a.value),ref:s=>{c&&typeof c=="object"&&c.current&&s&&(c.current[e]=s)}},a.value),z.map((s,p)=>{const j=f.get(s);return l.jsx(S.MenuItem,{version:g,last:n&&p===z.length-1,onSelect:O,showDescription:y,onDropdownItemClick:M,isMultiSelect:h,option:s,useDefaultCursor:m,isFocused:j===F&&!s.disabled,dataIndex:j,isDraggable:!1,showCheckboxForCustomElement:C,checkboxActiveColor:D,brandSelectedRow:E,childrenLayout:P,isChildRow:!0},s.value)}),n?l.jsx("span",{ref:x}):null]},e)})})});exports.MenuList=ee;
 //# sourceMappingURL=MenuList.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuList.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\nimport { MenuItem } from './MenuItem';\nimport { Divider, StyledGroupedLabel } from './MenuList.styled';\n\ninterface MenuListProps {\n\toptions: DropdownOption[];\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (optionSelect: SingleOption) => void;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tonInfiniteScroll?: () => void;\n\tonDropdownItemClick?: (option: DropdownOption) => void;\n\tuseDefaultCursor?: boolean;\n\tfocusedIndex?: number;\n\tisDraggable?: boolean;\n\tonOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuList = forwardRef<HTMLDivElement[], MenuListProps>(\n\t(\n\t\t{\n\t\t\toptions,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tversion,\n\t\t\tonInfiniteScroll,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tfocusedIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonOptionsReorder,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst observer = useRef<IntersectionObserver \| null>(null);\n\t\tconst spanRef = useRef<HTMLSpanElement \| null>(null);\n\t\tconst [draggedIndex, setDraggedIndex] = useState<number \| null>(null);\n\t\tconst [draggedOverIndex, setDraggedOverIndex] = useState<number \| null>(\n\t\t\tnull,\n\t\t);\n\n\t\tconst setupObserver = useCallback(() => {\n\t\t\tif (observer.current) {\n\t\t\t\tobserver.current.disconnect();\n\t\t\t}\n\t\t\tobserver.current = new IntersectionObserver((entries) => {\n\t\t\t\tif (entries[0].isIntersecting) {\n\t\t\t\t\tonInfiniteScroll?.();\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (spanRef.current) {\n\t\t\t\tobserver.current.observe(spanRef.current);\n\t\t\t}\n\t\t}, [onInfiniteScroll]);\n\n\t\tuseEffect(() => {\n\t\t\tsetupObserver();\n\t\t\treturn () => {\n\t\t\t\tif (observer.current) {\n\t\t\t\t\tobserver.current.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [setupObserver, options]);\n\n\t\tconst handleDragStart = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\tsetDraggedIndex(index);\n\t\t\t\te.dataTransfer.effectAllowed = 'move';\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDragOver = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\te.preventDefault();\n\t\t\t\te.dataTransfer.dropEffect = 'move';\n\t\t\t\tsetDraggedOverIndex(index);\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDrop = useCallback(\n\t\t\t(dropIndex: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable \|\| draggedIndex === null) return;\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (draggedIndex !== dropIndex) {\n\t\t\t\t\tconst newOptions = [...options];\n\t\t\t\t\tconst [item] = newOptions.splice(draggedIndex, 1);\n\t\t\t\t\tnewOptions.splice(dropIndex, 0, item);\n\t\t\t\t\tonOptionsReorder?.(newOptions);\n\t\t\t\t}\n\n\t\t\t\tsetDraggedIndex(null);\n\t\t\t\tsetDraggedOverIndex(null);\n\t\t\t},\n\t\t\t[isDraggable, draggedIndex, options, onOptionsReorder],\n\t\t);\n\n\t\tconst handleDragEnd = useCallback(() => {\n\t\t\tsetDraggedIndex(null);\n\t\t\tsetDraggedOverIndex(null);\n\t\t}, []);\n\n\t\t// Calculate flat indices for all options\n\t\tconst flatIndices = new Map<SingleOption, number>();\n\t\tlet currentIndex = -1;\n\t\toptions.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((menuOption) => {\n\t\t\t\t\tif (!menuOption.disabled) {\n\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\tflatIndices.set(menuOption, currentIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\tflatIndices.set(singleOption, currentIndex);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{options.map((option, i) => {\n\t\t\t\t\tconst last = i === options.length - 1;\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = option as GroupedOption;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={i} style={{ marginTop: version === '2.0' ? 2 : 0 }}>\n\t\t\t\t\t\t\t\t<StyledGroupedLabel version={version}>\n\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon ? (\n\t\t\t\t\t\t\t\t\t\t<span style={{ marginRight: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{groupedOption.label}\n\t\t\t\t\t\t\t\t</StyledGroupedLabel>\n\t\t\t\t\t\t\t\t{groupedOption.options.map((menuOption, idx) => {\n\t\t\t\t\t\t\t\t\tconst currentFlatIndex = flatIndices.get(menuOption);\n\t\t\t\t\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !menuOption.disabled;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tlast={idx === groupedOption.options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\t\toption={menuOption}\n\t\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\t\tkey={`${i}-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={\n\t\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) ref.current[i] = el;\n\t\t\t\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\t}\n\t\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}\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);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tconst currentFlatIndex = flatIndices.get(singleOption);\n\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !singleOption.disabled;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t\t{singleOption.hasDivider && <Divider />}\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\tlast={last}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\toption={singleOption}\n\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\tkey={singleOption.value}\n\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart(i)}\n\t\t\t\t\t\t\t\tonDragOver={handleDragOver(i)}\n\t\t\t\t\t\t\t\tonDrop={handleDrop(i)}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t\tisDraggedOver={draggedOverIndex === i}\n\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current && el) {\n\t\t\t\t\t\t\t\t\t\tref.current[i] = el;\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{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["MenuList","forwardRef","options","isMultiSelect","showDescription","onSelect","version","onInfiniteScroll","onDropdownItemClick","useDefaultCursor","focusedIndex","isDraggable","onOptionsReorder","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","ref","observer","useRef","spanRef","draggedIndex","setDraggedIndex","useState","draggedOverIndex","setDraggedOverIndex","setupObserver","useCallback","entries","useEffect","handleDragStart","index","handleDragOver","handleDrop","dropIndex","newOptions","item","handleDragEnd","flatIndices","currentIndex","option","menuOption","singleOption","jsx","Fragment","i","last","groupedOption","jsxs","StyledGroupedLabel","idx","currentFlatIndex","isFocused","MenuItem","el","Divider"],"mappings":"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"}
1	+ {"version":3,"file":"MenuList.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\nimport { MenuItem } from './MenuItem';\nimport { Divider, StyledGroupedLabel } from './MenuList.styled';\n\ninterface MenuListProps {\n\toptions: DropdownOption[];\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (optionSelect: SingleOption) => void;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tonInfiniteScroll?: () => void;\n\tonDropdownItemClick?: (option: DropdownOption) => void;\n\tuseDefaultCursor?: boolean;\n\tfocusedIndex?: number;\n\tisDraggable?: boolean;\n\tonOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n\tchildrenLayout?: 'flyout' \| 'nested';\n\tcollapsibleChildren?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuList = forwardRef<HTMLDivElement[], MenuListProps>(\n\t(\n\t\t{\n\t\t\toptions,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tversion,\n\t\t\tonInfiniteScroll,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tfocusedIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonOptionsReorder,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t\tchildrenLayout = 'flyout',\n\t\t\tcollapsibleChildren = false,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst observer = useRef<IntersectionObserver \| null>(null);\n\t\tconst spanRef = useRef<HTMLSpanElement \| null>(null);\n\t\tconst [draggedIndex, setDraggedIndex] = useState<number \| null>(null);\n\t\tconst [draggedOverIndex, setDraggedOverIndex] = useState<number \| null>(\n\t\t\tnull,\n\t\t);\n\n\t\tconst setupObserver = useCallback(() => {\n\t\t\tif (observer.current) {\n\t\t\t\tobserver.current.disconnect();\n\t\t\t}\n\t\t\tobserver.current = new IntersectionObserver((entries) => {\n\t\t\t\tif (entries[0].isIntersecting) {\n\t\t\t\t\tonInfiniteScroll?.();\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (spanRef.current) {\n\t\t\t\tobserver.current.observe(spanRef.current);\n\t\t\t}\n\t\t}, [onInfiniteScroll]);\n\n\t\tuseEffect(() => {\n\t\t\tsetupObserver();\n\t\t\treturn () => {\n\t\t\t\tif (observer.current) {\n\t\t\t\t\tobserver.current.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [setupObserver, options]);\n\n\t\tconst handleDragStart = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\tsetDraggedIndex(index);\n\t\t\t\te.dataTransfer.effectAllowed = 'move';\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDragOver = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\te.preventDefault();\n\t\t\t\te.dataTransfer.dropEffect = 'move';\n\t\t\t\tsetDraggedOverIndex(index);\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDrop = useCallback(\n\t\t\t(dropIndex: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable \|\| draggedIndex === null) return;\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (draggedIndex !== dropIndex) {\n\t\t\t\t\tconst newOptions = [...options];\n\t\t\t\t\tconst [item] = newOptions.splice(draggedIndex, 1);\n\t\t\t\t\tnewOptions.splice(dropIndex, 0, item);\n\t\t\t\t\tonOptionsReorder?.(newOptions);\n\t\t\t\t}\n\n\t\t\t\tsetDraggedIndex(null);\n\t\t\t\tsetDraggedOverIndex(null);\n\t\t\t},\n\t\t\t[isDraggable, draggedIndex, options, onOptionsReorder],\n\t\t);\n\n\t\tconst handleDragEnd = useCallback(() => {\n\t\t\tsetDraggedIndex(null);\n\t\t\tsetDraggedOverIndex(null);\n\t\t}, []);\n\n\t\tconst isNestedLayout = childrenLayout === 'nested';\n\t\tconst [collapsedParents, setCollapsedParents] = useState<string[]>([]);\n\n\t\tconst isCollapsed = (value: string) =>\n\t\t\tcollapsibleChildren && collapsedParents.includes(value);\n\n\t\tconst toggleCollapsed = (value: string) => {\n\t\t\tsetCollapsedParents((previous) =>\n\t\t\t\tprevious.includes(value)\n\t\t\t\t\t? previous.filter((entry) => entry !== value)\n\t\t\t\t\t: [...previous, value],\n\t\t\t);\n\t\t};\n\n\t\t/** A parent is partly checked when some — but not all — children are. */\n\t\tconst isPartiallySelected = (children: SingleOption[]) => {\n\t\t\tconst selectedCount = children.filter((child) => child.selected).length;\n\t\t\treturn selectedCount > 0 && selectedCount < children.length;\n\t\t};\n\n\t\t// Calculate flat indices for all options\n\t\tconst flatIndices = new Map<SingleOption, number>();\n\t\tlet currentIndex = -1;\n\t\toptions.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((menuOption) => {\n\t\t\t\t\tif (!menuOption.disabled) {\n\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\tflatIndices.set(menuOption, currentIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\tflatIndices.set(singleOption, currentIndex);\n\t\t\t\t}\n\t\t\t\tif (isNestedLayout && !isCollapsed(singleOption.value)) {\n\t\t\t\t\tsingleOption.children?.forEach((child) => {\n\t\t\t\t\t\tif (!child.disabled) {\n\t\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\t\tflatIndices.set(child, currentIndex);\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\t\treturn (\n\t\t\t<>\n\t\t\t\t{options.map((option, i) => {\n\t\t\t\t\tconst last = i === options.length - 1;\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = option as GroupedOption;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={i} style={{ marginTop: version === '2.0' ? 2 : 0 }}>\n\t\t\t\t\t\t\t\t<StyledGroupedLabel version={version}>\n\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon ? (\n\t\t\t\t\t\t\t\t\t\t<span style={{ marginRight: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{groupedOption.label}\n\t\t\t\t\t\t\t\t</StyledGroupedLabel>\n\t\t\t\t\t\t\t\t{groupedOption.options.map((menuOption, idx) => {\n\t\t\t\t\t\t\t\t\tconst currentFlatIndex = flatIndices.get(menuOption);\n\t\t\t\t\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !menuOption.disabled;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tlast={idx === groupedOption.options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\t\toption={menuOption}\n\t\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\t\tkey={`${i}-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={\n\t\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) ref.current[i] = el;\n\t\t\t\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\t}\n\t\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}\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);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tconst currentFlatIndex = flatIndices.get(singleOption);\n\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !singleOption.disabled;\n\t\t\t\t\tconst nestedChildren = isNestedLayout\n\t\t\t\t\t\t? singleOption.children ?? []\n\t\t\t\t\t\t: [];\n\t\t\t\t\t// The tri-state parent still reflects every child, collapsed or not.\n\t\t\t\t\tconst visibleChildren = isCollapsed(singleOption.value)\n\t\t\t\t\t\t? []\n\t\t\t\t\t\t: nestedChildren;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t\t{singleOption.hasDivider && <Divider />}\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\tlast={last}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\toption={singleOption}\n\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\tkey={singleOption.value}\n\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart(i)}\n\t\t\t\t\t\t\t\tonDragOver={handleDragOver(i)}\n\t\t\t\t\t\t\t\tonDrop={handleDrop(i)}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t\tisDraggedOver={draggedOverIndex === i}\n\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\tchildrenLayout={childrenLayout}\n\t\t\t\t\t\t\t\tisPartiallyChecked={\n\t\t\t\t\t\t\t\t\tnestedChildren.length\n\t\t\t\t\t\t\t\t\t\t? isPartiallySelected(nestedChildren)\n\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tisCollapsible={\n\t\t\t\t\t\t\t\t\tcollapsibleChildren &&\n\t\t\t\t\t\t\t\t\tisNestedLayout &&\n\t\t\t\t\t\t\t\t\t!!nestedChildren.length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tisCollapsed={isCollapsed(singleOption.value)}\n\t\t\t\t\t\t\t\tonToggleCollapse={() => toggleCollapsed(singleOption.value)}\n\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current && el) {\n\t\t\t\t\t\t\t\t\t\tref.current[i] = el;\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{visibleChildren.map((child, childIdx) => {\n\t\t\t\t\t\t\t\tconst childFlatIndex = flatIndices.get(child);\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\tlast={last && childIdx === visibleChildren.length - 1}\n\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\toption={child}\n\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\tkey={child.value}\n\t\t\t\t\t\t\t\t\t\tisFocused={\n\t\t\t\t\t\t\t\t\t\t\tchildFlatIndex === focusedIndex && !child.disabled\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdataIndex={childFlatIndex}\n\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\tchildrenLayout={childrenLayout}\n\t\t\t\t\t\t\t\t\t\tisChildRow\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{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["MenuList","forwardRef","options","isMultiSelect","showDescription","onSelect","version","onInfiniteScroll","onDropdownItemClick","useDefaultCursor","focusedIndex","isDraggable","onOptionsReorder","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","childrenLayout","collapsibleChildren","ref","observer","useRef","spanRef","draggedIndex","setDraggedIndex","useState","draggedOverIndex","setDraggedOverIndex","setupObserver","useCallback","entries","useEffect","handleDragStart","index","handleDragOver","handleDrop","dropIndex","newOptions","item","handleDragEnd","isNestedLayout","collapsedParents","setCollapsedParents","isCollapsed","value","toggleCollapsed","previous","entry","isPartiallySelected","children","selectedCount","child","flatIndices","currentIndex","option","menuOption","singleOption","jsx","Fragment","i","last","groupedOption","jsxs","StyledGroupedLabel","idx","currentFlatIndex","isFocused","MenuItem","el","nestedChildren","visibleChildren","Divider","childIdx","childFlatIndex"],"mappings":"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"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),h=require("../../../../list-item/ListItem.js"),S=require("../../../../checkBox/CheckBox.js"),A=({options:n,onSelect:c,version:r,checkboxActiveColor:u,brandSelectedRow:f})=>{const[e,s]=d.useState("notSelected");function o(){e==="partiallySelected"&&c("notSelected"),e==="selectAll"&&c("notSelected"),e==="notSelected"&&c("selectAll")}return d.useEffect(()=>{const l=[];n.filter(t=>!t.disabled).forEach(t=>{t.options?t.options.filter(i=>!i.disabled).forEach(i=>{l.push(i.selected||!1)}):l.push(t.selected||!1)}),l.every(Boolean)?s("selectAll"):l.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")},[n]),a.jsx(h.ListItem,{version:r,brandSelectedRow:f,onClick:l=>{l.preventDefault(),o()},listItem:{label:"Select All",value:"All"},leadingIcon:a.jsx("div",{style:{width:18,height:18},children:a.jsx(S.CheckBox,{size:r==="2.0"?"SMALL":"DEFAULT",isChecked:e==="selectAll"||e==="partiallySelected",isPartiallyChecked:e==="partiallySelected",onValueChange:o,activeColor:u})}),variant:"default"})};exports.SelectAllMenu=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("react"),S=require("../../../../list-item/ListItem.js"),p=require("../../../../checkBox/CheckBox.js"),A=({options:r,onSelect:c,version:d,checkboxActiveColor:u,brandSelectedRow:h})=>{const[t,i]=f.useState("notSelected");function o(){t==="partiallySelected"&&c("notSelected"),t==="selectAll"&&c("notSelected"),t==="notSelected"&&c("selectAll")}return f.useEffect(()=>{const e=[];r.filter(s=>!s.disabled).forEach(s=>{if(s.options)s.options.filter(l=>!l.disabled).forEach(l=>{e.push(l.selected||!1)});else{const l=s;l.children?.length?l.children.filter(a=>!a.disabled).forEach(a=>{e.push(a.selected||!1)}):e.push(l.selected||!1)}}),e.every(Boolean)?i("selectAll"):e.filter(Boolean).length>0?i("partiallySelected"):i("notSelected")},[r]),n.jsx(S.ListItem,{version:d,brandSelectedRow:h,onClick:e=>{e.preventDefault(),o()},listItem:{label:"Select All",value:"All"},leadingIcon:n.jsx("div",{style:{width:18,height:18},children:n.jsx(p.CheckBox,{size:d==="2.0"?"SMALL":"DEFAULT",isChecked:t==="selectAll"||t==="partiallySelected",isPartiallyChecked:t==="partiallySelected",onValueChange:o,activeColor:u})}),variant:"default"})};exports.SelectAllMenu=A;
 //# sourceMappingURL=SelectAllMenu.js.map