se-design 1.0.93 → 1.0.95

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.
@@ -1 +1 @@
1
- {"version":3,"file":"index39.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 { announce } from '../../utils/a11y/liveAnnouncer/LiveAnnouncer';\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 'aria-disabled'?: true;\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 const labelId = useStableId(automationId ? `${automationId}-label` : undefined, 'dropdown-input-tags-label');\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 const NO_RESULTS_VALUE = '__no_results__';\n const NO_RESULTS_SENTINEL: DropdownOption = { id: NO_RESULTS_VALUE, label: noOptionsMessage, value: NO_RESULTS_VALUE, __noResults: true };\n const isNoResultsSentinel = (item: DropdownOption) => !!item?.__noResults;\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 // Inject sentinel so arrow keys can reach \"No options found\" when the list is truly empty\n const showEmptyState = effectiveItems.length === 0 && isDropdownOpen;\n const comboboxItems: DropdownOption[] = showEmptyState ? [NO_RESULTS_SENTINEL] : effectiveItems;\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: comboboxItems,\n isOpen: isDropdownOpen,\n onOpenChange: setIsDropdownOpen,\n onSelect: handleSelectFromDropdown,\n listboxId,\n hasItems: comboboxItems.length > 0,\n keepHighlightOnSelect: isMultiSelect,\n closeOnTab: type !== 'multi-select',\n isItemDisabled: isNoResultsSentinel\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 // Announce empty state for screen readers — only when arrow keys haven't reached it yet.\n // Once highlighted (aria-activedescendant), the screen reader reads it directly.\n useEffect(() => {\n if (isDropdownOpen && effectiveItems.length === 0 && inputValue.trim() && highlightedIndex === -1) {\n announce(noOptionsMessage, { assertiveness: 'polite', batchId: 'dropdown-input-tags-empty-state', delay: 300 });\n }\n }, [effectiveItems.length, isDropdownOpen, inputValue, highlightedIndex]);\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\n className=\"dropdown-with-input-tags-ctas-container\"\n onKeyDown={(e) => {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n e.stopPropagation();\n }\n }}\n >\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={labelId} 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\n {...getOptionProps(0, false)}\n className={`dropdown-with-input-tags-no-options ${getHighlightClass(highlightedIndex === 0)}`}\n >\n <div className=\"dropdown-with-input-tags-no-options-text\">\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' : undefined),\n ariaLabelledBy,\n internalLabelId: label ? labelId : undefined,\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","labelId","undefined","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","current","ADD_CUSTOM_TAG_VALUE","NO_RESULTS_VALUE","NO_RESULTS_SENTINEL","id","__noResults","isNoResultsSentinel","item","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","comboboxItems","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","isKeyboardFocused","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","keepHighlightOnSelect","closeOnTab","isItemDisabled","getHighlightClass","isHighlighted","useEffect","filtered","toLowerCase","includes","announce","assertiveness","batchId","delay","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","renderPopoverSrcElement","ctrlKey","metaKey","altKey","Icon","name","shouldStopPropagation","onFocus","getA11yNameAttributes","internalLabelId","popoverContentAutomationId"],"mappings":"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"}
1
+ {"version":3,"file":"index39.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 { announce } from '../../utils/a11y/liveAnnouncer/LiveAnnouncer';\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 'aria-disabled'?: true;\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 /**\n * Tag values that cannot be removed: their close (×) icon is hidden and both the\n * click and Backspace removal paths are guarded. Matched against each tag's `value`\n * (not its display label). Defaults to none.\n */\n nonRemovableTags?: string[];\n /**\n * When true, options already selected (present as tags) are omitted from the dropdown\n * list — they stay in `options` so tag labels still resolve. Intended for select-mode,\n * non-custom-tag use; combining with `allowCustomTags` is unsupported. Defaults to false.\n */\n hideSelectedOptions?: boolean;\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 nonRemovableTags = [],\n hideSelectedOptions = false,\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 const labelId = useStableId(automationId ? `${automationId}-label` : undefined, 'dropdown-input-tags-label');\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 const NO_RESULTS_VALUE = '__no_results__';\n const NO_RESULTS_SENTINEL: DropdownOption = { id: NO_RESULTS_VALUE, label: noOptionsMessage, value: NO_RESULTS_VALUE, __noResults: true };\n const isNoResultsSentinel = (item: DropdownOption) => !!item?.__noResults;\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 // When hideSelectedOptions is set, drop already-selected tags from the list (they stay\n // in `options` so labels still resolve). Derived at render so removing a tag restores it\n // to the list immediately, and so it feeds both the popover render and comboboxItems.\n const visibleFilteredOptions = hideSelectedOptions\n ? filteredOptions.filter((option) => !tags.some((tag) => tag.value === option.value))\n : filteredOptions;\n\n const effectiveItems: DropdownOption[] =\n visibleFilteredOptions.length > 0\n ? visibleFilteredOptions\n : allowCustomTags && inputValue.trim()\n ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n : [];\n\n // Inject sentinel so arrow keys can reach \"No options found\" when the list is truly empty\n const showEmptyState = effectiveItems.length === 0 && isDropdownOpen;\n const comboboxItems: DropdownOption[] = showEmptyState ? [NO_RESULTS_SENTINEL] : effectiveItems;\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: comboboxItems,\n isOpen: isDropdownOpen,\n onOpenChange: setIsDropdownOpen,\n onSelect: handleSelectFromDropdown,\n listboxId,\n hasItems: comboboxItems.length > 0,\n keepHighlightOnSelect: isMultiSelect,\n closeOnTab: type !== 'multi-select',\n isItemDisabled: isNoResultsSentinel\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 // Announce empty state for screen readers — only when arrow keys haven't reached it yet.\n // Once highlighted (aria-activedescendant), the screen reader reads it directly.\n useEffect(() => {\n if (isDropdownOpen && effectiveItems.length === 0 && inputValue.trim() && highlightedIndex === -1) {\n announce(noOptionsMessage, { assertiveness: 'polite', batchId: 'dropdown-input-tags-empty-state', delay: 300 });\n }\n }, [effectiveItems.length, isDropdownOpen, inputValue, highlightedIndex]);\n\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n // Pinned tags can't be removed (their × is hidden too — this guards programmatic/other paths).\n if (nonRemovableTags.includes(tags[indexToRemove]?.value)) 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 // Don't let Backspace delete a pinned (non-removable) last tag.\n if (nonRemovableTags.includes(tags[tags.length - 1]?.value)) return;\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\n className=\"dropdown-with-input-tags-ctas-container\"\n onKeyDown={(e) => {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n e.stopPropagation();\n }\n }}\n >\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={labelId} 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\n {...getOptionProps(0, false)}\n className={`dropdown-with-input-tags-no-options ${getHighlightClass(highlightedIndex === 0)}`}\n >\n <div className=\"dropdown-with-input-tags-no-options-text\">\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 && !nonRemovableTags.includes(tag.value) && (\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' : undefined),\n ariaLabelledBy,\n internalLabelId: label ? labelId : undefined,\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","nonRemovableTags","hideSelectedOptions","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","labelId","undefined","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","current","ADD_CUSTOM_TAG_VALUE","NO_RESULTS_VALUE","NO_RESULTS_SENTINEL","id","__noResults","isNoResultsSentinel","item","handleSelectFromDropdown","trimmed","trim","visibleFilteredOptions","effectiveItems","length","comboboxItems","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","isKeyboardFocused","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","keepHighlightOnSelect","closeOnTab","isItemDisabled","getHighlightClass","isHighlighted","useEffect","filtered","toLowerCase","includes","announce","assertiveness","batchId","delay","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","renderPopoverSrcElement","ctrlKey","metaKey","altKey","Icon","name","shouldStopPropagation","onFocus","getA11yNameAttributes","internalLabelId","popoverContentAutomationId"],"mappings":"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"}
package/dist/index40.js CHANGED
@@ -1,80 +1,85 @@
1
1
  import e from "react";
