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.
- package/dist/assets/style.css +1 -1
- package/dist/components/DropdownWithInputTags/index.d.ts +12 -0
- package/dist/components/Input/index.d.ts +1 -1
- package/dist/components/OnboardingTour/index.d.ts +1 -0
- package/dist/index39.js +166 -164
- package/dist/index39.js.map +1 -1
- package/dist/index40.js +45 -40
- package/dist/index40.js.map +1 -1
- package/dist/index67.js +80 -70
- package/dist/index67.js.map +1 -1
- package/package.json +1 -1
package/dist/index39.js.map
CHANGED
|
@@ -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
|
|
3
|
-
import { mergeIds as
|
|
4
|
-
import { getA11yNameAttributes as
|
|
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
|
|
7
|
+
function J({
|
|
8
8
|
value: r,
|
|
9
|
-
onChange:
|
|
10
|
-
onBlur:
|
|
11
|
-
onFocus:
|
|
9
|
+
onChange: v,
|
|
10
|
+
onBlur: E,
|
|
11
|
+
onFocus: N,
|
|
12
12
|
disabled: i,
|
|
13
|
-
maxLength:
|
|
14
|
-
tag:
|
|
13
|
+
maxLength: a,
|
|
14
|
+
tag: b,
|
|
15
15
|
error: t,
|
|
16
16
|
errorMessage: o,
|
|
17
17
|
label: c,
|
|
18
18
|
placeholder: I,
|
|
19
|
-
style:
|
|
20
|
-
inputStyle:
|
|
21
|
-
automationId:
|
|
22
|
-
id:
|
|
23
|
-
ariaLabel:
|
|
19
|
+
style: $,
|
|
20
|
+
inputStyle: f,
|
|
21
|
+
automationId: h = "",
|
|
22
|
+
id: y,
|
|
23
|
+
ariaLabel: F,
|
|
24
24
|
ariaLabelledBy: d,
|
|
25
|
-
ariaDescribedBy:
|
|
26
|
-
|
|
25
|
+
ariaDescribedBy: w,
|
|
26
|
+
required: s,
|
|
27
|
+
...C
|
|
27
28
|
}) {
|
|
28
|
-
const
|
|
29
|
-
ariaLabel:
|
|
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 ?
|
|
34
|
-
ariaDescribedBy:
|
|
35
|
-
}),
|
|
36
|
-
...
|
|
37
|
-
id:
|
|
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
|
|
41
|
-
|
|
41
|
+
const P = l.target.value;
|
|
42
|
+
v(P);
|
|
42
43
|
},
|
|
43
|
-
onBlur:
|
|
44
|
+
onBlur: E,
|
|
44
45
|
onFocus: (l) => {
|
|
45
|
-
|
|
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:
|
|
51
|
+
maxLength: a ?? void 0,
|
|
50
52
|
placeholder: I,
|
|
51
|
-
style:
|
|
53
|
+
style: f,
|
|
52
54
|
"aria-invalid": t ? "true" : void 0,
|
|
53
|
-
...
|
|
55
|
+
...A
|
|
54
56
|
};
|
|
55
57
|
return /* @__PURE__ */ e.createElement("div", {
|
|
56
58
|
className: "input-main-container",
|
|
57
|
-
style:
|
|
58
|
-
"data-automation-id":
|
|
59
|
+
style: $,
|
|
60
|
+
"data-automation-id": h
|
|
59
61
|
}, c && /* @__PURE__ */ e.createElement("label", {
|
|
60
|
-
id:
|
|
62
|
+
id: m,
|
|
61
63
|
className: `label-container ${i ? "label-container-disabled" : ""}`,
|
|
62
|
-
htmlFor:
|
|
63
|
-
}, c
|
|
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:
|
|
72
|
+
id: u,
|
|
68
73
|
className: "error-message",
|
|
69
74
|
role: "alert"
|
|
70
|
-
}, o),
|
|
71
|
-
id:
|
|
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 + "/" +
|
|
80
|
+
}, /* @__PURE__ */ e.createElement("span", null, r?.length + "/" + a))));
|
|
76
81
|
}
|
|
77
82
|
export {
|
|
78
|
-
|
|
83
|
+
J as Input
|
|
79
84
|
};
|
|
80
85
|
//# sourceMappingURL=index40.js.map
|
package/dist/index40.js.map
CHANGED
|
@@ -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,
|
|
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
|
|
2
|
-
import { Button as
|
|
3
|
-
import { Tooltip as
|
|
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
|
|
6
|
+
const f = {
|
|
6
7
|
gotIt: "got_it",
|
|
7
8
|
finish: "finish",
|
|
8
9
|
next: "next",
|
|
9
10
|
back: "back"
|
|
10
|
-
},
|
|
11
|
-
steps:
|
|
11
|
+
}, te = ({
|
|
12
|
+
steps: t = [],
|
|
12
13
|
screenBaseElementSelector: T = "",
|
|
13
14
|
handleCloseProductTour: d,
|
|
14
15
|
tourType: g = "",
|
|
15
|
-
automationId:
|
|
16
|
-
highlightBorderRadius:
|
|
17
|
-
customClassName:
|
|
18
|
-
|
|
16
|
+
automationId: h = "onboarding-tour",
|
|
17
|
+
highlightBorderRadius: w = 6,
|
|
18
|
+
customClassName: W = "",
|
|
19
|
+
showSkipCTA: v = !1,
|
|
20
|
+
labels: A
|
|
19
21
|
}) => {
|
|
20
|
-
const [
|
|
21
|
-
next:
|
|
22
|
-
gotIt:
|
|
23
|
-
finish:
|
|
24
|
-
skip:
|
|
25
|
-
stepInfo:
|
|
26
|
-
} =
|
|
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 (
|
|
30
|
+
if (e >= t.length)
|
|
29
31
|
return n;
|
|
30
|
-
const i = document.querySelector(e
|
|
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
|
|
42
|
-
if (!
|
|
43
|
+
const I = document.querySelector(t[e]?.targetElementSelector);
|
|
44
|
+
if (!I || !c.current || !l.current)
|
|
43
45
|
return;
|
|
44
|
-
const a =
|
|
45
|
-
c.current.style.height = `${
|
|
46
|
-
const
|
|
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
|
-
},
|
|
50
|
-
<svg width="${
|
|
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-${
|
|
53
|
-
<rect x="0" y="0" width="${
|
|
54
|
-
<rect x="${
|
|
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,${
|
|
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
|
-
}, [
|
|
63
|
+
}, [e, t]), N = m(() => {
|
|
62
64
|
d(), s && s.scrollTo({
|
|
63
65
|
top: 0,
|
|
64
66
|
behavior: "smooth"
|
|
65
67
|
});
|
|
66
|
-
}, [d, s]),
|
|
67
|
-
n?.preventDefault(), n?.stopPropagation(),
|
|
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
|
|
72
|
+
})), t[e]?.tourMixPanelHandler?.({
|
|
71
73
|
user_path: g,
|
|
72
|
-
action_type: `clicked_${
|
|
74
|
+
action_type: `clicked_${e === t.length - 1 ? t.length === 1 ? f.gotIt : f.finish : f.next}`
|
|
73
75
|
});
|
|
74
|
-
}, [
|
|
75
|
-
|
|
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_${
|
|
79
|
+
action_type: `clicked_${f.back}`
|
|
78
80
|
});
|
|
79
|
-
}, [
|
|
80
|
-
(n.keyCode === 37 || n.key === "ArrowLeft") &&
|
|
81
|
-
}, [
|
|
82
|
-
return
|
|
83
|
-
window.removeEventListener("keydown",
|
|
84
|
-
}), [
|
|
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
|
|
88
|
+
return e < t.length && (n = x()), () => {
|
|
87
89
|
n && clearTimeout(n);
|
|
88
90
|
};
|
|
89
|
-
}, [
|
|
90
|
-
if (
|
|
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
|
-
}, [
|
|
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": `${
|
|
108
|
-
}), /* @__PURE__ */ o.createElement(
|
|
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 ${
|
|
111
|
-
}, e
|
|
112
|
-
src: e
|
|
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
|
|
118
|
-
className:
|
|
119
|
-
},
|
|
120
|
-
className: `se-design-onboarding-tour-
|
|
121
|
-
}, e
|
|
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
|
-
},
|
|
133
|
+
}, t.length > 1 && /* @__PURE__ */ o.createElement("span", {
|
|
124
134
|
className: "steps"
|
|
125
|
-
},
|
|
135
|
+
}, F.replace("{step}", `${e + 1}`).replace("{total}", `${t.length}`)), /* @__PURE__ */ o.createElement("div", {
|
|
126
136
|
className: "btns-container"
|
|
127
|
-
},
|
|
137
|
+
}, v && e !== t.length - 1 && /* @__PURE__ */ o.createElement(M, {
|
|
128
138
|
theme: "white",
|
|
129
139
|
type: "link",
|
|
130
|
-
label:
|
|
131
|
-
automationId: `${
|
|
132
|
-
onClick:
|
|
133
|
-
}), /* @__PURE__ */ o.createElement(
|
|
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:
|
|
138
|
-
automationId: `${
|
|
139
|
-
onClick:
|
|
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
|
|
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
|
-
|
|
164
|
+
te as OnboardingTour
|
|
155
165
|
};
|
|
156
166
|
//# sourceMappingURL=index67.js.map
|