se-design 1.0.82 → 1.0.83-dev.2

package/dist/index38.js.map

@@ -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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"}
+{"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, getA11yNameAttributes } 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  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedBy?: 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      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\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        setInputValue('');\n        if (isMultiSelectWithoutCTA) {\n          applyClickedRef.current = true;\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      isKeyboardFocused\n    } = useCombobox({\n      items: effectiveItems,\n      isOpen: isDropdownOpen,\n      onOpenChange: setIsDropdownOpen,\n      onSelect: handleSelectFromDropdown,\n      listboxId,\n      hasItems: effectiveItems.length > 0,\n      keepHighlightOnSelect: isMultiSelect,\n      closeOnTab: type !== 'multi-select'\n    });\n\n    const getHighlightClass = (isHighlighted: boolean) =>\n      isHighlighted ? `highlighted${isKeyboardFocused ? ' keyboard-highlight' : ''}` : '';\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 ${getHighlightClass(isHighlighted)}`}\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 ${getHighlightClass(isHighlighted)}`}\n          aria-checked={isOptionSelected}\n          onClick={() => {\n            if (disabled) return;\n            handleMultiSelectDropdownOptionClick(!isOptionSelected, option);\n            inputRef.current?.focus();\n          }}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <Checkbox\n            automationId=\"checkbox\"\n            className=\"checkbox\"\n            checked={isOptionSelected}\n            onChange={() => {}}\n            label={option.label}\n            tabIndex={-1}\n          />\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 ${getHighlightClass(isHighlighted)}`}\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 ${getHighlightClass(isHighlighted)}`\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' : ''} ${isKeyboardFocused ? 'keyboard-focused' : ''}`}\n                  onClick={handleInputContainerClick}\n                  onKeyDown={(e) => {\n                    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n                      inputRef.current?.focus();\n                    }\n                  }}\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 || isMultiSelect) && (\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${!showInput && tags.length > 0 && !inputValue ? ' sr-only' : ''}`}\n                      disabled={disabled}\n                      {...getA11yNameAttributes({\n                        ariaLabel: ariaLabel || label || 'Search and select options',\n                        ariaLabelledBy,\n                        ariaDescribedBy\n                      })}\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","ariaLabel","ariaLabelledBy","ariaDescribedBy","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","current","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","isKeyboardFocused","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","keepHighlightOnSelect","closeOnTab","getHighlightClass","isHighlighted","useEffect","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","checked","tabIndex","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","ctrlKey","metaKey","altKey","Icon","name","shouldStopPropagation","onFocus","getA11yNameAttributes","popoverContentAutomationId"],"mappings":"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"}

package/dist/index39.js

@@ -1,7 +1,7 @@
 import e from "react";