2
- import { useStableId as P } from "./index212.js";
3
- import { mergeIds as _ } from "./index229.js";
4
- import { getA11yNameAttributes as k } from "./index86.js";
2
+ import { useStableId as _ } from "./index212.js";
3
+ import { mergeIds as k } from "./index229.js";
4
+ import { getA11yNameAttributes as D } from "./index86.js";
5
5
  import "./index77.js";
6
6
  /* empty css */
7
- function H({
7
+ function J({
8
8
  value: r,
9
- onChange: p,
10
- onBlur: v,
11
- onFocus: b,
9
+ onChange: v,
10
+ onBlur: E,
11
+ onFocus: N,
12
12
  disabled: i,
13
- maxLength: n,
14
- tag: E,
13
+ maxLength: a,
14
+ tag: b,
15
15
  error: t,
16
16
  errorMessage: o,
17
17
  label: c,
18
18
  placeholder: I,
19
- style: N,
20
- inputStyle: $,
21
- automationId: f = "",
22
- id: h,
23
- ariaLabel: y,
19
+ style: $,
20
+ inputStyle: f,
21
+ automationId: h = "",
22
+ id: y,
23
+ ariaLabel: F,
24
24
  ariaLabelledBy: d,
25
- ariaDescribedBy: F,
26
- ...w
25
+ ariaDescribedBy: w,
26
+ required: s,
27
+ ...C
27
28
  }) {
28
- const C = E || "input", a = P(h, "se-input"), s = c ? `${a}-label` : void 0, m = `${a}-error`, u = `${a}-count`, g = _(t && o ? m : void 0, n ? u : void 0, F), x = k({
29
- ariaLabel: y,
29
+ const g = b || "input", n = _(y, "se-input"), m = c ? `${n}-label` : void 0, u = `${n}-error`, p = `${n}-count`, x = k(t && o ? u : void 0, a ? p : void 0, w), A = D({
30
+ ariaLabel: F,
30
31
  ariaLabelledBy: d,
31
32
  // Native <label htmlFor> provides the name on its own; only fold the label id into
32
33
  // aria-labelledby when an external suffix is supplied, so the common case stays native-only.
33
- internalLabelId: d ? s : void 0,
34
- ariaDescribedBy: g
35
- }), A = {
36
- ...w,
37
- id: a,
34
+ internalLabelId: d ? m : void 0,
35
+ ariaDescribedBy: x
36
+ }), B = {
37
+ ...C,
38
+ id: n,
38
39
  value: r,
39
40
  onChange: (l) => {
40
- const B = l.target.value;
41
- p(B);
41
+ const P = l.target.value;
42
+ v(P);
42
43
  },
43
- onBlur: v,
44
+ onBlur: E,
44
45
  onFocus: (l) => {
45
- b?.(l);
46
+ N?.(l);
46
47
  },
47
48
  disabled: i,
49
+ required: s,
48
50
  className: `${t ? "input-container-error" : "input-container-default"} ${i ? "input-container-disabled" : ""}`,
49
- maxLength: n ?? void 0,
51
+ maxLength: a ?? void 0,
50
52
  placeholder: I,
51
- style: $,
53
+ style: f,
52
54
  "aria-invalid": t ? "true" : void 0,
53
- ...x
55
+ ...A
54
56
  };
55
57
  return /* @__PURE__ */ e.createElement("div", {
56
58
  className: "input-main-container",
57
- style: N,
58
- "data-automation-id": f
59
+ style: $,
60
+ "data-automation-id": h
59
61
  }, c && /* @__PURE__ */ e.createElement("label", {
60
- id: s,
62
+ id: m,
61
63
  className: `label-container ${i ? "label-container-disabled" : ""}`,
62
- htmlFor: a
63
- }, c), /* @__PURE__ */ e.createElement(C, A), (t || n) && /* @__PURE__ */ e.createElement("div", {
64
+ htmlFor: n
65
+ }, c, s && /* @__PURE__ */ e.createElement("span", {
66
+ className: "required-indicator",
67
+ "aria-hidden": "true"
68
+ }, " *")), /* @__PURE__ */ e.createElement(g, B), (t || a) && /* @__PURE__ */ e.createElement("div", {
64
69
  className: `${t ? "error-and-max-word" : "max-word-container"} ${i ? "disabled" : ""}`
65
70
  }, t && o && /* @__PURE__ */ e.createElement("div", {
66
71
  key: o,
67
- id: m,
72
+ id: u,
68
73
  className: "error-message",
69
74
  role: "alert"
70
- }, o), n && /* @__PURE__ */ e.createElement("div", {
71
- id: u,
75
+ }, o), a && /* @__PURE__ */ e.createElement("div", {
76
+ id: p,
72
77
  className: "max-word",
73
78
  "aria-live": "polite",
74
79
  "aria-atomic": "true"
75
- }, /* @__PURE__ */ e.createElement("span", null, r?.length + "/" + n))));
80
+ }, /* @__PURE__ */ e.createElement("span", null, r?.length + "/" + a))));
76
81
  }
