@cube-dev/ui-kit 0.147.2 → 0.148.0

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

@@ -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  collectVisibleKeys,\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\nimport { useCaretAnchor } from './useCaretAnchor';\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 the beginning of the line the\n   * caret is on (right after a newline, or at the very start of the input) —\n   * i.e. line-scoped 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      // Line-start command: the trigger char must sit at the start of the line\n      // the caret is on (right after a newline, or at index 0), with no\n      // whitespace between it and the caret. On a single-line input with no\n      // newlines this is equivalent to \"index 0 of the whole input\".\n      const lineStart = before.lastIndexOf('\\n') + 1;\n      const linePrefix = before.slice(lineStart);\n      if (linePrefix[0] !== ch) continue;\n      // No whitespace allowed within the token (after the trigger char).\n      const wsIndex = linePrefix.slice(1).search(/\\s/);\n      if (wsIndex !== -1) continue;\n      if (!linePrefix) continue;\n      return { trigger, token: linePrefix, start: lineStart, 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    defaultValue,\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 localListStateRef = useRef<ListStateLike | null>(null);\n  const listStateRef = (propsListStateRef ??\n    localListStateRef) 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) ?? (defaultValue 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    () =>\n      parseActiveToken(\n        effectiveValue,\n        Math.min(caret, effectiveValue.length),\n        triggers,\n      ),\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>) =>\n      filterCollectionNodes(nodes, term, textFilterFn, {\n        matchExtraFields: true,\n      }),\n    [term, textFilterFn],\n  );\n\n  // Keys of the currently visible (filtered) options, in display order.\n  // Derived from our own local collection + filter (rather than the ListBox's\n  // exposed state ref) so it is always in sync with the current token — the\n  // ListBox's `stateRef.collection` can momentarily lag by a render right after\n  // the token narrows, which would otherwise leave virtual focus on (and commit)\n  // an option that is no longer visible.\n  const visibleFilteredKeys = useMemo<Key[]>(() => {\n    if (!activeToken) return [];\n    const keys: Key[] = [];\n    const disabled = disabledKeys ? new Set<Key>(disabledKeys) : undefined;\n    collectVisibleKeys(\n      filterFn(localCollectionState.collection),\n      keys,\n      disabled,\n    );\n    return keys;\n  }, [activeToken, filterFn, localCollectionState.collection, disabledKeys]);\n\n  const filteredCount = visibleFilteredKeys.length;\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  // ---- caret-anchored popover ------------------------------------------\n  // A zero-size element positioned at the caret (both axes) drives the\n  // popover's geometry; the wrapper remains the dismiss/outside-click trigger.\n  const { anchorRef: caretAnchorRef, positionApiRef } = useCaretAnchor({\n    inputRef: inputRef as RefObject<HTMLTextAreaElement>,\n    wrapperRef: wrapperRef as RefObject<HTMLElement>,\n    caret,\n    value: effectiveValue,\n    isActive: shouldShowPopover,\n  });\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    const el = inputRef.current;\n    if (!el) return;\n\n    if (pendingCaretRef.current != null) {\n      // Restore caret after we programmatically inserted a command.\n      const pos = pendingCaretRef.current;\n      pendingCaretRef.current = null;\n      el.focus();\n      el.setSelectionRange(pos, pos);\n      setCaret(pos);\n      return;\n    }\n\n    // The value changed without our own commit (controlled update from\n    // outside, form reset, or defaultValue seeding). Resync the caret from\n    // the DOM selection so trigger parsing works off a valid index instead of\n    // a stale one. We intentionally do not steal focus here.\n    const domCaret = el.selectionStart ?? el.value.length;\n    setCaret((prev) => (prev === domCaret ? prev : domCaret));\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    // Guard against committing a stale key that has been filtered out of the\n    // visible list (e.g. the token was narrowed after focus landed on it).\n    // Fall back to the first still-visible option so the inserted command\n    // always matches what the user can see.\n    if (visibleFilteredKeys.length > 0 && !visibleFilteredKeys.includes(key)) {\n      key = visibleFilteredKeys[0];\n    }\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  // ---- keep virtual focus valid as the filtered list narrows -----------\n  // When the user narrows the token, the previously focused option may drop\n  // out of the filtered list. Move focus to the first still-visible option so\n  // the highlight and any Enter/Tab commit stay in sync with what's shown.\n  useLayoutEffect(() => {\n    if (!shouldShowPopover) return;\n    const listState = listStateRef.current;\n    if (!listState) return;\n\n    if (visibleFilteredKeys.length === 0) return;\n\n    const focused = listState.selectionManager.focusedKey;\n    if (focused == null || !visibleFilteredKeys.includes(focused)) {\n      markKeyboardFocus(listState);\n      listState.selectionManager.setFocusedKey(visibleFilteredKeys[0]);\n      bumpFocus();\n    }\n  }, [visibleFilteredKeys, 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 popover is anchored to the caret (a point), so it must not be sized to\n  // the textarea. We use the same default as the shared `ListBoxPopover` /\n  // `Picker` popovers: a `30x` floor (240px), `max-content` preferred, `50vw`\n  // cap. The concrete floor keeps the virtualized ListBox from collapsing to a\n  // sliver (it has no intrinsic width), and `max-content` lets short option\n  // lists size to their content. The user's `overlayStyles` still win on top.\n  const popoverOverlayStyles: Styles = {\n    width: '30x max-content 50vw',\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        positionTargetRef={caretAnchorRef as RefObject<Element | null>}\n        positionApiRef={positionApiRef}\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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"}
+{"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 { 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 } from '../../form';\nimport {\n  collectVisibleKeys,\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\nimport { useCaretAnchor } from './useCaretAnchor';\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 the beginning of the line the\n   * caret is on (right after a newline, or at the very start of the input) —\n   * i.e. line-scoped 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      // Line-start command: the trigger char must sit at the start of the line\n      // the caret is on (right after a newline, or at index 0), with no\n      // whitespace between it and the caret. On a single-line input with no\n      // newlines this is equivalent to \"index 0 of the whole input\".\n      const lineStart = before.lastIndexOf('\\n') + 1;\n      const linePrefix = before.slice(lineStart);\n      if (linePrefix[0] !== ch) continue;\n      // No whitespace allowed within the token (after the trigger char).\n      const wsIndex = linePrefix.slice(1).search(/\\s/);\n      if (wsIndex !== -1) continue;\n      if (!linePrefix) continue;\n      return { trigger, token: linePrefix, start: lineStart, 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 = 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    defaultValue,\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 localListStateRef = useRef<ListStateLike | null>(null);\n  const listStateRef = (propsListStateRef ??\n    localListStateRef) 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) ?? (defaultValue 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    () =>\n      parseActiveToken(\n        effectiveValue,\n        Math.min(caret, effectiveValue.length),\n        triggers,\n      ),\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>) =>\n      filterCollectionNodes(nodes, term, textFilterFn, {\n        matchExtraFields: true,\n      }),\n    [term, textFilterFn],\n  );\n\n  // Keys of the currently visible (filtered) options, in display order.\n  // Derived from our own local collection + filter (rather than the ListBox's\n  // exposed state ref) so it is always in sync with the current token — the\n  // ListBox's `stateRef.collection` can momentarily lag by a render right after\n  // the token narrows, which would otherwise leave virtual focus on (and commit)\n  // an option that is no longer visible.\n  const visibleFilteredKeys = useMemo<Key[]>(() => {\n    if (!activeToken) return [];\n    const keys: Key[] = [];\n    const disabled = disabledKeys ? new Set<Key>(disabledKeys) : undefined;\n    collectVisibleKeys(\n      filterFn(localCollectionState.collection),\n      keys,\n      disabled,\n    );\n    return keys;\n  }, [activeToken, filterFn, localCollectionState.collection, disabledKeys]);\n\n  const filteredCount = visibleFilteredKeys.length;\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  // ---- caret-anchored popover ------------------------------------------\n  // A zero-size element positioned at the caret (both axes) drives the\n  // popover's geometry; the wrapper remains the dismiss/outside-click trigger.\n  const { anchorRef: caretAnchorRef, positionApiRef } = useCaretAnchor({\n    inputRef: inputRef as RefObject<HTMLTextAreaElement>,\n    wrapperRef: wrapperRef as RefObject<HTMLElement>,\n    caret,\n    value: effectiveValue,\n    isActive: shouldShowPopover,\n  });\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    const el = inputRef.current;\n    if (!el) return;\n\n    if (pendingCaretRef.current != null) {\n      // Restore caret after we programmatically inserted a command.\n      const pos = pendingCaretRef.current;\n      pendingCaretRef.current = null;\n      el.focus();\n      el.setSelectionRange(pos, pos);\n      setCaret(pos);\n      return;\n    }\n\n    // The value changed without our own commit (controlled update from\n    // outside, form reset, or defaultValue seeding). Resync the caret from\n    // the DOM selection so trigger parsing works off a valid index instead of\n    // a stale one. We intentionally do not steal focus here.\n    const domCaret = el.selectionStart ?? el.value.length;\n    setCaret((prev) => (prev === domCaret ? prev : domCaret));\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    // Guard against committing a stale key that has been filtered out of the\n    // visible list (e.g. the token was narrowed after focus landed on it).\n    // Fall back to the first still-visible option so the inserted command\n    // always matches what the user can see.\n    if (visibleFilteredKeys.length > 0 && !visibleFilteredKeys.includes(key)) {\n      key = visibleFilteredKeys[0];\n    }\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  // ---- keep virtual focus valid as the filtered list narrows -----------\n  // When the user narrows the token, the previously focused option may drop\n  // out of the filtered list. Move focus to the first still-visible option so\n  // the highlight and any Enter/Tab commit stay in sync with what's shown.\n  useLayoutEffect(() => {\n    if (!shouldShowPopover) return;\n    const listState = listStateRef.current;\n    if (!listState) return;\n\n    if (visibleFilteredKeys.length === 0) return;\n\n    const focused = listState.selectionManager.focusedKey;\n    if (focused == null || !visibleFilteredKeys.includes(focused)) {\n      markKeyboardFocus(listState);\n      listState.selectionManager.setFocusedKey(visibleFilteredKeys[0]);\n      bumpFocus();\n    }\n  }, [visibleFilteredKeys, 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 popover is anchored to the caret (a point), so it must not be sized to\n  // the textarea. We use the same default as the shared `ListBoxPopover` /\n  // `Picker` popovers: a `30x` floor (240px), `max-content` preferred, `50vw`\n  // cap. The concrete floor keeps the virtualized ListBox from collapsing to a\n  // sliver (it has no intrinsic width), and `max-content` lets short option\n  // lists size to their content. The user's `overlayStyles` still win on top.\n  const popoverOverlayStyles: Styles = {\n    width: '30x max-content 50vw',\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        positionTargetRef={caretAnchorRef as RefObject<Element | null>}\n        positionApiRef={positionApiRef}\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/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.d.ts

@@ -1,5 +1,5 @@
 
-import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
+import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import { ReactElement, Ref } from "react";
@@ -11,7 +11,6 @@ interface CubeDateInputProps<T extends DateValue = DateValue> extends Omit<AriaD
   inputStyles?: Styles;
   styles?: Styles;
   size?: 'small' | 'medium' | 'large' | (string & {});
-  validationState?: ValidationState;
   useLocale?: boolean;
 }
 /**

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

@@ -1,8 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useProviderProps } from "../../../provider.js";
-import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { _DateInputBase } from "./DateInputBase.js";
@@ -19,8 +17,6 @@ import { createCalendar } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/DateInput.tsx
 function DateInput(props, ref) {
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, {
 		defaultValidationTrigger: "onBlur",
 		valuePropsMapper: ({ value, onChange }) => ({
@@ -29,7 +25,7 @@ function DateInput(props, ref) {
 		})
 	});
 	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-	let { qa, autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = "medium", useLocale: useLocaleProp } = props;
+	let { qa, autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, isValid, size = "medium", useLocale: useLocaleProp } = props;
 	extractStyles(props, CONTAINER_STYLES, wrapperStyles);
 	let domRef = useFocusManagerRef(ref);
 	let { locale } = useLocale();
@@ -49,7 +45,8 @@ function DateInput(props, ref) {
 		fieldProps,
 		isDisabled,
 		autoFocus,
-		validationState: state.validationState,
+		isInvalid: state.isInvalid,
+		isValid,
 		styles: wrapperStyles,
 		inputStyles,
 		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {

package/dist/components/fields/DatePicker/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from 'react-aria';\nimport { useDateFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { parseAbsoluteDate } from './parseDate';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { formatSegments, useFocusManagerRef } from './utils';\n\nimport type { ReactElement, Ref } from 'react';\n\nexport interface CubeDateInputProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  useLocale?: boolean;\n}\n\nfunction DateInput<T extends DateValue>(\n  props: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: typeof value === 'string' ? parseAbsoluteDate(value) : value,\n      onChange,\n    }),\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let {\n    qa,\n    autoFocus,\n    isDisabled,\n    inputStyles,\n    wrapperStyles,\n    isReadOnly,\n    isRequired,\n    size = 'medium',\n    useLocale: useLocaleProp,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);\n\n  let domRef = useFocusManagerRef(ref);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useDateField(props, state, fieldRef);\n\n  const component = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'DateInput'}\n      inputType=\"dateinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      validationState={state.validationState}\n      styles={wrapperStyles}\n      inputStyles={inputStyles}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\n/**\n * DateInputs allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nconst _DateInput = forwardRef(DateInput) as <T extends DateValue = DateValue>(\n  props: CubeDateInputProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateInput as any).displayName = 'DateInput';\n\nexport { _DateInput as DateInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4CA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,WAAW,kBAAkB,MAAM,GAAG;GAC9D;GACD;EACF,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAEpD,IAAI,EACF,IACA,WACA,YACA,aACA,eACA,YACA,YACA,OAAO,UACP,WAAW,kBACT;AAES,eAAc,OAAO,kBAAkB,cAAc;CAElE,IAAI,SAAS,mBAAmB,IAAI;CACpC,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACX,iBAAiB,MAAM;EACvB,QAAQ;EACK;YAEZ,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAIxC,AAAC,WAAmB,cAAc"}
+{"version":3,"file":"DateInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from 'react-aria';\nimport { useDateFieldState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { parseAbsoluteDate } from './parseDate';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { formatSegments, useFocusManagerRef } from './utils';\n\nimport type { ReactElement, Ref } from 'react';\n\nexport interface CubeDateInputProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  useLocale?: boolean;\n}\n\nfunction DateInput<T extends DateValue>(\n  props: CubeDateInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: typeof value === 'string' ? parseAbsoluteDate(value) : value,\n      onChange,\n    }),\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let {\n    qa,\n    autoFocus,\n    isDisabled,\n    inputStyles,\n    wrapperStyles,\n    isReadOnly,\n    isRequired,\n    isValid,\n    size = 'medium',\n    useLocale: useLocaleProp,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);\n\n  let domRef = useFocusManagerRef(ref);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useDateField(props, state, fieldRef);\n\n  const component = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'DateInput'}\n      inputType=\"dateinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      isInvalid={state.isInvalid}\n      isValid={isValid}\n      styles={wrapperStyles}\n      inputStyles={inputStyles}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\n/**\n * DateInputs allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nconst _DateInput = forwardRef(DateInput) as <T extends DateValue = DateValue>(\n  props: CubeDateInputProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateInput as any).displayName = 'DateInput';\n\nexport { _DateInput as DateInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,SAAS,UACP,OACA,KACA;AACA,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,WAAW,kBAAkB,MAAM,GAAG;GAC9D;GACD;EACF,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;CAEpD,IAAI,EACF,IACA,WACA,YACA,aACA,eACA,YACA,YACA,SACA,OAAO,UACP,WAAW,kBACT;AAES,eAAc,OAAO,kBAAkB,cAAc;CAElE,IAAI,SAAS,mBAAmB,IAAI;CACpC,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA6BrE,QAAO,cA1BL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACX,WAAW,MAAM;EACR;EACT,QAAQ;EACK;YAEZ,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAIxC,AAAC,WAAmB,cAAc"}

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

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | 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";
-import { ValidIcon } from "../../shared/ValidIcon.js";
+import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
+import { ValidationIndicator, hasValidationIndicator } from "../../form/validation/ValidationIndicator.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
-import React, { cloneElement, useRef } from "react";
+import React, { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -35,15 +35,18 @@ const DateInputElement = tasty({
 });
 function DateInputBase(props, ref) {
 	let inputRef = useRef(null);
-	let { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = "medium", suffix } = props;
+	let { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, isInvalid, isValid, isLoading, size = "medium", suffix } = props;
 	let styles = extractStyles(props, CONTAINER_STYLES);
 	let { focusProps, isFocused } = useFocusRing({
 		isTextInput: true,
 		within: true,
 		autoFocus
 	});
-	let isInvalid = validationState === "invalid";
-	let validation = cloneElement(isInvalid ? InvalidIcon : ValidIcon);
+	const showValidationIndicator = hasValidationIndicator({
+		isInvalid,
+		isValid,
+		isLoading
+	});
 	return /* @__PURE__ */ jsxs(DateInputWrapperElement, {
 		qa: qa || "DateTimeInput",
 		styles,
@@ -52,8 +55,11 @@ function DateInputBase(props, ref) {
 		mods: {
 			disabled: isDisabled,
 			focused: isFocused && !disableFocusRing,
-			invalid: isInvalid,
-			suffix: validationState && !isLoading || isLoading || !!suffix
+			...getValidationMods({
+				isInvalid,
+				isValid
+			}),
+			suffix: showValidationIndicator || !!suffix
 		},
 		...mergeProps$1(fieldProps ?? {}, focusProps),
 		style,
@@ -67,12 +73,13 @@ function DateInputBase(props, ref) {
 				styles: inputStyles,
 				children
 			})
-		}), validationState && !isLoading || isLoading || suffix ? /* @__PURE__ */ jsxs("div", {
+		}), showValidationIndicator || suffix ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "Suffix",
-			children: [validationState && !isLoading || isLoading ? /* @__PURE__ */ jsx("div", {
-				"data-element": "State",
-				children: validationState && !isLoading ? validation : null
-			}) : null, suffix]
+			children: [/* @__PURE__ */ jsx(ValidationIndicator, {
+				isInvalid,
+				isValid,
+				isLoading
+			}), suffix]
 		}) : null]
 	});
 }

