npm - @economic/taco - Versions diffs - 12.0.0-react18-compat.0 → 12.0.0 - Mend

@economic/taco 12.0.0-react18-compat.0 → 12.0.0

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

Files changed (27) hide show

package/dist/components/Combobox/useCombobox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue \| undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: _nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n valueRenderer,\n ...otherProps\n } = props;\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => nanoid(), []);\n const flattenedData = useFlattenedData(unfilteredData);\n\n const convertToInputValue = React.useCallback(\n (val: ScrollableListItemValue \| undefined): string => {\n const option = findByValue(flattenedData, val);\n if (typeof valueRenderer === 'function' && option) {\n return valueRenderer(option);\n }\n return defaultConvertToInputValue(val);\n },\n [valueRenderer, flattenedData]\n );\n\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline \|\| (inline && inputValue !== convertToInputValue(value)));\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number \| undefined>(\n inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n );\n\n const setInputValueByIndex = (index: number \| undefined, event?: string): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n const eventType = event ?? 'focusout';\n setInputValueByRef(inputRef.current, option.value, eventType);\n }\n }\n };\n\n const setCurrentValue = (index: number \| undefined, event?: string) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n if (option?.value === value) {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n } else {\n // if the selected option is not already selected, trigger blur event\n setInputValueByIndex(index, event);\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // Sync the input's text when `value` changes 'externally' (selecting an item, a modal, a form reset, etc.).\n // This is done DURING RENDER (React's \"adjust state when a prop changes\" pattern) rather than in an effect,\n // so the corrected inputValue is in place before the \"show listbox based on input value\" effect below runs.\n // Doing it in a post-commit effect left a one-render window where that effect saw the stale inputValue (the\n // previous value's text) together with a fresh `data` reference and spuriously opened the popover after a reset.\n // React 19's separate commits expose this; React 18 batched the stale render away.\n const [prevValue, setPrevValue] = React.useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n\n if (value !== undefined) {\n // Compare against the rendered value to handle the valueRenderer case\n // (e.g., value is \"1000\" but the rendered text is \"1000 - Account Name\").\n const renderedValue = convertToInputValue(value);\n if (renderedValue !== inputValue) {\n setInputValue(renderedValue);\n }\n } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n // `value` was cleared to `undefined` externally while the input still shows the previous value's\n // rendered text — i.e. the user did not type this — so clear it. We intentionally do NOT clear when the\n // user edited to a non-matching value (their text never equals the previous value's render), so they\n // can keep typing / backspace back to a valid one.\n if (inputValue !== '') {\n setInputValue('');\n }\n }\n }\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n const findOption = React.useCallback(\n (inputVal: string): ScrollableListItem \| undefined => {\n // First try to find by raw value\n const itemByValue = findByValue(flattenedData, inputVal);\n if (itemByValue) {\n return itemByValue;\n }\n\n // If valueRenderer is provided, also try to match against rendered values\n if (valueRenderer) {\n return flattenedData.find(option => valueRenderer(option) === inputVal);\n }\n\n return undefined;\n },\n [flattenedData, valueRenderer]\n );\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n const item = findOption(event.target.value);\n\n // If the found item's value equals the current value, just update the display to rendered format\n // This handles the case where user types the raw value but valueRenderer shows something different\n // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n if (item && item.value === value) {\n setInputValue(convertToInputValue(value));\n if (props.onBlur) {\n props.onBlur(event);\n }\n return;\n }\n\n // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n if (onChange && event.target.value !== convertToInputValue(value)) {\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline \|\| (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n // This ensures Table3 won't react to these keys when using the Combobox\n if (\n isElementInsideTable3OrReport(event.currentTarget) &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n open\n ) {\n event.stopPropagation();\n }\n\n if (!event.ctrlKey && !event.metaKey) {\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n if (open) {\n // as focus is on input, need to prevent propagation to not close dialog.\n event.stopPropagation();\n }\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab': {\n // default focusout will trigger onBlur and we don't want to trigger it twice\n setCurrentValue(currentIndex, 'change');\n setOpen(false);\n return;\n }\n\n case 'Enter': {\n event.preventDefault();\n\n if (isElementInsideTable3OrReport(event.currentTarget)) {\n if (inline && !open) {\n setOpen(true);\n } else if (buttonRef.current && !open) {\n buttonRef.current.click();\n }\n }\n\n if (open) {\n // we need to focusout to trigger onBlur as we are not actually blurring the input\n setCurrentValue(currentIndex, 'focusout');\n setOpen(false);\n }\n\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n buttonRef.current.click();\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (\n inline &&\n !open &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n !isElementInsideTable3OrReport(event.currentTarget)\n ) {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n setOpen(true);\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...otherProps,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}
1	+ {"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue \| undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: _nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n valueRenderer,\n ...otherProps\n } = props;\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => nanoid(), []);\n const flattenedData = useFlattenedData(unfilteredData);\n\n const convertToInputValue = React.useCallback(\n (val: ScrollableListItemValue \| undefined): string => {\n const option = findByValue(flattenedData, val);\n if (typeof valueRenderer === 'function' && option) {\n return valueRenderer(option);\n }\n return defaultConvertToInputValue(val);\n },\n [valueRenderer, flattenedData]\n );\n\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline \|\| (inline && inputValue !== convertToInputValue(value)));\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number \| undefined>(\n inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n );\n\n const setInputValueByIndex = (index: number \| undefined, event?: string): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n const eventType = event ?? 'focusout';\n setInputValueByRef(inputRef.current, option.value, eventType);\n }\n }\n };\n\n const setCurrentValue = (index: number \| undefined, event?: string) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n if (option?.value === value) {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n } else {\n // if the selected option is not already selected, trigger blur event\n setInputValueByIndex(index, event);\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n const [prevValue, setPrevValue] = React.useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n\n if (value !== undefined) {\n // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n const renderedValue = convertToInputValue(value);\n if (renderedValue !== inputValue) {\n setInputValue(renderedValue);\n }\n } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n // so clear it. Text the user typed never matches the previous render, so it's preserved.\n if (inputValue !== '') {\n setInputValue('');\n }\n }\n }\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n const findOption = React.useCallback(\n (inputVal: string): ScrollableListItem \| undefined => {\n // First try to find by raw value\n const itemByValue = findByValue(flattenedData, inputVal);\n if (itemByValue) {\n return itemByValue;\n }\n\n // If valueRenderer is provided, also try to match against rendered values\n if (valueRenderer) {\n return flattenedData.find(option => valueRenderer(option) === inputVal);\n }\n\n return undefined;\n },\n [flattenedData, valueRenderer]\n );\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n const item = findOption(event.target.value);\n\n // If the found item's value equals the current value, just update the display to rendered format\n // This handles the case where user types the raw value but valueRenderer shows something different\n // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n if (item && item.value === value) {\n setInputValue(convertToInputValue(value));\n if (props.onBlur) {\n props.onBlur(event);\n }\n return;\n }\n\n // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n if (onChange && event.target.value !== convertToInputValue(value)) {\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline \|\| (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n // This ensures Table3 won't react to these keys when using the Combobox\n if (\n isElementInsideTable3OrReport(event.currentTarget) &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n open\n ) {\n event.stopPropagation();\n }\n\n if (!event.ctrlKey && !event.metaKey) {\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n if (open) {\n // as focus is on input, need to prevent propagation to not close dialog.\n event.stopPropagation();\n }\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab': {\n // default focusout will trigger onBlur and we don't want to trigger it twice\n setCurrentValue(currentIndex, 'change');\n setOpen(false);\n return;\n }\n\n case 'Enter': {\n event.preventDefault();\n\n if (isElementInsideTable3OrReport(event.currentTarget)) {\n if (inline && !open) {\n setOpen(true);\n } else if (buttonRef.current && !open) {\n buttonRef.current.click();\n }\n }\n\n if (open) {\n // we need to focusout to trigger onBlur as we are not actually blurring the input\n setCurrentValue(currentIndex, 'focusout');\n setOpen(false);\n }\n\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n buttonRef.current.click();\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (\n inline &&\n !open &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n !isElementInsideTable3OrReport(event.currentTarget)\n ) {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n setOpen(true);\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...otherProps,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}

package/dist/components/Combobox/useCombobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue \| undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: _nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n valueRenderer,\n ...otherProps\n } = props;\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => nanoid(), []);\n const flattenedData = useFlattenedData(unfilteredData);\n\n const convertToInputValue = React.useCallback(\n (val: ScrollableListItemValue \| undefined): string => {\n const option = findByValue(flattenedData, val);\n if (typeof valueRenderer === 'function' && option) {\n return valueRenderer(option);\n }\n return defaultConvertToInputValue(val);\n },\n [valueRenderer, flattenedData]\n );\n\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline \|\| (inline && inputValue !== convertToInputValue(value)));\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number \| undefined>(\n inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n );\n\n const setInputValueByIndex = (index: number \| undefined, event?: string): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n const eventType = event ?? 'focusout';\n setInputValueByRef(inputRef.current, option.value, eventType);\n }\n }\n };\n\n const setCurrentValue = (index: number \| undefined, event?: string) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n if (option?.value === value) {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n } else {\n // if the selected option is not already selected, trigger blur event\n setInputValueByIndex(index, event);\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // Sync the input's text when `value` changes 'externally' (selecting an item, a modal, a form reset, etc.).\n // This is done DURING RENDER (React's \"adjust state when a prop changes\" pattern) rather than in an effect,\n // so the corrected inputValue is in place before the \"show listbox based on input value\" effect below runs.\n // Doing it in a post-commit effect left a one-render window where that effect saw the stale inputValue (the\n // previous value's text) together with a fresh `data` reference and spuriously opened the popover after a reset.\n // React 19's separate commits expose this; React 18 batched the stale render away.\n const [prevValue, setPrevValue] = React.useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n\n if (value !== undefined) {\n // Compare against the rendered value to handle the valueRenderer case\n // (e.g., value is \"1000\" but the rendered text is \"1000 - Account Name\").\n const renderedValue = convertToInputValue(value);\n if (renderedValue !== inputValue) {\n setInputValue(renderedValue);\n }\n } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n // `value` was cleared to `undefined` externally while the input still shows the previous value's\n // rendered text — i.e. the user did not type this — so clear it. We intentionally do NOT clear when the\n // user edited to a non-matching value (their text never equals the previous value's render), so they\n // can keep typing / backspace back to a valid one.\n if (inputValue !== '') {\n setInputValue('');\n }\n }\n }\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n const findOption = React.useCallback(\n (inputVal: string): ScrollableListItem \| undefined => {\n // First try to find by raw value\n const itemByValue = findByValue(flattenedData, inputVal);\n if (itemByValue) {\n return itemByValue;\n }\n\n // If valueRenderer is provided, also try to match against rendered values\n if (valueRenderer) {\n return flattenedData.find(option => valueRenderer(option) === inputVal);\n }\n\n return undefined;\n },\n [flattenedData, valueRenderer]\n );\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n const item = findOption(event.target.value);\n\n // If the found item's value equals the current value, just update the display to rendered format\n // This handles the case where user types the raw value but valueRenderer shows something different\n // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n if (item && item.value === value) {\n setInputValue(convertToInputValue(value));\n if (props.onBlur) {\n props.onBlur(event);\n }\n return;\n }\n\n // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n if (onChange && event.target.value !== convertToInputValue(value)) {\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline \|\| (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n // This ensures Table3 won't react to these keys when using the Combobox\n if (\n isElementInsideTable3OrReport(event.currentTarget) &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n open\n ) {\n event.stopPropagation();\n }\n\n if (!event.ctrlKey && !event.metaKey) {\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n if (open) {\n // as focus is on input, need to prevent propagation to not close dialog.\n event.stopPropagation();\n }\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab': {\n // default focusout will trigger onBlur and we don't want to trigger it twice\n setCurrentValue(currentIndex, 'change');\n setOpen(false);\n return;\n }\n\n case 'Enter': {\n event.preventDefault();\n\n if (isElementInsideTable3OrReport(event.currentTarget)) {\n if (inline && !open) {\n setOpen(true);\n } else if (buttonRef.current && !open) {\n buttonRef.current.click();\n }\n }\n\n if (open) {\n // we need to focusout to trigger onBlur as we are not actually blurring the input\n setCurrentValue(currentIndex, 'focusout');\n setOpen(false);\n }\n\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n buttonRef.current.click();\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (\n inline &&\n !open &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n !isElementInsideTable3OrReport(event.currentTarget)\n ) {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n setOpen(true);\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...otherProps,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,SAAS,CAAA,MAAK,EAAA,GAAK,GAAG;AAExC,MAAM,6BAA6B,CAAC,UAA+C,OAAO,SAAS,EAAE;AAU9F,MAAM,cAAc,CAAC,OAAsC,QAAkD;AAChH,QAAM;AAAA,IACF,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,MAAM,iBAAiB,CAAA;AAAA,IACvB;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,WAAW,aAA+B,GAAG;AACnD,QAAM,YAAY,MAAM,OAA0B,IAAI;AACtD,QAAM,UAAU,MAAM,OAAyB,IAAI;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,SAAS,MAAM,QAAQ,MAAM,OAAA,GAAU,CAAA,CAAE;AAC/C,QAAM,gBAAgB,iBAAiB,cAAc;AAErD,QAAM,sBAAsB,MAAM;AAAA,IAC9B,CAAC,QAAqD;AAClD,YAAM,SAAS,YAAY,eAAe,GAAG;AAC7C,UAAI,OAAO,kBAAkB,cAAc,QAAQ;AAC/C,eAAO,cAAc,MAAM;AAAA,MAC/B;AACA,aAAO,2BAA2B,GAAG;AAAA,IACzC;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAiB,oBAAoB,KAAK,CAAC;AACrF,QAAM,mBAAmB,CAAC,aAAa,CAAC,UAAW,UAAU,eAAe,oBAAoB,KAAK;AACrG,QAAM,OAAO,MAAM;AAAA,IACf,MAAO,mBAAmB,WAAW,eAAe,UAAU,IAAI;AAAA,IAClE,CAAC,kBAAkB,YAAY,aAAa;AAAA,EAAA;AAGhD,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM;AAAA,IAC1C,eAAe,SAAY,SAAY,kBAAkB,MAAM,UAAU;AAAA,EAAA;AAG7E,QAAM,uBAAuB,CAAC,OAA2B,UAAyB;AAC9E,QAAI,UAAU,QAAW;AACrB,YAAM,SAAS,KAAK,KAAK;AAEzB,UAAI,UAAU,CAAC,OAAO,UAAU;AAC5B,cAAM,YAAY,SAAS;AAC3B,2BAAmB,SAAS,SAAS,OAAO,OAAO,SAAS;AAAA,MAChE;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,kBAAkB,CAAC,OAA2B,UAAmB;AACnE,QAAI,UAAU,QAAW;AACrB;AAAA,IACJ;AAEA,UAAM,SAAS,KAAK,KAAK;AAEzB,QAAI,QAAQ,UAAU,OAAO;AAEzB,oBAAc,oBAAoB,KAAK,CAAC;AAAA,IAC5C,OAAO;AAEH,2BAAqB,OAAO,KAAK;AAAA,IACrC;AAAA,EACJ;AAGA,QAAM,UAAU,MAAM;AAClB,QAAI,gBAAgB,CAAC,OAAO;AACxB,2BAAqB,kBAAkB,MAAM,YAAY,CAAC;AAAA,IAC9D;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAQT,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,MAAI,UAAU,WAAW;AACrB,iBAAa,KAAK;AAElB,QAAI,UAAU,QAAW;AAGrB,YAAM,gBAAgB,oBAAoB,KAAK;AAC/C,UAAI,kBAAkB,YAAY;AAC9B,sBAAc,aAAa;AAAA,MAC/B;AAAA,IACJ,WAAW,cAAc,UAAa,eAAe,oBAAoB,SAAS,GAAG;AAKjF,UAAI,eAAe,IAAI;AACnB,sBAAc,EAAE;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,UAAU;AACV,gBAAU,MAAM;AACZ,iBAAS,UAAU;AAAA,MACvB,CAAC;AAAA,IACL;AAAA,EACJ,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,UAAU,MAAM;AAGlB,UAAM,iBAAiB,UAAU,UAAa,UAAU,QAAQ,eAAe,oBAAoB,KAAK;AAExG,QAAI,cAAc,KAAK,UAAU,CAAC,gBAAgB;AAC9C,sBAAgB,kBAAkB,MAAM,UAAU,KAAK,CAAC;AAExD,UAAI,CAAC,MAAM;AACP,gBAAQ,IAAI;AAAA,MAChB;AAAA,IACJ,OAAO;AACH,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ,GAAG,CAAC,YAAY,IAAI,CAAC;AAErB,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,sBAAgB,kBAAkB,MAAM,UAAU,KAAK,CAAC;AAAA,IAC5D,OAAO;AACH,sBAAgB,MAAS;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAa,MAAM;AAAA,IACrB,CAAC,aAAqD;AAElD,YAAM,cAAc,YAAY,eAAe,QAAQ;AACvD,UAAI,aAAa;AACb,eAAO;AAAA,MACX;AAGA,UAAI,eAAe;AACf,eAAO,cAAc,KAAK,CAAA,WAAU,cAAc,MAAM,MAAM,QAAQ;AAAA,MAC1E;AAEA,aAAO;AAAA,IACX;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAAA;AAIjC,QAAM,kBAAkB,CAAC,UAAoD;AACzE,QAAI,QAAQ,WAAW,MAAM,kBAAkB,QAAQ,SAAS;AAC5D,YAAM,eAAA;AACN;AAAA,IACJ;AAEA,UAAM,OAAO,WAAW,MAAM,OAAO,KAAK;AAK1C,QAAI,QAAQ,KAAK,UAAU,OAAO;AAC9B,oBAAc,oBAAoB,KAAK,CAAC;AACxC,UAAI,MAAM,QAAQ;AACd,cAAM,OAAO,KAAK;AAAA,MACtB;AACA;AAAA,IACJ;AAGA,QAAI,YAAY,MAAM,OAAO,UAAU,oBAAoB,KAAK,GAAG;AAC9D,YAAc,SAAS,aAAa,IAAI;AAEzC,YAAM,UAAU,iBAAiB,eAAe,MAAM,IAAI;AAE1D,UAAI,YAAY,QAAQ,QAAQ,SAAS,GAAG;AACvC,cAAc,OAAO,UAAU;AAAA,MACpC;AAEA,eAAS,KAAK;AAAA,IAClB;AAEA,QAAI,MAAM,QAAQ;AACd,YAAM,OAAO,KAAK;AAAA,IACtB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,kBAAc,MAAM,OAAO,KAAK;AAAA,EACpC;AAEA,QAAM,mBAAmB,CAAC,UAAoD;AAC1E,QAAI,UAAW,CAAC,QAAQ,cAAc,KAAK,QAAS;AAChD,cAAQ,IAAI;AAAA,IAChB;AAEA,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,UAAuD;AAG/E,QACI,8BAA8B,MAAM,aAAa,MAChD,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,MACF;AACE,YAAM,gBAAA;AAAA,IACV;AAEA,QAAI,CAAC,MAAM,WAAW,CAAC,MAAM,SAAS;AAClC,cAAQ,MAAM,KAAA;AAAA,QACV,KAAK,aAAa;AACd;AAAA,QACJ;AAAA,QAEA,KAAK,UAAU;AACX,gBAAM,eAAA;AACN,cAAI,MAAM;AAEN,kBAAM,gBAAA;AAAA,UACV;AACA,wBAAc,oBAAoB,KAAK,CAAC;AACxC,kBAAQ,KAAK;AACb;AAAA,QACJ;AAAA,QAEA,KAAK,OAAO;AAER,0BAAgB,cAAc,QAAQ;AACtC,kBAAQ,KAAK;AACb;AAAA,QACJ;AAAA,QAEA,KAAK,SAAS;AACV,gBAAM,eAAA;AAEN,cAAI,8BAA8B,MAAM,aAAa,GAAG;AACpD,gBAAI,UAAU,CAAC,MAAM;AACjB,sBAAQ,IAAI;AAAA,YAChB,WAAW,UAAU,WAAW,CAAC,MAAM;AACnC,wBAAU,QAAQ,MAAA;AAAA,YACtB;AAAA,UACJ;AAEA,cAAI,MAAM;AAEN,4BAAgB,cAAc,UAAU;AACxC,oBAAQ,KAAK;AAAA,UACjB;AAEA;AAAA,QACJ;AAAA,QAEA,KAAK;AACD,cAAI,MAAM;AACN,kBAAM,eAAA;AAAA,UACV,WAAW,CAAC,UAAU,UAAU,WAAW,CAAC,8BAA8B,MAAM,aAAa,GAAG;AAC5F,sBAAU,QAAQ,MAAA;AAAA,UACtB;AACA;AAAA,QAEJ,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,OAAO;AACR,cAAI,MAAM;AACN,kBAAM,eAAA;AAAA,UACV;AACA;AAAA,QACJ;AAAA,MAEA;AAIJ,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,cAAc,0BAA0B,KAAK,CAAC;AAAA,MAClE;AAEA,UACI,UACA,CAAC,SACA,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,CAAC,8BAA8B,MAAM,aAAa,GACpD;AACE,cAAM,eAAA;AACN,cAAM,eAAe,MAAM,QAAQ,YAAY,KAAK,SAAS,IAAI;AACjE,wBAAgB,iBAAiB,SAAY,eAAe,YAAY;AACxE,gBAAQ,IAAI;AAAA,MAChB;AAAA,IACJ;AAEA,QAAI,CAAC,MAAM,mBAAA,KAAwB,WAAW;AAC1C,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,UAAwB;AACjD,oBAAgB,KAAK;AAAA,EACzB;AAEA,QAAM,qBAAqB,CAAC,OAAwC,UAAwB;AACxF,UAAM,eAAA;AACN,oBAAgB,KAAK;AACrB,YAAQ,KAAK;AAAA,EACjB;AAEA,QAAM,WAAW;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,MAAM;AAAA,EAAA;AAGV,QAAM,QAAQ;AAAA,IACV,GAAG;AAAA,IACH,iBAAiB;AAAA;AAAA;AAAA,IAGjB,qBAAqB;AAAA;AAAA,IAErB,yBACI,iBAAiB,UAAa,KAAK,YAAY,IAAI,MAAM,QAAQ,OAAO,KAAK,YAAY,EAAE,KAAK,CAAC,IAAI;AAAA,IACzG,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,QAAQ,CAAC,YAAY,CAAC,WAAW,kBAAkB;AAAA,IACnD,UAAU,CAAC,YAAY,CAAC,WAAW,oBAAoB;AAAA,IACvD,SAAS,CAAC,YAAY,CAAC,WAAW,mBAAmB;AAAA,IACrD,kBAAkB,CAAC,YAAY,CAAC,WAAW,qBAAqB;AAAA,IAChE;AAAA,IACA,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,cAAc;AAAA,EAAA;AAGzB,QAAM,OAAmC;AAAA,IACrC,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,KAAK;AAAA,IACL,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAGX,QAAM,SAAS;AAAA,IACX,KAAK;AAAA,EAAA;AAGT,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,MACL;AAAA,MACA,cAAc;AAAA;AAAA,IAAA;AAAA,EAElB;AAER;"}
1	+ {"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue \| undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: _nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n valueRenderer,\n ...otherProps\n } = props;\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => nanoid(), []);\n const flattenedData = useFlattenedData(unfilteredData);\n\n const convertToInputValue = React.useCallback(\n (val: ScrollableListItemValue \| undefined): string => {\n const option = findByValue(flattenedData, val);\n if (typeof valueRenderer === 'function' && option) {\n return valueRenderer(option);\n }\n return defaultConvertToInputValue(val);\n },\n [valueRenderer, flattenedData]\n );\n\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline \|\| (inline && inputValue !== convertToInputValue(value)));\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number \| undefined>(\n inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n );\n\n const setInputValueByIndex = (index: number \| undefined, event?: string): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n const eventType = event ?? 'focusout';\n setInputValueByRef(inputRef.current, option.value, eventType);\n }\n }\n };\n\n const setCurrentValue = (index: number \| undefined, event?: string) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n if (option?.value === value) {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n } else {\n // if the selected option is not already selected, trigger blur event\n setInputValueByIndex(index, event);\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n const [prevValue, setPrevValue] = React.useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n\n if (value !== undefined) {\n // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n const renderedValue = convertToInputValue(value);\n if (renderedValue !== inputValue) {\n setInputValue(renderedValue);\n }\n } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n // so clear it. Text the user typed never matches the previous render, so it's preserved.\n if (inputValue !== '') {\n setInputValue('');\n }\n }\n }\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) \|\| 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n const findOption = React.useCallback(\n (inputVal: string): ScrollableListItem \| undefined => {\n // First try to find by raw value\n const itemByValue = findByValue(flattenedData, inputVal);\n if (itemByValue) {\n return itemByValue;\n }\n\n // If valueRenderer is provided, also try to match against rendered values\n if (valueRenderer) {\n return flattenedData.find(option => valueRenderer(option) === inputVal);\n }\n\n return undefined;\n },\n [flattenedData, valueRenderer]\n );\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n const item = findOption(event.target.value);\n\n // If the found item's value equals the current value, just update the display to rendered format\n // This handles the case where user types the raw value but valueRenderer shows something different\n // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n if (item && item.value === value) {\n setInputValue(convertToInputValue(value));\n if (props.onBlur) {\n props.onBlur(event);\n }\n return;\n }\n\n // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n if (onChange && event.target.value !== convertToInputValue(value)) {\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline \|\| (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n // This ensures Table3 won't react to these keys when using the Combobox\n if (\n isElementInsideTable3OrReport(event.currentTarget) &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n open\n ) {\n event.stopPropagation();\n }\n\n if (!event.ctrlKey && !event.metaKey) {\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n if (open) {\n // as focus is on input, need to prevent propagation to not close dialog.\n event.stopPropagation();\n }\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab': {\n // default focusout will trigger onBlur and we don't want to trigger it twice\n setCurrentValue(currentIndex, 'change');\n setOpen(false);\n return;\n }\n\n case 'Enter': {\n event.preventDefault();\n\n if (isElementInsideTable3OrReport(event.currentTarget)) {\n if (inline && !open) {\n setOpen(true);\n } else if (buttonRef.current && !open) {\n buttonRef.current.click();\n }\n }\n\n if (open) {\n // we need to focusout to trigger onBlur as we are not actually blurring the input\n setCurrentValue(currentIndex, 'focusout');\n setOpen(false);\n }\n\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n buttonRef.current.click();\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (\n inline &&\n !open &&\n (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') &&\n !isElementInsideTable3OrReport(event.currentTarget)\n ) {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n setOpen(true);\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...otherProps,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Select/useSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
1	+ {"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}

package/dist/components/Select/useSelect.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ type InternalListboxProps = ListboxProps & {
 type InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     ref: React.ForwardedRef<HTMLInputElement>;
 };
-type useSelect = Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'popover'> & {
+type useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {
     button: InternalButtonProps;
     listbox: InternalListboxProps;
     input: InternalInputProps;

package/dist/components/Select/useSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["i","value"],"mappings":"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"}
1	+ {"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["i","value"],"mappings":"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"}

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RowMoveIndicator.cjs","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type {\n Cell as ReactTableCell,\n TableMeta as ReactTableMeta,\n ColumnMeta as ReactTableColumnMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Icon } from '../../../../../Icon/Icon';\nimport type { LocalizationTexts } from '../../../../../Provider/Localization';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement ~~\| null~~>;\n isActiveRow: boolean;\n};\n\ntype Reason = 'search' \| 'sorting' \| 'filter' \| undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const table = cell.getContext().table;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const { title, description } = getMessageFromReason(texts, moveReason);\n\n let columnHeader = columnMeta.header;\n\n if (moveReason === 'sorting') {\n const sortedColumns = table.getState().sorting;\n const columnId = sortedColumns[0]?.id;\n\n if (columnId) {\n const sortedColumn = table.getColumn(columnId);\n if (sortedColumn) {\n columnHeader = (sortedColumn.columnDef.meta as ReactTableColumnMeta<TType, unknown>).header;\n }\n }\n }\n\n return (\n <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader)}>\n <span data-row-move-indicator>\n <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {title}\n </span>\n </Tooltip>\n );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n let title;\n let description;\n\n switch (reason) {\n case 'filter':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n\n case 'search':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n\n case 'sorting':\n title = texts.table3.editing.rowIndicator.rowWillMove;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n\n default:\n title = '';\n description = '';\n break;\n }\n\n return { title, description };\n}\n"],"names":["useLocalization","Tooltip","Icon"],"mappings":";;;;;;AAoBO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAUA,6BAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAc,KAAK,OAAO,UAAU,QAAQ,CAAA;AAClD,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjE,QAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,WAAW;AAE9B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAgB,aAAa,UAAU,KAA8C;AAAA,MACzF;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA,cAACC,mBAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,YAAY,EAAA,GAC3E,sBAAA,cAAC,UAAK,2BAAuB,KAAA,uCACxBC,KAAAA,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;;"}
1	+ {"version":3,"file":"RowMoveIndicator.cjs","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type {\n Cell as ReactTableCell,\n TableMeta as ReactTableMeta,\n ColumnMeta as ReactTableColumnMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Icon } from '../../../../../Icon/Icon';\nimport type { LocalizationTexts } from '../../../../../Provider/Localization';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement>;\n isActiveRow: boolean;\n};\n\ntype Reason = 'search' \| 'sorting' \| 'filter' \| undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const table = cell.getContext().table;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const { title, description } = getMessageFromReason(texts, moveReason);\n\n let columnHeader = columnMeta.header;\n\n if (moveReason === 'sorting') {\n const sortedColumns = table.getState().sorting;\n const columnId = sortedColumns[0]?.id;\n\n if (columnId) {\n const sortedColumn = table.getColumn(columnId);\n if (sortedColumn) {\n columnHeader = (sortedColumn.columnDef.meta as ReactTableColumnMeta<TType, unknown>).header;\n }\n }\n }\n\n return (\n <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader)}>\n <span data-row-move-indicator>\n <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {title}\n </span>\n </Tooltip>\n );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n let title;\n let description;\n\n switch (reason) {\n case 'filter':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n\n case 'search':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n\n case 'sorting':\n title = texts.table3.editing.rowIndicator.rowWillMove;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n\n default:\n title = '';\n description = '';\n break;\n }\n\n return { title, description };\n}\n"],"names":["useLocalization","Tooltip","Icon"],"mappings":";;;;;;AAoBO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAUA,6BAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAc,KAAK,OAAO,UAAU,QAAQ,CAAA;AAClD,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjE,QAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,WAAW;AAE9B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAgB,aAAa,UAAU,KAA8C;AAAA,MACzF;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA,cAACC,mBAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,YAAY,EAAA,GAC3E,sBAAA,cAAC,UAAK,2BAAuB,KAAA,uCACxBC,KAAAA,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;;"}

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { Cell as ReactTableCell } from '@tanstack/react-table';
 import { default as React } from 'react';
 type TableRowMoveIndicatorProps<TType = unknown> = {
     cell: ReactTableCell<TType, unknown>;
-    cellRef: React.RefObject<HTMLTableCellElement | null>;
+    cellRef: React.RefObject<HTMLTableCellElement>;
     isActiveRow: boolean;
 };
 export declare function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>): React.JSX.Element | null;

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type {\n Cell as ReactTableCell,\n TableMeta as ReactTableMeta,\n ColumnMeta as ReactTableColumnMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Icon } from '../../../../../Icon/Icon';\nimport type { LocalizationTexts } from '../../../../../Provider/Localization';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement ~~\| null~~>;\n isActiveRow: boolean;\n};\n\ntype Reason = 'search' \| 'sorting' \| 'filter' \| undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const table = cell.getContext().table;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const { title, description } = getMessageFromReason(texts, moveReason);\n\n let columnHeader = columnMeta.header;\n\n if (moveReason === 'sorting') {\n const sortedColumns = table.getState().sorting;\n const columnId = sortedColumns[0]?.id;\n\n if (columnId) {\n const sortedColumn = table.getColumn(columnId);\n if (sortedColumn) {\n columnHeader = (sortedColumn.columnDef.meta as ReactTableColumnMeta<TType, unknown>).header;\n }\n }\n }\n\n return (\n <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader)}>\n <span data-row-move-indicator>\n <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {title}\n </span>\n </Tooltip>\n );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n let title;\n let description;\n\n switch (reason) {\n case 'filter':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n\n case 'search':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n\n case 'sorting':\n title = texts.table3.editing.rowIndicator.rowWillMove;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n\n default:\n title = '';\n description = '';\n break;\n }\n\n return { title, description };\n}\n"],"names":["React"],"mappings":";;;;AAoBO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAc,KAAK,OAAO,UAAU,QAAQ,CAAA;AAClD,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjEA,iBAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,WAAW;AAE9B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAgB,aAAa,UAAU,KAA8C;AAAA,MACzF;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA,cAAC,WAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,YAAY,EAAA,GAC3EA,+BAAA,cAAC,UAAK,2BAAuB,KAAA,gDACxB,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;"}
1	+ {"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type {\n Cell as ReactTableCell,\n TableMeta as ReactTableMeta,\n ColumnMeta as ReactTableColumnMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Icon } from '../../../../../Icon/Icon';\nimport type { LocalizationTexts } from '../../../../../Provider/Localization';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement>;\n isActiveRow: boolean;\n};\n\ntype Reason = 'search' \| 'sorting' \| 'filter' \| undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const table = cell.getContext().table;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const { title, description } = getMessageFromReason(texts, moveReason);\n\n let columnHeader = columnMeta.header;\n\n if (moveReason === 'sorting') {\n const sortedColumns = table.getState().sorting;\n const columnId = sortedColumns[0]?.id;\n\n if (columnId) {\n const sortedColumn = table.getColumn(columnId);\n if (sortedColumn) {\n columnHeader = (sortedColumn.columnDef.meta as ReactTableColumnMeta<TType, unknown>).header;\n }\n }\n }\n\n return (\n <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader)}>\n <span data-row-move-indicator>\n <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {title}\n </span>\n </Tooltip>\n );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n let title;\n let description;\n\n switch (reason) {\n case 'filter':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n\n case 'search':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n\n case 'sorting':\n title = texts.table3.editing.rowIndicator.rowWillMove;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n\n default:\n title = '';\n description = '';\n break;\n }\n\n return { title, description };\n}\n"],"names":["React"],"mappings":";;;;AAoBO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAc,KAAK,OAAO,UAAU,QAAQ,CAAA;AAClD,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjEA,iBAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,WAAW;AAE9B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAgB,aAAa,UAAU,KAA8C;AAAA,MACzF;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA,cAAC,WAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,YAAY,EAAA,GAC3EA,+BAAA,cAAC,UAAK,2BAAuB,KAAA,gDACxB,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;"}

