npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-8e09ade → 0.0.0-canary-261df01 - Mend

@cube-dev/ui-kit 0.0.0-canary-8e09ade → 0.0.0-canary-261df01

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 (430) hide show

package/dist/components/fields/CommandTextArea/CommandTextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandTextArea.js","names":["mergeProps","BaseSection"],"sources":["../../../../src/components/fields/CommandTextArea/CommandTextArea.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles } from '@tenphi/tasty';\nimport React, {\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFilter, useTextField } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useProviderProps } from '../../../provider';\nimport { generateRandomId } from '../../../utils/random';\nimport { chain, mergeProps, useCombinedRefs } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { CollectionItem as Item } from '../../CollectionItem';\nimport { useFieldProps, useFormProps } from '../../form';\nimport {\n filterCollectionNodes,\n getEdgeVisibleKey,\n getNextVisibleKey,\n ListBoxPopover,\n ListStateLike,\n markKeyboardFocus,\n TextFilterFn,\n useCompositeFocus,\n} from '../ListBoxPopover';\nimport {\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput/TextInputBase';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** A single trigger character with optional placement constraint. /\nexport interface CommandTrigger {\n /* The character that opens the autocomplete (e.g. `/` or `@`). /\n char: string;\n /\n When true, the trigger token must start at index 0 of the input\n * (whole-message slash commands). When false, the token may appear after\n * any whitespace, anywhere in the text (Slack/Notion-style).\n /\n atLineStart?: boolean;\n}\n\n/* Result of scanning the textarea for an active trigger token. /\nexport interface ActiveToken {\n /* The matched trigger descriptor. /\n trigger: CommandTrigger;\n /* The active token text, INCLUDING the trigger char (e.g. `/cle`). /\n token: string;\n /* Inclusive start index of the token in the textarea value. /\n start: number;\n /* Exclusive end index of the token (caret position while typing). /\n end: number;\n}\n\nexport type CommandTextAreaFilterFn = TextFilterFn;\n\nexport interface CubeCommandTextAreaProps<T>\n extends Omit<CubeTextInputBaseProps, 'children' \| 'multiLine'> {\n /* Whether the textarea should resize to fit its content. /\n autoSize?: boolean;\n /* Max visible rows when `autoSize` is true. Defaults to 10. /\n maxRows?: number;\n /* Number of visible rows. Defaults to 3. /\n rows?: number;\n\n /* Command/option source (alternative to JSX children). /\n items?: Iterable<T>;\n /* Static items or a render function (same shape as ComboBox/ListBox). /\n children?: ReactNode \| ((item: T) => ReactElement);\n /\n Triggers that open the autocomplete. Defaults to a single slash command\n * that must start at the beginning of the input.\n /\n triggers?: CommandTrigger[];\n /\n Custom filter. Pass `false` to disable internal filtering (server-side).\n /\n filter?: CommandTextAreaFilterFn \| false;\n /\n Fired when the user picks a command (Enter/Tab/click). The option's\n * `textValue` is also inserted into the textarea regardless.\n /\n onCommand?: (key: Key, item: { textValue: string; [k: string]: any }) => void;\n /* Insert a trailing space after the chosen command. Defaults to true. /\n insertSpaceAfter?: boolean;\n /* Keys of disabled options. /\n disabledKeys?: Iterable<Key>;\n /* Popover placement. Chat inputs usually want `top`. Defaults to `top`. /\n direction?: 'bottom' \| 'top';\n /* Whether the popover should flip when overflowing. Defaults to true. /\n shouldFlip?: boolean;\n /* Offset between the textarea and the popover. /\n overlayOffset?: number;\n /* Padding between the popover and the viewport edge. /\n containerPadding?: number;\n\n // Refs\n /* Ref for the textarea element. /\n inputRef?: RefObject<HTMLTextAreaElement>;\n /* Ref for the wrapper element (popover anchor). /\n wrapperRef?: RefObject<HTMLDivElement>;\n /* Ref for the popover overlay element. /\n popoverRef?: RefObject<HTMLDivElement>;\n /* Ref for the listbox element. /\n listBoxRef?: RefObject<HTMLDivElement>;\n /* Ref through which the internal list state is exposed. /\n listStateRef?: RefObject<ListStateLike \| null>;\n\n // Style props\n overlayStyles?: any;\n listBoxStyles?: any;\n optionStyles?: any;\n sectionStyles?: any;\n headingStyles?: any;\n}\n\nconst DEFAULT_TRIGGERS: CommandTrigger[] = [{ char: '/', atLineStart: true }];\n\n// ---------------------------------------------------------------------------\n// Trigger parsing\n// ---------------------------------------------------------------------------\n\n/\n Inspect the textarea contents up to the caret and find the active trigger\n * token, if any. The token includes the trigger character and ends at the\n * caret (so it grows as the user types). A token ends at whitespace or the end\n * of the input.\n /\nexport function parseActiveToken(\n value: string,\n caret: number,\n triggers: CommandTrigger[],\n): ActiveToken \| null {\n if (!triggers.length) return null;\n const before = value.slice(0, caret);\n const after = value.slice(caret);\n\n for (const trigger of triggers) {\n const ch = trigger.char;\n if (trigger.atLineStart) {\n // Whole-message command: token must start at index 0 and contain no\n // whitespace up to the caret.\n if (value[0] !== ch) continue;\n // No whitespace allowed within the token.\n const wsIndex = before.slice(1).search(/\\s/);\n if (wsIndex !== -1) continue;\n // The rest of the input (after caret) must also not yet contain a\n // whitespace boundary that would mean the command is \"finished\" — but\n // since the caret is the typing position, the token runs from 0 to the\n // first whitespace at/after... we keep it simple: token = value up to\n // caret, provided no whitespace in `before` past the trigger char and\n // the char after caret (if any) is not whitespace-only trailing.\n const token = before;\n if (!token) continue;\n return { trigger, token, start: 0, end: caret };\n }\n\n // Caret-token mode: find the last trigger char that begins a token at or\n // after a line start / whitespace boundary, with no whitespace between it\n // and the caret.\n const match = /(?:^\|\\s)([\\S]+)$/.exec(before);\n if (!match) continue;\n const candidate = match[1];\n if (candidate[0] !== ch) continue;\n // Ensure the token hasn't already been closed by whitespace after caret.\n // (If there's non-whitespace after the caret, the user is mid-token.)\n const start = caret - candidate.length;\n // If immediately after the caret there's whitespace (or end), the token is\n // \"complete\" — still offer completions as long as the caret sits on the\n // token. We accept it.\n void after;\n return { trigger, token: candidate, start, end: caret };\n }\n\n return null;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nfunction CommandTextArea<T extends object>(\n props: WithNullableValue<CubeCommandTextAreaProps<T>>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n\n let {\n qa,\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n placeholder,\n // command props\n items,\n children: renderChildren,\n triggers = DEFAULT_TRIGGERS,\n filter,\n onCommand,\n insertSpaceAfter = true,\n disabledKeys,\n direction = 'top',\n shouldFlip = true,\n overlayOffset = 8,\n containerPadding = 8,\n overlayStyles,\n listBoxStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n wrapperRef: propsWrapperRef,\n popoverRef: propsPopoverRef,\n listBoxRef: propsListBoxRef,\n listStateRef: propsListStateRef,\n onKeyDown,\n onFocus,\n onBlur,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n // ---- refs -------------------------------------------------------------\n const localInputRef = useRef<HTMLTextAreaElement>(null);\n const inputRef = (propsInputRef ??\n localInputRef) as RefObject<HTMLTextAreaElement>;\n const wrapperRef = useCombinedRefs(propsWrapperRef);\n const popoverRef = useCombinedRefs(propsPopoverRef);\n const listBoxRef = useCombinedRefs(propsListBoxRef);\n const listStateRef = (propsListStateRef ??\n useRef<ListStateLike \| null>(null)) as RefObject<ListStateLike \| null>;\n\n const commandTextAreaId = useMemo(() => generateRandomId(), []);\n\n // ---- controlled / uncontrolled value ----------------------------------\n // When no `value` is provided (standalone, no form), track the text\n // internally so trigger detection and commit still work.\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useState<string>(\n (value as string) ?? '',\n );\n const effectiveValue: string = isControlled\n ? (value as string)\n : internalValue;\n const handleChange = useEvent((next: string) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n });\n\n // ---- children / items normalization -----------------------------------\n let children: ReactNode = renderChildren as ReactNode;\n const renderFn = renderChildren as unknown;\n if (items && typeof renderFn === 'function') {\n const itemsArray = Array.from(items as Iterable<any>);\n children = itemsArray.map((item, idx) => {\n const rendered = (renderFn as (it: any) => ReactNode)(item);\n if (\n React.isValidElement(rendered) &&\n (rendered as ReactElement).key == null\n ) {\n return React.cloneElement(rendered as ReactElement, {\n key: (rendered as any)?.key ?? item?.key ?? idx,\n });\n }\n return rendered as ReactNode;\n });\n }\n\n // ---- caret tracking ---------------------------------------------------\n // The caret drives trigger detection. We keep it in state so a caret move\n // (arrow keys without typing) re-renders and recomputes the active token.\n const [caret, setCaret] = useState(() => effectiveValue.length);\n const syncCaret = useEvent(() => {\n const el = inputRef.current;\n if (!el) return;\n setCaret(el.selectionStart ?? el.value.length);\n });\n\n // ---- trigger detection ------------------------------------------------\n const activeToken = useMemo(\n () => parseActiveToken(effectiveValue, caret, triggers),\n [effectiveValue, caret, triggers],\n );\n\n const term = activeToken?.token ?? '';\n\n // ---- filtering --------------------------------------------------------\n const { contains } = useFilter({ sensitivity: 'base' });\n const textFilterFn = useMemo<CommandTextAreaFilterFn>(\n () => (filter === false ? () => true : filter \|\| contains),\n [filter, contains],\n );\n\n // Local collection used to read option textValues and to count matches.\n const localCollectionState = useListState({\n children: children as any,\n items: items as any,\n selectionMode: 'none',\n });\n\n const filterFn = useCallback(\n (nodes: Iterable<any>) => filterCollectionNodes(nodes, term, textFilterFn),\n [term, textFilterFn],\n );\n\n // Count filtered options (flatten sections) to decide whether to show.\n const filteredCount = useMemo(() => {\n if (!activeToken) return 0;\n const filtered = filterFn(localCollectionState.collection);\n let count = 0;\n for (const node of filtered as Iterable<any>) {\n if (node.type === 'section' && node.childNodes) {\n for (const child of node.childNodes) {\n if (child.type === 'item') count++;\n }\n } else if (node.type === 'item') {\n count++;\n }\n }\n return count;\n }, [activeToken, filterFn, localCollectionState.collection]);\n\n // ---- dismiss handling (Escape keeps the text but hides the popover) ---\n const [dismissedToken, setDismissedToken] = useState<string \| null>(null);\n // Bumped whenever we move the virtual focus so the textarea's\n // `aria-activedescendant` (read from the ListBox's stateRef at render time)\n // stays in sync — the ListBox's own state update does not re-render us.\n const [, setFocusTick] = useState(0);\n const bumpFocus = useEvent(() => setFocusTick((t) => t + 1));\n // Reset dismissal whenever the active token changes (user typed/backspaced).\n useEffect(() => {\n setDismissedToken((prev) =>\n prev != null && activeToken?.token !== prev ? null : prev,\n );\n }, [activeToken?.token]);\n\n const isCommandMode = !!activeToken && activeToken.token !== dismissedToken;\n const shouldShowPopover = isCommandMode && filteredCount > 0;\n\n // ---- height autosize (mirrors TextArea) -------------------------------\n const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n if (!textarea \|\| !autoSize) return;\n\n textarea.style.height = 'auto';\n const computedStyle = getComputedStyle(textarea);\n const paddingTop = parseFloat(computedStyle.paddingTop) \|\| 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) \|\| 0;\n const borderTop = parseFloat(computedStyle.borderTopWidth) \|\| 0;\n const borderBottom = parseFloat(computedStyle.borderBottomWidth) \|\| 0;\n const lineHeight = parseInt(computedStyle.lineHeight) \|\| 20;\n const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\n const computedRows = Math.ceil(contentHeight / lineHeight);\n const targetRows = Math.max(Math.min(computedRows, maxRows), rows);\n const totalHeight =\n targetRows lineHeight +\n paddingTop +\n paddingBottom +\n borderTop +\n borderBottom;\n textarea.style.height = `${totalHeight}px`;\n });\n\n // ---- useTextField (ARIA wiring for the textarea) ----------------------\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value: effectiveValue,\n placeholder,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(handleChange, adjustHeight),\n inputElementType: 'textarea',\n } as any,\n inputRef as any,\n );\n\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n useEnvironmentalEffect(() => {\n if (!autoSize \|\| !inputRef.current) return;\n adjustHeight();\n const resizeObserver = new ResizeObserver(adjustHeight);\n resizeObserver.observe(inputRef.current);\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef.current]);\n\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [effectiveValue]);\n\n // ---- caret restore after commit --------------------------------------\n const pendingCaretRef = useRef<number \| null>(null);\n useEnvironmentalEffect(() => {\n if (pendingCaretRef.current != null && inputRef.current) {\n const pos = pendingCaretRef.current;\n pendingCaretRef.current = null;\n inputRef.current.focus();\n inputRef.current.setSelectionRange(pos, pos);\n setCaret(pos);\n }\n }, [effectiveValue]);\n\n // ---- helpers ----------------------------------------------------------\n const getItemTextValue = useCallback(\n (key: Key): string => {\n const item = localCollectionState?.collection?.getItem(key);\n return item?.textValue \|\| String(key);\n },\n [localCollectionState?.collection],\n );\n\n // ---- commit (insert the chosen option's literal value) ---------------\n const commit = useEvent((key: Key) => {\n const listState = listStateRef.current;\n const textValue = getItemTextValue(key);\n const token = activeToken;\n const el = inputRef.current;\n\n if (token) {\n const next =\n effectiveValue.slice(0, token.start) +\n textValue +\n (insertSpaceAfter ? ' ' : '') +\n effectiveValue.slice(token.end);\n const caretPos =\n token.start + textValue.length + (insertSpaceAfter ? 1 : 0);\n pendingCaretRef.current = caretPos;\n handleChange(next);\n // If controlled, caret is restored by the effect above; if not, set now.\n if (el) {\n el.focus();\n try {\n el.setSelectionRange(caretPos, caretPos);\n } catch {\n /* noop */\n }\n }\n } else if (el) {\n // Fallback: insert at caret.\n const start = el.selectionStart ?? effectiveValue.length;\n const end = el.selectionEnd ?? effectiveValue.length;\n const next =\n effectiveValue.slice(0, start) +\n textValue +\n (insertSpaceAfter ? ' ' : '') +\n effectiveValue.slice(end);\n const caretPos = start + textValue.length + (insertSpaceAfter ? 1 : 0);\n pendingCaretRef.current = caretPos;\n handleChange(next);\n }\n\n setDismissedToken(null);\n onCommand?.(key, {\n textValue,\n ...(listState?.collection?.getItem(key)?.props ?? {}),\n });\n });\n\n // ---- keyboard navigation (only while the popover is open) -------------\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n onKeyDown?.(e);\n if (e.defaultPrevented) return;\n\n if (!shouldShowPopover) {\n // While not in command mode, the textarea behaves normally; but clear\n // any dismissal when the user edits.\n return;\n }\n\n const listState = listStateRef.current;\n\n if (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp') {\n if (!listState) return;\n e.preventDefault();\n const nextKey = getNextVisibleKey(\n listState,\n e.key === 'ArrowDown' ? 1 : -1,\n );\n if (nextKey != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(nextKey);\n bumpFocus();\n }\n } else if (e.key === 'Home' \|\| e.key === 'End') {\n if (!listState) return;\n e.preventDefault();\n const edgeKey = getEdgeVisibleKey(\n listState,\n e.key === 'Home' ? 'first' : 'last',\n );\n if (edgeKey != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(edgeKey);\n bumpFocus();\n }\n } else if (e.key === 'Enter' \|\| e.key === 'Tab') {\n if (!listState) return;\n const focused = listState.selectionManager.focusedKey;\n if (focused != null) {\n e.preventDefault();\n commit(focused);\n }\n // Otherwise pass through (newline / form submit / tab navigation).\n } else if (e.key === 'Escape') {\n e.preventDefault();\n if (activeToken) {\n setDismissedToken(activeToken.token);\n }\n }\n },\n [shouldShowPopover, activeToken, commit, onKeyDown, listStateRef],\n );\n\n // ---- initial focus on the first option when the popover opens ---------\n const focusInitAttemptsRef = useRef(0);\n useLayoutEffect(() => {\n if (!shouldShowPopover) return;\n focusInitAttemptsRef.current = 0;\n\n const tick = () => {\n if (!shouldShowPopover) return;\n const listState = listStateRef.current;\n if (!listState) {\n focusInitAttemptsRef.current += 1;\n if (focusInitAttemptsRef.current < 8) {\n requestAnimationFrame(tick);\n }\n return;\n }\n if (listState.selectionManager.focusedKey == null) {\n const first = getEdgeVisibleKey(listState, 'first');\n if (first != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(first);\n bumpFocus();\n }\n }\n };\n\n requestAnimationFrame(() => requestAnimationFrame(tick));\n }, [shouldShowPopover]);\n\n // ---- composite focus (wrapper + portaled popover) ---------------------\n const { compositeFocusProps } = useCompositeFocus({\n wrapperRef: wrapperRef as RefObject<HTMLElement>,\n popoverRef: popoverRef as RefObject<HTMLElement>,\n onFocus,\n onBlur,\n isDisabled,\n });\n\n // ---- aria-activedescendant -------------------------------------------\n const focusedKey = listStateRef.current?.selectionManager.focusedKey ?? null;\n const listBoxId = `CommandTextAreaListBox-${commandTextAreaId}`;\n\n // ---- popover width ----------------------------------------------------\n // The virtualized ListBox has no intrinsic width, so an overlay sized to\n // `max-content` collapses to a sliver. We give the popover a concrete\n // default width (independent of the textarea) and a real-pixel min-width\n // derived from the textarea wrapper, so it is never narrower than the\n // input. The user's `overlayStyles` still win on top.\n const anchorWidth = wrapperRef.current?.offsetWidth ?? 0;\n const popoverOverlayStyles: Styles = {\n width: '40x',\n maxWidth: '50vw',\n minWidth: anchorWidth ? `${anchorWidth}px` : '40x',\n ...overlayStyles,\n };\n\n // ---- assemble input props ---------------------------------------------\n const commandInputProps = mergeProps(inputProps, {\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': shouldShowPopover,\n 'aria-haspopup': 'listbox',\n 'aria-controls': shouldShowPopover ? listBoxId : undefined,\n 'aria-activedescendant':\n shouldShowPopover && focusedKey != null\n ? `ListBoxItem-${focusedKey}`\n : undefined,\n onKeyDown: onKeyDownHandler,\n onSelect: syncCaret,\n onKeyUp: syncCaret,\n onClick: syncCaret,\n 'data-input-type': 'command-textarea',\n });\n\n // ---- render -----------------------------------------------------------\n const field = (\n <TextInputBase\n ref={ref as any}\n {...otherProps}\n multiLine\n qa={qa}\n inputRef={inputRef}\n wrapperRef={wrapperRef}\n wrapperProps={compositeFocusProps}\n labelProps={mergedLabelProps}\n inputProps={commandInputProps}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n\n return (\n <>\n {field}\n <ListBoxPopover\n isOpen={shouldShowPopover}\n triggerRef={wrapperRef as RefObject<HTMLElement>}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n direction={direction}\n shouldFlip={shouldFlip}\n overlayOffset={overlayOffset}\n containerPadding={containerPadding}\n listBoxId={listBoxId}\n overlayStyles={popoverOverlayStyles}\n listBoxStyles={listBoxStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n isDisabled={isDisabled}\n disabledKeys={disabledKeys}\n items={items as any}\n listStateRef={listStateRef}\n ariaLabel={\n (props as any)['aria-label'] \|\|\n (typeof otherProps.label === 'string' ? otherProps.label : 'Commands')\n }\n compositeFocusProps={compositeFocusProps}\n filter={filterFn}\n onClose={() => {\n if (activeToken) setDismissedToken(activeToken.token);\n }}\n onSelectionChange={(selection) => {\n const key = Array.isArray(selection) ? selection[0] : selection;\n if (key != null) commit(key);\n }}\n >\n {children as any}\n </ListBoxPopover>\n </>\n );\n}\n\nconst _CommandTextArea = forwardRef(CommandTextArea) as <T>(\n props: CubeCommandTextAreaProps<T> & {\n ref?: ForwardedRef<HTMLElement>;\n },\n) => ReactElement;\n\nObject.assign(_CommandTextArea, {\n Item,\n Section: BaseSection,\n displayName: 'CommandTextArea',\n});\n\nObject.defineProperty(_CommandTextArea, 'cubeInputType', {\n value: 'CommandTextArea',\n enumerable: false,\n configurable: false,\n});\n\nexport { _CommandTextArea as CommandTextArea };\n"],"mappings":"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"}
1	+ {"version":3,"file":"CommandTextArea.js","names":["mergeProps","BaseSection"],"sources":["../../../../src/components/fields/CommandTextArea/CommandTextArea.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles } from '@tenphi/tasty';\nimport React, {\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFilter, useTextField } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useProviderProps } from '../../../provider';\nimport { generateRandomId } from '../../../utils/random';\nimport { chain, mergeProps, useCombinedRefs } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { CollectionItem as Item } from '../../CollectionItem';\nimport { useFieldProps, useFormProps } from '../../form';\nimport {\n filterCollectionNodes,\n getEdgeVisibleKey,\n getNextVisibleKey,\n ListBoxPopover,\n ListStateLike,\n markKeyboardFocus,\n TextFilterFn,\n useCompositeFocus,\n} from '../ListBoxPopover';\nimport {\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput/TextInputBase';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** A single trigger character with optional placement constraint. /\nexport interface CommandTrigger {\n /* The character that opens the autocomplete (e.g. `/` or `@`). /\n char: string;\n /\n When true, the trigger token must start at index 0 of the input\n * (whole-message slash commands). When false, the token may appear after\n * any whitespace, anywhere in the text (Slack/Notion-style).\n /\n atLineStart?: boolean;\n}\n\n/* Result of scanning the textarea for an active trigger token. /\nexport interface ActiveToken {\n /* The matched trigger descriptor. /\n trigger: CommandTrigger;\n /* The active token text, INCLUDING the trigger char (e.g. `/cle`). /\n token: string;\n /* Inclusive start index of the token in the textarea value. /\n start: number;\n /* Exclusive end index of the token (caret position while typing). /\n end: number;\n}\n\nexport type CommandTextAreaFilterFn = TextFilterFn;\n\nexport interface CubeCommandTextAreaProps<T>\n extends Omit<CubeTextInputBaseProps, 'children' \| 'multiLine'> {\n /* Whether the textarea should resize to fit its content. /\n autoSize?: boolean;\n /* Max visible rows when `autoSize` is true. Defaults to 10. /\n maxRows?: number;\n /* Number of visible rows. Defaults to 3. /\n rows?: number;\n\n /* Command/option source (alternative to JSX children). /\n items?: Iterable<T>;\n /* Static items or a render function (same shape as ComboBox/ListBox). /\n children?: ReactNode \| ((item: T) => ReactElement);\n /\n Triggers that open the autocomplete. Defaults to a single slash command\n * that must start at the beginning of the input.\n /\n triggers?: CommandTrigger[];\n /\n Custom filter. Pass `false` to disable internal filtering (server-side).\n /\n filter?: CommandTextAreaFilterFn \| false;\n /\n Fired when the user picks a command (Enter/Tab/click). The option's\n * `textValue` is also inserted into the textarea regardless.\n /\n onCommand?: (key: Key, item: { textValue: string; [k: string]: any }) => void;\n /* Insert a trailing space after the chosen command. Defaults to true. /\n insertSpaceAfter?: boolean;\n /* Keys of disabled options. /\n disabledKeys?: Iterable<Key>;\n /* Popover placement. Chat inputs usually want `top`. Defaults to `top`. /\n direction?: 'bottom' \| 'top';\n /* Whether the popover should flip when overflowing. Defaults to true. /\n shouldFlip?: boolean;\n /* Offset between the textarea and the popover. /\n overlayOffset?: number;\n /* Padding between the popover and the viewport edge. /\n containerPadding?: number;\n\n // Refs\n /* Ref for the textarea element. /\n inputRef?: RefObject<HTMLTextAreaElement>;\n /* Ref for the wrapper element (popover anchor). /\n wrapperRef?: RefObject<HTMLDivElement>;\n /* Ref for the popover overlay element. /\n popoverRef?: RefObject<HTMLDivElement>;\n /* Ref for the listbox element. /\n listBoxRef?: RefObject<HTMLDivElement>;\n /* Ref through which the internal list state is exposed. /\n listStateRef?: RefObject<ListStateLike \| null>;\n\n // Style props\n overlayStyles?: any;\n listBoxStyles?: any;\n optionStyles?: any;\n sectionStyles?: any;\n headingStyles?: any;\n}\n\nconst DEFAULT_TRIGGERS: CommandTrigger[] = [{ char: '/', atLineStart: true }];\n\n// ---------------------------------------------------------------------------\n// Trigger parsing\n// ---------------------------------------------------------------------------\n\n/\n Inspect the textarea contents up to the caret and find the active trigger\n * token, if any. The token includes the trigger character and ends at the\n * caret (so it grows as the user types). A token ends at whitespace or the end\n * of the input.\n /\nexport function parseActiveToken(\n value: string,\n caret: number,\n triggers: CommandTrigger[],\n): ActiveToken \| null {\n if (!triggers.length) return null;\n const before = value.slice(0, caret);\n const after = value.slice(caret);\n\n for (const trigger of triggers) {\n const ch = trigger.char;\n if (trigger.atLineStart) {\n // Whole-message command: token must start at index 0 and contain no\n // whitespace up to the caret.\n if (value[0] !== ch) continue;\n // No whitespace allowed within the token.\n const wsIndex = before.slice(1).search(/\\s/);\n if (wsIndex !== -1) continue;\n // The rest of the input (after caret) must also not yet contain a\n // whitespace boundary that would mean the command is \"finished\" — but\n // since the caret is the typing position, the token runs from 0 to the\n // first whitespace at/after... we keep it simple: token = value up to\n // caret, provided no whitespace in `before` past the trigger char and\n // the char after caret (if any) is not whitespace-only trailing.\n const token = before;\n if (!token) continue;\n return { trigger, token, start: 0, end: caret };\n }\n\n // Caret-token mode: find the last trigger char that begins a token at or\n // after a line start / whitespace boundary, with no whitespace between it\n // and the caret.\n const match = /(?:^\|\\s)([\\S]+)$/.exec(before);\n if (!match) continue;\n const candidate = match[1];\n if (candidate[0] !== ch) continue;\n // Ensure the token hasn't already been closed by whitespace after caret.\n // (If there's non-whitespace after the caret, the user is mid-token.)\n const start = caret - candidate.length;\n // If immediately after the caret there's whitespace (or end), the token is\n // \"complete\" — still offer completions as long as the caret sits on the\n // token. We accept it.\n void after;\n return { trigger, token: candidate, start, end: caret };\n }\n\n return null;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nfunction CommandTextArea<T extends object>(\n props: WithNullableValue<CubeCommandTextAreaProps<T>>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n\n let {\n qa,\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n placeholder,\n // command props\n items,\n children: renderChildren,\n triggers = DEFAULT_TRIGGERS,\n filter,\n onCommand,\n insertSpaceAfter = true,\n disabledKeys,\n direction = 'top',\n shouldFlip = true,\n overlayOffset = 8,\n containerPadding = 8,\n overlayStyles,\n listBoxStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n wrapperRef: propsWrapperRef,\n popoverRef: propsPopoverRef,\n listBoxRef: propsListBoxRef,\n listStateRef: propsListStateRef,\n onKeyDown,\n onFocus,\n onBlur,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n // ---- refs -------------------------------------------------------------\n const localInputRef = useRef<HTMLTextAreaElement>(null);\n const inputRef = (propsInputRef ??\n localInputRef) as RefObject<HTMLTextAreaElement>;\n const wrapperRef = useCombinedRefs(propsWrapperRef);\n const popoverRef = useCombinedRefs(propsPopoverRef);\n const listBoxRef = useCombinedRefs(propsListBoxRef);\n const listStateRef = (propsListStateRef ??\n useRef<ListStateLike \| null>(null)) as RefObject<ListStateLike \| null>;\n\n const commandTextAreaId = useMemo(() => generateRandomId(), []);\n\n // ---- controlled / uncontrolled value ----------------------------------\n // When no `value` is provided (standalone, no form), track the text\n // internally so trigger detection and commit still work.\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useState<string>(\n (value as string) ?? '',\n );\n const effectiveValue: string = isControlled\n ? (value as string)\n : internalValue;\n const handleChange = useEvent((next: string) => {\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n });\n\n // ---- children / items normalization -----------------------------------\n let children: ReactNode = renderChildren as ReactNode;\n const renderFn = renderChildren as unknown;\n if (items && typeof renderFn === 'function') {\n const itemsArray = Array.from(items as Iterable<any>);\n children = itemsArray.map((item, idx) => {\n const rendered = (renderFn as (it: any) => ReactNode)(item);\n if (\n React.isValidElement(rendered) &&\n (rendered as ReactElement).key == null\n ) {\n return React.cloneElement(rendered as ReactElement, {\n key: (rendered as any)?.key ?? item?.key ?? idx,\n });\n }\n return rendered as ReactNode;\n });\n }\n\n // ---- caret tracking ---------------------------------------------------\n // The caret drives trigger detection. We keep it in state so a caret move\n // (arrow keys without typing) re-renders and recomputes the active token.\n const [caret, setCaret] = useState(() => effectiveValue.length);\n const syncCaret = useEvent(() => {\n const el = inputRef.current;\n if (!el) return;\n setCaret(el.selectionStart ?? el.value.length);\n });\n\n // ---- trigger detection ------------------------------------------------\n const activeToken = useMemo(\n () => parseActiveToken(effectiveValue, caret, triggers),\n [effectiveValue, caret, triggers],\n );\n\n // The active token includes the trigger char (e.g. `/co`). Strip it before\n // filtering so the query is matched against the meaningful text — this lets\n // options match by their label/description (which don't contain the trigger\n // char) as well as by their `textValue`.\n const term = useMemo(() => {\n if (!activeToken) return '';\n const { token, trigger } = activeToken;\n return token.startsWith(trigger.char)\n ? token.slice(trigger.char.length)\n : token;\n }, [activeToken]);\n\n // ---- filtering --------------------------------------------------------\n const { contains } = useFilter({ sensitivity: 'base' });\n const textFilterFn = useMemo<CommandTextAreaFilterFn>(\n () => (filter === false ? () => true : filter \|\| contains),\n [filter, contains],\n );\n\n // Local collection used to read option textValues and to count matches.\n const localCollectionState = useListState({\n children: children as any,\n items: items as any,\n selectionMode: 'none',\n });\n\n const filterFn = useCallback(\n (nodes: Iterable<any>) => filterCollectionNodes(nodes, term, textFilterFn),\n [term, textFilterFn],\n );\n\n // Count filtered options (flatten sections) to decide whether to show.\n const filteredCount = useMemo(() => {\n if (!activeToken) return 0;\n const filtered = filterFn(localCollectionState.collection);\n let count = 0;\n for (const node of filtered as Iterable<any>) {\n if (node.type === 'section' && node.childNodes) {\n for (const child of node.childNodes) {\n if (child.type === 'item') count++;\n }\n } else if (node.type === 'item') {\n count++;\n }\n }\n return count;\n }, [activeToken, filterFn, localCollectionState.collection]);\n\n // ---- dismiss handling (Escape keeps the text but hides the popover) ---\n const [dismissedToken, setDismissedToken] = useState<string \| null>(null);\n // Bumped whenever we move the virtual focus so the textarea's\n // `aria-activedescendant` (read from the ListBox's stateRef at render time)\n // stays in sync — the ListBox's own state update does not re-render us.\n const [, setFocusTick] = useState(0);\n const bumpFocus = useEvent(() => setFocusTick((t) => t + 1));\n // Reset dismissal whenever the active token changes (user typed/backspaced).\n useEffect(() => {\n setDismissedToken((prev) =>\n prev != null && activeToken?.token !== prev ? null : prev,\n );\n }, [activeToken?.token]);\n\n const isCommandMode = !!activeToken && activeToken.token !== dismissedToken;\n const shouldShowPopover = isCommandMode && filteredCount > 0;\n\n // ---- height autosize (mirrors TextArea) -------------------------------\n const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n if (!textarea \|\| !autoSize) return;\n\n textarea.style.height = 'auto';\n const computedStyle = getComputedStyle(textarea);\n const paddingTop = parseFloat(computedStyle.paddingTop) \|\| 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) \|\| 0;\n const borderTop = parseFloat(computedStyle.borderTopWidth) \|\| 0;\n const borderBottom = parseFloat(computedStyle.borderBottomWidth) \|\| 0;\n const lineHeight = parseInt(computedStyle.lineHeight) \|\| 20;\n const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\n const computedRows = Math.ceil(contentHeight / lineHeight);\n const targetRows = Math.max(Math.min(computedRows, maxRows), rows);\n const totalHeight =\n targetRows lineHeight +\n paddingTop +\n paddingBottom +\n borderTop +\n borderBottom;\n textarea.style.height = `${totalHeight}px`;\n });\n\n // ---- useTextField (ARIA wiring for the textarea) ----------------------\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value: effectiveValue,\n placeholder,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(handleChange, adjustHeight),\n inputElementType: 'textarea',\n } as any,\n inputRef as any,\n );\n\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n useEnvironmentalEffect(() => {\n if (!autoSize \|\| !inputRef.current) return;\n adjustHeight();\n const resizeObserver = new ResizeObserver(adjustHeight);\n resizeObserver.observe(inputRef.current);\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef.current]);\n\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [effectiveValue]);\n\n // ---- caret restore after commit --------------------------------------\n const pendingCaretRef = useRef<number \| null>(null);\n useEnvironmentalEffect(() => {\n if (pendingCaretRef.current != null && inputRef.current) {\n const pos = pendingCaretRef.current;\n pendingCaretRef.current = null;\n inputRef.current.focus();\n inputRef.current.setSelectionRange(pos, pos);\n setCaret(pos);\n }\n }, [effectiveValue]);\n\n // ---- helpers ----------------------------------------------------------\n const getItemTextValue = useCallback(\n (key: Key): string => {\n const item = localCollectionState?.collection?.getItem(key);\n return item?.textValue \|\| String(key);\n },\n [localCollectionState?.collection],\n );\n\n // ---- commit (insert the chosen option's literal value) ---------------\n const commit = useEvent((key: Key) => {\n const listState = listStateRef.current;\n const textValue = getItemTextValue(key);\n const token = activeToken;\n const el = inputRef.current;\n\n if (token) {\n const next =\n effectiveValue.slice(0, token.start) +\n textValue +\n (insertSpaceAfter ? ' ' : '') +\n effectiveValue.slice(token.end);\n const caretPos =\n token.start + textValue.length + (insertSpaceAfter ? 1 : 0);\n pendingCaretRef.current = caretPos;\n handleChange(next);\n // If controlled, caret is restored by the effect above; if not, set now.\n if (el) {\n el.focus();\n try {\n el.setSelectionRange(caretPos, caretPos);\n } catch {\n /* noop */\n }\n }\n } else if (el) {\n // Fallback: insert at caret.\n const start = el.selectionStart ?? effectiveValue.length;\n const end = el.selectionEnd ?? effectiveValue.length;\n const next =\n effectiveValue.slice(0, start) +\n textValue +\n (insertSpaceAfter ? ' ' : '') +\n effectiveValue.slice(end);\n const caretPos = start + textValue.length + (insertSpaceAfter ? 1 : 0);\n pendingCaretRef.current = caretPos;\n handleChange(next);\n }\n\n setDismissedToken(null);\n onCommand?.(key, {\n textValue,\n ...(listState?.collection?.getItem(key)?.props ?? {}),\n });\n });\n\n // ---- keyboard navigation (only while the popover is open) -------------\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n onKeyDown?.(e);\n if (e.defaultPrevented) return;\n\n if (!shouldShowPopover) {\n // While not in command mode, the textarea behaves normally; but clear\n // any dismissal when the user edits.\n return;\n }\n\n const listState = listStateRef.current;\n\n if (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp') {\n if (!listState) return;\n e.preventDefault();\n const nextKey = getNextVisibleKey(\n listState,\n e.key === 'ArrowDown' ? 1 : -1,\n );\n if (nextKey != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(nextKey);\n bumpFocus();\n }\n } else if (e.key === 'Home' \|\| e.key === 'End') {\n if (!listState) return;\n e.preventDefault();\n const edgeKey = getEdgeVisibleKey(\n listState,\n e.key === 'Home' ? 'first' : 'last',\n );\n if (edgeKey != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(edgeKey);\n bumpFocus();\n }\n } else if (e.key === 'Enter' \|\| e.key === 'Tab') {\n if (!listState) return;\n const focused = listState.selectionManager.focusedKey;\n if (focused != null) {\n e.preventDefault();\n commit(focused);\n }\n // Otherwise pass through (newline / form submit / tab navigation).\n } else if (e.key === 'Escape') {\n e.preventDefault();\n if (activeToken) {\n setDismissedToken(activeToken.token);\n }\n }\n },\n [shouldShowPopover, activeToken, commit, onKeyDown, listStateRef],\n );\n\n // ---- initial focus on the first option when the popover opens ---------\n const focusInitAttemptsRef = useRef(0);\n useLayoutEffect(() => {\n if (!shouldShowPopover) return;\n focusInitAttemptsRef.current = 0;\n\n const tick = () => {\n if (!shouldShowPopover) return;\n const listState = listStateRef.current;\n if (!listState) {\n focusInitAttemptsRef.current += 1;\n if (focusInitAttemptsRef.current < 8) {\n requestAnimationFrame(tick);\n }\n return;\n }\n if (listState.selectionManager.focusedKey == null) {\n const first = getEdgeVisibleKey(listState, 'first');\n if (first != null) {\n markKeyboardFocus(listState);\n listState.selectionManager.setFocusedKey(first);\n bumpFocus();\n }\n }\n };\n\n requestAnimationFrame(() => requestAnimationFrame(tick));\n }, [shouldShowPopover]);\n\n // ---- composite focus (wrapper + portaled popover) ---------------------\n const { compositeFocusProps } = useCompositeFocus({\n wrapperRef: wrapperRef as RefObject<HTMLElement>,\n popoverRef: popoverRef as RefObject<HTMLElement>,\n onFocus,\n onBlur,\n isDisabled,\n });\n\n // ---- aria-activedescendant -------------------------------------------\n const focusedKey = listStateRef.current?.selectionManager.focusedKey ?? null;\n const listBoxId = `CommandTextAreaListBox-${commandTextAreaId}`;\n\n // ---- popover width ----------------------------------------------------\n // The virtualized ListBox has no intrinsic width, so an overlay sized to\n // `max-content` collapses to a sliver. We give the popover a concrete\n // default width (independent of the textarea) and a real-pixel min-width\n // derived from the textarea wrapper, so it is never narrower than the\n // input. The user's `overlayStyles` still win on top.\n const anchorWidth = wrapperRef.current?.offsetWidth ?? 0;\n const popoverOverlayStyles: Styles = {\n width: '40x',\n maxWidth: '50vw',\n minWidth: anchorWidth ? `${anchorWidth}px` : '40x',\n ...overlayStyles,\n };\n\n // ---- assemble input props ---------------------------------------------\n const commandInputProps = mergeProps(inputProps, {\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': shouldShowPopover,\n 'aria-haspopup': 'listbox',\n 'aria-controls': shouldShowPopover ? listBoxId : undefined,\n 'aria-activedescendant':\n shouldShowPopover && focusedKey != null\n ? `ListBoxItem-${focusedKey}`\n : undefined,\n onKeyDown: onKeyDownHandler,\n onSelect: syncCaret,\n onKeyUp: syncCaret,\n onClick: syncCaret,\n 'data-input-type': 'command-textarea',\n });\n\n // ---- render -----------------------------------------------------------\n const field = (\n <TextInputBase\n ref={ref as any}\n {...otherProps}\n multiLine\n qa={qa}\n inputRef={inputRef}\n wrapperRef={wrapperRef}\n wrapperProps={compositeFocusProps}\n labelProps={mergedLabelProps}\n inputProps={commandInputProps}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n\n return (\n <>\n {field}\n <ListBoxPopover\n isOpen={shouldShowPopover}\n triggerRef={wrapperRef as RefObject<HTMLElement>}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n direction={direction}\n shouldFlip={shouldFlip}\n overlayOffset={overlayOffset}\n containerPadding={containerPadding}\n listBoxId={listBoxId}\n overlayStyles={popoverOverlayStyles}\n listBoxStyles={listBoxStyles}\n optionStyles={optionStyles}\n optionHighlight={term}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n isDisabled={isDisabled}\n disabledKeys={disabledKeys}\n items={items as any}\n listStateRef={listStateRef}\n ariaLabel={\n (props as any)['aria-label'] \|\|\n (typeof otherProps.label === 'string' ? otherProps.label : 'Commands')\n }\n compositeFocusProps={compositeFocusProps}\n filter={filterFn}\n onClose={() => {\n if (activeToken) setDismissedToken(activeToken.token);\n }}\n onSelectionChange={(selection) => {\n const key = Array.isArray(selection) ? selection[0] : selection;\n if (key != null) commit(key);\n }}\n >\n {children as any}\n </ListBoxPopover>\n </>\n );\n}\n\nconst _CommandTextArea = forwardRef(CommandTextArea) as unknown as (<T>(\n props: CubeCommandTextAreaProps<T> & {\n ref?: ForwardedRef<HTMLElement>;\n },\n) => ReactElement) & {\n Item: typeof Item;\n Section: typeof BaseSection;\n};\n\nObject.assign(_CommandTextArea, {\n Item,\n Section: BaseSection,\n displayName: 'CommandTextArea',\n});\n\nObject.defineProperty(_CommandTextArea, 'cubeInputType', {\n value: 'CommandTextArea',\n enumerable: false,\n configurable: false,\n});\n\nexport { _CommandTextArea as CommandTextArea };\n"],"mappings":"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"}

package/dist/components/fields/DatePicker/DateInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateInputBase.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/fields/DatePicker/DatePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DatePickerButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/TimeInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/intl.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

package/dist/components/fields/DatePicker/parseDate.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/FilterListBox/FilterListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/FilterPicker/FilterPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Input/Input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { _FileInput } from "../FileInput/FileInput.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/ListBox/ListBox.d.ts CHANGED Viewed

@@ -14,6 +14,11 @@ interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, Fi
   listStyles?: Styles;
   /** Custom styles for individual options */
   optionStyles?: Styles;
+  /**
+   * Substring to highlight within each option's (text) children. Typically the
+   * current search query. Matching is case-insensitive.
+   */
+  optionHighlight?: string;
   /** Custom styles for section containers */
   sectionStyles?: Styles;
   /** Custom styles for section headings */

package/dist/components/fields/ListBox/ListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -298,7 +298,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = "No items", shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = "No items", shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
 	const [, forceUpdate] = useState({});
 	const lastSelectedKeyRef = useRef(null);
 	const externalSelectionHandler = onSelectionChange || props.onChange;
@@ -546,6 +546,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							item,
 							state: listState,
 							styles: optionStyles,
+							highlight: optionHighlight,
 							isParentDisabled: isDisabled,
 							validationState,
 							focusOnHover,
@@ -576,6 +577,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							item,
 							state: listState,
 							styles: optionStyles,
+							highlight: optionHighlight,
 							isParentDisabled: isDisabled,
 							validationState,
 							focusOnHover,
@@ -604,6 +606,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 								item,
 								state: listState,
 								optionStyles,
+								optionHighlight,
 								headingStyles,
 								sectionStyles,
 								isParentDisabled: isDisabled,
@@ -620,6 +623,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							item,
 							state: listState,
 							styles: optionStyles,
+							highlight: optionHighlight,
 							isParentDisabled: isDisabled,
 							validationState,
 							focusOnHover,
@@ -639,7 +643,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		]
 	}), ref, props);
 });
-function Option({ size = "medium", item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, dragState, dropState }) {
+function Option({ size = "medium", item, state, styles, highlight, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, dragState, dropState }) {
 	const localRef = useRef(null);
 	const combinedRef = useCombinedRefs(localRef, virtualRef);
 	const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
@@ -720,6 +724,7 @@ function Option({ size = "medium", item, state, styles, isParentDisabled, valida
 		isSelected,
 		isDisabled,
 		icon: effectiveIcon,
+		highlight,
 		labelProps,
 		descriptionProps,
 		styles: mergeStyles(styles, filteredItemProps.styles),
@@ -773,7 +778,7 @@ function ListBoxDropIndicator({ target, dropState }) {
 	});
 }
 function ListBoxSection(props) {
-	const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
+	const { item, state, optionStyles, optionHighlight, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
 	const heading = item.rendered;
 	const { itemProps, headingProps, groupProps } = useListBoxSection({
 		heading,
@@ -794,6 +799,7 @@ function ListBoxSection(props) {
 				item: node,
 				state,
 				styles: optionStyles,
+				highlight: optionHighlight,
 				isParentDisabled,
 				validationState,
 				focusOnHover,