package/dist/components/fields/DatePicker/DateInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { cloneElement, useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    validationState,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  let isInvalid = validationState === 'invalid';\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        invalid: isInvalid,\n        suffix: (validationState && !isLoading) || isLoading || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {(validationState && !isLoading) || isLoading || suffix ? (\n        <div data-element=\"Suffix\">\n          {(validationState && !isLoading) || isLoading ? (\n            <div data-element=\"State\">\n              {validationState && !isLoading ? validation : null}\n            </div>\n          ) : null}\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAmBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,iBACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,IAAI,YAAY,oBAAoB;CAEpC,IAAI,aAAa,aADI,YAAY,cAAc,UACF;AAE7C,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,SAAS;GACT,QAAS,mBAAmB,CAAC,aAAc,aAAa,CAAC,CAAC;GAC3D;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACJ,mBAAmB,CAAC,aAAc,aAAa,SAC/C,qBAAC;GAAI,gBAAa;cACd,mBAAmB,CAAC,aAAc,YAClC,oBAAC;IAAI,gBAAa;cACf,mBAAmB,CAAC,YAAY,aAAa;KAC1C,GACJ,MACH;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}
+{"version":3,"file":"DateInputBase.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n} from '../../form';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  isInvalid?: boolean;\n  isValid?: boolean;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    isInvalid,\n    isValid,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        ...getValidationMods({ isInvalid, isValid }),\n        suffix: showValidationIndicator || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAoBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,WACA,SACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,MAAM,0BAA0B,uBAAuB;EACrD;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC5C,QAAQ,2BAA2B,CAAC,CAAC;GACtC;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACL,2BAA2B,SAC1B,qBAAC;GAAI,gBAAa;cAChB,oBAAC;IACY;IACF;IACE;KACX,EACD;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}

package/dist/components/fields/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 
-import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
+import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
@@ -14,7 +14,6 @@ interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<Aria
   triggerStyles?: Styles;
   styles?: Styles;
   size?: 'small' | 'medium' | 'large' | (string & {});
-  validationState?: ValidationState;
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
   useLocale?: boolean;

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

@@ -1,9 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useProviderProps } from "../../../provider.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
@@ -24,12 +22,10 @@ import { useDatePickerState } from "react-stately";
 //#region src/components/fields/DatePicker/DatePicker.tsx
 function DatePicker(props, ref) {
 	const { t } = useI18n();
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
 	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
 	extractStyles(props, CONTAINER_STYLES);
-	let { qa, size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
+	let { qa, size, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
 	let targetRef = useRef(null);
 	let state = useDatePickerState({
 		...props,
@@ -61,7 +57,8 @@ function DatePicker(props, ref) {
 		styles: props.wrapperStyles,
 		disableFocusRing: isFocusedButton,
 		isDisabled,
-		validationState,
+		isInvalid,
+		isValid,
 		size,
 		fieldProps: groupProps,
 		...focusProps,

package/dist/components/fields/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAS,WACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EACF,YACA,YACA,YACA,aACA,aACA,kBACE,cAAc,OAAO,OAAO,UAAU;CAE1C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuDtB,QAAO,cAnDL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,aAAS,GAAI,gBAAiB,EAC9B,iBACC,oBAACC;KACC,SAAQ;KACR,OAAO,EAAE,mBAAmB,OAAO;KACnC,OAAO,MAAM;KACb,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,UAAU,MAAM;MAChB;KAEG;IACK;YAGlB,oBAAC;GAAgB,WAAW;GAAe,GAAI;IAAc;GAC/C,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"DatePicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAS,WACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,kBACA,YACA,WACA,SACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EACF,YACA,YACA,YACA,aACA,aACA,kBACE,cAAc,OAAO,OAAO,UAAU;CAE1C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAwDtB,QAAO,cApDL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,aAAS,GAAI,gBAAiB,EAC9B,iBACC,oBAACC;KACC,SAAQ;KACR,OAAO,EAAE,mBAAmB,OAAO;KACnC,OAAO,MAAM;KACb,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,UAAU,MAAM;MAChB;KAEG;IACK;YAGlB,oBAAC;GAAgB,WAAW;GAAe,GAAI;IAAc;GAC/C,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | 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

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

package/dist/components/fields/DatePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
 
-import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
+import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
@@ -12,7 +12,6 @@ interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit
   inputStyles?: Styles;
   styles?: Styles;
   size?: 'small' | 'medium' | 'large' | (string & {});
-  validationState?: ValidationState;
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
   useLocale?: boolean;

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

@@ -1,10 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
@@ -31,12 +29,10 @@ const DateRangeDash = tasty({
 });
 function DateRangePicker(props, ref) {
 	const { t } = useI18n();
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
 	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
 	extractStyles(props, CONTAINER_STYLES);
-	let { qa, size, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
+	let { qa, size, shouldFlip, placeholderValue, isDisabled, isInvalid, isValid, useLocale: useLocaleProp, autoFocus } = props;
 	let targetRef = useRef(null);
 	let state = useDateRangePickerState({
 		...props,
@@ -68,7 +64,8 @@ function DateRangePicker(props, ref) {
 		styles: props.wrapperStyles,
 		disableFocusRing: isFocusedButton,
 		isDisabled,
-		validationState,
+		isInvalid,
+		isValid,
 		size,
 		fieldProps: groupProps,
 		...focusProps,

package/dist/components/fields/DatePicker/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nimport type { ReactElement, Ref } from 'react';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.startTime', 'Start time')}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.endTime', 'End time')}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as <\n  T extends DateValue = DateValue,\n>(\n  props: CubeDateRangePickerProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAkBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuEtB,QAAO,cAnEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,EAAE,wBAAwB,aAAa;KAC9C,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,EAAE,sBAAsB,WAAW;KAC1C,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAMpD,AAAC,iBAAyB,cAAc"}
+{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nimport type { ReactElement, Ref } from 'react';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.startTime', 'Start time')}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={t('datePicker.endTime', 'End time')}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as <\n  T extends DateValue = DateValue,\n>(\n  props: CubeDateRangePickerProps<T> & { ref?: Ref<HTMLElement> },\n) => ReactElement | null;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAiBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,WACA,SACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAwEtB,QAAO,cApEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,EAAE,wBAAwB,aAAa;KAC9C,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,EAAE,sBAAsB,WAAW;KAC1C,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAMpD,AAAC,iBAAyB,cAAc"}