-import { useStableId as A } from "./index201.js";
-import { mergeIds as P } from "./index202.js";
-import { getA11yNameAttributes as _ } from "./index78.js";
+import { useStableId as A } from "./index205.js";
+import { mergeIds as P } from "./index206.js";
+import { getA11yNameAttributes as _ } from "./index81.js";
 import "./index72.js";
 /* empty css         */
 function G({

package/dist/index4.js

@@ -1,5 +1,5 @@
 import r, { forwardRef as I } from "react";
-import { getA11yNameAttributes as R } from "./index78.js";
+import { getA11yNameAttributes as R } from "./index81.js";
 import { useAccessiblePress as z } from "./index67.js";
 import "./index72.js";
 import { Icon as p } from "./index6.js";

package/dist/index40.js

@@ -1,7 +1,7 @@
 import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
 import { Icon as g } from "./index6.js";
 import { LabelChip as F } from "./index11.js";
-import { debounce as L } from "./index220.js";
+import { debounce as L } from "./index224.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index43.js

@@ -1,7 +1,7 @@
 import t, { useState as $, useRef as T } from "react";
 import "./index72.js";
-import { useDismissOnEscape as j } from "./index211.js";
-import { Icon as g } from "./index6.js";
+import { useDismissOnEscape as j } from "./index215.js";
+import { Icon as f } from "./index6.js";
 import { Button as A } from "./index4.js";
 /* empty css         */
 function a() {
@@ -19,7 +19,7 @@ const d = {
     rotation: "180"
   },
   alert: {
-    stroke: "var(--color-black)",
+    stroke: "var(--color-gray-900)",
     rotation: "0"
   },
   nudge: {
@@ -33,7 +33,7 @@ const d = {
   alert: "bg-[var(--color-red-50)]",
   nudge: "bg-[var(--color-blue-500)]",
   infoMessage: "text-[var(--color-yellow-700)] text-center",
-  alertMessage: "text-[var(--color-black)] text-center",
+  alertMessage: "text-[var(--color-gray-900)] text-center",
   nudgeMessage: "text-[var(--color-white)] text-center",
   closeIconCtn: "absolute right-[12px] cursor-pointer rounded-full p-1",
   closeIconCtnInfo: "hover:bg-[var(--color-gray-200)]",
@@ -57,10 +57,10 @@ const d = {
   automationId: I = "",
   iconProps: c,
   buttonProps: h,
-  closeButtonAriaLabel: k = "Close message"
+  closeButtonAriaLabel: x = "Close message"
 }) => {
-  const [i, x] = $(!0), m = T(null), u = t.useCallback(() => {
-    x(!1);
+  const [i, w] = $(!0), m = T(null), u = t.useCallback(() => {
+    w(!1);
     const O = setTimeout(() => {
       l?.();
     }, 300);
@@ -71,7 +71,7 @@ const d = {
     onDismiss: u,
     enabled: n && i
   });
-  const w = {
+  const k = {
     info: e.infoMessage,
     alert: e.alertMessage,
     nudge: e.nudgeMessage
@@ -79,10 +79,10 @@ const d = {
     info: e.closeIconCtnInfo,
     alert: e.closeIconCtnAlert,
     nudge: e.closeIconCtnNudge
-  }[o] ?? e.closeIconCtnInfo, N = o === "nudge" ? "var(--color-white)" : "var(--color-gray-700)", _ = v[o] ?? v.info, f = d[o] ?? d.info, M = c !== null, y = {
+  }[o] ?? e.closeIconCtnInfo, N = o === "nudge" ? "var(--color-white)" : "var(--color-gray-700)", y = v[o] ?? v.info, g = d[o] ?? d.info, _ = c !== null, M = {
     name: "info",
-    stroke: f.stroke,
-    rotation: f.rotation,
+    stroke: g.stroke,
+    rotation: g.rotation,
     className: "shrink-0",
     ...c
   };
@@ -92,21 +92,21 @@ const d = {
     "data-automation-id": I
   }, /* @__PURE__ */ t.createElement("div", {
     className: e.messageCtn
-  }, M && /* @__PURE__ */ t.createElement(g, y), /* @__PURE__ */ t.createElement("span", {
-    className: `${w} break-words min-w-0`
+  }, _ && /* @__PURE__ */ t.createElement(f, M), /* @__PURE__ */ t.createElement("span", {
+    className: `${k} break-words min-w-0`
   }, r), b && /* @__PURE__ */ t.createElement(A, a({
     label: C,
     type: "primary",
     size: "sm",
-    theme: _,
+    theme: y,
     onClick: p,
     className: "alert-btn"
-  }, h))), n && /* @__PURE__ */ t.createElement(g, {
+  }, h))), n && /* @__PURE__ */ t.createElement(f, {
     name: "close",
     className: `${e.closeIconCtn} ${E}`,
     stroke: N,
     onClick: u,
-    ariaLabel: k
+    ariaLabel: x
   }));
 };
 export {

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { useDismissOnEscape } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport { Button, ButtonProps } from '../Button';\nimport './style.scss';\n\nexport type MessageBarType = 'info' | 'alert' | 'nudge';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: MessageBarType;\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean;\n  buttonLabel: string | '';\n  buttonOnClick?: () => void;\n  handleClose?: () => void;\n  automationId?: string;\n  /**\n   * Override the leading icon. Merged on top of the variant default\n   * (name + fill color derived from `messageBarType`).\n   * Pass `null` to suppress the leading icon entirely.\n   */\n  iconProps?: Partial<IconProps> | null;\n  /**\n   * Override props for the CTA button. Spread after the variant defaults\n   * (label/onClick/className/type/size), so any field can be replaced —\n   * including `iconProps` to add an icon to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * Accessible name for the close icon. Defaults to \"Close message\".\n   */\n  closeButtonAriaLabel?: string;\n}\n\n/**\n * Per-variant defaults for the leading icon. Single `info` glyph everywhere;\n * stroke matches the variant's text color. `info` and `nudge` render rotated\n * 180° to read as inverted; `alert` keeps the default orientation.\n */\nconst DEFAULT_ICON_BY_TYPE: Record<MessageBarType, { stroke: string; rotation: '0' | '180' }> = {\n  info: { stroke: 'var(--color-yellow-700)', rotation: '180' },\n  alert: { stroke: 'var(--color-black)', rotation: '0' },\n  nudge: { stroke: 'var(--color-white)', rotation: '180' }\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-50)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",\n  alertMessage: \"text-[var(--color-black)] text-center\",\n  nudgeMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer rounded-full p-1\",\n  closeIconCtnInfo: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnAlert: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnNudge: \"hover:bg-[var(--color-blue-700)]\",\n};\n\n/**\n * Per-variant default Button theme. Picked so the CTA surface has a\n * non-text contrast of >= 3:1 against the bar background (WCAG 1.4.11).\n * Consumers can override via `buttonProps`.\n */\nconst DEFAULT_BUTTON_THEME_BY_TYPE: Record<MessageBarType, ButtonProps['theme']> = {\n  info: 'blue',\n  alert: 'red',\n  nudge: '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  iconProps,\n  buttonProps,\n  closeButtonAriaLabel = 'Close message'\n}) => {\n  const [visible, setVisible] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\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  // SR announcements: pending shared live-announcer component.\n  useDismissOnEscape({\n    containerRef,\n    onDismiss: handleClickOnCloseIcon,\n    enabled: hasCloseIcon && visible\n  });\n\n  const messageClass = {\n    info: classNames.infoMessage,\n    alert: classNames.alertMessage,\n    nudge: classNames.nudgeMessage\n  }[messageBarType] ?? classNames.infoMessage;\n\n  const closeIconHoverClass = {\n    info: classNames.closeIconCtnInfo,\n    alert: classNames.closeIconCtnAlert,\n    nudge: classNames.closeIconCtnNudge\n  }[messageBarType] ?? classNames.closeIconCtnInfo;\n\n  const closeIconStroke = messageBarType === 'nudge' ? 'var(--color-white)' : 'var(--color-gray-700)';\n\n  const defaultButtonTheme = DEFAULT_BUTTON_THEME_BY_TYPE[messageBarType] ?? DEFAULT_BUTTON_THEME_BY_TYPE.info;\n\n  const variantIcon = DEFAULT_ICON_BY_TYPE[messageBarType] ?? DEFAULT_ICON_BY_TYPE.info;\n  const showLeadingIcon = iconProps !== null;\n  const mergedIconProps: IconProps = {\n    name: 'info',\n    stroke: variantIcon.stroke,\n    rotation: variantIcon.rotation,\n    className: 'shrink-0',\n    ...iconProps\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}\n      data-automation-id={automationId}\n    >\n      <div className={classNames.messageCtn}>\n        {showLeadingIcon && <Icon {...mergedIconProps} />}\n        <span className={`${messageClass} break-words min-w-0`}>{message}</span>\n        {hasButton && (\n          <Button\n            label={buttonLabel}\n            type='primary'\n            size=\"sm\"\n            theme={defaultButtonTheme}\n            onClick={buttonOnClick}\n            className=\"alert-btn\"\n            {...buttonProps}\n          />\n        )}\n      </div>\n      {hasCloseIcon && (\n        <Icon\n          name={\"close\"}\n          className={`${classNames.closeIconCtn} ${closeIconHoverClass}`}\n          stroke={closeIconStroke}\n          onClick={handleClickOnCloseIcon}\n          ariaLabel={closeButtonAriaLabel}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["DEFAULT_ICON_BY_TYPE","info","stroke","rotation","alert","nudge","classNames","messageBarCtn","messageCtn","infoMessage","alertMessage","nudgeMessage","closeIconCtn","closeIconCtnInfo","closeIconCtnAlert","closeIconCtnNudge","DEFAULT_BUTTON_THEME_BY_TYPE","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","iconProps","buttonProps","closeButtonAriaLabel","visible","setVisible","useState","containerRef","useRef","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","useDismissOnEscape","onDismiss","enabled","messageClass","closeIconHoverClass","closeIconStroke","defaultButtonTheme","variantIcon","showLeadingIcon","mergedIconProps","name","className","createElement","ref","Icon","Button","_extends","label","type","size","theme","onClick","ariaLabel"],"mappings":"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"}
+{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { useDismissOnEscape } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport { Button, ButtonProps } from '../Button';\nimport './style.scss';\n\nexport type MessageBarType = 'info' | 'alert' | 'nudge';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: MessageBarType;\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean;\n  buttonLabel: string | '';\n  buttonOnClick?: () => void;\n  handleClose?: () => void;\n  automationId?: string;\n  /**\n   * Override the leading icon. Merged on top of the variant default\n   * (name + fill color derived from `messageBarType`).\n   * Pass `null` to suppress the leading icon entirely.\n   */\n  iconProps?: Partial<IconProps> | null;\n  /**\n   * Override props for the CTA button. Spread after the variant defaults\n   * (label/onClick/className/type/size), so any field can be replaced —\n   * including `iconProps` to add an icon to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * Accessible name for the close icon. Defaults to \"Close message\".\n   */\n  closeButtonAriaLabel?: string;\n}\n\n/**\n * Per-variant defaults for the leading icon. Single `info` glyph everywhere;\n * stroke matches the variant's text color. `info` and `nudge` render rotated\n * 180° to read as inverted; `alert` keeps the default orientation.\n */\nconst DEFAULT_ICON_BY_TYPE: Record<MessageBarType, { stroke: string; rotation: '0' | '180' }> = {\n  info: { stroke: 'var(--color-yellow-700)', rotation: '180' },\n  alert: { stroke: 'var(--color-gray-900)', rotation: '0' },\n  nudge: { stroke: 'var(--color-white)', rotation: '180' }\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-50)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",\n  alertMessage: \"text-[var(--color-gray-900)] text-center\",\n  nudgeMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer rounded-full p-1\",\n  closeIconCtnInfo: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnAlert: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnNudge: \"hover:bg-[var(--color-blue-700)]\",\n};\n\n/**\n * Per-variant default Button theme. Picked so the CTA surface has a\n * non-text contrast of >= 3:1 against the bar background (WCAG 1.4.11).\n * Consumers can override via `buttonProps`.\n */\nconst DEFAULT_BUTTON_THEME_BY_TYPE: Record<MessageBarType, ButtonProps['theme']> = {\n  info: 'blue',\n  alert: 'red',\n  nudge: '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  iconProps,\n  buttonProps,\n  closeButtonAriaLabel = 'Close message'\n}) => {\n  const [visible, setVisible] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\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  // SR announcements: pending shared live-announcer component.\n  useDismissOnEscape({\n    containerRef,\n    onDismiss: handleClickOnCloseIcon,\n    enabled: hasCloseIcon && visible\n  });\n\n  const messageClass = {\n    info: classNames.infoMessage,\n    alert: classNames.alertMessage,\n    nudge: classNames.nudgeMessage\n  }[messageBarType] ?? classNames.infoMessage;\n\n  const closeIconHoverClass = {\n    info: classNames.closeIconCtnInfo,\n    alert: classNames.closeIconCtnAlert,\n    nudge: classNames.closeIconCtnNudge\n  }[messageBarType] ?? classNames.closeIconCtnInfo;\n\n  const closeIconStroke = messageBarType === 'nudge' ? 'var(--color-white)' : 'var(--color-gray-700)';\n\n  const defaultButtonTheme = DEFAULT_BUTTON_THEME_BY_TYPE[messageBarType] ?? DEFAULT_BUTTON_THEME_BY_TYPE.info;\n\n  const variantIcon = DEFAULT_ICON_BY_TYPE[messageBarType] ?? DEFAULT_ICON_BY_TYPE.info;\n  const showLeadingIcon = iconProps !== null;\n  const mergedIconProps: IconProps = {\n    name: 'info',\n    stroke: variantIcon.stroke,\n    rotation: variantIcon.rotation,\n    className: 'shrink-0',\n    ...iconProps\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}\n      data-automation-id={automationId}\n    >\n      <div className={classNames.messageCtn}>\n        {showLeadingIcon && <Icon {...mergedIconProps} />}\n        <span className={`${messageClass} break-words min-w-0`}>{message}</span>\n        {hasButton && (\n          <Button\n            label={buttonLabel}\n            type='primary'\n            size=\"sm\"\n            theme={defaultButtonTheme}\n            onClick={buttonOnClick}\n            className=\"alert-btn\"\n            {...buttonProps}\n          />\n        )}\n      </div>\n      {hasCloseIcon && (\n        <Icon\n          name={\"close\"}\n          className={`${classNames.closeIconCtn} ${closeIconHoverClass}`}\n          stroke={closeIconStroke}\n          onClick={handleClickOnCloseIcon}\n          ariaLabel={closeButtonAriaLabel}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["DEFAULT_ICON_BY_TYPE","info","stroke","rotation","alert","nudge","classNames","messageBarCtn","messageCtn","infoMessage","alertMessage","nudgeMessage","closeIconCtn","closeIconCtnInfo","closeIconCtnAlert","closeIconCtnNudge","DEFAULT_BUTTON_THEME_BY_TYPE","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","iconProps","buttonProps","closeButtonAriaLabel","visible","setVisible","useState","containerRef","useRef","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","useDismissOnEscape","onDismiss","enabled","messageClass","closeIconHoverClass","closeIconStroke","defaultButtonTheme","variantIcon","showLeadingIcon","mergedIconProps","name","className","createElement","ref","Icon","Button","_extends","label","type","size","theme","onClick","ariaLabel"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAMA,IAA0F;AAAA,EAC9FC,MAAM;AAAA,IAAEC,QAAQ;AAAA,IAA2BC,UAAU;AAAA,EAAA;AAAA,EACrDC,OAAO;AAAA,IAAEF,QAAQ;AAAA,IAAyBC,UAAU;AAAA,EAAA;AAAA,EACpDE,OAAO;AAAA,IAAEH,QAAQ;AAAA,IAAsBC,UAAU;AAAA,EAAA;AACnD,GAEMG,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZP,MAAM;AAAA,EACNG,OAAO;AAAA,EACPC,OAAO;AAAA,EACPI,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,kBAAkB;AAAA,EAClBC,mBAAmB;AAAA,EACnBC,mBAAmB;AACrB,GAOMC,IAA6E;AAAA,EACjFf,MAAM;AAAA,EACNG,OAAO;AAAA,EACPC,OAAO;AACT,GAEaY,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;AAAA,EACfC,WAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,sBAAAA,IAAuB;AACzB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAI,GACrCC,IAAeC,EAAuB,IAAI,GAE1CC,IAAyBC,EAAMC,YAAY,MAAM;AACrDN,IAAAA,EAAW,EAAK;AAChB,UAAMO,IAAQC,WAAW,MAAM;AAC7Bd,MAAAA,IAAAA;AAAAA,IACF,GAAG,GAAG;AACN,WAAO,MAAMe,aAAaF,CAAK;AAAA,EACjC,GAAG,CAACb,CAAW,CAAC;AAGhBgB,EAAAA,EAAmB;AAAA,IACjBR,cAAAA;AAAAA,IACAS,WAAWP;AAAAA,IACXQ,SAAStB,KAAgBS;AAAAA,EAAAA,CAC1B;AAED,QAAMc,IAAe;AAAA,IACnB3C,MAAMK,EAAWG;AAAAA,IACjBL,OAAOE,EAAWI;AAAAA,IAClBL,OAAOC,EAAWK;AAAAA,EAAAA,EAClBQ,CAAc,KAAKb,EAAWG,aAE1BoC,IAAsB;AAAA,IAC1B5C,MAAMK,EAAWO;AAAAA,IACjBT,OAAOE,EAAWQ;AAAAA,IAClBT,OAAOC,EAAWS;AAAAA,EAAAA,EAClBI,CAAc,KAAKb,EAAWO,kBAE1BiC,IAAkB3B,MAAmB,UAAU,uBAAuB,yBAEtE4B,IAAqB/B,EAA6BG,CAAc,KAAKH,EAA6Bf,MAElG+C,IAAchD,EAAqBmB,CAAc,KAAKnB,EAAqBC,MAC3EgD,IAAkBtB,MAAc,MAChCuB,IAA6B;AAAA,IACjCC,MAAM;AAAA,IACNjD,QAAQ8C,EAAY9C;AAAAA,IACpBC,UAAU6C,EAAY7C;AAAAA,IACtBiD,WAAW;AAAA,IACX,GAAGzB;AAAAA,EAAAA;AAGL,SACES,gBAAAA,EAAAiB,cAAA,OAAA;AAAA,IACEC,KAAKrB;AAAAA,IACLmB,WAAW,yBAAyBlC,CAAsB,IAAIZ,EAAWC,aAAa,IAAID,EAAWa,CAAc,CAAC,IAAIW,IAAU,SAAS,MAAM;AAAA,IACjJ,sBAAoBJ;AAAAA,EAAAA,GAEpBU,gBAAAA,EAAAiB,cAAA,OAAA;AAAA,IAAKD,WAAW9C,EAAWE;AAAAA,EAAAA,GACxByC,KAAmBb,gBAAAA,EAAAiB,cAACE,GAASL,CAAkB,GAChDd,gBAAAA,EAAAiB,cAAA,QAAA;AAAA,IAAMD,WAAW,GAAGR,CAAY;AAAA,EAAA,GAAyBxB,CAAc,GACtEE,KACCc,gBAAAA,EAAAiB,cAACG,GAAMC,EAAA;AAAA,IACLC,OAAOnC;AAAAA,IACPoC,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,OAAOd;AAAAA,IACPe,SAAStC;AAAAA,IACT4B,WAAU;AAAA,EAAA,GACNxB,CAAW,CAChB,CAEA,GACJP,KACCe,gBAAAA,EAAAiB,cAACE,GAAI;AAAA,IACHJ,MAAM;AAAA,IACNC,WAAW,GAAG9C,EAAWM,YAAY,IAAIiC,CAAmB;AAAA,IAC5D3C,QAAQ4C;AAAAA,IACRgB,SAAS3B;AAAAA,IACT4B,WAAWlC;AAAAA,EAAAA,CACZ,CAEA;AAET;"}

package/dist/index45.js

@@ -1,10 +1,10 @@
-import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
+import e, { useState as k, useRef as S, useCallback as P, useEffect as Z } from "react";
 /* empty css         */
 import { Icon as x } from "./index6.js";
-import { useStableId as Z } from "./index201.js";
-import { getA11yNameAttributes as L } from "./index78.js";
+import { useStableId as L } from "./index205.js";
+import { getA11yNameAttributes as ee } from "./index81.js";
 import "./index72.js";
-import { useCombobox as ee } from "./index68.js";
+import { useCombobox as te } from "./index68.js";
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(o) {
     for (var i = 1; i < arguments.length; i++) {
@@ -14,43 +14,44 @@ function u() {
     return o;
   }, u.apply(null, arguments);
 }
-const re = /* @__PURE__ */ e.memo(({
+const ce = /* @__PURE__ */ e.memo(({
   value: o,
   onChange: i,
   disabled: t = !1,
   maxLength: a,
   tag: B = "input",
-  error: r = !1,
-  errorMessage: R,
+  error: l = !1,
+  errorMessage: F,
   label: p,
-  placeholder: j,
+  placeholder: R,
   suggestions: c = [],
-  onSelect: N,
+  onSelect: $,
   renderOption: d,
-  optionClassName: A,
-  automationId: F = "",
+  optionClassName: j,
+  automationId: A = "",
   ariaLabel: b,
   ariaLabelledBy: O,
   ariaDescribedBy: V,
   ..._
 }) => {
-  const [s, v] = S([...c]), [E, f] = S(!1), H = k(null), $ = k(null), g = Z(void 0, "autocomplete"), z = `${g}-input`, D = `${g}-listbox`, C = `${g}-label`, y = `${g}-error`, w = P((l) => {
-    f(!1), N?.(l);
-  }, [N]), {
-    containerProps: M,
-    inputProps: q,
-    listboxProps: G,
-    getOptionProps: J,
-    highlightedIndex: K,
-    setHighlightedIndex: h
-  } = ee({
+  const [s, v] = k([...c]), [E, g] = k(!1), H = S(null), N = S(null), f = L(void 0, "autocomplete"), z = `${f}-input`, D = `${f}-listbox`, y = `${f}-label`, C = `${f}-error`, w = P((r) => {
+    g(!1), $?.(r);
+  }, [$]), {
+    containerProps: K,
+    inputProps: M,
+    listboxProps: q,
+    getOptionProps: G,
+    highlightedIndex: J,
+    setHighlightedIndex: h,
+    isKeyboardFocused: Q
+  } = te({
     items: s,
     isOpen: E,
-    onOpenChange: f,
+    onOpenChange: g,
     onSelect: w,
     listboxId: D
-  }), Q = P((l) => {
-    const n = l.target.value;
+  }), T = P((r) => {
+    const n = r.target.value;
     if (h(-1), i(n), !d)
       if (n === "")
         v([...c]);
@@ -59,26 +60,26 @@ const re = /* @__PURE__ */ e.memo(({
         v([...I]);
       }
   }, [i, c, d, h]);
-  Y(() => {
+  Z(() => {
     v([...c]);
   }, [c]);
-  const T = () => {
-    f(!0);
-  }, U = () => {
-    s.length > 0 && f(!0);
+  const U = () => {
+    g(!0);
   }, W = () => {
-    i(""), h(-1), $.current?.focus();
-  }, X = L({
-    ariaLabelledBy: p && !b ? C : O,
+    s.length > 0 && g(!0);
+  }, X = () => {
+    i(""), h(-1), N.current?.focus();
+  }, Y = ee({
+    ariaLabelledBy: p && !b ? y : O,
     ariaLabel: b,
-    ariaDescribedBy: r ? y : V
+    ariaDescribedBy: l ? C : V
   });
   return /* @__PURE__ */ e.createElement("div", u({
     className: "main-container-autocomplete-se-design",
     ref: H,
-    "data-automation-id": F
-  }, M), p && /* @__PURE__ */ e.createElement("span", {
-    id: C,
+    "data-automation-id": A
+  }, K), p && /* @__PURE__ */ e.createElement("span", {
+    id: y,
     className: `label-container ${t ? "label-container-disabled" : ""}`
   }, p), /* @__PURE__ */ e.createElement("div", {
     className: "input-container-wrapper"
@@ -88,25 +89,25 @@ const re = /* @__PURE__ */ e.memo(({
       pointerEvents: t ? "none" : "auto"
     }
   }, /* @__PURE__ */ e.createElement(B, {
-    ref: $,
+    ref: N,
     id: z,
     value: o,
-    onChange: Q,
-    onClick: T,
-    onFocus: U,
-    ...q,
+    onChange: T,
+    onClick: U,
+    onFocus: W,
+    ...M,
     disabled: t,
-    className: `${r ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${s.length > 0 || o ? "with-icon" : ""} ${s.length > 0 && o ? "with-icons" : ""}`,
+    className: `${l ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${s.length > 0 || o ? "with-icon" : ""} ${s.length > 0 && o ? "with-icons" : ""}`,
     maxLength: a,
-    placeholder: j,
-    "aria-invalid": r || void 0,
-    ...X,
+    placeholder: R,
+    "aria-invalid": l || void 0,
+    ...Y,
     ..._
   }), o && /* @__PURE__ */ e.createElement(x, {
     name: "close",
     className: "input-icon-close",
     size: 15,
-    onClick: W,
+    onClick: X,
     stroke: t ? "var(--color-gray-600)" : "",
     ariaLabel: "Clear input"
   }), s.length > 0 && /* @__PURE__ */ e.createElement(x, {
@@ -115,34 +116,34 @@ const re = /* @__PURE__ */ e.memo(({
     className: "input-icon-chevron",
     stroke: t ? "var(--color-gray-600)" : "",
     "aria-hidden": "true"
-  })), E && s.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, G, {
+  })), E && s.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, q, {
     "aria-label": p || b || "Suggestions",
     className: "suggestions-list",
     "data-automation-id": "autocomplete-suggestions-list"
-  }), s.map((l, n) => {
-    const I = J(n, !1), m = K === n;
+  }), s.map((r, n) => {
+    const I = G(n, !1), m = J === n;
     return /* @__PURE__ */ e.createElement("div", u({
       key: n
     }, I, {
-      className: `${A || "suggestion-item"} ${m ? "suggestion-item-highlighted" : ""}`,
-      onClick: () => w(l),
+      className: `${j || "suggestion-item"} ${m ? `suggestion-item-highlighted${Q ? " suggestion-item-keyboard-highlight" : ""}` : ""}`,
+      onClick: () => w(r),
       onMouseEnter: () => h(n),
       "data-automation-id": `autocomplete-suggestion-item-${n}`
-    }), d ? d(l, {
+    }), d ? d(r, {
       isHighlighted: m,
       index: n
-    }) : l.label);
-  }))), (r || a) && /* @__PURE__ */ e.createElement("div", {
-    className: `${r ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
-  }, r && /* @__PURE__ */ e.createElement("div", {
-    id: y,
+    }) : r.label);
+  }))), (l || a) && /* @__PURE__ */ e.createElement("div", {
+    className: `${l ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
+  }, l && /* @__PURE__ */ e.createElement("div", {
+    id: C,
     className: "error-message",
     role: "alert"
-  }, R), a && /* @__PURE__ */ e.createElement("div", {
+  }, F), a && /* @__PURE__ */ e.createElement("div", {
     className: "max-word"
   }, o.length, "/", a)));
 });
 export {
-  re as AutoCompleteInput
+  ce as AutoCompleteInput
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -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":"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"}
+{"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      isKeyboardFocused\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${isKeyboardFocused ? ' suggestion-item-keyboard-highlight' : ''}` : ''}`}\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","isKeyboardFocused","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":"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"}