npm - se-design - Versions diffs - 1.0.79-dev1 → 1.0.80 - Mend

se-design 1.0.79-dev1 → 1.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

package/dist/index38.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index38.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n id: string \| number;\n label: string;\n value: string;\n [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n options?: DropdownOption[];\n renderOption?: (\n option: DropdownOption, \n props: { \n id: string; \n role: 'option'; \n 'aria-selected': boolean; \n onMouseEnter: () => void;\n className: string;\n },\n onSelect: (option: DropdownOption) => void\n ) => React.ReactNode;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n disabled?: boolean;\n type?: 'select' \| 'multi-select' \|'multi-select-without-cta';\n showInput?: boolean;\n displayTagBy?: 'label' \| 'value';\n isWithPortal?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n (\n {\n value,\n onChange,\n placeholder = \"Type to search or add custom tags...\",\n className = '',\n options = [],\n renderOption,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n disabled = false,\n type = 'select',\n showInput = true,\n displayTagBy = 'label',\n isWithPortal = false\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n // Define initValues at the top, right after props\n const initValues = (values: string[]) => {\n return values.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n });\n };\n\n // Now use it in useState\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return initValues(value \|\| []);\n });\n const [inputValue, setInputValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const popoverRef = useRef<PopoverHandle>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const applyClickedRef = useRef<boolean>(false);\n \n const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n const isMultiSelect = type === 'multi-select' \|\|isMultiSelectWithoutCTA;\n\n // Generate stable ID for listbox\n const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n const handleSelectOption = useCallback(\n (option: DropdownOption) => {\n if (disabled) return;\n\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === option.value)) {\n newTags.push({ label: option.label, value: option.value });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n },\n [disabled, tags, onChange]\n );\n\n const handleMultiSelectDropdownOptionClick = useCallback(\n (isSelected: boolean, option: DropdownOption) => {\n let newSelectedTags: { label: string; value: string }[] = [];\n if (isSelected) {\n newSelectedTags = [...tags, { label: option.label, value: option.value }];\n } else {\n newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n }\n setTags(newSelectedTags);\n if (isMultiSelectWithoutCTA) {\n onChange?.(newSelectedTags.map((tag) => tag.value));\n }\n },\n [tags, isMultiSelectWithoutCTA, onChange]\n );\n\n const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n if (disabled) return;\n\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const trimmed = inputValue.trim();\n if (!trimmed) return;\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === trimmed)) {\n newTags.push({ label: trimmed, value: trimmed });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n return;\n }\n\n if (isMultiSelect) {\n const isSelected = tags.some(tag => tag.value === option.value);\n handleMultiSelectDropdownOptionClick(!isSelected, option);\n } else {\n handleSelectOption(option);\n }\n }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n const effectiveItems: DropdownOption[] =\n filteredOptions.length > 0\n ? filteredOptions\n : allowCustomTags && inputValue.trim()\n ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n : [];\n\n // Combobox hook for keyboard navigation and ARIA\n const {\n containerProps,\n inputProps: comboboxInputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex,\n setHighlightedIndex\n } = useCombobox({\n items: effectiveItems,\n isOpen: isDropdownOpen,\n onOpenChange: setIsDropdownOpen,\n onSelect: handleSelectFromDropdown,\n listboxId,\n hasItems: effectiveItems.length > 0\n });\n\n\n useEffect(() => {\n if (applyClickedRef.current) {\n applyClickedRef.current = false;\n return;\n }\n setTags(initValues(value \|\| []));\n }, [value, options, isDropdownOpen]);\n\n\n useEffect(() => {\n // const isInputEmpty = !inputValue.trim();\n const filtered = options.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase()) \|\|\n option.value.toLowerCase().includes(inputValue.toLowerCase())\n );\n setFilteredOptions(filtered);\n }, [inputValue, options]);\n\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n \n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n \n //in multiselect if tag removed while dorpdownopen, do not call onchange\n if(!isMultiSelect \|\| isMultiSelectWithoutCTA \|\|(isMultiSelect && !isDropdownOpen)) {\n onChange?.(newTags.map(tag => tag.value));\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n // Handle Backspace to remove last tag (preserve existing behavior)\n if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n e.preventDefault();\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n return;\n }\n\n // Handle Enter for custom tags when no options match\n if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n e.preventDefault();\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n setHighlightedIndex(-1);\n setIsDropdownOpen(false);\n return;\n }\n\n // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n comboboxInputProps.onKeyDown(e);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n setInputValue(newValue);\n setHighlightedIndex(-1); // Reset highlighted index when user types\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (disabled) return;\n \n if (inputValue.trim() \|\| options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\n if (disabled) return;\n \n e.stopPropagation();\n inputRef.current?.focus();\n if (!isDropdownOpen && (inputValue.trim() \|\| options.length > 0)) {\n setIsDropdownOpen(true);\n }\n };\n\n const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n \n const target = e.target as HTMLElement;\n const isInputArea = target.closest('.input-with-tags-container');\n if (isInputArea) {\n e.stopPropagation();\n }\n };\n\n const toggleDropdown = () => {\n if (disabled) return;\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (\n option: DropdownOption,\n index: number,\n onSelect: (option: DropdownOption) => void,\n disabled: boolean\n ) => {\n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => !disabled && onSelect(option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n </div>\n );\n };\n const handleApplySelectedDropDownValues = () => {\n applyClickedRef.current = true;\n const newTagValues = tags.map(tag => tag.value);\n onChange?.(newTagValues);\n setIsDropdownOpen(false);\n };\n\n const clearSelectedDropDownValues = () => {\n setTags([]);\n };\n const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n const isOptionSelected = tags.some(tag => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isOptionSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n aria-checked={isOptionSelected}\n onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox\n automationId=\"checkbox\"\n className=\"checkbox\"\n defaultChecked={isOptionSelected}\n onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n label={option.label}\n />\n </span>\n </div>\n );\n };\n\n const multiSelectRenderCTAs = () => {\n return (\n <div className=\"dropdown-with-input-tags-ctas-container\">\n <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n </div>\n );\n };\n\n \n\n return (\n <div\n className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n data-automation-id={automationId}\n {...containerProps}\n >\n {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n <div onClick={handlePopoverWrapperClick}>\n <Popover\n ref={popoverRef}\n className=\"dropdown-with-input-tags-popover\"\n contentWidth=\"full\"\n position=\"bottom-left\"\n isPopoverOpen={!disabled && isDropdownOpen}\n onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n disableClickToggle={true}\n isWithPortal={isWithPortal}\n renderPopoverContents={({ closePopoverCb }) => (\n <>\n <div\n {...listboxProps}\n className=\"dropdown-with-input-tags-content\"\n {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n >\n {effectiveItems.length > 0 ? (\n effectiveItems.map((option, index) => {\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, false);\n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => {\n if (disabled) return;\n handleSelectFromDropdown(option);\n closePopoverCb();\n }}\n onMouseEnter={() => setHighlightedIndex(index)}\n >\n Add \"{inputValue.trim()}\"\n </div>\n );\n }\n if (isMultiSelect) {\n return multiSelectRenderOption(option, index);\n }\n \n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n const optionPropsWithHandlers = {\n ...optionProps,\n onMouseEnter: () => setHighlightedIndex(index),\n className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n };\n \n return renderOption\n ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n : defaultRenderOption(option, index, handleSelectOption, disabled);\n })\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n {noOptionsMessage}\n </div>\n </div>\n )}\n </div>\n {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n </>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div\n className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag[displayTagBy]}\n {!disabled && (\n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n onClick={() => handleRemoveTag(index)}\n shouldStopPropagation\n />\n )}\n </span>\n ))}\n {(showInput \|\|!tags.length) && (\n <input\n ref={inputRef}\n {...comboboxInputProps}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleInputFocus}\n placeholder={tags.length === 0 ? placeholder : ''}\n className=\"input-with-tags-input\"\n disabled={disabled}\n aria-label={label \|\| 'Search and select options'}\n />\n )}\n </div>\n </div>\n )}\n automationId={automationId}\n popoverContentAutomationId={`${automationId}-content`}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","isWithPortal","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}
1	+ {"version":3,"file":"index38.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n id: string \| number;\n label: string;\n value: string;\n [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n options?: DropdownOption[];\n renderOption?: (\n option: DropdownOption, \n props: { \n id: string; \n role: 'option'; \n 'aria-selected': boolean; \n onMouseEnter: () => void;\n className: string;\n },\n onSelect: (option: DropdownOption) => void\n ) => React.ReactNode;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n disabled?: boolean;\n type?: 'select' \| 'multi-select' \|'multi-select-without-cta';\n showInput?: boolean;\n displayTagBy?: 'label' \| 'value';\n isWithPortal?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n (\n {\n value,\n onChange,\n placeholder = \"Type to search or add custom tags...\",\n className = '',\n options = [],\n renderOption,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n disabled = false,\n type = 'select',\n showInput = true,\n displayTagBy = 'label',\n isWithPortal = false\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n // Define initValues at the top, right after props\n const initValues = (values: string[]) => {\n return values.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n });\n };\n\n // Now use it in useState\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return initValues(value \|\| []);\n });\n const [inputValue, setInputValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const popoverRef = useRef<PopoverHandle>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const applyClickedRef = useRef<boolean>(false);\n \n const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n const isMultiSelect = type === 'multi-select' \|\|isMultiSelectWithoutCTA;\n\n // Generate stable ID for listbox\n const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n const handleSelectOption = useCallback(\n (option: DropdownOption) => {\n if (disabled) return;\n\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === option.value)) {\n newTags.push({ label: option.label, value: option.value });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n },\n [disabled, tags, onChange]\n );\n\n const handleMultiSelectDropdownOptionClick = useCallback(\n (isSelected: boolean, option: DropdownOption) => {\n let newSelectedTags: { label: string; value: string }[] = [];\n if (isSelected) {\n newSelectedTags = [...tags, { label: option.label, value: option.value }];\n } else {\n newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n }\n setTags(newSelectedTags);\n if (isMultiSelectWithoutCTA) {\n onChange?.(newSelectedTags.map((tag) => tag.value));\n }\n },\n [tags, isMultiSelectWithoutCTA, onChange]\n );\n\n const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n if (disabled) return;\n\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const trimmed = inputValue.trim();\n if (!trimmed) return;\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === trimmed)) {\n newTags.push({ label: trimmed, value: trimmed });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n return;\n }\n\n if (isMultiSelect) {\n const isSelected = tags.some(tag => tag.value === option.value);\n handleMultiSelectDropdownOptionClick(!isSelected, option);\n } else {\n handleSelectOption(option);\n }\n }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n const effectiveItems: DropdownOption[] =\n filteredOptions.length > 0\n ? filteredOptions\n : allowCustomTags && inputValue.trim()\n ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n : [];\n\n // Combobox hook for keyboard navigation and ARIA\n const {\n containerProps,\n inputProps: comboboxInputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex,\n setHighlightedIndex\n } = useCombobox({\n items: effectiveItems,\n isOpen: isDropdownOpen,\n onOpenChange: setIsDropdownOpen,\n onSelect: handleSelectFromDropdown,\n listboxId,\n hasItems: effectiveItems.length > 0\n });\n\n\n useEffect(() => {\n if (applyClickedRef.current) {\n applyClickedRef.current = false;\n return;\n }\n setTags(initValues(value \|\| []));\n }, [value, options, isDropdownOpen]);\n\n\n useEffect(() => {\n // const isInputEmpty = !inputValue.trim();\n const filtered = options.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase()) \|\|\n option.value.toLowerCase().includes(inputValue.toLowerCase())\n );\n setFilteredOptions(filtered);\n }, [inputValue, options]);\n\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n \n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n \n //in multiselect if tag removed while dorpdownopen, do not call onchange\n if(!isMultiSelect \|\| isMultiSelectWithoutCTA \|\|(isMultiSelect && !isDropdownOpen)) {\n onChange?.(newTags.map(tag => tag.value));\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n // Handle Backspace to remove last tag (preserve existing behavior)\n if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n e.preventDefault();\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n return;\n }\n\n // Handle Enter for custom tags when no options match\n if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n e.preventDefault();\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n setHighlightedIndex(-1);\n setIsDropdownOpen(false);\n return;\n }\n\n // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n comboboxInputProps.onKeyDown(e);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n setInputValue(newValue);\n setHighlightedIndex(-1); // Reset highlighted index when user types\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (disabled) return;\n \n if (inputValue.trim() \|\| options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\n if (disabled) return;\n \n e.stopPropagation();\n inputRef.current?.focus();\n if (!isDropdownOpen && (inputValue.trim() \|\| options.length > 0)) {\n setIsDropdownOpen(true);\n }\n };\n\n const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n \n const target = e.target as HTMLElement;\n const isInputArea = target.closest('.input-with-tags-container');\n if (isInputArea) {\n e.stopPropagation();\n }\n };\n\n const toggleDropdown = () => {\n if (disabled) return;\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (\n option: DropdownOption,\n index: number,\n onSelect: (option: DropdownOption) => void,\n disabled: boolean\n ) => {\n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => !disabled && onSelect(option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n </div>\n );\n };\n const handleApplySelectedDropDownValues = () => {\n applyClickedRef.current = true;\n const newTagValues = tags.map(tag => tag.value);\n onChange?.(newTagValues);\n setIsDropdownOpen(false);\n };\n\n const clearSelectedDropDownValues = () => {\n setTags([]);\n };\n const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n const isOptionSelected = tags.some(tag => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isOptionSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n aria-checked={isOptionSelected}\n onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox\n automationId=\"checkbox\"\n className=\"checkbox\"\n defaultChecked={isOptionSelected}\n onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n label={option.label}\n />\n </span>\n </div>\n );\n };\n\n const multiSelectRenderCTAs = () => {\n return (\n <div className=\"dropdown-with-input-tags-ctas-container\">\n <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n </div>\n );\n };\n\n \n\n return (\n <div\n className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n data-automation-id={automationId}\n {...containerProps}\n >\n {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n <div onClick={handlePopoverWrapperClick}>\n <Popover\n ref={popoverRef}\n className=\"dropdown-with-input-tags-popover\"\n contentWidth=\"full\"\n position=\"bottom-left\"\n isPopoverOpen={!disabled && isDropdownOpen}\n onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n disableClickToggle={true}\n isWithPortal={isWithPortal}\n renderPopoverContents={({ closePopoverCb }) => (\n <>\n <div\n {...listboxProps}\n className=\"dropdown-with-input-tags-content\"\n {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n >\n {effectiveItems.length > 0 ? (\n effectiveItems.map((option, index) => {\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, false);\n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => {\n if (disabled) return;\n handleSelectFromDropdown(option);\n closePopoverCb();\n }}\n onMouseEnter={() => setHighlightedIndex(index)}\n >\n Add \"{inputValue.trim()}\"\n </div>\n );\n }\n if (isMultiSelect) {\n return multiSelectRenderOption(option, index);\n }\n \n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n const optionPropsWithHandlers = {\n ...optionProps,\n onMouseEnter: () => setHighlightedIndex(index),\n className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n };\n \n return renderOption\n ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n : defaultRenderOption(option, index, handleSelectOption, disabled);\n })\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n {noOptionsMessage}\n </div>\n </div>\n )}\n </div>\n {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n </>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div\n className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag[displayTagBy]}\n {!disabled && (\n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n onClick={() => handleRemoveTag(index)}\n shouldStopPropagation\n />\n )}\n </span>\n ))}\n {(showInput \|\|!tags.length) && (\n <input\n ref={inputRef}\n {...comboboxInputProps}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleInputFocus}\n placeholder={tags.length === 0 ? placeholder : ''}\n className=\"input-with-tags-input\"\n disabled={disabled}\n aria-label={label \|\| 'Search and select options'}\n />\n )}\n </div>\n </div>\n )}\n automationId={automationId}\n popoverContentAutomationId={`${automationId}-content`}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","isWithPortal","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}

package/dist/index39.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index39.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' \| 'textarea';\n\ntype NativeInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'value'\n \| 'onChange'\n \| 'disabled'\n \| 'maxLength'\n \| 'id'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'children'\n>;\ntype NativeTextareaProps = Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \| 'value'\n \| 'onChange'\n \| 'disabled'\n \| 'maxLength'\n \| 'id'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'children'\n>;\n\ntype CommonInputProps = {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n tag?: InputTag;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n style?: React.CSSProperties;\n inputStyle?: React.CSSProperties;\n automationId?: string;\n id?: string;\n /*\n Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n * Prefer ariaLabelledBy when a visible label exists.\n /\n ariaLabel?: string;\n /\n ID(s) of visible element(s) that label this input.\n * Useful for external labels outside the Input component.\n /\n ariaLabelledBy?: string;\n /\n ID(s) of element(s) that describe this input (hints, helper text, etc.).\n * Will be merged with internal error/counter IDs.\n /\n ariaDescribedBy?: string;\n};\n\n/\n Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps \| NativeTextareaProps);\n\nexport function Input({\n value,\n onChange,\n onBlur,\n onFocus,\n disabled,\n maxLength,\n tag,\n error,\n errorMessage,\n label,\n placeholder,\n style,\n inputStyle,\n automationId = '',\n id,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ...nativeProps\n}: InputProps) {\n const Element: InputTag = tag \|\| 'input';\n\n const inputId = useStableId(id, 'se-input');\n const errorId = `${inputId}-error`;\n const countId = `${inputId}-count`;\n\n const describedBy = mergeIds(\n error && errorMessage ? errorId : undefined,\n maxLength ? countId : undefined,\n ariaDescribedBy\n );\n\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy: describedBy\n });\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n onFocus?.(e);\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n const nextValue = e.target.value;\n onChange(nextValue);\n };\n\n const inputPropsBase = {\n ...(nativeProps as Record<string, unknown>),\n id: inputId,\n value,\n onChange: handleChange,\n onBlur,\n onFocus: handleFocus,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${\n disabled ? 'input-container-disabled' : ''\n }`,\n maxLength: maxLength ?? undefined,\n placeholder: placeholder,\n style: inputStyle,\n 'aria-invalid': error ? 'true' : undefined,\n ...accessibleNameProps\n };\n\n return (\n <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n {label && (\n <label\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n {React.createElement(Element, inputPropsBase)}\n {(error \|\| maxLength) &&\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n {error && errorMessage && (\n <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n <span>{value?.length + '/' + maxLength}</span>\n </div>\n )}\n </div>\n }\n </div>\n );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;~~AACrF~~,~~YAAMC~~,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,~~IACpB~~;AAAA,~~IAOE3B~~,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,~~IACb~~;AAAA,~~IAcExB~~,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;~~AAGL~~,~~SACEQ~~,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,~~EAAAA~~,~~GACrEJ~~,~~KACCwB~~,gBAAAA,~~EAAAC~~,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,~~EAAAA~~,~~GAERX~~,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,~~MACT4B~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,~~EAAA~~,~~GACjGG~~,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,~~EAAA~~,~~GACjE7B,~~CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,~~EAAA~~,~~GACpEC~~,gBAAAA,~~EAAAC~~,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}
1	+ {"version":3,"file":"index39.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' \| 'textarea';\n\ntype NativeInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'value'\n \| 'onChange'\n \| 'disabled'\n \| 'maxLength'\n \| 'id'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'children'\n>;\ntype NativeTextareaProps = Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \| 'value'\n \| 'onChange'\n \| 'disabled'\n \| 'maxLength'\n \| 'id'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'children'\n>;\n\ntype CommonInputProps = {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n tag?: InputTag;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n style?: React.CSSProperties;\n inputStyle?: React.CSSProperties;\n automationId?: string;\n id?: string;\n /*\n Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n * Prefer ariaLabelledBy when a visible label exists.\n /\n ariaLabel?: string;\n /\n ID(s) of visible element(s) that label this input.\n * Useful for external labels outside the Input component.\n /\n ariaLabelledBy?: string;\n /\n ID(s) of element(s) that describe this input (hints, helper text, etc.).\n * Will be merged with internal error/counter IDs.\n /\n ariaDescribedBy?: string;\n};\n\n/\n Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps \| NativeTextareaProps);\n\nexport function Input({\n value,\n onChange,\n onBlur,\n onFocus,\n disabled,\n maxLength,\n tag,\n error,\n errorMessage,\n label,\n placeholder,\n style,\n inputStyle,\n automationId = '',\n id,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ...nativeProps\n}: InputProps) {\n const Element: InputTag = tag \|\| 'input';\n\n const inputId = useStableId(id, 'se-input');\n const errorId = `${inputId}-error`;\n const countId = `${inputId}-count`;\n\n const describedBy = mergeIds(\n error && errorMessage ? errorId : undefined,\n maxLength ? countId : undefined,\n ariaDescribedBy\n );\n\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy: describedBy\n });\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n onFocus?.(e);\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n const nextValue = e.target.value;\n onChange(nextValue);\n };\n\n const inputPropsBase = {\n ...(nativeProps as Record<string, unknown>),\n id: inputId,\n value,\n onChange: handleChange,\n onBlur,\n onFocus: handleFocus,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${\n disabled ? 'input-container-disabled' : ''\n }`,\n maxLength: maxLength ?? undefined,\n placeholder: placeholder,\n style: inputStyle,\n 'aria-invalid': error ? 'true' : undefined,\n ...accessibleNameProps\n };\n\n return (\n <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n {label && (\n <label\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n {React.createElement(Element, inputPropsBase)}\n {(error \|\| maxLength) &&\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n {error && errorMessage && (\n <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n <span>{value?.length + '/' + maxLength}</span>\n </div>\n )}\n </div>\n }\n </div>\n );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;AAC/EC,YAAAA,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,IAAA;AAAA,IAQlB3B,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,IAAA;AAAA,IAeXxB,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;AAIHQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EACrEJ,GAAAA,KACCyB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,EAERX,GAAAA,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,MACT6B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EACjGG,GAAAA,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,KACjE7B,CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAM,GAC1EE,gBAAAA,EAAAA,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}

package/dist/index4.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/*\n Allows native button attributes (aria-, data-, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n /\ntype NativeButtonProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'onClick' \| 'disabled' \| 'type' \| 'aria-label' \| 'aria-labelledby' \| 'aria-describedby' \| 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n /\n Type of the button. \n /\n type?: 'primary' \| 'secondary' \| 'ghost' \| 'link' \| 'unstyled';\n /\n Color pallet of the button\n /\n theme?: 'blue' \| 'red' \| 'yellow' \| 'green' \| 'ai' \| 'white';\n /\n Size of the button\n /\n size?: 'sm' \| 'md' \| 'lg';\n /\n Button contents\n /\n label: string \| '';\n /\n Icon props\n /\n iconProps?: IconProps;\n /\n Icon position\n /\n iconPosition?: 'left' \| 'right';\n /\n Disabled state\n /\n disabled?: boolean;\n /\n Loading state - will disable button and show spinner\n /\n loading?: boolean;\n /\n Optional click handler (called for pointer/mouse activations)\n /\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /\n Optional keyboard activation handler\n * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n * Use when you want to have different behavior for keyboard and pointer activations.\n * If not provided, onClick will be called for all activations.\n /\n onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /\n Custom class name\n /\n className?: string;\n /\n Automation ID for testing\n /\n automationId?: string;\n /\n If true, button will be focused on mount.\n * For programmatic focus control, use ref with .focus() instead.\n /\n autoFocus?: boolean;\n /\n Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n * Prefer ariaLabelledBy when a visible label exists.\n /\n ariaLabel?: string;\n /\n ID(s) of element(s) that label this button.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n /\n ariaLabelledBy?: string;\n /\n ID(s) of element(s) that describe this button.\n * Provides additional context announced after the accessible name.\n /\n ariaDescribedBy?: string;\n /\n When true, sets aria-pressed for toggle/pressed state \n */\n isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n sm: 'py-1 px-3 small', // padding: 4px, 12px\n md: 'py-2 px-3 medium', // padding: 8px, 12px\n lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n primary: `primary-btn ${focusClass}`,\n secondary: `secondary-btn ${focusClass}`,\n ghost: `ghost-btn ${focusClass}`,\n link: `link-btn w-fit ${focusClass}`,\n unstyled: `unstyled-btn ${focusClass}`,\n sm: 'py-1 px-3 small', // padding: 4px, 12px\n md: 'py-2 px-3 medium', // padding: 8px, 12px\n lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n blue: 'theme-blue',\n red: 'theme-red',\n yellow: 'theme-yellow',\n green: 'theme-green',\n ai: 'theme-ai',\n white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n theme = 'blue',\n size = 'md',\n label = '',\n iconPosition = 'left',\n disabled = false,\n loading = false,\n className = '',\n iconProps = { name: '' },\n automationId = '',\n autoFocus = false,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n isPressed,\n onClick,\n onKeyboardActivate,\n ...props\n },\n ref\n ) => {\n const isUnstyled = type === 'unstyled';\n\n // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n const { pressProps, isDisabled } = useAccessiblePress({\n disabled,\n loading,\n isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n pressed: isPressed,\n onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n });\n\n // Skip size/color classes for unstyled variant\n const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n // Avoid mutating incoming iconProps\n const computedIconProps: IconProps \| undefined = iconProps?.name\n ? {\n ...iconProps,\n stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n }\n : undefined;\n\n const buttonClassName = [\n 'se-design-button',\n colorPalletClassName,\n sizeClassName,\n typeClassName,\n className,\n !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n ]\n .filter(Boolean)\n .join(' ');\n\n // Compute accessible name/description props with correct precedence\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n });\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClassName}\n disabled={isDisabled}\n autoFocus={autoFocus}\n data-automation-id={automationId}\n {...props}\n {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n {...accessibleNameProps}\n >\n {loading && (\n <div\n aria-hidden=\"true\"\n className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n />\n )}\n {!loading && computedIconProps?.name && iconPosition === 'left' && (\n <Icon {...computedIconProps} />\n )}\n {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n {!loading && computedIconProps?.name && iconPosition === 'right' && (\n <Icon {...computedIconProps} />\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/*\n Allows native button attributes (aria-, data-, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n /\ntype NativeButtonProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'onClick' \| 'disabled' \| 'type' \| 'aria-label' \| 'aria-labelledby' \| 'aria-describedby' \| 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n /\n Type of the button. \n /\n type?: 'primary' \| 'secondary' \| 'ghost' \| 'link' \| 'unstyled';\n /\n Color pallet of the button\n /\n theme?: 'blue' \| 'red' \| 'yellow' \| 'green' \| 'ai' \| 'white';\n /\n Size of the button\n /\n size?: 'sm' \| 'md' \| 'lg';\n /\n Button contents\n /\n label: string \| '';\n /\n Icon props\n /\n iconProps?: IconProps;\n /\n Icon position\n /\n iconPosition?: 'left' \| 'right';\n /\n Disabled state\n /\n disabled?: boolean;\n /\n Loading state - will disable button and show spinner\n /\n loading?: boolean;\n /\n Optional click handler (called for pointer/mouse activations)\n /\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /\n Optional keyboard activation handler\n * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n * Use when you want to have different behavior for keyboard and pointer activations.\n * If not provided, onClick will be called for all activations.\n /\n onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /\n Custom class name\n /\n className?: string;\n /\n Automation ID for testing\n /\n automationId?: string;\n /\n If true, button will be focused on mount.\n * For programmatic focus control, use ref with .focus() instead.\n /\n autoFocus?: boolean;\n /\n Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n * Prefer ariaLabelledBy when a visible label exists.\n /\n ariaLabel?: string;\n /\n ID(s) of element(s) that label this button.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n /\n ariaLabelledBy?: string;\n /\n ID(s) of element(s) that describe this button.\n * Provides additional context announced after the accessible name.\n /\n ariaDescribedBy?: string;\n /\n When true, sets aria-pressed for toggle/pressed state \n */\n isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n sm: 'py-1 px-3 small', // padding: 4px, 12px\n md: 'py-2 px-3 medium', // padding: 8px, 12px\n lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n primary: `primary-btn ${focusClass}`,\n secondary: `secondary-btn ${focusClass}`,\n ghost: `ghost-btn ${focusClass}`,\n link: `link-btn w-fit ${focusClass}`,\n unstyled: `unstyled-btn ${focusClass}`,\n sm: 'py-1 px-3 small', // padding: 4px, 12px\n md: 'py-2 px-3 medium', // padding: 8px, 12px\n lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n blue: 'theme-blue',\n red: 'theme-red',\n yellow: 'theme-yellow',\n green: 'theme-green',\n ai: 'theme-ai',\n white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n theme = 'blue',\n size = 'md',\n label = '',\n iconPosition = 'left',\n disabled = false,\n loading = false,\n className = '',\n iconProps = { name: '' },\n automationId = '',\n autoFocus = false,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n isPressed,\n onClick,\n onKeyboardActivate,\n ...props\n },\n ref\n ) => {\n const isUnstyled = type === 'unstyled';\n\n // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n const { pressProps, isDisabled } = useAccessiblePress({\n disabled,\n loading,\n isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n pressed: isPressed,\n onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n });\n\n // Skip size/color classes for unstyled variant\n const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n // Avoid mutating incoming iconProps\n const computedIconProps: IconProps \| undefined = iconProps?.name\n ? {\n ...iconProps,\n stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n }\n : undefined;\n\n const buttonClassName = [\n 'se-design-button',\n colorPalletClassName,\n sizeClassName,\n typeClassName,\n className,\n !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n ]\n .filter(Boolean)\n .join(' ');\n\n // Compute accessible name/description props with correct precedence\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n });\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClassName}\n disabled={isDisabled}\n autoFocus={autoFocus}\n data-automation-id={automationId}\n {...props}\n {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n {...accessibleNameProps}\n >\n {loading && (\n <div\n aria-hidden=\"true\"\n className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n />\n )}\n {!loading && computedIconProps?.name && iconPosition === 'left' && (\n <Icon {...computedIconProps} />\n )}\n {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n {!loading && computedIconProps?.name && iconPosition === 'right' && (\n <Icon {...computedIconProps} />\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}

package/dist/index40.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index40.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n label: string;\n value: string;\n id: string \| number;\n [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n disabled?: boolean;\n placeholder?: string;\n debounceDuration?: number;\n onInputChange?: (value: string) => void;\n onSearchClear?: () => void;\n onChipRemove?: (chip: ChipType) => void;\n updateSearchString?: string;\n collapsible?: boolean;\n width?: string;\n chips?: ChipType[];\n showSearchIcon?: boolean;\n renderFilterComponent?: () => React.ReactNode;\n automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n const {\n disabled = false,\n placeholder = 'Search',\n debounceDuration = 500,\n onInputChange = () => {},\n onSearchClear = () => {},\n onChipRemove = () => {},\n updateSearchString = '',\n collapsible = false,\n width = '200px',\n chips = [],\n showSearchIcon = true,\n renderFilterComponent = null,\n automationId = ''\n } = props;\n const [inputValue, setInputValue] = useState('');\n const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n const [searchChips, setSearchChips] = useState<ChipType[]>(chips \|\| []);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n setTimeout(() => inputRef?.current?.focus(), 0);\n }\n }, [isExpanded]);\n\n // Manually update the searchbox text\n useEffect(() => {\n if (updateSearchString !== inputValue) {\n setInputValue(updateSearchString);\n }\n }, [updateSearchString]);\n\n useEffect(() => {\n setSearchChips(chips);\n }, [chips]);\n\n const debouncedOnInputChange = useMemo(\n () => debounce(onInputChange, debounceDuration),\n [onInputChange, debounceDuration]\n );\n\n useEffect(() => {\n return () => {\n debouncedOnInputChange.cancel();\n };\n }, [debouncedOnInputChange]);\n\n const onChangeHandler = (value: string) => {\n setInputValue(value);\n debouncedOnInputChange(value);\n };\n\n const iconClickHandler = () => {\n setInputValue('');\n onInputChange('');\n onSearchClear();\n };\n\n const onBlurHandler = () => {\n if (collapsible && inputValue?.trimEnd() === '') {\n setIsExpanded(false);\n }\n };\n\n const removeChip = (chip: ChipType) => {\n setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n onChipRemove(chip);\n };\n\n const hasChips = searchChips?.length > 0;\n\n return (\n <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n {isExpanded && (\n <div className=\"search-box-container\">\n <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n {hasChips &&\n searchChips?.map((chip) => (\n <LabelChip\n key={chip?.value}\n label={chip?.label}\n icon=\"close\"\n onIconClick={() => removeChip(chip)}\n />\n ))}\n <div className=\"search-input-container\">\n {showSearchIcon && (\n <Icon\n name=\"search\"\n className=\"search-icon img-wrap\"\n onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n />\n )}\n <input\n ref={inputRef}\n className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n id=\"search_bar\"\n type=\"text\"\n placeholder={placeholder}\n onChange={(e) => onChangeHandler(e.target.value)}\n value={inputValue}\n disabled={disabled}\n onBlur={onBlurHandler}\n />\n {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n </div>\n </div>\n {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n </div>\n )}\n </div>\n );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":";;;;;AA8BO,SAASA,EAAUC,GAAuB;~~AAC/C~~,~~QAAM~~;AAAA,IACJC,UAAAA,IAAW;AAAA,IACXC,aAAAA,IAAc;AAAA,IACdC,kBAAAA,IAAmB;AAAA,IACnBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,cAAAA,IAAeA,MAAM;AAAA,IAAC;AAAA,IACtBC,oBAAAA,IAAqB;AAAA,IACrBC,aAAAA,IAAc;AAAA,IACdC,OAAAA,IAAQ;AAAA,IACRC,OAAAA,IAAQ,~~CAAA~~;AAAA,~~IACRC~~,gBAAAA,IAAiB;AAAA,IACjBC,uBAAAA,IAAwB;AAAA,IACxBC,cAAAA,IAAe;AAAA,~~EAAA~~,~~IACbb~~,GACE,CAACc,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,CAACC,GAAYC,CAAa,IAAIF,EAAS,CAAChB,GAAOQ,WAAW,GAC1D,CAACW,GAAaC,CAAc,IAAIJ,EAAqBN,KAAS,CAAA,CAAE,GAChEW,IAAWC,EAAyB,IAAI;AAE9CC,EAAAA,EAAU,MAAM;~~AACd~~,~~IAAIN~~,KAAcI,EAASG,WACzBC,WAAW,MAAMJ,GAAUG,SAASE,~~MAAAA~~,~~GAAS,~~CAAC;AAAA,~~EAElD~~,~~GAAG~~,CAACT,CAAU,CAAC,GAGfM,EAAU,MAAM;AACd,IAAIhB,MAAuBO,KACzBC,EAAcR,CAAkB;AAAA,~~EAEpC~~,~~GAAG~~,CAACA,CAAkB,CAAC,GAEvBgB,EAAU,MAAM;AACdH,IAAAA,EAAeV,CAAK;AAAA,~~EACtB~~,~~GAAG~~,CAACA,CAAK,CAAC;~~AAEV~~,~~QAAMiB~~,IAAyBC,EAC7B,MAAMC,EAASzB,GAAeD,CAAgB,GAC9C,CAACC,GAAeD,CAAgB,CAClC;AAEAoB,EAAAA,EAAU,MACD,MAAM;AACXI,IAAAA,EAAuBG,~~OAAAA~~;~~AAAAA~~,~~EACzB~~,~~GACC~~,CAACH,CAAsB,CAAC;~~AAE3B~~,~~QAAMI~~,IAAkBA,CAACC,MAAkB;AACzCjB,IAAAA,EAAciB,CAAK,GACnBL,EAAuBK,CAAK;AAAA,~~EAC9B~~,~~GAEMC~~,IAAmBA,MAAM;AAC7BlB,IAAAA,EAAc,EAAE,GAChBX,EAAc,EAAE,~~GAChBC,EAAAA~~;~~AAAAA~~,~~EACF~~,~~GAEM6B,~~IAAgBA,MAAM;AAC1B,IAAI1B,KAAeM,GAAYqB,~~QAAAA~~,~~MAAc~~,MAC3CjB,EAAc,EAAK;AAAA,~~EAEvB~~,~~GAEMkB~~,IAAaA,CAACC,MAAmB;AACrCjB,IAAAA,EAAeD,EAAYmB,OAAQC,CAAAA,MAAMA,GAAGC,OAAOH,GAAMG,EAAE,CAAC,GAC5DlC,EAAa+B,CAAI;AAAA,~~EACnB~~,~~GAEMI~~,IAAWtB,GAAauB,SAAS;~~AAEvC~~,~~SACEC~~,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,iBAAiB5B,IAAa,eAAe,YAAY;AAAA,IAAI6B,OAAO;AAAA,MAAErC,OAAAA;AAAAA,~~IAAAA~~;~~AAAAA~~,~~IAAgB~~,sBAAoBI;AAAAA,~~EAAAA~~,~~GAEvHI~~,~~KACC0B~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,~~GACbF~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IAAKC,WAAW,iCAAiCJ,IAAW,eAAe,EAAE;AAAA,EAAA,GAC1EA,KACCtB,GAAa4B,IAAKV,~~CAAAA~~,~~MAChBM~~,gBAAAA,EAAAC,cAACI,GAAS;AAAA,IACRC,KAAKZ,GAAML;AAAAA,IACXkB,OAAOb,GAAMa;AAAAA,IACbC,MAAK;AAAA,IACLC,aAAaA,MAAMhB,EAAWC,CAAI;AAAA,~~EAAA~~,~~CACnC~~,CACF,GACHM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,~~EAAA~~,~~GACZlC~~,~~KACCgC~~,gBAAAA,~~EAAAC~~,cAACS,GAAI;AAAA,IACHC,MAAK;AAAA,IACLT,WAAU;AAAA,IACVU,SAASA,MAAM/C,KAAeU,EAAesC,CAAAA,MAAS,CAACA,CAAI;AAAA,EAAA,CAC5D,~~GAEHb~~,gBAAAA,~~EAAAC~~,cAAA,SAAA;AAAA,IACEa,KAAKpC;AAAAA,IACLwB,WAAW;AAAA,IACXL,IAAG;AAAA,IACHkB,MAAK;AAAA,IACLxD,aAAAA;AAAAA,IACAyD,UAAWC,CAAAA,MAAM7B,EAAgB6B,EAAEC,OAAO7B,KAAK;AAAA,IAC/CA,OAAOlB;AAAAA,IACPb,UAAAA;AAAAA,IACA6D,QAAQ5B;AAAAA,~~EAAAA~~,~~CACT~~,GACA,CAAC,CAACpB,KAAc6B,gBAAAA,EAAAC,cAACS,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQT,WAAU;AAAA,IAAsBU,SAAStB;AAAAA,~~EAAAA~~,~~CAAmB~~,CAC7F,CACF,GACJrB,KAAyB+B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA8BjC,EAAAA,CAA6B,CACjG,CAEJ;AAET;"}
1	+ {"version":3,"file":"index40.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n label: string;\n value: string;\n id: string \| number;\n [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n disabled?: boolean;\n placeholder?: string;\n debounceDuration?: number;\n onInputChange?: (value: string) => void;\n onSearchClear?: () => void;\n onChipRemove?: (chip: ChipType) => void;\n updateSearchString?: string;\n collapsible?: boolean;\n width?: string;\n chips?: ChipType[];\n showSearchIcon?: boolean;\n renderFilterComponent?: () => React.ReactNode;\n automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n const {\n disabled = false,\n placeholder = 'Search',\n debounceDuration = 500,\n onInputChange = () => {},\n onSearchClear = () => {},\n onChipRemove = () => {},\n updateSearchString = '',\n collapsible = false,\n width = '200px',\n chips = [],\n showSearchIcon = true,\n renderFilterComponent = null,\n automationId = ''\n } = props;\n const [inputValue, setInputValue] = useState('');\n const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n const [searchChips, setSearchChips] = useState<ChipType[]>(chips \|\| []);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n setTimeout(() => inputRef?.current?.focus(), 0);\n }\n }, [isExpanded]);\n\n // Manually update the searchbox text\n useEffect(() => {\n if (updateSearchString !== inputValue) {\n setInputValue(updateSearchString);\n }\n }, [updateSearchString]);\n\n useEffect(() => {\n setSearchChips(chips);\n }, [chips]);\n\n const debouncedOnInputChange = useMemo(\n () => debounce(onInputChange, debounceDuration),\n [onInputChange, debounceDuration]\n );\n\n useEffect(() => {\n return () => {\n debouncedOnInputChange.cancel();\n };\n }, [debouncedOnInputChange]);\n\n const onChangeHandler = (value: string) => {\n setInputValue(value);\n debouncedOnInputChange(value);\n };\n\n const iconClickHandler = () => {\n setInputValue('');\n onInputChange('');\n onSearchClear();\n };\n\n const onBlurHandler = () => {\n if (collapsible && inputValue?.trimEnd() === '') {\n setIsExpanded(false);\n }\n };\n\n const removeChip = (chip: ChipType) => {\n setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n onChipRemove(chip);\n };\n\n const hasChips = searchChips?.length > 0;\n\n return (\n <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n {isExpanded && (\n <div className=\"search-box-container\">\n <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n {hasChips &&\n searchChips?.map((chip) => (\n <LabelChip\n key={chip?.value}\n label={chip?.label}\n icon=\"close\"\n onIconClick={() => removeChip(chip)}\n />\n ))}\n <div className=\"search-input-container\">\n {showSearchIcon && (\n <Icon\n name=\"search\"\n className=\"search-icon img-wrap\"\n onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n />\n )}\n <input\n ref={inputRef}\n className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n id=\"search_bar\"\n type=\"text\"\n placeholder={placeholder}\n onChange={(e) => onChangeHandler(e.target.value)}\n value={inputValue}\n disabled={disabled}\n onBlur={onBlurHandler}\n />\n {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n </div>\n </div>\n {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n </div>\n )}\n </div>\n );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":"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"}

package/dist/index41.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index41.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n totalTasks: number;\n completedTasks: number;\n progressBarCtnClassName?: string;\n needPercentageCompleted?: boolean;\n progressBarColor?: string;\n}\n\nconst className: Map = {\n progressBarCtn: 'flex items-center gap-2',\n progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n progressBarProgress: 'h-full rounded-[12px]',\n stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n totalTasks = 0,\n completedTasks = 0,\n progressBarCtnClassName = '',\n needPercentageCompleted = true,\n progressBarColor\n}) => {\n const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n return (\n <div\n className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n style={{ width: '100%' }}\n >\n <div className={className.progressBar}>\n <div\n className={className.progressBarProgress}\n style={{\n width: `${percentageComplete}%`,\n background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n transition: 'width 0.4s ease-in-out'\n }}\n ></div>\n </div>\n {needPercentageCompleted && (\n <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n )}\n </div>\n );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;~~AAClF~~,~~SACEM~~,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,~~IAAA~~;AAAA,~~EAAO~~,~~GAEvBH~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,~~GACxBU~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,~~IAAA~~;AAAA,~~EACd~~,~~CACI~~,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}
1	+ {"version":3,"file":"index41.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n totalTasks: number;\n completedTasks: number;\n progressBarCtnClassName?: string;\n needPercentageCompleted?: boolean;\n progressBarColor?: string;\n}\n\nconst className: Map = {\n progressBarCtn: 'flex items-center gap-2',\n progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n progressBarProgress: 'h-full rounded-[12px]',\n stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n totalTasks = 0,\n completedTasks = 0,\n progressBarCtnClassName = '',\n needPercentageCompleted = true,\n progressBarColor\n}) => {\n const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n return (\n <div\n className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n style={{ width: '100%' }}\n >\n <div className={className.progressBar}>\n <div\n className={className.progressBarProgress}\n style={{\n width: `${percentageComplete}%`,\n background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n transition: 'width 0.4s ease-in-out'\n }}\n ></div>\n </div>\n {needPercentageCompleted && (\n <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n )}\n </div>\n );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAO;AAAA,EAAA,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IACd;AAAA,EACI,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}

package/dist/index42.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index42.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n widgetClassName?: string;\n actionItems: {\n label: string;\n isComplete?: boolean;\n handleActionItemClick: () => void;\n }[];\n}\n\nconst className: Map = {\n gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n accordionCtn: \"flex items-center justify-between\",\n gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n icon: \"transition-transform duration-300 cursor-pointer\",\n actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n widgetClassName = \"\",\n actionItems = []\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const contentRef = useRef<HTMLDivElement>(null);\n\n const toggleAccordion = () => {\n setIsExpanded(!isExpanded);\n };\n\n const getIconStroke = (isComplete?: boolean) => {\n if(isComplete) {\n return \"var(--color-green-500)\"\n }\n return \"var(--color-gray-200)\"\n }\n\n return (\n <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n <div className={className.accordionCtn}>\n <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n </div>\n <div className=\"mt-[12px]\">\n <ProgressBar totalTasks={actionItems.length} \n completedTasks={actionItems.filter(item => item.isComplete).length} \n progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n </div>\n <div\n ref={contentRef}\n className={className.gettingStartedWidgetContent}\n style={{\n maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n }}\n >\n {actionItems.map((item, index) => (\n <div key={index} className={className.actionItemCtn}>\n <Icon name={\"checked-circle\"} stroke={getIconStroke(item.isComplete)} />\n <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n {item.label}\n </span>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,~~EAC3B~~,~~GAEMI~~,IAAgBA,CAACC,MAClBA,IACM,2BAEF;~~AAGT~~,~~SACEC~~,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,~~GACrEQ~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,~~GACxBa~~,gBAAAA,~~EAAAC~~,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,~~EAAA~~,~~GAAqC~~,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,~~EAAAA~~,~~CAAkB~~,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,~~GACbe~~,gBAAAA,~~EAAAC~~,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,~~CAAAA~~,~~MAAQA~~,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,~~EAAA,CAA~~+B,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,~~IAAA~~;AAAA,~~EACpE~~,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,~~GACpCU~~,gBAAAA,~~EAAAC~~,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,~~GACxEC~~,gBAAAA,~~EAAAC~~,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,~~EAAAA,GAC~~/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
1	+ {"version":3,"file":"index42.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n widgetClassName?: string;\n actionItems: {\n label: string;\n isComplete?: boolean;\n handleActionItemClick: () => void;\n }[];\n}\n\nconst className: Map = {\n gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n accordionCtn: \"flex items-center justify-between\",\n gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n icon: \"transition-transform duration-300 cursor-pointer\",\n actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n widgetClassName = \"\",\n actionItems = []\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const contentRef = useRef<HTMLDivElement>(null);\n\n const toggleAccordion = () => {\n setIsExpanded(!isExpanded);\n };\n\n const getIconStroke = (isComplete?: boolean) => {\n if(isComplete) {\n return \"var(--color-green-500)\"\n }\n return \"var(--color-gray-200)\"\n }\n\n return (\n <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n <div className={className.accordionCtn}>\n <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n </div>\n <div className=\"mt-[12px]\">\n <ProgressBar totalTasks={actionItems.length} \n completedTasks={actionItems.filter(item => item.isComplete).length} \n progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n </div>\n <div\n ref={contentRef}\n className={className.gettingStartedWidgetContent}\n style={{\n maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n }}\n >\n {actionItems.map((item, index) => (\n <div key={index} className={className.actionItemCtn}>\n <Icon name={\"checked-circle\"} stroke={getIconStroke(item.isComplete)} />\n <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n {item.label}\n </span>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAAA,GAGrBI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAIPC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrES,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBc,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAkB,CAAA,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbgB,gBAAAA,EAAAA,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAQA,MAAAA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IACpE;AAAA,EAAA,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCW,gBAAAA,EAAAA,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index43.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { Icon } from '../Icon';\nimport { Button } from '../Button';\nimport './style.scss';\n\nexport interface MessageBarProps {\n messageBarCtnClassName?: string;\n messageBarType: 'info' \| 'alert' \| 'nudge';\n message: string;\n hasCloseIcon?: boolean;\n hasButton?: boolean,\n buttonLabel: string \| '',\n buttonOnClick?: () => void,\n handleClose?: () => void,\n automationId?: string;\n}\n\nconst classNames: Map = {\n messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n info: \"bg-[var(--color-yellow-50)]\",\n alert: \"bg-[var(--color-red-500)]\",\n nudge: \"bg-[var(--color-blue-500)]\",\n infoMessage: \"text-[var(--color-yellow-700)] text-center\", \n alertMessage: \"text-[var(--color-white)] text-center\",\n closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n customInfoClassBtn: \"bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]\",\n customAlertClassBtn: \"bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n customNudgeClassBtn: \"bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n messageBarCtnClassName = \"\",\n messageBarType = 'info',\n message = '',\n hasCloseIcon = false,\n hasButton = false,\n buttonLabel = '',\n buttonOnClick = () => {},\n handleClose = () => {},\n automationId = ''\n}) => {\n const [visible, setVisible] = useState(true);\n\n const handleClickOnCloseIcon = React.useCallback(() => {\n setVisible(false);\n const timer = setTimeout(() => {\n handleClose?.();\n }, 300);\n return () => clearTimeout(timer);\n }, [handleClose]);\n\n const messageClass = messageBarType === 'info' ? classNames.infoMessage : classNames.alertMessage;\n \n const buttonClassName = React.useMemo(() => {\n switch(messageBarType) {\n case 'info': return classNames.customInfoClassBtn;\n case 'alert': return classNames.customAlertClassBtn;\n case 'nudge': return classNames.customNudgeClassBtn;\n default: return '';\n }\n }, [messageBarType]);\n\n // const iconName = messageBarType === 'info' ? \"info\" : \"info-white\";\n // const closeIconName = messageBarType === 'info' ? \"close\" : \"white-close\";\n\n return (\n <div className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`} data-automation-id={automationId}>\n <div className={classNames.messageCtn}>\n <div className=\"inline-flex items-center\">\n <span className={messageClass}>\n <Icon name={\"info\"} className=\"inline-block h-fit relative top-[3px] mr-1\"/>\n {message}\n {hasButton && (\n <Button \n label={buttonLabel} \n type='primary' \n size=\"sm\" \n onClick={buttonOnClick}\n className={`${buttonClassName} ml-2 alert-btn`}\n automationId=\"message-bar-cta\"\n />\n )}\n </span>\n </div>\n </div>\n {hasCloseIcon && (\n <Icon \n name={\"close\"} \n className={classNames.closeIconCtn} \n onClick={handleClickOnCloseIcon} \n />\n )}\n </div>\n );\n};\n\nexport default MessageBar;"],"names":["React__default","useState","Icon","Button","classNames","messageBarCtn","messageCtn","info","alert","nudge","infoMessage","alertMessage","closeIconCtn","customInfoClassBtn","customAlertClassBtn","customNudgeClassBtn","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAkBA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,oBAAoB;AAAA,EACpBC,qBAAqB;AAAA,EACrBC,qBAAqB;AACvB,GAEaC,IAAkCA,CAAC;AAAA,EAC9CC,wBAAAA,IAAyB;AAAA,EACzBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA,IAAU;AAAA,EACVC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,aAAAA,IAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAI1B,EAAS,EAAI,GAErC2B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;~~AAChB~~,~~UAAMI~~,IAAQC,WAAW,MAAM;~~AAC7BR~~,~~MAAAA,IAAAA~~;~~AAAAA~~,~~IACF,~~GAAG~~,GAAG~~;~~AACN~~,~~WAAO~~,MAAMS,aAAaF,CAAK;AAAA,~~EACjC~~,~~GAAG~~,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,~~GAAAA~~;~~AAAAA~~,~~MACL~~,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;~~AAAS~~,~~eAAO~~;AAAA,~~IAAA~~;AAAA,~~EAEpB~~,~~GAAG~~,CAACG,CAAc,CAAC;~~AAKnB~~,~~SACEW~~,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBrB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIQ,IAAU,SAAS,MAAM;AAAA,IAAI,sBAAoBD;AAAAA,EAAAA,~~GAC5KI~~,gBAAAA,~~EAAAQ~~,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,~~GACzBuB~~,gBAAAA,~~EAAAQ~~,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,~~GACbT~~,gBAAAA,~~EAAAQ~~,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,~~GACfL~~,gBAAAA,~~EAAAQ~~,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,~~EAAA~~,~~CAA6C~~,GAC1EnB,GACAE,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAM;AAAA,IACLqC,OAAOlB;AAAAA,IACPmB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTe,WAAW,GAAGH,CAAe;AAAA,IAC7BV,cAAa;AAAA,EAAA,CACd,CAEC,CACH,CACF,GACJL,KACCS,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IACHqC,MAAM;AAAA,IACND,WAAWlC,EAAWQ;AAAAA,IACtB+B,SAASf;AAAAA,~~EAAAA~~,~~CACV~~,CAEA;AAET;"}
1	+ {"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { Icon } from '../Icon';\nimport { Button } from '../Button';\nimport './style.scss';\n\nexport interface MessageBarProps {\n messageBarCtnClassName?: string;\n messageBarType: 'info' \| 'alert' \| 'nudge';\n message: string;\n hasCloseIcon?: boolean;\n hasButton?: boolean,\n buttonLabel: string \| '',\n buttonOnClick?: () => void,\n handleClose?: () => void,\n automationId?: string;\n}\n\nconst classNames: Map = {\n messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n info: \"bg-[var(--color-yellow-50)]\",\n alert: \"bg-[var(--color-red-500)]\",\n nudge: \"bg-[var(--color-blue-500)]\",\n infoMessage: \"text-[var(--color-yellow-700)] text-center\", \n alertMessage: \"text-[var(--color-white)] text-center\",\n closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n customInfoClassBtn: \"bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]\",\n customAlertClassBtn: \"bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n customNudgeClassBtn: \"bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n messageBarCtnClassName = \"\",\n messageBarType = 'info',\n message = '',\n hasCloseIcon = false,\n hasButton = false,\n buttonLabel = '',\n buttonOnClick = () => {},\n handleClose = () => {},\n automationId = ''\n}) => {\n const [visible, setVisible] = useState(true);\n\n const handleClickOnCloseIcon = React.useCallback(() => {\n setVisible(false);\n const timer = setTimeout(() => {\n handleClose?.();\n }, 300);\n return () => clearTimeout(timer);\n }, [handleClose]);\n\n const messageClass = messageBarType === 'info' ? classNames.infoMessage : classNames.alertMessage;\n \n const buttonClassName = React.useMemo(() => {\n switch(messageBarType) {\n case 'info': return classNames.customInfoClassBtn;\n case 'alert': return classNames.customAlertClassBtn;\n case 'nudge': return classNames.customNudgeClassBtn;\n default: return '';\n }\n }, [messageBarType]);\n\n // const iconName = messageBarType === 'info' ? \"info\" : \"info-white\";\n // const closeIconName = messageBarType === 'info' ? \"close\" : \"white-close\";\n\n return (\n <div className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`} data-automation-id={automationId}>\n <div className={classNames.messageCtn}>\n <div className=\"inline-flex items-center\">\n <span className={messageClass}>\n <Icon name={\"info\"} className=\"inline-block h-fit relative top-[3px] mr-1\"/>\n {message}\n {hasButton && (\n <Button \n label={buttonLabel} \n type='primary' \n size=\"sm\" \n onClick={buttonOnClick}\n className={`${buttonClassName} ml-2 alert-btn`}\n automationId=\"message-bar-cta\"\n />\n )}\n </span>\n </div>\n </div>\n {hasCloseIcon && (\n <Icon \n name={\"close\"} \n className={classNames.closeIconCtn} \n onClick={handleClickOnCloseIcon} \n />\n )}\n </div>\n );\n};\n\nexport default MessageBar;"],"names":["React__default","useState","Icon","Button","classNames","messageBarCtn","messageCtn","info","alert","nudge","infoMessage","alertMessage","closeIconCtn","customInfoClassBtn","customAlertClassBtn","customNudgeClassBtn","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAkBA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,oBAAoB;AAAA,EACpBC,qBAAqB;AAAA,EACrBC,qBAAqB;AACvB,GAEaC,IAAkCA,CAAC;AAAA,EAC9CC,wBAAAA,IAAyB;AAAA,EACzBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA,IAAU;AAAA,EACVC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,aAAAA,IAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAI1B,EAAS,EAAI,GAErC2B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAR;OACb,GAAG;AACC,WAAA,MAAMS,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,GAAc;AAAA,MACnB,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAgB,eAAA;AAAA,IAClB;AAAA,EAAA,GACC,CAACG,CAAc,CAAC;AAMjBW,SAAAA,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBrB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIQ,IAAU,SAAS,MAAM;AAAA,IAAI,sBAAoBD;AAAAA,EAAAA,GAC5KY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzB+B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfG,gBAAAA,EAAAA,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAA6C,CAAA,GAC1EnB,GACAE,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAM;AAAA,IACLqC,OAAOlB;AAAAA,IACPmB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTe,WAAW,GAAGH,CAAe;AAAA,IAC7BV,cAAa;AAAA,EAAA,CACd,CAEC,CACH,CACF,GACJL,KACCS,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IACHqC,MAAM;AAAA,IACND,WAAWlC,EAAWQ;AAAAA,IACtB+B,SAASf;AAAAA,EACV,CAAA,CAEA;AAET;"}

package/dist/index44.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index44.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n toastBarCtnClassName?: string;\n type: \"success\" \| \"error\" \| \"info\";\n message: string;\n shouldAutoClose?: boolean;\n delay?: number;\n onClose?: () => void;\n containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n success: \"var(--color-green-500)\",\n error: \"var(--color-red-500)\",\n info: \"var(--color-gray-700)\", \n toastMessageCtn: \"flex items-center gap-2\",\n toastMessage: \"text-[var(--color-white)] text-center word-break\",\n closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n toastBarCtnClassName = \"\",\n type,\n message = \"\",\n shouldAutoClose = false,\n delay = 5000,\n onClose = () => {},\n containerStyle = {}\n}) => {\n const [visible, setVisible] = useState(true);\n\n useEffect(() => {\n if (shouldAutoClose) {\n const timer = setTimeout(() => {\n handleClose();\n }, delay);\n return () => clearTimeout(timer);\n }\n }, []);\n\n const handleClose = () => {\n setTimeout(() => {\n setVisible(false);\n setTimeout(() => {\n onClose?.();\n }, 300);\n }, 300);\n };\n\n return (\n <div\n className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n style={{ background: classNames[type], ...containerStyle }}\n >\n <div className={classNames.toastMessageCtn} >\n <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n <span className={classNames.toastMessage}>{message}</span>\n </div>\n <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n </div>\n );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,~~CAAA~~;~~AACnB~~,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;~~AACnB~~,~~YAAMM~~,IAAQC,WAAW,MAAM;~~AAC7BC~~,~~QAAAA,EAAAA~~;~~AAAAA~~,~~MACF,GAAGP,~~CAAK;~~AACR~~,~~aAAO~~,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA~~,CAAE~~;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;~~AACfL~~,~~QAAAA,IAAAA~~;~~AAAAA~~,~~MACF,~~GAAG~~,GAAG~~;AAAA,~~IACR~~,GAAG~~,GAAG~~;AAAA,~~EACR~~;~~AAEA~~,~~SACEQ~~,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,~~IAAAA~~;~~AAAAA~~,~~EAAe~~,~~GAEzDO~~,gBAAAA,~~EAAAC~~,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,~~GACzBiB~~,gBAAAA,~~EAAAC~~,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,~~GACpHN~~,gBAAAA,~~EAAAC~~,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,~~EAAAA~~,~~GAAeK,~~CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,~~EAAAA~~,~~CAAc~~,CACzG;AAET;"}
1	+ {"version":3,"file":"index44.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n toastBarCtnClassName?: string;\n type: \"success\" \| \"error\" \| \"info\";\n message: string;\n shouldAutoClose?: boolean;\n delay?: number;\n onClose?: () => void;\n containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n success: \"var(--color-green-500)\",\n error: \"var(--color-red-500)\",\n info: \"var(--color-gray-700)\", \n toastMessageCtn: \"flex items-center gap-2\",\n toastMessage: \"text-[var(--color-white)] text-center word-break\",\n closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n toastBarCtnClassName = \"\",\n type,\n message = \"\",\n shouldAutoClose = false,\n delay = 5000,\n onClose = () => {},\n containerStyle = {}\n}) => {\n const [visible, setVisible] = useState(true);\n\n useEffect(() => {\n if (shouldAutoClose) {\n const timer = setTimeout(() => {\n handleClose();\n }, delay);\n return () => clearTimeout(timer);\n }\n }, []);\n\n const handleClose = () => {\n setTimeout(() => {\n setVisible(false);\n setTimeout(() => {\n onClose?.();\n }, 300);\n }, 300);\n };\n\n return (\n <div\n className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n style={{ background: classNames[type], ...containerStyle }}\n >\n <div className={classNames.toastMessageCtn} >\n <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n <span className={classNames.toastMessage}>{message}</span>\n </div>\n <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n </div>\n );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAC;AACpB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC;SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL;SACT,GAAG;AAAA,OACL,GAAG;AAAA,EAAA;AAINQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAe;AAAA,EAAA,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHL,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAc,CAAA,CACzG;AAET;"}

package/dist/index45.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n /** Called when the user types in the input. Not called on suggestion selection. /\n onChange: (value: string) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n /\n Suggestion items. Default rendering expects { label, value } shape.\n * When renderOption is provided, any shape is accepted.\n /\n suggestions?: any[];\n /\n Called when a suggestion is selected (click or Enter key).\n * Receives the full item object from the suggestions array.\n /\n onSelect?: (item: any) => void;\n /\n Render custom content for each suggestion option. The component handles the option wrapper\n * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n /\n renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n /\n Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n * Useful with renderOption to apply custom styling to option wrappers.\n /\n optionClassName?: string;\n automationId?: string;\n /\n Accessible label for the input. Used when no visible label is provided.\n /\n ariaLabel?: string;\n /\n ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n /\n ariaLabelledBy?: string;\n /\n ID(s) of element(s) providing additional description.\n */\n ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n onSelect,\n renderOption,\n optionClassName,\n automationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ...props\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n const instanceId = useStableId(undefined, 'autocomplete');\n const inputId = `${instanceId}-input`;\n const listboxId = `${instanceId}-listbox`;\n const labelId = `${instanceId}-label`;\n const errorId = `${instanceId}-error`;\n\n const handleSelectSuggestion = useCallback(\n (item: any) => {\n setSuggestionBoxVisible(false);\n onSelect?.(item);\n },\n [onSelect]\n );\n\n // Use the comprehensive useCombobox hook\n const {\n containerProps,\n inputProps: comboboxInputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex,\n setHighlightedIndex\n } = useCombobox<any>({\n items: filteredSuggestions,\n isOpen: isSuggestionBoxVisible,\n onOpenChange: setSuggestionBoxVisible,\n onSelect: handleSelectSuggestion,\n listboxId\n });\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n setHighlightedIndex(-1); // Reset highlight on input change\n onChange(inputValue);\n\n // Internal filtering for default rendering (when no renderOption, component manages filtering)\n if (!renderOption) {\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else {\n const filtered = suggestions?.filter(\n (suggestion) =>\n typeof suggestion === 'object' &&\n suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions([...filtered]);\n }\n }\n },\n [onChange, suggestions, renderOption, setHighlightedIndex]\n );\n\n useEffect(() => {\n setFilteredSuggestions([...suggestions]);\n }, [suggestions]);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleInputFocus = () => {\n if (filteredSuggestions.length > 0) {\n setSuggestionBoxVisible(true);\n }\n };\n\n const handleClearInput = () => {\n onChange('');\n setHighlightedIndex(-1);\n inputRef.current?.focus();\n };\n\n // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n const a11yNameProps = getA11yNameAttributes({\n ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n ariaLabel,\n ariaDescribedBy: error ? errorId : ariaDescribedBy\n });\n\n return (\n <div \n className=\"main-container-autocomplete-se-design\" \n ref={containerRef} \n data-automation-id={automationId}\n {...containerProps}\n >\n {label && (\n <span\n id={labelId}\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n >\n {label}\n </span>\n )}\n <div className=\"input-container-wrapper\">\n <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n {React.createElement(tag, {\n ref: inputRef,\n id: inputId,\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n onFocus: handleInputFocus,\n ...comboboxInputProps,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 \|\| value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n maxLength,\n placeholder,\n 'aria-invalid': error \|\| undefined,\n ...a11yNameProps,\n ...props\n })}\n {value && (\n <Icon\n name=\"close\"\n className=\"input-icon-close\"\n size={15}\n onClick={handleClearInput}\n stroke={disabled ? 'var(--color-gray-600)' : ''}\n ariaLabel=\"Clear input\"\n />\n )}\n {filteredSuggestions.length > 0 && (\n <Icon\n name=\"chevron\"\n rotation={isSuggestionBoxVisible ? '180' : '0'}\n className=\"input-icon-chevron\"\n stroke={disabled ? 'var(--color-gray-600)' : ''}\n aria-hidden=\"true\"\n />\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div\n {...listboxProps}\n aria-label={label \|\| ariaLabel \|\| 'Suggestions'}\n className=\"suggestions-list\"\n data-automation-id=\"autocomplete-suggestions-list\"\n >\n {filteredSuggestions.map((suggestion, index) => {\n const optionProps = getOptionProps(index, false);\n const isHighlighted = highlightedIndex === index;\n return (\n <div\n key={index}\n {...optionProps}\n className={`${optionClassName \|\| 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n onClick={() => handleSelectSuggestion(suggestion)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`autocomplete-suggestion-item-${index}`}\n >\n {renderOption\n ? renderOption(suggestion, { isHighlighted, index })\n : suggestion.label}\n </div>\n );\n })}\n </div>\n )}\n </div>\n {(error \|\| maxLength) && (\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n {error && (\n <div id={errorId} className=\"error-message\" role=\"alert\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":";;;;;;;;;;;;;;;;AAoDO,MAAMA,KAAsDC,gBAAAA,EAAMC,KACvE,CAAC;AAAA,EACCC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,WAAAA;AAAAA,EACAC,KAAAA,IAAM;AAAA,EACNC,OAAAA,IAAQ;AAAA,EACRC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,aAAAA,IAAc,CAAA;AAAA,EACdC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAAgB,CAAC,GAAGX,CAAW,CAAC,GAChF,CAACY,GAAwBC,CAAuB,IAAIF,EAAkB,EAAK,GAC3EG,IAAeC,EAAuB,IAAI,GAC1CC,IAAWD,EAAyB,IAAI,GAGxCE,IAAaC,EAAYC,QAAW,cAAc,GAClDC,IAAU,GAAGH,CAAU,UACvBI,IAAY,GAAGJ,CAAU,YACzBK,IAAU,GAAGL,CAAU,UACvBM,IAAU,GAAGN,CAAU,UAEvBO,IAAyBC,EAC7B,CAACC,MAAc;AACbb,IAAAA,EAAwB,EAAK,GAC7BZ,IAAWyB,CAAI;AAAA,EACjB,GACA,CAACzB,CAAQ,CACX,GAGM;AAAA,IACJ0B,gBAAAA;AAAAA,IACAC,YAAYC;AAAAA,IACZC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,EAAAA,IACEC,GAAiB;AAAA,IACnBC,OAAO1B;AAAAA,IACP2B,QAAQxB;AAAAA,IACRyB,cAAcxB;AAAAA,IACdZ,UAAUuB;AAAAA,IACVH,WAAAA;AAAAA,EAAAA,CACD,GAEKiB,IAAoBb,EACxB,CAACc,MAA2C;AAC1C,UAAMC,IAAaD,EAAEE,OAAOlD;AAK5B,QAJA0C,EAAoB,EAAE,GACtBzC,EAASgD,CAAU,GAGf,CAACtC;AACH,UAAIsC,MAAe;AACjB9B,QAAAA,EAAuB,CAAC,GAAGV,CAAW,CAAC;AAAA,WAClC;AACL,cAAM0C,IAAW1C,GAAa2C,OAC3BC,CAAAA,MACC,OAAOA,KAAe,YACtBA,GAAY9C,OAAO+C,YAAAA,EAAcC,SAASN,GAAYK,YAAAA,KAAiB,EAAE,CAC7E;AACAnC,QAAAA,EAAuB,CAAC,GAAGgC,CAAQ,CAAC;AAAA,MACtC;AAAA,EAEJ,GACA,CAAClD,GAAUQ,GAAaE,GAAc+B,CAAmB,CAC3D;AAEAc,EAAAA,EAAU,MAAM;AACdrC,IAAAA,EAAuB,CAAC,GAAGV,CAAW,CAAC;AAAA,EACzC,GAAG,CAACA,CAAW,CAAC;AAEhB,QAAMgD,IAAmBA,MAAM;AAC7BnC,IAAAA,EAAwB,EAAI;AAAA,EAC9B,GAEMoC,IAAmBA,MAAM;AAC7B,IAAIxC,EAAoByC,SAAS,KAC/BrC,EAAwB,EAAI;AAAA,EAEhC,GAEMsC,IAAmBA,MAAM;AAC7B3D,IAAAA,EAAS,EAAE,GACXyC,EAAoB,EAAE,GACtBjB,EAASoC,SAASC,MAAAA;AAAAA,EACpB,GAGMC,IAAgBC,EAAsB;AAAA,IAC1CjD,gBAAgBR,KAAS,CAACO,IAAYiB,IAAUhB;AAAAA,IAChDD,WAAAA;AAAAA,IACAE,iBAAiBX,IAAQ2B,IAAUhB;AAAAA,EAAAA,CACpC;AAED,SACElB,gBAAAA,EAAAmE,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAU;AAAA,IACVC,KAAK7C;AAAAA,IACL,sBAAoBV;AAAAA,EAAAA,GAChBuB,CAAc,GAEjB7B,KACCT,gBAAAA,EAAAmE,cAAA,QAAA;AAAA,IACEI,IAAItC;AAAAA,IACJoC,WAAW,mBAAmBjE,IAAW,6BAA6B,EAAE;AAAA,EAAA,GAEvEK,CACG,GAERT,gBAAAA,EAAAmE,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,GACbrE,gBAAAA,EAAAmE,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,IAAgBG,OAAO;AAAA,MAAEC,eAAerE,IAAW,SAAS;AAAA,IAAA;AAAA,EAAO,GAC/EJ,gBAAAA,EAAMmE,cAAc7D,GAAK;AAAA,IACxBgE,KAAK3C;AAAAA,IACL4C,IAAIxC;AAAAA,IACJ7B,OAAAA;AAAAA,IACAC,UAAU8C;AAAAA,IACVyB,SAASf;AAAAA,IACTgB,SAASf;AAAAA,IACT,GAAGpB;AAAAA,IACHpC,UAAAA;AAAAA,IACAiE,WAAW,GAAG9D,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE,IAAIgB,EAAoByC,SAAS,KAAK3D,IAAQ,cAAc,EAAE,IAAIkB,EAAoByC,SAAS,KAAK3D,IAAQ,eAAe,EAAE;AAAA,IACpPG,WAAAA;AAAAA,IACAK,aAAAA;AAAAA,IACA,gBAAgBH,KAASuB;AAAAA,IACzB,GAAGmC;AAAAA,IACH,GAAG9C;AAAAA,EAAAA,CACJ,GACAjB,KACCF,gBAAAA,EAAAmE,cAACS,GAAI;AAAA,IACHC,MAAK;AAAA,IACLR,WAAU;AAAA,IACVS,MAAM;AAAA,IACNJ,SAASZ;AAAAA,IACTiB,QAAQ3E,IAAW,0BAA0B;AAAA,IAC7CY,WAAU;AAAA,EAAA,CACX,GAEFI,EAAoByC,SAAS,KAC5B7D,gBAAAA,EAAAmE,cAACS,GAAI;AAAA,IACHC,MAAK;AAAA,IACLG,UAAUzD,IAAyB,QAAQ;AAAA,IAC3C8C,WAAU;AAAA,IACVU,QAAQ3E,IAAW,0BAA0B;AAAA,IAC7C,eAAY;AAAA,EAAA,CACb,CAEA,GACJmB,KAA0BH,EAAoByC,SAAS,KACtD7D,gBAAAA,EAAAmE,cAAA,OAAAC,MACM3B,GAAY;AAAA,IAChB,cAAYhC,KAASO,KAAa;AAAA,IAClCqD,WAAU;AAAA,IACV,sBAAmB;AAAA,EAAA,CAA+B,GAEjDjD,EAAoB6D,IAAI,CAAC1B,GAAY2B,MAAU;AAC9C,UAAMC,IAAczC,EAAewC,GAAO,EAAK,GACzCE,IAAgBzC,MAAqBuC;AAC3C,WACElF,gBAAAA,EAAAmE,cAAA,OAAAC,EAAA;AAAA,MACEiB,KAAKH;AAAAA,IAAAA,GACDC,GAAW;AAAA,MACfd,WAAW,GAAGvD,KAAmB,iBAAiB,IAAIsE,IAAgB,gCAAgC,EAAE;AAAA,MACxGV,SAASA,MAAMvC,EAAuBoB,CAAU;AAAA,MAChD+B,cAAcA,MAAM1C,EAAoBsC,CAAK;AAAA,MAC7C,sBAAoB,gCAAgCA,CAAK;AAAA,IAAA,CAAG,GAE3DrE,IACGA,EAAa0C,GAAY;AAAA,MAAE6B,eAAAA;AAAAA,MAAeF,OAAAA;AAAAA,IAAAA,CAAO,IACjD3B,EAAW9C,KACZ;AAAA,EAET,CAAC,CACE,CAEJ,IACHF,KAASF,MACTL,gBAAAA,EAAAmE,cAAA,OAAA;AAAA,IAAKE,WAAW,GAAG9D,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EAAA,GACjGG,KACCP,gBAAAA,EAAAmE,cAAA,OAAA;AAAA,IAAKI,IAAIrC;AAAAA,IAASmC,WAAU;AAAA,IAAgBkB,MAAK;AAAA,EAAA,GAC9C/E,CACE,GAENH,KACCL,gBAAAA,EAAAmE,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,GACZnE,EAAM2D,QAAO,KAAExD,CACb,CAEJ,CAEJ;AAET,CACF;"}
1	+ {"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n /** Called when the user types in the input. Not called on suggestion selection. /\n onChange: (value: string) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n /\n Suggestion items. Default rendering expects { label, value } shape.\n * When renderOption is provided, any shape is accepted.\n /\n suggestions?: any[];\n /\n Called when a suggestion is selected (click or Enter key).\n * Receives the full item object from the suggestions array.\n /\n onSelect?: (item: any) => void;\n /\n Render custom content for each suggestion option. The component handles the option wrapper\n * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n /\n renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n /\n Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n * Useful with renderOption to apply custom styling to option wrappers.\n /\n optionClassName?: string;\n automationId?: string;\n /\n Accessible label for the input. Used when no visible label is provided.\n /\n ariaLabel?: string;\n /\n ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n /\n ariaLabelledBy?: string;\n /\n ID(s) of element(s) providing additional description.\n */\n ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n onSelect,\n renderOption,\n optionClassName,\n automationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ...props\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n const instanceId = useStableId(undefined, 'autocomplete');\n const inputId = `${instanceId}-input`;\n const listboxId = `${instanceId}-listbox`;\n const labelId = `${instanceId}-label`;\n const errorId = `${instanceId}-error`;\n\n const handleSelectSuggestion = useCallback(\n (item: any) => {\n setSuggestionBoxVisible(false);\n onSelect?.(item);\n },\n [onSelect]\n );\n\n // Use the comprehensive useCombobox hook\n const {\n containerProps,\n inputProps: comboboxInputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex,\n setHighlightedIndex\n } = useCombobox<any>({\n items: filteredSuggestions,\n isOpen: isSuggestionBoxVisible,\n onOpenChange: setSuggestionBoxVisible,\n onSelect: handleSelectSuggestion,\n listboxId\n });\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n setHighlightedIndex(-1); // Reset highlight on input change\n onChange(inputValue);\n\n // Internal filtering for default rendering (when no renderOption, component manages filtering)\n if (!renderOption) {\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else {\n const filtered = suggestions?.filter(\n (suggestion) =>\n typeof suggestion === 'object' &&\n suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions([...filtered]);\n }\n }\n },\n [onChange, suggestions, renderOption, setHighlightedIndex]\n );\n\n useEffect(() => {\n setFilteredSuggestions([...suggestions]);\n }, [suggestions]);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleInputFocus = () => {\n if (filteredSuggestions.length > 0) {\n setSuggestionBoxVisible(true);\n }\n };\n\n const handleClearInput = () => {\n onChange('');\n setHighlightedIndex(-1);\n inputRef.current?.focus();\n };\n\n // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n const a11yNameProps = getA11yNameAttributes({\n ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n ariaLabel,\n ariaDescribedBy: error ? errorId : ariaDescribedBy\n });\n\n return (\n <div \n className=\"main-container-autocomplete-se-design\" \n ref={containerRef} \n data-automation-id={automationId}\n {...containerProps}\n >\n {label && (\n <span\n id={labelId}\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n >\n {label}\n </span>\n )}\n <div className=\"input-container-wrapper\">\n <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n {React.createElement(tag, {\n ref: inputRef,\n id: inputId,\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n onFocus: handleInputFocus,\n ...comboboxInputProps,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 \|\| value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n maxLength,\n placeholder,\n 'aria-invalid': error \|\| undefined,\n ...a11yNameProps,\n ...props\n })}\n {value && (\n <Icon\n name=\"close\"\n className=\"input-icon-close\"\n size={15}\n onClick={handleClearInput}\n stroke={disabled ? 'var(--color-gray-600)' : ''}\n ariaLabel=\"Clear input\"\n />\n )}\n {filteredSuggestions.length > 0 && (\n <Icon\n name=\"chevron\"\n rotation={isSuggestionBoxVisible ? '180' : '0'}\n className=\"input-icon-chevron\"\n stroke={disabled ? 'var(--color-gray-600)' : ''}\n aria-hidden=\"true\"\n />\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div\n {...listboxProps}\n aria-label={label \|\| ariaLabel \|\| 'Suggestions'}\n className=\"suggestions-list\"\n data-automation-id=\"autocomplete-suggestions-list\"\n >\n {filteredSuggestions.map((suggestion, index) => {\n const optionProps = getOptionProps(index, false);\n const isHighlighted = highlightedIndex === index;\n return (\n <div\n key={index}\n {...optionProps}\n className={`${optionClassName \|\| 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n onClick={() => handleSelectSuggestion(suggestion)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`autocomplete-suggestion-item-${index}`}\n >\n {renderOption\n ? renderOption(suggestion, { isHighlighted, index })\n : suggestion.label}\n </div>\n );\n })}\n </div>\n )}\n </div>\n {(error \|\| maxLength) && (\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n {error && (\n <div id={errorId} className=\"error-message\" role=\"alert\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","React","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}