@bikdotai/bik-component-library 0.0.836 → 0.0.837-beta.0

package/dist/esm/components/dropdown/Dropdown.js.map

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

package/dist/esm/editor/BikEditor.js

@@ -1,125 +1,129 @@
-import { jsxs as g, jsx as h } from "react/jsx-runtime";
-import { getMarkRange as kt } from "../node_modules/@tiptap/core/dist/index.js";
-import { useEditor as yt, EditorContent as Bt } from "@tiptap/react";
-import { forwardRef as bt, useState as G, useRef as a, useEffect as xt, useImperativeHandle as vt } from "react";
-import { BodyCaption as K } from "../components/TypographyStyle.js";
-import { BikEditorShell as At, BikJsonHeader as Tt, BikJsonError as Et } from "./BikEditor.styles.js";
-import { DEFAULT_FORMAT_STATE as X } from "./BikEditor.types.js";
-import { buildJsonCodeBlockHtml as Rt, buildSectionedContent as Y, normalizeHtml as i, extractActiveFormats as tt, extractContent as et, parseJson as p, getCodeBlockText as d, extractBodyContent as It, extractSectionContent as Lt, setCodeBlockText as b, findSectionEndPos as nt, findSectionStartPos as Mt, setSectionContentInEditor as T, insertInlineHtml as Ot } from "./BikEditor.utils.js";
-import { buildExtensions as Jt } from "./extensions/buildExtensions.js";
-import { LinkBubbleMenu as Ft } from "./floating/LinkBubbleMenu.js";
-import Nt from "../icons/BIK AI specific/WandSparkles.js";
-import jt from "../icons/Actions/Formatting/Copy.js";
-function zt(y) {
-  return Object.entries(y).map(
-    ([x, S]) => `${x.replace(/([A-Z])/g, (k) => `-${k.toLowerCase()}`)}:${S}`
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { getMarkRange as xt } from "../node_modules/@tiptap/core/dist/index.js";
+import { useEditor as vt, EditorContent as X } from "@tiptap/react";
+import { forwardRef as bt, useState as A, useRef as a, useEffect as Et, useImperativeHandle as At } from "react";
+import { BodyCaption as Y } from "../components/TypographyStyle.js";
+import { BikEditorShell as Tt, BikJsonHeader as Rt, BikJsonBody as It, BikJsonEmptyState as Jt, BikJsonError as Lt } from "./BikEditor.styles.js";
+import { DEFAULT_FORMAT_STATE as tt } from "./BikEditor.types.js";
+import { buildJsonCodeBlockHtml as Mt, buildSectionedContent as et, normalizeHtml as i, extractActiveFormats as nt, extractContent as ot, getCodeBlockText as g, parseJson as p, extractBodyContent as Ot, extractSectionContent as Ft, setCodeBlockText as x, findSectionEndPos as rt, findSectionStartPos as zt, setSectionContentInEditor as T, insertInlineHtml as Nt } from "./BikEditor.utils.js";
+import { buildExtensions as jt } from "./extensions/buildExtensions.js";
+import { LinkBubbleMenu as Ht } from "./floating/LinkBubbleMenu.js";
+import wt from "../icons/BIK AI specific/WandSparkles.js";
+import Pt from "../icons/Actions/Formatting/Copy.js";
+import Dt from "../icons/Actions/Common actions/Code.js";
+import qt from "../icons/Informational/General/Info.js";
+function Ut(k) {
+  return Object.entries(k).map(
+    ([v, C]) => `${v.replace(/([A-Z])/g, (y) => `-${y.toLowerCase()}`)}:${C}`
   ).join(";");
 }
-const Ht = (y, x) => {
+const $t = (k, v) => {
   const {
-    initialContent: S,
-    sections: k,
+    initialContent: C,
+    sections: y,
     features: B,
-    disabled: ot,
-    maxCharacters: E,
-    characterLimit: rt,
-    shortcuts: st,
-    sendShortcut: it,
-    mentions: l,
-    slashCommands: C,
-    link: ct,
-    onPaste: at,
-    onReady: R,
-    onChange: I,
-    onSend: v,
+    disabled: st,
+    maxCharacters: R,
+    characterLimit: it,
+    shortcuts: ct,
+    sendShortcut: at,
+    mentions: d,
+    slashCommands: S,
+    link: lt,
+    onPaste: dt,
+    onReady: I,
+    onChange: J,
+    onSend: b,
     onFocus: L,
     onBlur: M,
     onSelectionChange: O,
-    minHeight: lt,
-    maxHeight: dt,
-    style: ut,
-    className: mt,
-    editorClassName: J,
-    editorStyle: F,
+    minHeight: ut,
+    maxHeight: mt,
+    style: ft,
+    className: gt,
+    editorClassName: F,
+    editorStyle: z,
     renderJsonError: N
-  } = y, m = !!B?.jsonMode, [u, j] = G(null), [ft, z] = G(!1), gt = m ? Rt(S ?? "") : k?.length ? Y(
-    i(S ?? ""),
-    k.map((t) => ({ ...t, content: i(t.content) }))
-  ) : i(S ?? ""), A = a([]), H = a(!1), w = a(R);
-  w.current = R;
-  const P = a(I);
-  P.current = I;
-  const D = a(O);
-  D.current = O;
-  const q = a(X), U = a(L);
-  U.current = L;
-  const W = a(M);
-  W.current = M;
-  const $ = a(v);
-  $.current = v;
-  const V = a(l?.agents ?? []);
-  V.current = l?.agents ?? [];
-  const _ = a(l?.teams ?? []);
-  _.current = l?.teams ?? [];
-  const Q = a(C?.items ?? []);
-  Q.current = C?.items ?? [];
-  const n = yt({
-    extensions: Jt({
+  } = k, m = !!B?.jsonMode, [f, j] = A(null), [ht, H] = A(!1), [pt, w] = A(
+    m && !(C ?? "").trim()
+  ), Ct = m ? Mt(C ?? "") : y?.length ? et(
+    i(C ?? ""),
+    y.map((t) => ({ ...t, content: i(t.content) }))
+  ) : i(C ?? ""), E = a([]), P = a(!1), D = a(I);
+  D.current = I;
+  const q = a(J);
+  q.current = J;
+  const U = a(O);
+  U.current = O;
+  const $ = a(tt), W = a(L);
+  W.current = L;
+  const V = a(M);
+  V.current = M;
+  const _ = a(b);
+  _.current = b;
+  const Q = a(d?.agents ?? []);
+  Q.current = d?.agents ?? [];
+  const Z = a(d?.teams ?? []);
+  Z.current = d?.teams ?? [];
+  const G = a(S?.items ?? []);
+  G.current = S?.items ?? [];
+  const n = vt({
+    extensions: jt({
       features: B,
-      placeholder: y.placeholder,
-      maxCharacters: E,
-      characterLimit: rt,
-      hasSections: (k?.length ?? 0) > 0,
+      placeholder: k.placeholder,
+      maxCharacters: R,
+      characterLimit: it,
+      hasSections: (y?.length ?? 0) > 0,
       mentions: {
-        agents: l ? V : void 0,
-        teams: l ? _ : void 0
+        agents: d ? Q : void 0,
+        teams: d ? Z : void 0
       },
-      slashCommands: C ? Q : void 0,
-      onPaste: at,
-      onSend: v ? (t) => $.current?.(t) : void 0,
-      sendShortcut: it,
-      shortcuts: st,
-      onMentionSelected: l?.onSelect,
-      onSlashCommandSelected: C?.onSelect,
-      renderMentionItem: l?.renderItem,
-      renderMentionDropdown: l?.renderDropdown,
-      removeMentionTriggerOnDismiss: l?.removeTriggerOnDismiss,
-      renderSlashCommandItem: C?.renderItem,
-      renderSlashCommandDropdown: C?.renderDropdown
+      slashCommands: S ? G : void 0,
+      onPaste: dt,
+      onSend: b ? (t) => _.current?.(t) : void 0,
+      sendShortcut: at,
+      shortcuts: ct,
+      onMentionSelected: d?.onSelect,
+      onSlashCommandSelected: S?.onSelect,
+      renderMentionItem: d?.renderItem,
+      renderMentionDropdown: d?.renderDropdown,
+      removeMentionTriggerOnDismiss: d?.removeTriggerOnDismiss,
+      renderSlashCommandItem: S?.renderItem,
+      renderSlashCommandDropdown: S?.renderDropdown
     }),
-    content: gt,
-    editable: !ot,
+    content: Ct,
+    editable: !st,
     immediatelyRender: !1,
     // SSR-safe — NEVER remove this
     editorProps: {
       attributes: {
-        ...J ? { class: J } : {},
-        ...F ? { style: zt(F) } : {}
+        ...F ? { class: F } : {},
+        ...z ? { style: Ut(z) } : {}
       }
     },
     onUpdate: ({ editor: t }) => {
-      if (P.current?.(et(t)), m) {
-        const e = p(d(t));
-        j(e.valid ? null : e);
+      if (q.current?.(ot(t)), m) {
+        const e = g(t), o = p(e);
+        j(o.valid ? null : o), w(!e.trim());
       }
     },
     onTransaction: ({ editor: t }) => {
-      const e = tt(t), o = q.current;
-      (o.bold !== e.bold || o.italic !== e.italic || o.underline !== e.underline || o.strike !== e.strike || o.bulletList !== e.bulletList || o.orderedList !== e.orderedList || o.blockquote !== e.blockquote || o.codeBlock !== e.codeBlock || o.superscript !== e.superscript || o.subscript !== e.subscript || o.textAlign !== e.textAlign || o.fontFamily !== e.fontFamily || o.fontSize !== e.fontSize || o.color !== e.color || o.highlight !== e.highlight || o.link?.href !== e.link?.href) && (q.current = e, D.current?.(e));
+      const e = nt(t), o = $.current;
+      (o.bold !== e.bold || o.italic !== e.italic || o.underline !== e.underline || o.strike !== e.strike || o.bulletList !== e.bulletList || o.orderedList !== e.orderedList || o.blockquote !== e.blockquote || o.codeBlock !== e.codeBlock || o.superscript !== e.superscript || o.subscript !== e.subscript || o.textAlign !== e.textAlign || o.fontFamily !== e.fontFamily || o.fontSize !== e.fontSize || o.color !== e.color || o.highlight !== e.highlight || o.link?.href !== e.link?.href) && ($.current = e, U.current?.(e));
     },
-    onFocus: () => U.current?.(),
-    onBlur: () => W.current?.()
+    onFocus: () => W.current?.(),
+    onBlur: () => V.current?.()
   });
   function s(t) {
-    n ? t(n) : A.current.push(t);
+    n ? t(n) : E.current.push(t);
   }
-  xt(() => {
-    if (n && (A.current.length > 0 && A.current.splice(0).forEach((e) => e(n)), H.current || (H.current = !0, w.current?.()), m)) {
-      const t = p(d(n));
-      j(t.valid ? null : t);
+  Et(() => {
+    if (n && (E.current.length > 0 && E.current.splice(0).forEach((e) => e(n)), P.current || (P.current = !0, D.current?.()), m)) {
+      const t = g(n), e = p(t);
+      j(e.valid ? null : e), w(!t.trim());
     }
-  }, [n, m]), vt(
-    x,
+  }, [n, m]), At(
+    v,
     () => ({
       // ── Focus ────────────────────────────────────────────────────────
       focus: (t) => s((e) => e.commands.focus(t)),
@@ -135,7 +139,7 @@ const Ht = (y, x) => {
         s((o) => o.commands.insertContent(e));
       },
       insertInlineContent: (t) => {
-        s((e) => Ot(e, t));
+        s((e) => Nt(e, t));
       },
       insertAtStart: (t) => {
         const e = i(t);
@@ -160,7 +164,7 @@ const Ht = (y, x) => {
       appendContent(t) {
         this.appendInline(t);
       },
-      getContent: () => n ? et(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getContent: () => n ? ot(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       getJSON: () => n?.getJSON() ?? null,
       getMentions: () => {
         const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
@@ -185,19 +189,19 @@ const Ht = (y, x) => {
           return t.doc.textBetween(e, o, " ");
         const c = t.schema.marks.link;
         if (c) {
-          const f = kt(t.doc.resolve(e), c);
-          if (f)
-            return t.doc.textBetween(f.from, f.to, " ");
+          const h = xt(t.doc.resolve(e), c);
+          if (h)
+            return t.doc.textBetween(h.from, h.to, " ");
         }
         return "";
       },
       // ── Character count ───────────────────────────────────────────────
       getCharacterCount: () => ({
         count: n?.storage.characterCount?.characters?.() ?? n?.getText().length ?? 0,
-        limit: E ?? null
+        limit: R ?? null
       }),
       // ── Sections ─────────────────────────────────────────────────────
-      getSectionContent: (t) => n ? Lt(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getSectionContent: (t) => n ? Ft(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setSectionContent: (t, e) => {
         const o = i(e);
         s((r) => T(r, t, o));
@@ -206,7 +210,7 @@ const Ht = (y, x) => {
         s((e) => {
           if (t === "body") {
             let r = e.state.doc.content.size - 1;
-            e.state.doc.descendants((c, f) => (c.type.name === "sectionDivider" && r === e.state.doc.content.size - 1 && (r = f - 1), r === e.state.doc.content.size - 1)), r < 1 && (r = 1), e.chain().focus().setTextSelection(r).run();
+            e.state.doc.descendants((c, h) => (c.type.name === "sectionDivider" && r === e.state.doc.content.size - 1 && (r = h - 1), r === e.state.doc.content.size - 1)), r < 1 && (r = 1), e.chain().focus().setTextSelection(r).run();
             return;
           }
           let o = -1;
@@ -220,13 +224,13 @@ const Ht = (y, x) => {
         s((e) => T(e, t, "<p></p>"));
       },
       // ── Convenience body shorthands ───────────────────────────────────
-      getBodyContent: () => n ? It(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getBodyContent: () => n ? Ot(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setBodyContent: (t) => {
         const e = i(t);
         s((o) => T(o, "body", e));
       },
       setBodyAndSections: (t, e) => {
-        const o = Y(
+        const o = et(
           i(t),
           e.map((r) => ({
             id: r.id,
@@ -238,7 +242,7 @@ const Ht = (y, x) => {
       appendBodyContent: (t) => {
         const e = i(t);
         s((o) => {
-          const r = nt(o, "body");
+          const r = rt(o, "body");
           o.commands.insertContentAt(r - 1, e, {
             parseOptions: { preserveWhitespace: !0 }
           });
@@ -247,7 +251,7 @@ const Ht = (y, x) => {
       insertAtSectionStart: (t, e) => {
         const o = i(e);
         s((r) => {
-          const c = Mt(r, t);
+          const c = zt(r, t);
           c !== -1 && r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
@@ -256,14 +260,14 @@ const Ht = (y, x) => {
       insertAtSectionEnd: (t, e) => {
         const o = i(e);
         s((r) => {
-          const c = nt(r, t);
+          const c = rt(r, t);
           r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
         });
       },
       // ── Formats & actions ─────────────────────────────────────────────
-      getActiveFormats: () => n ? tt(n) : X,
+      getActiveFormats: () => n ? nt(n) : tt,
       actions: {
         toggleBold: () => n?.chain().focus().toggleBold().run(),
         toggleItalic: () => n?.chain().focus().toggleItalic().run(),
@@ -282,12 +286,12 @@ const Ht = (y, x) => {
         unsetHighlight: () => n?.chain().focus().unsetHighlight().run(),
         setLink: (t, e) => {
           n && (e !== void 0 ? n.chain().focus().extendMarkRange("link").command(({ tr: o, state: r }) => {
-            const { from: c, to: f } = o.selection, Z = r.schema.marks.link;
-            if (!Z) return !1;
-            const Ct = r.schema.text(e, [
-              Z.create({ href: t })
-            ]), St = r.schema.text(" ");
-            return o.replaceWith(c, f, [Ct, St]), !0;
+            const { from: c, to: h } = o.selection, K = r.schema.marks.link;
+            if (!K) return !1;
+            const yt = r.schema.text(e, [
+              K.create({ href: t })
+            ]), Bt = r.schema.text(" ");
+            return o.replaceWith(c, h, [yt, Bt]), !0;
           }).run() : n.chain().focus().extendMarkRange("link").setLink({ href: t }).insertContent(" ").run());
         },
         updateLink: (t) => n?.chain().focus().extendMarkRange("link").setLink({ href: t }).run(),
@@ -305,82 +309,91 @@ const Ht = (y, x) => {
       },
       // ── JSON body ─────────────────────────────────────────────────────
       json: B?.jsonMode ? {
-        getText: () => n ? d(n) : "",
-        setText: (t) => s((e) => b(e, t)),
-        parse: () => p(n ? d(n) : ""),
-        isValid: () => p(n ? d(n) : "").valid,
+        getText: () => n ? g(n) : "",
+        setText: (t) => s((e) => x(e, t)),
+        parse: () => p(n ? g(n) : ""),
+        isValid: () => p(n ? g(n) : "").valid,
         format: (t = 2) => s((e) => {
-          const { valid: o, value: r } = p(d(e));
-          !o || r === null || b(e, JSON.stringify(r, null, t));
+          const { valid: o, value: r } = p(g(e));
+          !o || r === null || x(e, JSON.stringify(r, null, t));
         }),
         minify: () => s((t) => {
-          const { valid: e, value: o } = p(d(t));
-          !e || o === null || b(t, JSON.stringify(o));
+          const { valid: e, value: o } = p(g(t));
+          !e || o === null || x(t, JSON.stringify(o));
         })
       } : void 0
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [n]
   );
-  const ht = () => {
+  const St = () => {
     if (!n) return;
-    const { valid: t, value: e } = p(d(n));
-    !t || e === null || b(n, JSON.stringify(e, null, 2));
-  }, pt = () => {
-    n && (navigator.clipboard?.writeText(d(n)), z(!0), setTimeout(() => z(!1), 1500));
+    const { valid: t, value: e } = p(g(n));
+    !t || e === null || x(n, JSON.stringify(e, null, 2));
+  }, kt = () => {
+    n && (navigator.clipboard?.writeText(g(n)), H(!0), setTimeout(() => H(!1), 1500));
   };
-  return n ? /* @__PURE__ */ g(
-    At,
+  return n ? /* @__PURE__ */ u(
+    Tt,
     {
-      minHeight: lt,
-      maxHeight: dt,
+      minHeight: ut,
+      maxHeight: mt,
       tightParagraphs: !B?.richPaste,
       jsonMode: m,
-      style: ut,
-      className: mt,
+      style: ft,
+      className: gt,
       children: [
-        m && /* @__PURE__ */ g(Tt, { children: [
-          /* @__PURE__ */ h("span", { className: "bik-json-header-label", children: "JSON" }),
-          /* @__PURE__ */ g("div", { className: "bik-json-header-actions", children: [
-            /* @__PURE__ */ g(
+        m && /* @__PURE__ */ u(Rt, { children: [
+          /* @__PURE__ */ l("span", { className: "bik-json-header-label", children: "JSON" }),
+          /* @__PURE__ */ u("div", { className: "bik-json-header-actions", children: [
+            /* @__PURE__ */ u(
               "button",
               {
                 type: "button",
-                onClick: ht,
-                disabled: !!u,
+                onClick: St,
+                disabled: !!f,
                 title: "Format JSON",
                 children: [
-                  /* @__PURE__ */ h(Nt, { size: 16 }),
-                  /* @__PURE__ */ h(K, { children: "Beautify" })
+                  /* @__PURE__ */ l(wt, { size: 16 }),
+                  /* @__PURE__ */ l(Y, { children: "Beautify" })
                 ]
               }
             ),
-            /* @__PURE__ */ g("button", { type: "button", onClick: pt, title: "Copy JSON", children: [
-              /* @__PURE__ */ h(jt, { size: 16 }),
-              ft && /* @__PURE__ */ h(K, { children: "Copied" })
+            /* @__PURE__ */ u("button", { type: "button", onClick: kt, title: "Copy JSON", children: [
+              /* @__PURE__ */ l(Pt, { size: 16 }),
+              ht && /* @__PURE__ */ l(Y, { children: "Copied" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ h(Bt, { editor: n }),
-        /* @__PURE__ */ h(Ft, { editor: n, renderLinkTooltip: ct?.renderTooltip }),
-        m && u ? N ? N(u) : /* @__PURE__ */ g(Et, { children: [
-          u.line != null && /* @__PURE__ */ g("strong", { children: [
-            "Line ",
-            u.line,
-            u.column != null ? `, column ${u.column}` : "",
-            ":",
-            " "
-          ] }),
-          u.error
+        m ? /* @__PURE__ */ u(It, { $error: !!f, children: [
+          /* @__PURE__ */ l(X, { editor: n }),
+          pt && /* @__PURE__ */ u(Jt, { "aria-hidden": !0, children: [
+            /* @__PURE__ */ l(Dt, { size: 20 }),
+            /* @__PURE__ */ l("span", { children: k.placeholder ?? "Type or paste JSON here" })
+          ] })
+        ] }) : /* @__PURE__ */ l(X, { editor: n }),
+        /* @__PURE__ */ l(Ht, { editor: n, renderLinkTooltip: lt?.renderTooltip }),
+        m && f ? N ? N(f) : /* @__PURE__ */ u(Lt, { children: [
+          /* @__PURE__ */ l(qt, { size: 16 }),
+          /* @__PURE__ */ u("span", { children: [
+            f.line != null && /* @__PURE__ */ u("strong", { children: [
+              "Line ",
+              f.line,
+              f.column != null ? `, column ${f.column}` : "",
+              ":",
+              " "
+            ] }),
+            f.error
+          ] })
         ] }) : null
       ]
     }
   ) : null;
-}, wt = bt(
-  Ht
+}, Wt = bt(
+  $t
 );
-wt.displayName = "BikEditor";
+Wt.displayName = "BikEditor";
 export {
-  wt as BikEditor
+  Wt as BikEditor
 };
 //# sourceMappingURL=BikEditor.js.map