@bikdotai/bik-component-library 0.0.875-beta.1 → 0.0.875-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/agent-builder/components/ConfigToolPanel.js +11 -11
- package/dist/cjs/components/agent-builder/components/ConfigToolPanel.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js +2 -2
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/RestApiToolPanel.js +4 -4
- package/dist/cjs/components/agent-builder/components/RestApiToolPanel.js.map +1 -1
- package/dist/cjs/components/agent-builder/utils/sourceIcons.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +27 -10
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js.map +1 -1
- package/dist/cjs/components/dropdown/hooks/useDropdown.js +1 -1
- package/dist/cjs/components/dropdown/hooks/useDropdown.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/agent-builder/components/ConfigToolPanel.d.ts +0 -6
- package/dist/esm/components/agent-builder/components/ConfigToolPanel.js +141 -143
- package/dist/esm/components/agent-builder/components/ConfigToolPanel.js.map +1 -1
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.d.ts +0 -6
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js +81 -83
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionPicker.js +5 -5
- package/dist/esm/components/agent-builder/components/RestApiToolPanel.d.ts +0 -6
- package/dist/esm/components/agent-builder/components/RestApiToolPanel.js +48 -50
- package/dist/esm/components/agent-builder/components/RestApiToolPanel.js.map +1 -1
- package/dist/esm/components/agent-builder/index.d.ts +2 -18
- package/dist/esm/components/agent-builder/utils/sourceIcons.js +43 -43
- package/dist/esm/components/agent-builder/utils/toolActions.js +3 -3
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +300 -278
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +8 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +170 -126
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +4 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +144 -112
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +1 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js +32 -31
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts +2 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js +54 -39
- package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts +18 -16
- package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js +73 -27
- package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js.map +1 -1
- package/dist/esm/components/dropdown/hooks/useDropdown.d.ts +4 -17
- package/dist/esm/components/dropdown/hooks/useDropdown.js +176 -163
- package/dist/esm/components/dropdown/hooks/useDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/type.d.ts +22 -0
- package/dist/esm/index.js +772 -816
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor } from '@src/editor';\nimport React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\nimport { VariableInlineField } from './VariableInlineField';\n\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. */\n\tonSave: (config: RestApiToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: RestApiToolConfig;\n\t/** Optional \"Improve with AI\" for the instructions field. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n\t/**\n\t * Portal target for the drawer, passed straight to {@link SideModal}\n\t * (default `document.body`). Lets a host render it into its own positioned\n\t * slot rather than as a viewport overlay.\n\t */\n\telement?: Element | DocumentFragment;\n\t/** Names of the OTHER tools — a new tool can't reuse one of these. */\n\texistingNames?: string[];\n\t/**\n\t * Variable catalog for the `@` trigger. When non-empty, `@` opens the\n\t * variable picker directly in Instructions / Request URL / header values.\n\t * (Request / Response JSON editors are deliberately not wired for now.)\n\t * Absent → the drawer behaves exactly as before.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n// A callable endpoint needs an explicit http(s):// scheme AND a real, dotted\n// host. `new URL` alone is too lenient — it accepts single-label hosts\n// (\"https://abc\"), a one-slash scheme (\"https:/abc.com\"), and dangling-dot\n// hosts (\"https://.com\" / \"https://abc.\"). Require the `://` prefix on the raw\n// value plus a hostname that is either dotted (example.com) or an IPv4.\nconst isValidHttpUrl = (value: string): boolean => {\n\tif (!/^https?:\\/\\//i.test(value)) {\n\t\treturn false;\n\t}\n\tlet host: string;\n\ttry {\n\t\thost = new URL(value).hostname;\n\t} catch {\n\t\treturn false;\n\t}\n\treturn host.includes('.') && !host.startsWith('.') && !host.endsWith('.');\n};\n\n/**\n * Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n\texistingNames = [],\n\tvariablesData,\n\telement,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\t// New tools start with the scheme pre-filled so the user only types the host.\n\tconst [url, setUrl] = useState(initial?.url ?? 'https://');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\t// Stable per-row identity for React keys, parallel to `headers`. The value\n\t// field is an uncontrolled editor, so a row must keep its mount across\n\t// sibling add/remove — index-based keys would remount every row (dropping\n\t// focus mid-edit) or let a deleted row's text linger in a reused neighbour.\n\tconst headerIdsRef = useRef<number[]>(\n\t\t(initial?.headers ?? [{ key: '', value: '' }]).map(\n\t\t\t(_h: RestApiHeader, i: number) => i,\n\t\t),\n\t);\n\tconst nextHeaderIdRef = useRef(headerIdsRef.current.length);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () => {\n\t\theaderIdsRef.current = [...headerIdsRef.current, nextHeaderIdRef.current];\n\t\tnextHeaderIdRef.current += 1;\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\t};\n\tconst removeHeader = (i: number) => {\n\t\theaderIdsRef.current = headerIdsRef.current.filter((_, idx) => idx !== i);\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\t};\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two tools can't share a name (the LLM references them by it).\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst urlTrimmed = url.trim();\n\t// Save needs a real endpoint, but don't flash the error while the field still\n\t// holds its pristine \"https://\" seed — only once the user has typed past it.\n\t// A URL that interpolates variables can't be parsed literally (braces are\n\t// invalid URL characters) — accept it once a scheme + something follows;\n\t// it only becomes a concrete URL after runtime substitution.\n\tconst urlUsesVariables = urlTrimmed.includes('{{variable:');\n\tconst urlOk = urlUsesVariables\n\t\t? /^https?:\\/\\/./.test(urlTrimmed)\n\t\t: isValidHttpUrl(urlTrimmed);\n\tconst isUrlInvalid =\n\t\turlTrimmed.length > 0 && urlTrimmed !== 'https://' && !urlOk;\n\tconst canSave =\n\t\tnameTrimmed.length > 0 &&\n\t\turlOk &&\n\t\t!isDuplicateName &&\n\t\t// The editor's characterLimit is soft (a paste may exceed it, rendered\n\t\t// grey) — gate the save so over-limit instructions can't be persisted.\n\t\tinstructions.length <= charLimits.instructions;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() || h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\telement={element}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Define the request and a sample response for the agent to reference.\"\n\t\t\t\t/>\n\t\t\t}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'restapi-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'restapi-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter action name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\terrorMessage={\n\t\t\t\t\tisDuplicateName ? 'A tool with this name already exists' : undefined\n\t\t\t\t}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<VariableInlineField\n\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\tlabel=\"Request URL\"\n\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\tvalue={url}\n\t\t\t\t\tonChange={setUrl}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t/>\n\t\t\t\t{/* VariableInlineField has no invalid state of its own — surface the\n\t\t\t\t URL validation (from main) as a caption below the field. */}\n\t\t\t\t{isUrlInvalid && (\n\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\tEnter a valid URL (including https://)\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tdropdownWidth=\"399px\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t<HeaderRow\n\t\t\t\t\t\tkey={headerIdsRef.current[i]}\n\t\t\t\t\t\tdata-test={`restapi-header-${i}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VariableInlineField\n\t\t\t\t\t\t\tplaceholder=\"Enter value\"\n\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\tonChange={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t{/* Variables intentionally NOT wired here (yet) — the JSON editors are\n\t\t\t plain code fields; @ types a literal @. */}\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\n// Fixed tracks (name / value / delete): minmax(0, …) lets the fields shrink\n// below their content width, so a long value scrolls inside its field and the\n// delete button can never be pushed off the row.\nconst HeaderRow = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 32px;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","isValidHttpUrl","value","host","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","existingNames","variablesData","element","name","setName","useState","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","headerIdsRef","useRef","_h","i","nextHeaderIdRef","patchHeader","patch","prev","idx","addHeader","removeHeader","_","nameTrimmed","isDuplicateName","n","urlTrimmed","urlOk","isUrlInvalid","canSave","handleSave","config","h","result","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","Input","ToolInstructionsField","FieldBlock","VariableInlineField","BodyCaption","COLORS","TitleSmall","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor } from '@src/editor';\nimport React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\nimport { VariableInlineField } from './VariableInlineField';\n\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. */\n\tonSave: (config: RestApiToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: RestApiToolConfig;\n\t/** Optional \"Improve with AI\" for the instructions field. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n\t/** Names of the OTHER tools — a new tool can't reuse one of these. */\n\texistingNames?: string[];\n\t/**\n\t * Variable catalog for the `@` trigger. When non-empty, `@` opens the\n\t * variable picker directly in Instructions / Request URL / header values.\n\t * (Request / Response JSON editors are deliberately not wired for now.)\n\t * Absent → the drawer behaves exactly as before.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n// A callable endpoint needs an explicit http(s):// scheme AND a real, dotted\n// host. `new URL` alone is too lenient — it accepts single-label hosts\n// (\"https://abc\"), a one-slash scheme (\"https:/abc.com\"), and dangling-dot\n// hosts (\"https://.com\" / \"https://abc.\"). Require the `://` prefix on the raw\n// value plus a hostname that is either dotted (example.com) or an IPv4.\nconst isValidHttpUrl = (value: string): boolean => {\n\tif (!/^https?:\\/\\//i.test(value)) {\n\t\treturn false;\n\t}\n\tlet host: string;\n\ttry {\n\t\thost = new URL(value).hostname;\n\t} catch {\n\t\treturn false;\n\t}\n\treturn host.includes('.') && !host.startsWith('.') && !host.endsWith('.');\n};\n\n/**\n * Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n\texistingNames = [],\n\tvariablesData,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\t// New tools start with the scheme pre-filled so the user only types the host.\n\tconst [url, setUrl] = useState(initial?.url ?? 'https://');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\t// Stable per-row identity for React keys, parallel to `headers`. The value\n\t// field is an uncontrolled editor, so a row must keep its mount across\n\t// sibling add/remove — index-based keys would remount every row (dropping\n\t// focus mid-edit) or let a deleted row's text linger in a reused neighbour.\n\tconst headerIdsRef = useRef<number[]>(\n\t\t(initial?.headers ?? [{ key: '', value: '' }]).map(\n\t\t\t(_h: RestApiHeader, i: number) => i,\n\t\t),\n\t);\n\tconst nextHeaderIdRef = useRef(headerIdsRef.current.length);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () => {\n\t\theaderIdsRef.current = [...headerIdsRef.current, nextHeaderIdRef.current];\n\t\tnextHeaderIdRef.current += 1;\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\t};\n\tconst removeHeader = (i: number) => {\n\t\theaderIdsRef.current = headerIdsRef.current.filter((_, idx) => idx !== i);\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\t};\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two tools can't share a name (the LLM references them by it).\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst urlTrimmed = url.trim();\n\t// Save needs a real endpoint, but don't flash the error while the field still\n\t// holds its pristine \"https://\" seed — only once the user has typed past it.\n\t// A URL that interpolates variables can't be parsed literally (braces are\n\t// invalid URL characters) — accept it once a scheme + something follows;\n\t// it only becomes a concrete URL after runtime substitution.\n\tconst urlUsesVariables = urlTrimmed.includes('{{variable:');\n\tconst urlOk = urlUsesVariables\n\t\t? /^https?:\\/\\/./.test(urlTrimmed)\n\t\t: isValidHttpUrl(urlTrimmed);\n\tconst isUrlInvalid =\n\t\turlTrimmed.length > 0 && urlTrimmed !== 'https://' && !urlOk;\n\tconst canSave =\n\t\tnameTrimmed.length > 0 &&\n\t\turlOk &&\n\t\t!isDuplicateName &&\n\t\t// The editor's characterLimit is soft (a paste may exceed it, rendered\n\t\t// grey) — gate the save so over-limit instructions can't be persisted.\n\t\tinstructions.length <= charLimits.instructions;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() || h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Define the request and a sample response for the agent to reference.\"\n\t\t\t\t/>\n\t\t\t}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'restapi-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'restapi-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter action name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\terrorMessage={\n\t\t\t\t\tisDuplicateName ? 'A tool with this name already exists' : undefined\n\t\t\t\t}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<VariableInlineField\n\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\tlabel=\"Request URL\"\n\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\tvalue={url}\n\t\t\t\t\tonChange={setUrl}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t/>\n\t\t\t\t{/* VariableInlineField has no invalid state of its own — surface the\n\t\t\t\t URL validation (from main) as a caption below the field. */}\n\t\t\t\t{isUrlInvalid && (\n\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\tEnter a valid URL (including https://)\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tdropdownWidth=\"399px\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t<HeaderRow\n\t\t\t\t\t\tkey={headerIdsRef.current[i]}\n\t\t\t\t\t\tdata-test={`restapi-header-${i}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VariableInlineField\n\t\t\t\t\t\t\tplaceholder=\"Enter value\"\n\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\tonChange={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t{/* Variables intentionally NOT wired here (yet) — the JSON editors are\n\t\t\t plain code fields; @ types a literal @. */}\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\n// Fixed tracks (name / value / delete): minmax(0, …) lets the fields shrink\n// below their content width, so a long value scrolls inside its field and the\n// delete button can never be pushed off the row.\nconst HeaderRow = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 32px;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","isValidHttpUrl","value","host","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","existingNames","variablesData","name","setName","useState","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","headerIdsRef","useRef","_h","i","nextHeaderIdRef","patchHeader","patch","prev","idx","addHeader","removeHeader","_","nameTrimmed","isDuplicateName","n","urlTrimmed","urlOk","isUrlInvalid","canSave","handleSave","config","h","result","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","Input","ToolInstructionsField","FieldBlock","VariableInlineField","BodyCaption","COLORS","TitleSmall","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),e=require("../constants/tools.js"),i=require("../../../icons/
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),e=require("../constants/tools.js"),i=require("../../../icons/Social/Channels/GoogleSheets.js"),s=require("../../../icons/Social/Channels/ShipBob.js"),a=require("../../../icons/Social/Channels/Kustomer.js"),S=require("../../../icons/Social/Channels/Freshdesk.js"),I=require("../../../icons/Social/Social/Zendesk.js"),h=require("../../../icons/Social/Channels/Segment.js"),d=require("../../../icons/Social/Channels/Mailchimp.js"),f=require("../../../icons/Social/Channels/Attentive.js"),T=require("../../../icons/Social/Channels/OmniSend.js"),w=require("../../../icons/Social/Channels/Klavyio.js"),q=require("../../../icons/Social/Channels/Aftership.js"),m=require("../../../icons/Social/Social/SlackIcon.js"),p=require("../../../icons/Informational/Communication/Email.js"),O=require("../../../icons/BIK AI specific/Webhook.js"),r=require("../../../icons/Informational/Identity/PuzzlePiece.js"),E=require("../../../icons/Social/Social/Gorgias.js"),C=require("../../../icons/Social/Channels/Skio.js"),N=require("../../../icons/Social/Channels/ShipStation.js"),g=require("../../../icons/Social/Social/BigCommerce.js"),R=require("../../../icons/Social/Channels/ShopifyBrand.js"),_=require("../../../icons/Social/Channels/ManifestGlass.js"),k=require("../../../icons/Actions/Common actions/LinkSimpleHorizontal.js"),G=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},A=G(l),c={[e.ToolSource.Manifest]:{Icon:_.default,w:24,h:24},[e.ToolSource.Shopify]:{Icon:R.default,w:24,h:24},[e.ToolSource.Bigcommerce]:{Icon:g.default,w:20,h:20},[e.ToolSource.Shipstation]:{Icon:N.default,w:22,h:22},[e.ToolSource.Skio]:{Icon:C.default,w:20,h:20},[e.ToolSource.Gorgias]:{Icon:E.default,w:20,h:20},[e.ToolSource.Integration]:{Icon:r.default,w:20,h:20},[e.ToolSource.RestApi]:{Icon:O.default,w:20,h:20},[e.ToolSource.EmailHandover]:{Icon:p.default,w:20,h:20},[e.ToolSource.Slack]:{Icon:m.default,w:20,h:20},[e.ToolSource.Aftership]:{Icon:q.default,w:20,h:20},[e.ToolSource.Klaviyo]:{Icon:w.default,w:20,h:20},[e.ToolSource.Omnisend]:{Icon:T.default,w:20,h:20},[e.ToolSource.Attentive]:{Icon:f.default,w:20,h:20},[e.ToolSource.Mailchimp]:{Icon:d.default,w:20,h:20},[e.ToolSource.Segment]:{Icon:h.default,w:20,h:20},[e.ToolSource.Zendesk]:{Icon:I.default,w:20,h:20},[e.ToolSource.Freshdesk]:{Icon:S.default,w:20,h:20},[e.ToolSource.Kustomer]:{Icon:a.default,w:20,h:20},[e.ToolSource.Shipbob]:{Icon:s.default,w:20,h:20},[e.ToolSource.GoogleSheets]:{Icon:i.default,w:20,h:20}},n={Icon:r.default,w:20,h:20},u={Icon:k.default,w:20,h:20},b=o=>{if(o)return o===e.INTEGRATIONS_KEY?n:c[o]??u},v=(o,t=0)=>o?A.default.createElement(o.Icon,{width:o.w+t,height:o.h+t}):null;exports.GENERIC_SOURCE_ICON=u;exports.INTEGRATIONS_ICON=n;exports.SOURCE_ICONS=c;exports.renderSourceIcon=v;exports.sourceIcon=b;
|
|
2
2
|
//# sourceMappingURL=sourceIcons.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),Qe=require("../../../../assets/icons/errorInfo.svg.js"),Xe=require("../../../../assets/icons/refresh-purple.svg.js"),n=require("react"),Ye=require("../../../zeroState/ZeroState.js"),et=require("../../../../hooks/useOutside.js"),C=require("../../../../constants/Theme.js"),tt=require("../../hooks/useDropdown.js"),Q=require("../utils/iterationOnOptions.js"),nt=require("./description/Description.js"),st=require("./menu/FreeFormMenu.js"),rt=require("./menu/MenuList.js"),ot=require("./menu/SelectAllMenu.js"),ct=require("./multiSelect/MultiSelectDropdownBottomBar.js"),ie=require("./OpennedDropdown.styled.js"),ut=require("./searchbox/SearchBox.js"),lt=require("./searchbox/SearchZeroState.js"),X={height:304,width:290},it=({options:f,isSearchable:x,searchPlaceholder:de,staticMenuHeight:Y,isMultiSelect:l,maxSelections:E,width:B,allowFreeForm:ee,height:ae,onClose:te,onSelect:fe,onSearch:h,version:i,skipSorting:he,headerRef:pe,hideSelectAll:ge,primaryButtonText:we,onInfiniteScroll:Oe,onMultiSelectClear:xe,onDropdownItemClick:j,buttonOptions:Se,isSearchLoading:me,isOptionsLoading:ye,optionsErrorState:S,disableSearchOptions:Te,disableSearchedOptionExcept:be,useDefaultCursor:Re,containerStyle:qe={},zeroState:W=void 0,isDraggable:m=!1,onOptionsReorder:y,hideClearButton:Le=!1,showCheckboxForCustomElement:Ce=!1,checkboxActiveColor:H,brandSelectedRow:M,childrenLayout:p,collapsibleChildren:k,defaultCollapsed:U,hideSelectedCount:Ee})=>{const Z=n.useCallback(e=>{if(!m||!l)return e;const t=[],r=[];return e.forEach(d=>{d.options?r.push(d):d.selected?t.push(d):r.push(d)}),[...t,...r]},[m,l]),[D,ne]=n.useState(()=>Z(f)),se=n.useRef(D),re=n.useRef(!1),V=n.useRef(y);n.useEffect(()=>{ne(Z(f))},[f,Z]),n.useEffect(()=>{se.current=D},[D]),n.useEffect(()=>{V.current=y},[y]),n.useEffect(()=>()=>{re.current&&V.current&&V.current(se.current)},[]);const je=n.useCallback(e=>{ne(e),i==="2.0"?y?.(e):re.current=!0},[y,i]),ke=m?D:f,{dropdownOptions:g,search:De,searchedString:s,searchedOptions:T,searchError:Ie,retrySearch:Fe,onApplyHandler:v,selectAllHandler:Pe,onMultiSelectClear:Ae,onFreeFormSelect:Be,onMultiSelectApply:We,latestDropdownOptionsRef:He,getSelectedOptions:Me,getCurrentSelectionCount:Ue}=tt.useDropdown(i,ke,fe,he||m,l,h,Te,be,E,p),[Ze,N]=n.useState(B??X.width),[w,K]=n.useState(null),[I,$]=n.useState(-1),[F,oe]=n.useState(()=>k&&U?Q.getNestedParentValues(f):[]),z=n.useRef(F);n.useEffect(()=>{if(!k||!U)return;const e=Q.getNestedParentValues(f).filter(t=>!z.current.includes(t));e.length&&(z.current=[...z.current,...e],oe(t=>[...t,...e]))},[f,k,U]);const Ve=e=>{oe(t=>t.includes(e)?t.filter(r=>r!==e):[...t,e]),$(-1)},b=n.useRef(null),ce=n.useRef([]),_=n.useRef(null);et.useOutside(b,()=>{if(K(null),l&&i==="2.0"){const e=Me(He.current);te?.(e)}else te?.(g)},[pe,ce]),n.useEffect(()=>{const e=setTimeout(()=>{b.current&&b.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]),n.useEffect(()=>{const e=r=>{const d=s&&h?T:g,a=Q.flattenSelectableOptions(d,p==="nested"?{collapsedParents:F}:void 0);if(a.length!==0){if(r.key==="ArrowDown")r.preventDefault(),$(o=>{const c=o<a.length-1?o+1:0;return setTimeout(()=>{const L=_.current?.querySelector(`[data-option-index="${c}"]`);L&&L.scrollIntoView({block:"nearest",behavior:"smooth"})},0),c});else if(r.key==="ArrowUp")r.preventDefault(),$(o=>{const c=o>0?o-1:a.length-1;return setTimeout(()=>{const L=_.current?.querySelector(`[data-option-index="${c}"]`);L&&L.scrollIntoView({block:"nearest",behavior:"smooth"})},0),c});else if(r.key==="Enter"&&I>=0){r.preventDefault();const o=a[I];o&&(v({...o,selected:!o.selected}),j&&j(o))}}},t=b.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[I,s,T,g,h,v,j,p,F]);const O=ae??X.height,P=typeof O=="number"?x&&l?O-96:x&&!l||!x&&l?O-48:O:O;function ve(e,t){K(e&&t?{title:e,description:t}:null)}n.useEffect(()=>{const e=B??X.width;if(w===null)N(e);else if(typeof e=="number")N(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;N(t)}},[w]);const A=[],G=(e=>{if(!l||!E&&E!==0)return e;const r=Ue(g)>=E;return r?e.map(d=>{if(d.options)return{...d,options:d.options.map(c=>({...c,disabled:c.disabled||!c.selected&&r}))};const a=c=>({...c,disabled:c.disabled||!c.selected}),o=a(d);return p==="nested"&&o.children?.length?{...o,children:o.children.map(a)}:o}):e})((s&&h?T:g).map(e=>{if(s&&!h)if(e.options){const t={...e};return t.options=t.options.filter(r=>r.label?.toLowerCase().includes(s.toLowerCase())?(A.push(!s||r.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(A.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),J=!!x&&s&&G.length===0,R=!s&&!!ye,q=!s&&!!S&&!R,Ne=!s&&!G.length&&!R&&!q,ue=R||q||Ne,Ke=W?.title||"No results found",$e=W?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",ze=S?.title||"Failed to load options",_e=S?.subTitle||"Something went wrong while fetching the list. Please try again",Ge={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:C.COLORS.background.inverseLight,customIconColor:C.COLORS.background.inverseLight,LeadingIcon:Xe.default},le={IconHolderStyle:{background:C.COLORS.background.negative.light},Icon:u.jsx(Qe.default,{color:C.COLORS.content.negative,width:24,height:24}),...S};le.actionButton={...Ge,...S?.actionButton??{}};const Je=R?void 0:q?le:W;return u.jsxs(ie.OpennedDropdownContainer,{version:i,ref:b,tabIndex:-1,style:{width:Ze,...qe,outline:"none"},children:[u.jsxs("div",{style:{width:w?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!x&&u.jsx(ut.SearchBox,{onSearch:De,version:i,placeholder:de}),ue?u.jsx("div",{"data-testid":"dropdown-options-zero-state",style:{height:Y?P:O,display:"flex",background:C.COLORS.background.base},children:u.jsx(Ye.ZeroState,{...Je??{},isLoading:R,title:q?ze:Ke,subTitle:q?_e:$e})}):u.jsxs(ie.MenuListContainer,{"data-testid":"dropdown-menu-list",minHeight:Y?P:void 0,maxHeight:P,ref:_,children:[!!l&&!J&&!ge&&u.jsx(ot.SelectAllMenu,{version:i,options:s&&h?T:g,onSelect:Pe,checkboxActiveColor:H,brandSelectedRow:M,childrenLayout:p}),!ee&&J&&u.jsx(lt.SearchZeroState,{isLoading:me,errorMessage:Ie,onRetry:Fe,height:P,searchedString:s,containerWidth:B,version:i}),ee&&(J||!!A.length&&A.every(e=>e===!1))&&u.jsx(st.FreeFormMenu,{version:i,isMultiSelect:l,onSelect:Be,searchedString:s,checkboxActiveColor:H,brandSelectedRow:M}),u.jsx(rt.MenuList,{onInfiniteScroll:Oe,onDropdownItemClick:j,version:i,onSelect:v,showDescription:ve,isMultiSelect:l,options:G,useDefaultCursor:Re,ref:ce,focusedIndex:I,isDraggable:m,onOptionsReorder:je,showCheckboxForCustomElement:Ce,checkboxActiveColor:H,brandSelectedRow:M,childrenLayout:p,collapsibleChildren:k,collapsedParents:F,onToggleCollapsed:Ve})]}),!!l&&!ue&&i!=="2.0"&&u.jsx(ct.default,{onClear:()=>{Ae(),xe?.()},onApply:We,list:s&&h?T:g,buttonText:we,buttonOptions:Se,hideClearButton:Le,hideSelectedCount:Ee,childrenLayout:p})]}),!!w&&u.jsx(nt.Description,{title:w.title,description:w.description,version:i})]})};exports.OpenedDropdown=it;
|
|
2
2
|
//# sourceMappingURL=OpennedDropdown.js.map
|
|
@@ -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":"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"}
|
|
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 {\n\tflattenSelectableOptions,\n\tgetNestedParentValues,\n} from '../utils/iterationOnOptions';\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\tdefaultCollapsed,\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\tchildrenLayout,\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 [collapsedParents, setCollapsedParents] = useState<string[]>(() =>\n\t\tcollapsibleChildren && defaultCollapsed\n\t\t\t? getNestedParentValues(options)\n\t\t\t: [],\n\t);\n\n\t// Options can arrive after mount, so parents seen later start collapsed too -\n\t// without re-collapsing groups the user has since expanded.\n\tconst seededCollapsedParents = useRef<string[]>(collapsedParents);\n\tuseEffect(() => {\n\t\tif (!collapsibleChildren || !defaultCollapsed) return;\n\t\tconst unseen = getNestedParentValues(options).filter(\n\t\t\t(value) => !seededCollapsedParents.current.includes(value),\n\t\t);\n\t\tif (!unseen.length) return;\n\t\tseededCollapsedParents.current = [\n\t\t\t...seededCollapsedParents.current,\n\t\t\t...unseen,\n\t\t];\n\t\tsetCollapsedParents((previous) => [...previous, ...unseen]);\n\t}, [options, collapsibleChildren, defaultCollapsed]);\n\n\tconst handleToggleCollapsed = (value: string) => {\n\t\tsetCollapsedParents((previous) =>\n\t\t\tprevious.includes(value)\n\t\t\t\t? previous.filter((entry) => entry !== value)\n\t\t\t\t: [...previous, value],\n\t\t);\n\t\tsetFocusedIndex(-1);\n\t};\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/** 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 = flattenSelectableOptions(\n\t\t\t\tcurrentOptions,\n\t\t\t\tchildrenLayout === 'nested' ? { collapsedParents } : undefined,\n\t\t\t);\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\tchildrenLayout,\n\t\tcollapsedParents,\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}\n\n\t\t\tconst disableUnselected = (row: SingleOption) => ({\n\t\t\t\t...row,\n\t\t\t\tdisabled: row.disabled || !row.selected,\n\t\t\t});\n\t\t\tconst singleOption = disableUnselected(option as SingleOption);\n\n\t\t\treturn childrenLayout === 'nested' && singleOption.children?.length\n\t\t\t\t? {\n\t\t\t\t\t\t...singleOption,\n\t\t\t\t\t\tchildren: singleOption.children.map(disableUnselected),\n\t\t\t\t }\n\t\t\t\t: singleOption;\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\tchildrenLayout={childrenLayout}\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\tcollapsedParents={collapsedParents}\n\t\t\t\t\t\t\tonToggleCollapsed={handleToggleCollapsed}\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\tchildrenLayout={childrenLayout}\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","defaultCollapsed","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","collapsedParents","setCollapsedParents","getNestedParentValues","seededCollapsedParents","unseen","value","previous","handleToggleCollapsed","entry","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","handleKeyDown","e","currentOptions","flattenedOptions","flattenSelectableOptions","prev","newIndex","focusedElement","focusedOption","dropdownElement","heightToUse","menuListMaxHeight","showDescription","title","description","widthToUse","newWidth","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","nestedOption","disableUnselected","row","singleOption","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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"}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"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"),$=require("react"),Q=require("styled-components"),X=require("../../../../TypographyStyle.js"),s=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),p=r.default(ee.ListItem)`
|
|
2
2
|
padding: ${e=>e.version==="3.0"?"8px":e.version==="2.0"?"8px 12px":"14px 16px"} !important;
|
|
3
3
|
cursor: pointer;
|
|
4
4
|
margin-top: ${e=>e.brandSelectedRow?"0":e.version==="2.0"?"2px":"0"};
|
|
5
|
-
`,
|
|
5
|
+
`,ne=r.default(p)`
|
|
6
|
+
padding: 8px !important;
|
|
7
|
+
margin-top: 0;
|
|
8
|
+
border-radius: 0;
|
|
9
|
+
`,re=r.default.div`
|
|
6
10
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
7
11
|
border-radius: ${({version:e})=>e==="1.0"?"0":"8px"};
|
|
8
12
|
padding: ${({version:e})=>e==="1.0"?"0":"4px"};
|
|
9
13
|
min-width: 148px;
|
|
10
|
-
border: ${({version:e})=>e==="1.0"?`1px solid ${
|
|
14
|
+
border: ${({version:e})=>e==="1.0"?`1px solid ${s.DEFAULT_THEME.colorsV2.stroke.primary}`:"none"};
|
|
11
15
|
max-height: 248px;
|
|
12
16
|
overflow-y: auto;
|
|
13
|
-
`,
|
|
17
|
+
`,se=r.default.div`
|
|
14
18
|
display: grid;
|
|
15
19
|
grid-template-columns: repeat(2, 2.86px);
|
|
16
20
|
grid-template-rows: repeat(3, 2.86px);
|
|
@@ -22,23 +26,36 @@
|
|
|
22
26
|
align-self: center;
|
|
23
27
|
height: fit-content;
|
|
24
28
|
min-height: 18px;
|
|
25
|
-
`,
|
|
29
|
+
`,d=r.default.div`
|
|
26
30
|
width: 2.86px;
|
|
27
31
|
height: 2.86px;
|
|
28
32
|
border-radius: 50%;
|
|
29
|
-
background-color: ${
|
|
33
|
+
background-color: ${s.COLORS.content.inactive};
|
|
30
34
|
flex-shrink: 0;
|
|
31
|
-
`,
|
|
35
|
+
`,h=r.default.div`
|
|
32
36
|
display: flex;
|
|
33
37
|
align-content: center;
|
|
34
38
|
justify-content: center;
|
|
35
39
|
gap: 8px;
|
|
36
|
-
`,
|
|
40
|
+
`,S=r.default.span`
|
|
41
|
+
align-self: flex-start;
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
width: 11px;
|
|
44
|
+
height: 9px;
|
|
45
|
+
margin-left: 4px;
|
|
46
|
+
border-left: 1px solid ${s.COLORS.content.placeholder};
|
|
47
|
+
border-bottom: 1px solid ${s.COLORS.content.placeholder};
|
|
48
|
+
border-bottom-left-radius: 4px;
|
|
49
|
+
`,le=r.default.span`
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
`,de=r.default.div`
|
|
37
54
|
margin-right: -4px;
|
|
38
|
-
`,
|
|
55
|
+
`,ae=r.default.div`
|
|
39
56
|
display: flex;
|
|
40
57
|
align-items: center;
|
|
41
58
|
flex-direction: column;
|
|
42
59
|
flex: 1;
|
|
43
|
-
`,m=({onDragStart:e,onDragEnd:a})=>t.jsxs(
|
|
60
|
+
`,m=({onDragStart:e,onDragEnd:a})=>t.jsxs(se,{draggable:!0,onDragStart:e,onDragEnd:a,children:[t.jsx(d,{}),t.jsx(d,{}),t.jsx(d,{}),t.jsx(d,{}),t.jsx(d,{}),t.jsx(d,{})]}),ie=$.forwardRef(({option:e,isMultiSelect:a,showDescription:j,onSelect:q,last:R,version:l,onDropdownItemClick:D,useDefaultCursor:M,isFocused:H=!1,dataIndex:v=-1,isDraggable:i=!1,onDragStart:x,onDragOver:E,onDrop:A,onDragEnd:u,isDraggedOver:b=!1,showCheckboxForCustomElement:C=!1,checkboxActiveColor:y,brandSelectedRow:I,childrenLayout:B="flyout",isChildRow:L=!1,isPartiallyChecked:O=!1,isCollapsible:_=!1,isCollapsed:f=!1,onToggleCollapse:U},V)=>{const[z,T]=$.useState(e.selected),o=B==="nested",N=o?ne:p,F=(n,c)=>{if(!n.children||o){g(!n.selected);const W=c?{...n,parent:c}:n;D?.(W)}},g=n=>{e.disabled||q({...e,selected:n})},P=()=>{e.description?j(e.label,e.description):j()},w=M?{cursor:"default"}:{};return t.jsx(t.Fragment,{children:t.jsx(Z.Tooltip,{body:"",tooltipContent:e.children&&!o?t.jsx("div",{style:{backgroundColor:s.DEFAULT_THEME.colorsV2.surface.standard},ref:V,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),children:t.jsx(re,{version:l??"2.0",children:e.children.map(n=>t.jsx(p,{version:l,brandSelectedRow:I,style:l!=="1.0"&&(e?.children??[]).length-1?{borderBottom:0}:{},onClick:c=>{c.preventDefault(),F(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(N,{version:l,brandSelectedRow:I,style:R?{borderBottom:0,...w,...b?{borderTop:`2px solid ${s.COLORS.content.brand}`,opacity:.5}:{}}:{...w,...b?{borderTop:`2px solid ${s.COLORS.content.brand}`,opacity:.5}:{}},onClick:n=>{n.preventDefault(),F(e)},onMouseOver:P,listItem:{value:e.value,label:e.label},subText:e.subText,"data-option-index":v,role:"option",id:`dropdown-option-${v}`,"aria-selected":!!e.selected,onDragOver:i?E:void 0,onDrop:i?A:void 0,leadingIcon:a&&!(C&&e.customComponent)?t.jsxs(h,{children:[L&&t.jsx(S,{}),i&&t.jsx(m,{onDragStart:x,onDragEnd:u}),t.jsx(k.CheckBox,{size:!o&&l==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected||O,isPartiallyChecked:O,onValueChange:()=>g(!e.selected),activeColor:y}),t.jsx(de,{children:e.leadingIcon})]}):L?t.jsxs(h,{children:[t.jsx(S,{}),e.leadingIcon]}):i?t.jsxs(ae,{children:[t.jsx(m,{onDragStart:x,onDragEnd:u}),e.leadingIcon&&t.jsx("div",{children:e.leadingIcon})]}):e.leadingIcon?t.jsx(t.Fragment,{children:e.leadingIcon}):void 0,customComponent:a&&C&&e.customComponent?t.jsxs(h,{children:[i&&t.jsx(m,{onDragStart:x,onDragEnd:u}),t.jsx(k.CheckBox,{size:l==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:g,activeColor:y}),e.customComponent]}):e.customComponent,trailingIcon:e.isFreeForm?t.jsx(Y.FreeFormContainer,{children:t.jsx(X.BodyCaption,{style:{color:s.COLORS.content.secondary},children:"Freeform"})}):_?t.jsxs(t.Fragment,{children:[e.trailingIcon,t.jsx(le,{role:"button","aria-expanded":!f,"aria-label":`${f?"Expand":"Collapse"} ${e.label}`,onClick:n=>{n.preventDefault(),n.stopPropagation(),U?.()},children:f?t.jsx(G.default,{width:16,height:16}):t.jsx(K.default,{width:16,height:16})})]}):e.children&&!o?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||!a&&z?"selected":H?"focused":"default"})})})});exports.MenuItem=ie;
|
|
44
61
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -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// The elbow connector geometry is fixed, so nested rows pin their own metrics\n// instead of varying with `version`.\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 RowLeadingContainer = 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/** Separate hit area so clicking the chevron 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/** Renders the parent checkbox in its indeterminate state. */\n\tisPartiallyChecked?: boolean;\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// MenuList renders nested children inline, so there is no flyout and the\n\t\t// parent row is itself selectable.\n\t\tconst isNested = childrenLayout === 'nested';\n\t\tconst RowListItem = isNested ? StyledNestedListItem : StyledListItem;\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<RowLeadingContainer>\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={!isNested && 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 || isPartiallyChecked}\n\t\t\t\t\t\t\t\t\t\tisPartiallyChecked={isPartiallyChecked}\n\t\t\t\t\t\t\t\t\t\t// A partial parent renders checked while unselected, so\n\t\t\t\t\t\t\t\t\t\t// deriving the next value from isChecked would clear the\n\t\t\t\t\t\t\t\t\t\t// group while the row click selects it.\n\t\t\t\t\t\t\t\t\t\tonValueChange={() => onCheckHandler(!option.selected)}\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</RowLeadingContainer>\n\t\t\t\t\t\t\t) : isChildRow ? (\n\t\t\t\t\t\t\t\t<RowLeadingContainer>\n\t\t\t\t\t\t\t\t\t<Connector />\n\t\t\t\t\t\t\t\t\t{option.leadingIcon}\n\t\t\t\t\t\t\t\t</RowLeadingContainer>\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<RowLeadingContainer>\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</RowLeadingContainer>\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) : isCollapsible ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{option.trailingIcon}\n\t\t\t\t\t\t\t\t\t<CollapseToggle\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-expanded={!isCollapsed}\n\t\t\t\t\t\t\t\t\t\taria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${\n\t\t\t\t\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonToggleCollapse?.();\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\t{isCollapsed ? (\n\t\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\t) : (\n\t\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\t)}\n\t\t\t\t\t\t\t\t\t</CollapseToggle>\n\t\t\t\t\t\t\t\t</>\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","RowLeadingContainer","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","handleOptionClick","parent","onCheckHandler","updatedOption","checked","onHoverIn","cursorConfig","Fragment","Tooltip","child","e","CheckBox","FreeFormContainer","BodyCaption","ChevronDownIcon","ChevronUpIcon","ChevronRightIcon"],"mappings":"qrBAaMA,EAAiBC,EAAAA,QAAOC,WAAQ;AAAA,YAIzBC,GACXA,EAAM,UAAY,MACf,MACAA,EAAM,UAAY,MAClB,WACA,WAAW;AAAA;AAAA,eAEAA,GACdA,EAAM,iBAAmB,IAAMA,EAAM,UAAY,MAAQ,MAAQ,GAAG;AAAA,EAKhEC,GAAuBH,EAAAA,QAAOD,CAAc;AAAA;AAAA;AAAA;AAAA,EAM5CK,GAA+BJ,EAAAA,QAAO;AAAA;AAAA,kBAE1B,CAAC,CAAE,QAAAK,CAAA,IAAeA,IAAY,MAAQ,IAAM,KAAM;AAAA,YACxD,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,IAAM,KAAM;AAAA;AAAA,WAEnD,CAAC,CAAE,QAAAA,CAAA,IACZA,IAAY,MACT,aAAaC,EAAAA,cAAc,SAAS,OAAO,OAAO,GAClD,MAAM;AAAA;AAAA;AAAA,EAKLC,GAAsBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc7BQ,EAAUR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,qBAIFS,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAItCC,EAAsBV,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7BW,EAAYX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMCS,EAAAA,OAAO,QAAQ,WAAW;AAAA,4BACxBA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA,EAKhDG,GAAiBZ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBa,GAAqBb,EAAAA,QAAO;AAAA;AAAA,EAI5Bc,GAA4Bd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnCe,EAAiB,CAAC,CAAE,YAAAC,EAAa,UAAAC,KACtCC,EAAAA,KAACX,GAAA,CACA,UAAS,GACT,YAAAS,EACA,UAAAC,EAEA,SAAA,CAAAE,EAAAA,IAACX,EAAA,EAAQ,QACRA,EAAA,EAAQ,QACRA,EAAA,EAAQ,QACRA,EAAA,EAAQ,QACRA,EAAA,EAAQ,QACRA,EAAA,CAAA,CAAQ,CAAA,CAAA,CACV,EAiCYY,GAAWC,EAAAA,WACvB,CACC,CACC,OAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAArB,EACA,oBAAAsB,EACA,iBAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,YAAAf,EACA,WAAAgB,EACA,OAAAC,EACA,UAAAhB,EACA,cAAAiB,EAAgB,GAChB,6BAAAC,EAA+B,GAC/B,oBAAAC,EACA,iBAAAC,EACA,eAAAC,EAAiB,SACjB,WAAAC,EAAa,GACb,mBAAAC,EAAqB,GACrB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,GACd,iBAAAC,CAAA,EAEDC,IACI,CACJ,KAAM,CAACC,EAAsBC,CAAuB,EAAIC,EAAAA,SACvDzB,EAAO,QAAA,EAKF0B,EAAWV,IAAmB,SAC9BW,EAAcD,EAAW7C,GAAuBJ,EAEhDmD,EAAoB,CAAC5B,EAAsB6B,IAA0B,CAC1E,GAAI,CAAC7B,EAAO,UAAY0B,EAAU,CACjCI,EAAe,CAAC9B,EAAO,QAAQ,EAC/B,MAAM+B,EAAgBF,EAAS,CAAE,GAAG7B,EAAQ,OAAA6B,GAAW7B,EACvDK,IAAsB0B,CAAa,CACpC,CACD,EAEMD,EAAkBE,GAAqB,CACvChC,EAAO,UACXG,EAAS,CAAE,GAAGH,EAAQ,SAAUgC,EAAS,CAE3C,EAEMC,EAAY,IAAM,CACnBjC,EAAO,YACVE,EAAgBF,EAAO,MAAOA,EAAO,WAAW,EAEhDE,EAAA,CAEF,EAEMgC,EAAe5B,EAAmB,CAAE,OAAQ,SAAA,EAAc,CAAA,EAEhE,OACCT,MAAAsC,EAAAA,SAAA,CACC,SAAAtC,EAAAA,IAACuC,EAAAA,QAAA,CACA,KAAM,GACN,eACCpC,EAAO,UAAY,CAAC0B,EACnB7B,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,gBAAiBb,EAAAA,cAAc,SAAS,QAAQ,QAAA,EAEjD,IAAKsC,EACL,aAAc,IAAME,EAAwB,EAAI,EAChD,aAAc,IAAMA,EAAwB,EAAK,EAEjD,SAAA3B,EAAAA,IAACf,IAA6B,QAASC,GAAW,MAChD,SAAAiB,EAAO,SAAS,IAAKqC,GACrBxC,EAAAA,IAACpB,EAAA,CACA,QAAAM,EACA,iBAAAgC,EAEA,MACChC,IAAY,QAAUiB,GAAQ,UAAY,IAAI,OAAS,EACpD,CAAE,aAAc,CAAA,EAChB,CAAA,EAEJ,QAAUsC,GAAM,CACfA,EAAE,eAAA,EACFV,EAAkBS,EAAOrC,CAAM,CAChC,EACA,SAAU,CAAE,MAAOqC,EAAM,MAAO,MAAOA,EAAM,KAAA,EAC7C,QAASA,EAAM,QACf,YAAaA,EAAM,aAAe,OAClC,gBAAiBA,EAAM,gBACvB,aAAcA,EAAM,cAAgB,OACpC,QACCrC,EAAO,SACJ,WACAqC,EAAM,SACN,WACA,SAAA,EApBCA,EAAM,KAAA,CAuBZ,CAAA,CACF,CAAA,CAAA,EAGDxC,EAAAA,IAAAsC,EAAAA,SAAA,EAAE,EAGJ,UAAW,cACX,UAAW,GAEX,SAAAtC,EAAAA,IAAC8B,EAAA,CACA,QAAA5C,EACA,iBAAAgC,EACA,MACCX,EACG,CACA,aAAc,EACd,GAAG8B,EACH,GAAItB,EACD,CACA,UAAW,aAAazB,EAAAA,OAAO,QAAQ,KAAK,GAC5C,QAAS,EAAA,EAET,CAAA,CAAC,EAEJ,CACA,GAAG+C,EACH,GAAItB,EACD,CACA,UAAW,aAAazB,EAAAA,OAAO,QAAQ,KAAK,GAC5C,QAAS,EAAA,EAET,CAAA,CAAC,EAGR,QAAUmD,GAAM,CACfA,EAAE,eAAA,EACFV,EAAkB5B,CAAM,CACzB,EACA,YAAaiC,EACb,SAAU,CAAE,MAAOjC,EAAO,MAAO,MAAOA,EAAO,KAAA,EAC/C,QAASA,EAAO,QAChB,oBAAmBQ,EACnB,KAAK,SACL,GAAI,mBAAmBA,CAAS,GAChC,gBAAe,CAAC,CAACR,EAAO,SACxB,WAAYS,EAAcC,EAAa,OACvC,OAAQD,EAAcE,EAAS,OAC/B,YACCV,GACA,EAAEY,GAAgCb,EAAO,wBACvCZ,EAAA,CACC,SAAA,CAAA6B,SAAe5B,EAAA,EAAU,EACzBoB,GACAZ,EAAAA,IAACJ,EAAA,CACA,YAAAC,EACA,UAAAC,CAAA,CAAA,EAGFE,EAAAA,IAAC0C,EAAAA,SAAA,CACA,KAAM,CAACb,GAAY3C,IAAY,MAAQ,QAAU,UACjD,WAAYiB,EAAO,UAAY,GAC/B,UAAW,CAAC,CAACA,EAAO,UAAYkB,EAChC,mBAAAA,EAIA,cAAe,IAAMY,EAAe,CAAC9B,EAAO,QAAQ,EACpD,YAAac,CAAA,CAAA,EAEdjB,EAAAA,IAACN,GAAA,CAAoB,SAAAS,EAAO,WAAA,CAAY,CAAA,CAAA,CACzC,EACGiB,EACHrB,EAAAA,KAACR,EAAA,CACA,SAAA,CAAAS,EAAAA,IAACR,EAAA,EAAU,EACVW,EAAO,WAAA,CAAA,CACT,EACGS,EACHb,EAAAA,KAACJ,GAAA,CACA,SAAA,CAAAK,EAAAA,IAACJ,EAAA,CACA,YAAAC,EACA,UAAAC,CAAA,CAAA,EAEAK,EAAO,aAAeH,MAAC,MAAA,CAAK,WAAO,WAAA,CAAY,CAAA,CAAA,CACjD,EACGG,EAAO,YACVH,MAAAsC,EAAAA,SAAA,CAAG,SAAAnC,EAAO,YAAY,EACnB,OAEL,gBACCC,GACAY,GACAb,EAAO,uBACLZ,EAAA,CACC,SAAA,CAAAqB,GACAZ,EAAAA,IAACJ,EAAA,CACA,YAAAC,EACA,UAAAC,CAAA,CAAA,EAGFE,EAAAA,IAAC0C,EAAAA,SAAA,CACA,KAAMxD,IAAY,MAAQ,QAAU,UACpC,WAAYiB,EAAO,UAAY,GAC/B,UAAW,CAAC,CAACA,EAAO,SACpB,cAAe8B,EACf,YAAahB,CAAA,CAAA,EAEbd,EAAO,eAAA,CAAA,CACT,EAEAA,EAAO,gBAGT,aACCA,EAAO,iBACLwC,EAAAA,kBAAA,CACA,SAAA3C,MAAC4C,EAAAA,aAAY,MAAO,CAAE,MAAOtD,SAAO,QAAQ,SAAA,EAAa,oBAEzD,EACD,EACGgC,EACHvB,EAAAA,KAAAuC,EAAAA,SAAA,CACE,SAAA,CAAAnC,EAAO,aACRH,EAAAA,IAACP,GAAA,CACA,KAAK,SACL,gBAAe,CAAC8B,EAChB,aAAY,GAAGA,EAAc,SAAW,UAAU,IACjDpB,EAAO,KACR,GACA,QAAUsC,GAAM,CACfA,EAAE,eAAA,EACFA,EAAE,gBAAA,EACFjB,IAAA,CACD,EAEC,SAAAD,EACAvB,EAAAA,IAAC6C,EAAAA,QAAA,CAAgB,MAAO,GAAI,OAAQ,EAAA,CAAI,EAExC7C,EAAAA,IAAC8C,UAAA,CAAc,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,CAExC,EACD,EACG3C,EAAO,UAAY,CAAC0B,QACtBkB,UAAA,CAAiB,MAAO,GAAI,OAAQ,GAAI,EACtC5C,EAAO,aACVH,MAAAsC,EAAAA,SAAA,CAAG,SAAAnC,EAAO,aAAa,EACpB,OAEL,QACCA,EAAO,SACJ,WACAA,EAAO,UAAa,CAACC,GAAiBsB,EACtC,WACAhB,EACA,UACA,SAAA,CAAA,CAEL,CAAA,EAEF,CAEF,CACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),Z=require("../../utils/iterationOnOptions.js"),C=require("./MenuItem.js"),B=require("./MenuList.styled.js"),A=r.forwardRef(({options:d,isMultiSelect:I,showDescription:b,onSelect:O,version:f,onInfiniteScroll:E,onDropdownItemClick:y,useDefaultCursor:m,focusedIndex:h=-1,isDraggable:c=!1,onOptionsReorder:$,showCheckboxForCustomElement:M=!1,checkboxActiveColor:F,brandSelectedRow:q,childrenLayout:D="flyout",collapsibleChildren:H=!1,collapsedParents:G,onToggleCollapsed:J},l)=>{const i=r.useRef(null),v=r.useRef(null),[j,R]=r.useState(null),[K,T]=r.useState(null),N=r.useCallback(()=>{i.current&&i.current.disconnect(),i.current=new IntersectionObserver(t=>{t[0].isIntersecting&&E?.()}),v.current&&i.current.observe(v.current)},[E]);r.useEffect(()=>(N(),()=>{i.current&&i.current.disconnect()}),[N,d]);const Q=r.useCallback(t=>e=>{c&&(R(t),e.dataTransfer.effectAllowed="move")},[c]),U=r.useCallback(t=>e=>{c&&(e.preventDefault(),e.dataTransfer.dropEffect="move",T(t))},[c]),V=r.useCallback(t=>e=>{if(!(!c||j===null)){if(e.preventDefault(),j!==t){const u=[...d],[a]=u.splice(j,1);u.splice(t,0,a),$?.(u)}R(null),T(null)}},[c,j,d,$]),W=r.useCallback(()=>{R(null),T(null)},[]),P=D==="nested",L=new Map(Z.flattenSelectableOptions(d,P?{collapsedParents:G}:void 0).map((t,e)=>[t,e]));return s.jsx(s.Fragment,{children:d.map((t,e)=>{const u=e===d.length-1;if(t.options){const n=t;return s.jsxs("div",{style:{marginTop:f==="2.0"?2:0},children:[s.jsxs(B.StyledGroupedLabel,{version:f,children:[n.leadingIcon?s.jsx("span",{style:{marginRight:8},children:n.leadingIcon}):null,n.label]}),n.options.map((o,g)=>{const z=L.get(o),Y=z===h&&!o.disabled;return s.jsx(C.MenuItem,{version:f,last:g===n.options.length-1,onSelect:O,showDescription:b,onDropdownItemClick:y,isMultiSelect:I,option:o,useDefaultCursor:m,isFocused:Y,dataIndex:z,isDraggable:!1,showCheckboxForCustomElement:M,checkboxActiveColor:F,brandSelectedRow:q,ref:p=>{l&&typeof l=="object"&&l.current&&p&&p&&p&&p&&(l.current[e]=p)}},`${e}-${g}`)}),u?s.jsx("span",{ref:v}):null]},e)}const a=t,S=L.get(a),X=S===h&&!a.disabled,x=P?a.children??[]:[],_=G.includes(a.value),k=x.filter(n=>!n.disabled);return s.jsxs("div",{children:[a.hasDivider&&s.jsx(B.Divider,{}),s.jsx(C.MenuItem,{version:f,last:u,onSelect:O,showDescription:b,onDropdownItemClick:y,isMultiSelect:I,option:a,useDefaultCursor:m,isFocused:X,dataIndex:S,isDraggable:c,onDragStart:Q(e),onDragOver:U(e),onDrop:V(e),onDragEnd:W,isDraggedOver:K===e,showCheckboxForCustomElement:M,checkboxActiveColor:F,brandSelectedRow:q,childrenLayout:D,isPartiallyChecked:k.some(n=>n.selected)&&!k.every(n=>n.selected),isCollapsible:H&&!!x.length,isCollapsed:_,onToggleCollapse:()=>J(a.value),ref:n=>{l&&typeof l=="object"&&l.current&&n&&(l.current[e]=n)}},a.value),!_&&x.map((n,o)=>{const g=L.get(n);return s.jsx(C.MenuItem,{version:f,last:u&&o===x.length-1,onSelect:O,showDescription:b,onDropdownItemClick:y,isMultiSelect:I,option:n,useDefaultCursor:m,isFocused:g===h&&!n.disabled,dataIndex:g,isDraggable:!1,showCheckboxForCustomElement:M,checkboxActiveColor:F,brandSelectedRow:q,childrenLayout:D,isChildRow:!0},n.value)}),u?s.jsx("span",{ref:v}):null]},e)})})});exports.MenuList=A;
|
|
2
2
|
//# sourceMappingURL=MenuList.js.map
|