77
82
  export {
78
- H as Input
83
+ J as Input
79
84
  };
80
85
  //# sourceMappingURL=index40.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index40.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 labelId = label ? `${inputId}-label` : undefined;\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 // Native <label htmlFor> provides the name on its own; only fold the label id into\n // aria-labelledby when an external suffix is supplied, so the common case stays native-only.\n internalLabelId: ariaLabelledBy ? labelId : undefined,\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 id={labelId}\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","labelId","undefined","errorId","countId","describedBy","accessibleNameProps","internalLabelId","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,IAAUZ,IAAQ,GAAGW,CAAO,WAAWE,QACvCC,IAAU,GAAGH,CAAO,UACpBI,IAAU,GAAGJ,CAAO,UAEpBK,IAAc5B,EAClBU,KAASC,IAAee,IAAUD,QAClCjB,IAAYmB,IAAUF,QACtBL,CACF,GAEMS,IAAsB5B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA;AAAAA;AAAAA,IAGAW,iBAAiBX,IAAiBK,IAAUC;AAAAA,IAC5CL,iBAAiBQ;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIV;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB4B,CAACC,MAAiE;AACrF,YAAMC,IAAYD,EAAEE,OAAOhC;AAC3BC,MAAAA,EAAS8B,CAAS;AAAA,IACpB;AAAA,IAOE7B,QAAAA;AAAAA,IACAC,SAfkB8B,CAACH,MAAgE;AACnF3B,MAAAA,IAAU2B,CAAC;AAAA,IACb;AAAA,IAcE1B,UAAAA;AAAAA,IACA8B,WAAW,GAAG3B,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAaiB;AAAAA,IACxBZ,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASe;AAAAA,IACjC,GAAGI;AAAAA,EAAAA;AAGL,SACES,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBvB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EAAAA,GACrEJ,KACC0B,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEtB,IAAIO;AAAAA,IACJa,WAAW,mBAAmB9B,IAAW,6BAA6B,EAAE;AAAA,IACxEiC,SAASjB;AAAAA,EAAAA,GAERX,CACI,GAER0B,gBAAAA,EAAMC,cAAcjB,GAASS,CAAc,IAC1CrB,KAASF,MACT8B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAG3B,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EAAA,GACjGG,KAASC,KACR2B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK9B;AAAAA,IAAcM,IAAIS;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,EAAA,GACjE/B,CACE,GAENH,KACC8B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKtB,IAAIU;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAA,GACpEC,gBAAAA,EAAAC,cAAA,QAAA,MAAOpC,GAAOwC,SAAS,MAAMnC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}