package/dist/components/Table3/components/Editing/Alert.cjs CHANGED Viewed

@@ -66,8 +66,9 @@ function Alert(props) {
     } catch {
     }
     let label = "";
-    if (rowIdentityColumn) {
-      label = String(row?.[rowIdentityColumn.id] ?? "");
+    const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id] : void 0;
+    if (rowIdentity !== null && rowIdentity !== void 0) {
+      label = String(rowIdentity);
     } else if (pendingChangeWithError.index !== void 0) {
       label = String(pendingChangeWithError.index + 1);
     }

package/dist/components/Table3/components/Editing/Alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.cjs","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { TableRef } from '../../../../primitives/Table/types';\nimport { Button } from '../../../Actions/Button/Button';\nimport type { AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { Alert as BaseAlert } from '../../../Alert/Alert';\nimport type { DialogProps } from '../../../Dialog/Dialog';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Inline } from '../../../Inline/Inline';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n table: ReactTable<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n const { scrollToIndex, table, tableRef, ...attributes } = props;\n const { texts } = useLocalization();\n const validationTexts = texts.table3.editing.validation;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string \| false>(false);\n // row to scroll to and focus once the filters have been reset and it becomes visible again\n const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string \| null>(null);\n const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n const visibleRows = table.getRowModel().rows;\n\n function getVisibleRowIndex(rowId: string) {\n return visibleRows.findIndex(row => row.id === rowId);\n }\n\n function scrollToRow(rowIndex: number) {\n tableMeta.rowActive.setRowActiveIndex(rowIndex);\n scrollToIndex(rowIndex, { align: 'center' });\n\n requestAnimationFrame(() => {\n const cell = tableRef.current?.querySelector(\n 'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n );\n\n if (cell) {\n (cell as HTMLElement).focus?.();\n }\n });\n }\n\n // generate the \"N unsaved entries\" title\n const title = (\n pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n // generate links to each invalid row, to go into the error message\n const links: React.ReactNode[] = [];\n const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n const rowIdentityColumn =\n tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n : undefined;\n\n pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n // if appropriate, concatenate the item with the text \"and\"\n if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n // Add space before and after `messageAnd` text\n links.push(` ${validationTexts.alert.messageAnd} `);\n }\n\n const handleClick = () => {\n const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n if (visibleIndex > -1) {\n scrollToRow(visibleIndex);\n } else {\n setShowFilterResetDialog(pendingChangeWithError.rowId);\n }\n };\n\n let tooltip;\n\n if (pendingChangeWithError.errors.row) {\n tooltip = pendingChangeWithError.errors.row;\n } else {\n const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n if (columnName && firstCellErrorColumnId) {\n tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n }\n }\n\n let row;\n try {\n row = table.getRow(pendingChangeWithError.rowId).original;\n } catch {\n // because of server loading, some rows may not be accessible\n }\n\n // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n let label = '';\n\n if (rowIdentityColumn) {\n label = String(row?.[rowIdentityColumn.id as keyof TType] ?? '');\n } else if (pendingChangeWithError.index !== undefined) {\n label = String(pendingChangeWithError.index + 1);\n }\n\n links.push(\n <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n {label}\n </span>\n </Tooltip>\n );\n\n // if appropriate, concatenate the item with the text \",\"\n if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n links.push(', ');\n }\n });\n\n // generate the \"Row N is incomplete and hasn't been saved\" error message\n const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n .split(/(\\[\\w+\\])/)\n .map(part => {\n if (part === '[COLUMN]') {\n return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n }\n\n if (part === '[ROW]') {\n return links;\n }\n\n return part;\n });\n\n const handleResetFilters = () => {\n const rowId = showFilterResetDialog;\n\n table.resetGlobalFilter();\n table.resetColumnFilters();\n\n // defer focusing until the row model has re-rendered with the filters cleared,\n // otherwise the row isn't in the model/DOM yet\n if (typeof rowId === 'string') {\n setPendingFocusRowId(rowId);\n }\n\n setShowFilterResetDialog(false);\n };\n\n // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n React.useEffect(() => {\n if (pendingFocusRowId === null) {\n return;\n }\n\n const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n if (visibleIndex > -1) {\n scrollToRow(visibleIndex);\n setPendingFocusRowId(null);\n }\n }, [pendingFocusRowId, visibleRows]);\n\n return (\n <>\n <BaseAlert {...attributes} state=\"error\">\n <span className=\"font-bold\">{title}</span> {message}\n </BaseAlert>\n <FilterResetDialog\n open={showFilterResetDialog !== false}\n onChange={() => setShowFilterResetDialog(false)}\n onSubmit={handleResetFilters}\n />\n </>\n );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n const { onSubmit: handleSubmit, ...dialogProps } = props;\n const { texts } = useLocalization();\n\n return (\n <Dialog {...dialogProps} size=\"xs\">\n <Dialog.Content aria-label={texts.table3.editing.validation.resetFiltersDialog.title}>\n <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n <Dialog.Footer>\n <Inline spacing={8} alignInline=\"end\">\n <Dialog.Close>\n <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n </Dialog.Close>\n <Button variant=\"primary\" onClick={handleSubmit}>\n {texts.table3.editing.validation.resetFiltersDialog.confirm}\n </Button>\n </Inline>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n}\n"],"names":["useLocalization","Tooltip","BaseAlert","Dialog","Inline","Button"],"mappings":"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"}
1	+ {"version":3,"file":"Alert.cjs","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { TableRef } from '../../../../primitives/Table/types';\nimport { Button } from '../../../Actions/Button/Button';\nimport type { AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { Alert as BaseAlert } from '../../../Alert/Alert';\nimport type { DialogProps } from '../../../Dialog/Dialog';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Inline } from '../../../Inline/Inline';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n table: ReactTable<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n const { scrollToIndex, table, tableRef, ...attributes } = props;\n const { texts } = useLocalization();\n const validationTexts = texts.table3.editing.validation;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string \| false>(false);\n // row to scroll to and focus once the filters have been reset and it becomes visible again\n const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string \| null>(null);\n const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n const visibleRows = table.getRowModel().rows;\n\n function getVisibleRowIndex(rowId: string) {\n return visibleRows.findIndex(row => row.id === rowId);\n }\n\n function scrollToRow(rowIndex: number) {\n tableMeta.rowActive.setRowActiveIndex(rowIndex);\n scrollToIndex(rowIndex, { align: 'center' });\n\n requestAnimationFrame(() => {\n const cell = tableRef.current?.querySelector(\n 'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n );\n\n if (cell) {\n (cell as HTMLElement).focus?.();\n }\n });\n }\n\n // generate the \"N unsaved entries\" title\n const title = (\n pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n // generate links to each invalid row, to go into the error message\n const links: React.ReactNode[] = [];\n const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n const rowIdentityColumn =\n tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n : undefined;\n\n pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n // if appropriate, concatenate the item with the text \"and\"\n if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n // Add space before and after `messageAnd` text\n links.push(` ${validationTexts.alert.messageAnd} `);\n }\n\n const handleClick = () => {\n const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n if (visibleIndex > -1) {\n scrollToRow(visibleIndex);\n } else {\n setShowFilterResetDialog(pendingChangeWithError.rowId);\n }\n };\n\n let tooltip;\n\n if (pendingChangeWithError.errors.row) {\n tooltip = pendingChangeWithError.errors.row;\n } else {\n const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n if (columnName && firstCellErrorColumnId) {\n tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n }\n }\n\n let row;\n try {\n row = table.getRow(pendingChangeWithError.rowId).original;\n } catch {\n // because of server loading, some rows may not be accessible\n }\n\n // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n let label = '';\n\n const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : undefined;\n\n if (rowIdentity !== null && rowIdentity !== undefined) {\n label = String(rowIdentity);\n } else if (pendingChangeWithError.index !== undefined) {\n label = String(pendingChangeWithError.index + 1);\n }\n\n links.push(\n <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n {label}\n </span>\n </Tooltip>\n );\n\n // if appropriate, concatenate the item with the text \",\"\n if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n links.push(', ');\n }\n });\n\n // generate the \"Row N is incomplete and hasn't been saved\" error message\n const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n .split(/(\\[\\w+\\])/)\n .map(part => {\n if (part === '[COLUMN]') {\n return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n }\n\n if (part === '[ROW]') {\n return links;\n }\n\n return part;\n });\n\n const handleResetFilters = () => {\n const rowId = showFilterResetDialog;\n\n table.resetGlobalFilter();\n table.resetColumnFilters();\n\n // defer focusing until the row model has re-rendered with the filters cleared,\n // otherwise the row isn't in the model/DOM yet\n if (typeof rowId === 'string') {\n setPendingFocusRowId(rowId);\n }\n\n setShowFilterResetDialog(false);\n };\n\n // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n React.useEffect(() => {\n if (pendingFocusRowId === null) {\n return;\n }\n\n const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n if (visibleIndex > -1) {\n scrollToRow(visibleIndex);\n setPendingFocusRowId(null);\n }\n }, [pendingFocusRowId, visibleRows]);\n\n return (\n <>\n <BaseAlert {...attributes} state=\"error\">\n <span className=\"font-bold\">{title}</span> {message}\n </BaseAlert>\n <FilterResetDialog\n open={showFilterResetDialog !== false}\n onChange={() => setShowFilterResetDialog(false)}\n onSubmit={handleResetFilters}\n />\n </>\n );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n const { onSubmit: handleSubmit, ...dialogProps } = props;\n const { texts } = useLocalization();\n\n return (\n <Dialog {...dialogProps} size=\"xs\">\n <Dialog.Content aria-label={texts.table3.editing.validation.resetFiltersDialog.title}>\n <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n <Dialog.Footer>\n <Inline spacing={8} alignInline=\"end\">\n <Dialog.Close>\n <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n </Dialog.Close>\n <Button variant=\"primary\" onClick={handleSubmit}>\n {texts.table3.editing.validation.resetFiltersDialog.confirm}\n </Button>\n </Inline>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n}\n"],"names":["useLocalization","Tooltip","BaseAlert","Dialog","Inline","Button"],"mappings":"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"}

package/dist/components/Table3/components/Editing/Alert.js CHANGED Viewed

@@ -64,8 +64,9 @@ function Alert(props) {
     } catch {
     }
     let label = "";
-    if (rowIdentityColumn) {
-      label = String(row?.[rowIdentityColumn.id] ?? "");
+    const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id] : void 0;
+    if (rowIdentity !== null && rowIdentity !== void 0) {
+      label = String(rowIdentity);
     } else if (pendingChangeWithError.index !== void 0) {
       label = String(pendingChangeWithError.index + 1);
     }