1
+ {"version":3,"file":"index40.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 required,\n ...nativeProps\n}: InputProps) {\n const Element: InputTag = tag || 'input';\n\n const inputId = useStableId(id, 'se-input');\n const labelId = label ? `${inputId}-label` : undefined;\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 // Native <label htmlFor> provides the name on its own; only fold the label id into\n // aria-labelledby when an external suffix is supplied, so the common case stays native-only.\n internalLabelId: ariaLabelledBy ? labelId : undefined,\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 required,\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 id={labelId}\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n htmlFor={inputId}\n >\n {label}\n {required && <span className=\"required-indicator\" aria-hidden=\"true\"> *</span>}\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","required","nativeProps","Element","inputId","labelId","undefined","errorId","countId","describedBy","accessibleNameProps","internalLabelId","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"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"}
package/dist/index67.js CHANGED
@@ -1,33 +1,35 @@
1
- import o, { useState as D, useRef as _, useCallback as m, useEffect as p } from "react";
2
- import { Button as L } from "./index4.js";
3
- import { Tooltip as U } from "./index16.js";
1
+ import o, { useState as U, useRef as P, useCallback as m, useEffect as k } from "react";
2
+ import { Button as M } from "./index4.js";
3
+ import { Tooltip as Y } from "./index16.js";
4
+ import { Icon as K } from "./index6.js";
4
5
  /* empty css */
5
- const u = {
6
+ const f = {
6
7
  gotIt: "got_it",
7
8
  finish: "finish",
8
9
  next: "next",
9
10
  back: "back"
10
- }, X = ({
11
- steps: e = [],
11
+ }, te = ({
12
+ steps: t = [],
12
13
  screenBaseElementSelector: T = "",
13
14
  handleCloseProductTour: d,
14
15
  tourType: g = "",
15
- automationId: f = "onboarding-tour",
16
- highlightBorderRadius: E = 6,
17
- customClassName: A = "",
18
- labels: H
16
+ automationId: h = "onboarding-tour",
17
+ highlightBorderRadius: w = 6,
18
+ customClassName: W = "",
19
+ showSkipCTA: v = !1,
20
+ labels: A
19
21
  }) => {
20
- const [t, k] = D(0), c = _(null), l = _(null), {
21
- next: P = "Next",
22
- gotIt: M = "Got It",
23
- finish: W = "Finish",
24
- skip: O = "Skip tour",
25
- stepInfo: V = "Step {step} of {total}"
26
- } = H || {}, s = document.querySelector(T), y = m(() => {
22
+ const [e, y] = U(0), c = P(null), l = P(null), {
23
+ next: O = "Next",
24
+ gotIt: V = "Got It",
25
+ finish: z = "Finish",
26
+ skip: $ = "Skip tour",
27
+ stepInfo: F = "Step {step} of {total}"
28
+ } = A || {}, s = document.querySelector(T), x = m(() => {
27
29
  let n;
28
- if (t >= e.length)
30
+ if (e >= t.length)
29
31
  return n;
30
- const i = document.querySelector(e[t]?.targetElementContainerSelector ? e[t].targetElementContainerSelector : e[t]?.targetElementSelector);
32
+ const i = document.querySelector(t[e]?.targetElementContainerSelector ? t[e].targetElementContainerSelector : t[e]?.targetElementSelector);
31
33
  if (!i)
32
34
  return n;
33
35
  const r = i.getBoundingClientRect();
@@ -38,56 +40,56 @@ const u = {
38
40
  behavior: "auto",
39
41
  block: "end"
40
42
  })), n = setTimeout(() => {
41
- const x = document.querySelector(e[t]?.targetElementSelector);
42
- if (!x || !c.current || !l.current)
43
+ const I = document.querySelector(t[e]?.targetElementSelector);
44
+ if (!I || !c.current || !l.current)
43
45
  return;
44
- const a = x.getBoundingClientRect(), w = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
45
- c.current.style.height = `${w}px`;
46
- const h = e[t]?.targetElementGap || {
46
+ const a = I.getBoundingClientRect(), p = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
47
+ c.current.style.height = `${p}px`;
48
+ const u = t[e]?.targetElementGap || {
47
49
  horizontal: 0,
48
50
  vertical: 0
49
- }, S = E * 2, N = a.left - h.horizontal, I = a.top + window.scrollY - h.vertical, F = a.right + h.horizontal, G = a.bottom + window.scrollY + h.vertical, q = F - N, B = G - I, C = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), R = encodeURIComponent(`
50
- <svg width="${C}" height="${w}" xmlns="http://www.w3.org/2000/svg">
51
+ }, C = w * 2, R = a.left - u.horizontal, _ = a.top + window.scrollY - u.vertical, G = a.right + u.horizontal, q = a.bottom + window.scrollY + u.vertical, B = G - R, D = q - _, L = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), H = encodeURIComponent(`
52
+ <svg width="${L}" height="${p}" xmlns="http://www.w3.org/2000/svg">
51
53
  <defs>
52
- <mask id="highlight-mask-${t}">
53
- <rect x="0" y="0" width="${C}" height="${w}" fill="white"/>
54
- <rect x="${N}" y="${I}" width="${q}" height="${B}" rx="${S}" ry="${S}" fill="black"/>
54
+ <mask id="highlight-mask-${e}">
55
+ <rect x="0" y="0" width="${L}" height="${p}" fill="white"/>
56
+ <rect x="${R}" y="${_}" width="${B}" height="${D}" rx="${C}" ry="${C}" fill="black"/>
55
57
  </mask>
56
58
  </defs>
57
59
  </svg>
58
60
  `);
59
- c.current.style.maskImage = `url("data:image/svg+xml,${R}#highlight-mask-${t}")`, c.current.style.webkitMaskImage = `url("data:image/svg+xml,${R}#highlight-mask-${t}")`, l.current.style.top = `${a.top}px`, l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`, l.current.style.height = `${a.height}px`, l.current.style.borderRadius = `${E}px`;
61
+ c.current.style.maskImage = `url("data:image/svg+xml,${H}#highlight-mask-${e}")`, c.current.style.webkitMaskImage = `url("data:image/svg+xml,${H}#highlight-mask-${e}")`, l.current.style.top = `${a.top}px`, l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`, l.current.style.height = `${a.height}px`, l.current.style.borderRadius = `${w}px`;
60
62
  }, 50), n;
61
- }, [t, e]), z = m(() => {
63
+ }, [e, t]), N = m(() => {
62
64
  d(), s && s.scrollTo({
63
65
  top: 0,
64
66
  behavior: "smooth"
65
67
  });
66
- }, [d, s]), v = m((n) => {
67
- n?.preventDefault(), n?.stopPropagation(), t < e.length - 1 ? k((i) => i + 1) : (d(n), s && s.scrollTo({
68
+ }, [d, s]), b = m((n) => {
69
+ n?.preventDefault(), n?.stopPropagation(), e < t.length - 1 ? y((i) => i + 1) : (d(n), s && s.scrollTo({
68
70
  top: 0,
69
71
  behavior: "smooth"
70
- })), e[t]?.tourMixPanelHandler?.({
72
+ })), t[e]?.tourMixPanelHandler?.({
71
73
  user_path: g,
72
- action_type: `clicked_${t === e.length - 1 ? e.length === 1 ? u.gotIt : u.finish : u.next}`
74
+ action_type: `clicked_${e === t.length - 1 ? t.length === 1 ? f.gotIt : f.finish : f.next}`
73
75
  });
74
- }, [t, e, d, g, s]), $ = m(() => {
75
- t > 0 && k((n) => n - 1), e[t]?.tourMixPanelHandler?.({
76
+ }, [e, t, d, g, s]), S = m(() => {
77
+ e > 0 && y((n) => n - 1), t[e]?.tourMixPanelHandler?.({
76
78
  user_path: g,
77
- action_type: `clicked_${u.back}`
79
+ action_type: `clicked_${f.back}`
78
80
  });
79
- }, [t, e, g]), b = m((n) => {
80
- (n.keyCode === 37 || n.key === "ArrowLeft") && t > 0 && $(), (n.keyCode === 39 || n.key === "ArrowRight") && v();
81
- }, [t, v, $]);
82
- return p(() => (window.addEventListener("keydown", b), () => {
83
- window.removeEventListener("keydown", b);
84
- }), [b]), p(() => {
81
+ }, [e, t, g]), E = m((n) => {
82
+ (n.keyCode === 37 || n.key === "ArrowLeft") && e > 0 && S(), (n.keyCode === 39 || n.key === "ArrowRight") && b();
83
+ }, [e, b, S]);
84
+ return k(() => (window.addEventListener("keydown", E), () => {
85
+ window.removeEventListener("keydown", E);
86
+ }), [E]), k(() => {
85
87
  let n;
86
- return t < e.length && (n = y()), () => {
88
+ return e < t.length && (n = x()), () => {
87
89
  n && clearTimeout(n);
88
90
  };
89
- }, [t, e, y]), p(() => {
90
- if (t < e.length && c.current) {
91
+ }, [e, t, x]), k(() => {
92
+ if (e < t.length && c.current) {
91
93
  const n = c.current, i = (r) => {
92
94
  r.preventDefault(), r.stopPropagation();
93
95
  };
@@ -101,49 +103,57 @@ const u = {
101
103
  n.removeEventListener("wheel", i), n.removeEventListener("touchmove", i), n.removeEventListener("scroll", i);
102
104
  };
103
105
  }
104
- }, [t]), !e || e.length === 0 ? null : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
106
+ }, [e]), !t || t.length === 0 ? null : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
105
107
  className: "se-design-onboarding-tour-overlay",
106
108
  ref: c,
107
- "data-automation-id": `${f}-overlay`
108
- }), /* @__PURE__ */ o.createElement(U, {
109
+ "data-automation-id": `${h}-overlay`
110
+ }), /* @__PURE__ */ o.createElement(Y, {
109
111
  content: /* @__PURE__ */ o.createElement("div", {
110
- className: `se-design-onboarding-tour-tooltip-content ${A}`
111
- }, e[t]?.content?.illustration && /* @__PURE__ */ o.createElement("img", {
112
- src: e[t].content.illustration,
112
+ className: `se-design-onboarding-tour-tooltip-content ${W}`
113
+ }, t[e]?.content?.illustration && /* @__PURE__ */ o.createElement("img", {
114
+ src: t[e].content.illustration,
113
115
  className: "se-design-onboarding-tour-illustration",
114
116
  alt: "illustration"
115
117
  }), /* @__PURE__ */ o.createElement("div", {
116
118
  className: "se-design-onboarding-tour-content"
117
- }, e[t]?.content?.title && /* @__PURE__ */ o.createElement("p", {
118
- className: `se-design-onboarding-tour-title ${e[t].content.titleClassName || ""}`
119
- }, e[t].content.title), e[t]?.content?.description && /* @__PURE__ */ o.createElement("p", {
120
- className: `se-design-onboarding-tour-description ${e[t].content.descriptionClassName || ""}`
121
- }, e[t].content.description)), /* @__PURE__ */ o.createElement("div", {
119
+ }, (t[e]?.content?.title || !v) && /* @__PURE__ */ o.createElement("div", {
120
+ className: "se-design-onboarding-tour-header"
121
+ }, t[e]?.content?.title && /* @__PURE__ */ o.createElement("p", {
122
+ className: `se-design-onboarding-tour-title ${t[e].content.titleClassName || ""}`
123
+ }, t[e].content.title), !v && /* @__PURE__ */ o.createElement(K, {
124
+ name: "close",
125
+ onClick: N,
126
+ ariaLabel: $,
127
+ className: "se-design-onboarding-tour-close-icon cursor-pointer",
128
+ automationId: `${h}-skip-button`
129
+ })), t[e]?.content?.description && /* @__PURE__ */ o.createElement("p", {
130
+ className: `se-design-onboarding-tour-description ${t[e].content.descriptionClassName || ""}`
131
+ }, t[e].content.description)), /* @__PURE__ */ o.createElement("div", {
122
132
  className: "se-design-onboarding-tour-actions"
123
- }, e.length > 1 && /* @__PURE__ */ o.createElement("span", {
133
+ }, t.length > 1 && /* @__PURE__ */ o.createElement("span", {
124
134
  className: "steps"
125
- }, V.replace("{step}", `${t + 1}`).replace("{total}", `${e.length}`)), /* @__PURE__ */ o.createElement("div", {
135
+ }, F.replace("{step}", `${e + 1}`).replace("{total}", `${t.length}`)), /* @__PURE__ */ o.createElement("div", {
126
136
  className: "btns-container"
127
- }, t !== e.length - 1 && /* @__PURE__ */ o.createElement(L, {
137
+ }, v && e !== t.length - 1 && /* @__PURE__ */ o.createElement(M, {
128
138
  theme: "white",
129
139
  type: "link",
130
- label: O,
131
- automationId: `${f}-skip-button`,
132
- onClick: z
133
- }), /* @__PURE__ */ o.createElement(L, {
140
+ label: $,
141
+ automationId: `${h}-skip-button`,
142
+ onClick: N
143
+ }), /* @__PURE__ */ o.createElement(M, {
134
144
  theme: "white",
135
145
  type: "primary",
136
146
  size: "sm",
137
- label: t === e.length - 1 ? e.length === 1 ? M : W : P,
138
- automationId: `${f}-next-button`,
139
- onClick: v
147
+ label: e === t.length - 1 ? t.length === 1 ? V : z : O,
148
+ automationId: `${h}-next-button`,
149
+ onClick: b
140
150
  })))),
141
151
  tooltipSrc: /* @__PURE__ */ o.createElement("div", {
142
152
  className: "blocker",
143
153
  ref: l
144
154
  }),
145
155
  tooltipSrcRef: l,
146
- position: e[t]?.tooltipPosition || "bottom-center",
156
+ position: t[e]?.tooltipPosition || "bottom-center",
147
157
  tooltipOffset: 16,
148
158
  displayOn: "always-on",
149
159
  isWithPortal: !0,
@@ -151,6 +161,6 @@ const u = {
151
161
  }));
152
162
  };
153
163
  export {
154
- X as OnboardingTour
164
+ te as OnboardingTour
155
165
  };
156
166
  //# sourceMappingURL=index67.js.map