@cube-dev/ui-kit 0.0.0-canary-cc710de → 0.0.0-canary-fbf14ab

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { isDevEnvOrTest } from "../../../utils/is-dev-env.js";
 import { useRef, useState } from "react";

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/data/DataTable/DataTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/data/ItemTable/ItemTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/data/ItemTable/ItemTableBulkBar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/data/ItemTable/ItemTableDragPreview.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/data/ItemTable/ItemTableFooter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { _Pagination } from "../../navigation/Pagination/Pagination.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/data/ItemTable/ItemTableToolbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/index.js";
 import { ReloadIcon } from "../../../icons/ReloadIcon.js";

package/dist/components/data/TableBase/ColumnResizer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef } from "react";

package/dist/components/data/TableBase/RowCollection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 //#region src/components/data/TableBase/RowCollection.ts
 /**
 * A `Collection<Node<T>>` over a plain row array.

package/dist/components/data/TableBase/TableHeaderCell.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/data/TableBase/TableRow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useRef } from "react";

package/dist/components/data/TableBase/TableView.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

package/dist/components/data/TableBase/column-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { __Menu } from "../../actions/Menu/Menu.js";
 import { normalizeMenuAction } from "./row-menu.js";
 import { Children, cloneElement, isValidElement } from "react";

package/dist/components/data/TableBase/column-tint.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { getPaletteConfig } from "../../../tokens/palette-config.js";
 import { hashString } from "../../../tokens/color-theme.js";
 

package/dist/components/data/TableBase/row-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { Children, Fragment, isValidElement } from "react";
 
 //#region src/components/data/TableBase/row-menu.ts

package/dist/components/data/TableBase/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { keyframes, tasty } from "@tenphi/tasty";

package/dist/components/data/TableBase/table-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 //#region src/components/data/TableBase/table-tree.ts
 /** Build identity and parent/child indexes without modifying consumer rows. */
 function buildTableTree(rows, getChildren, getKey) {

package/dist/components/data/TableBase/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 //#region src/components/data/TableBase/types.ts
 /**
 * `asc | desc` rather than React Aria's `ascending | descending`: we do not use

package/dist/components/data/TableBase/use-column-order.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 import { useControlledState } from "@react-stately/utils";

package/dist/components/data/TableBase/use-container-width.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useLayoutEffect, useState } from "react";
 
 //#region src/components/data/TableBase/use-container-width.ts

package/dist/components/data/TableBase/use-row-move-animation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useLayoutEffect, useRef } from "react";
 
 //#region src/components/data/TableBase/use-row-move-animation.ts

package/dist/components/data/TableBase/use-scrollability.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useLayoutEffect, useState } from "react";
 
 //#region src/components/data/TableBase/use-scrollability.ts

package/dist/components/data/TableBase/use-table-columns.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useMemo } from "react";
 
 //#region src/components/data/TableBase/use-table-columns.ts

package/dist/components/data/TableBase/use-table-search.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";

package/dist/components/data/TableBase/use-table-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { RowCollection } from "./RowCollection.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/components/data/TableBase/use-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { useMemo } from "react";

package/dist/components/data/TableBase/use-table-sorts.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { compareByColumn } from "./use-table-sort.js";
 import { useMemo } from "react";

package/dist/components/data/TableBase/use-table-storage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 
 //#region src/components/data/TableBase/use-table-storage.ts

package/dist/components/data/TableBase/use-table-tree-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { useMemo } from "react";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { _Text } from "../../content/Text.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { Icon } from "../../../icons/Icon.js";
 import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
@@ -145,12 +144,20 @@ function Checkbox(allProps, ref) {
 		children: markIcon
 	})] });
 	const checkboxField = /* @__PURE__ */ jsxs(CheckboxWrapperElement, {
+		styles,
 		isHidden,
 		mods,
-		children: [checkbox, children && /* @__PURE__ */ jsx(_Text, {
-			nowrap: true,
+		children: [checkbox, children ? /* @__PURE__ */ jsx(Element, {
+			styles: INLINE_LABEL_STYLES,
+			mods: {
+				...getValidationMods({
+					isInvalid,
+					isValid
+				}),
+				disabled: isDisabled
+			},
 			children
-		})]
+		}) : null]
 	});
 	if (!groupState) return wrapWithField(checkboxField, domRef, props);
 	return /* @__PURE__ */ jsxs(CheckboxWrapperElement, {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  /**\n   * The form instance. Redeclared so that it wins over react-aria's DOM\n   * `form: string` attribute when a consumer resolves react-aria's types for\n   * real; `Omit<AriaCheckboxProps, 'form'>` would erase every other prop\n   * in-repo, where those types resolve to `any` (see tsconfig.json).\n   */\n  form?: FieldBaseProps['form'];\n  /** Field name; modern forms also accept nested tuple paths. */\n  name?: FieldBaseProps['name'];\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  /**\n   * The form instance. Redeclared so that it wins over react-aria's DOM\n   * `form: string` attribute when a consumer resolves react-aria's types for\n   * real; `Omit<AriaCheckboxProps, 'form'>` would erase every other prop\n   * in-repo, where those types resolve to `any` (see tsconfig.json).\n   */\n  form?: FieldBaseProps['form'];\n  /** Field name; modern forms also accept nested tuple paths. */\n  name?: FieldBaseProps['name'];\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    // `styles` is forwarded here as well as in the in-group branch below —\n    // it used to be extracted from props and then dropped on this path, so\n    // `<Checkbox styles={{ … }}>` outside a group was a silent no-op.\n    <CheckboxWrapperElement styles={styles} isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children ? (\n        // Same element and preset as the in-group branch. This path used to\n        // force children through `<Text nowrap>`: `white-space: nowrap`\n        // inherits, so a label longer than a few words — or any custom node\n        // with two lines in it — could not wrap at all, and the label also\n        // missed the preset a grouped one picks up.\n        <Element\n          styles={INLINE_LABEL_STYLES}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n        >\n          {children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.js

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

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ColorInput/ColorInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

package/dist/components/fields/ColorPicker/ColorPicker.js

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

package/dist/components/fields/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/ComboBox/ComboBox.js

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

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

@@ -55,11 +55,31 @@ interface CubeCommandTextAreaProps<T> extends Omit<CubeTextInputBaseProps, 'chil
   /**
    * Fired when the user picks a command (Enter/Tab/click). The option's
    * `textValue` is also inserted into the textarea regardless.
+   *
+   * `start` / `end` locate that insertion in the value handed to `onChange`, so
+   * a consumer can anchor its own record to the picked item rather than
+   * re-deriving the offset by searching the new value for the inserted text —
+   * a search that cannot tell two occurrences apart when one option's text is a
+   * prefix of another's.
    */
   onCommand?: (key: Key$1, item: {
-    textValue: string;
+    textValue: string; /** Index in the new value where the inserted text starts. */
+    start: number; /** Index where it ends, excluding any inserted trailing space. */
+    end: number;
     [k: string]: any;
   }) => void;
+  /**
+   * Fired when the command popover opens or closes. Lets a consumer with its own
+   * `Enter` behaviour tell "pick the focused option" from "submit" without
+   * reading `aria-expanded` off the DOM.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Fired when the active trigger token changes, with the component's own
+   * caret-aware scan result — `null` once the caret leaves a token. Saves a
+   * consumer running a second, approximate scan of the same value.
+   */
+  onActiveTokenChange?: (token: ActiveToken | null) => void;
   /** Insert a trailing space after the chosen command. Defaults to true. */
   insertSpaceAfter?: boolean;
   /** Keys of disabled options. */

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cc710de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fbf14ab | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -70,7 +70,7 @@ function CommandTextArea(props, ref) {
 			value: value?.toString() ?? ""
 		})
 	});
-	let { qa, autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, labelProps: userLabelProps, inputProps: userInputProps, inputRef: propsInputRef, value, defaultValue, placeholder, items, children: renderChildren, triggers = DEFAULT_TRIGGERS, filter, onCommand, insertSpaceAfter = true, disabledKeys, direction = "top", shouldFlip = true, overlayOffset = 8, containerPadding = 8, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, wrapperRef: propsWrapperRef, popoverRef: propsPopoverRef, listBoxRef: propsListBoxRef, listStateRef: propsListStateRef, onKeyDown, onFocus, onBlur, ...otherProps } = props;
+	let { qa, autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, labelProps: userLabelProps, inputProps: userInputProps, inputRef: propsInputRef, value, defaultValue, placeholder, items, children: renderChildren, triggers = DEFAULT_TRIGGERS, filter, onCommand, onOpenChange, onActiveTokenChange, insertSpaceAfter = true, disabledKeys, direction = "top", shouldFlip = true, overlayOffset = 8, containerPadding = 8, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, wrapperRef: propsWrapperRef, popoverRef: propsPopoverRef, listBoxRef: propsListBoxRef, listStateRef: propsListStateRef, onKeyDown, onFocus, onBlur, ...otherProps } = props;
 	rows = Math.max(rows, 1);
 	maxRows = Math.max(maxRows, rows);
 	const localInputRef = useRef(null);
@@ -139,6 +139,19 @@ function CommandTextArea(props, ref) {
 		setDismissedToken((prev) => prev != null && activeToken?.token !== prev ? null : prev);
 	}, [activeToken?.token]);
 	const shouldShowPopover = !!activeToken && activeToken.token !== dismissedToken && filteredCount > 0;
+	const notifiedOpenRef = useRef(false);
+	useEffect(() => {
+		if (notifiedOpenRef.current === shouldShowPopover) return;
+		notifiedOpenRef.current = shouldShowPopover;
+		onOpenChange?.(shouldShowPopover);
+	}, [shouldShowPopover, onOpenChange]);
+	const activeTokenSignature = activeToken ? `${activeToken.trigger.char}\u0000${activeToken.token}\u0000${activeToken.start}\u0000${activeToken.end}` : null;
+	const notifiedTokenRef = useRef(null);
+	useEffect(() => {
+		if (notifiedTokenRef.current === activeTokenSignature) return;
+		notifiedTokenRef.current = activeTokenSignature;
+		onActiveTokenChange?.(activeToken ?? null);
+	}, [activeTokenSignature, onActiveTokenChange]);
 	const { anchorRef: caretAnchorRef, positionApiRef } = useCaretAnchor({
 		inputRef,
 		wrapperRef,
@@ -189,9 +202,11 @@ function CommandTextArea(props, ref) {
 		const textValue = getItemTextValue(key);
 		const token = activeToken;
 		const el = inputRef.current;
+		let start = Math.min(caret, effectiveValue.length);
 		if (token) {
 			const next = effectiveValue.slice(0, token.start) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(token.end);
 			const caretPos = token.start + textValue.length + (insertSpaceAfter ? 1 : 0);
+			start = token.start;
 			pendingCaretRef.current = caretPos;
 			handleChange(next);
 			if (el) {
@@ -201,16 +216,20 @@ function CommandTextArea(props, ref) {
 				} catch {}
 			}
 		} else if (el) {
-			const start = el.selectionStart ?? effectiveValue.length;
-			const end = el.selectionEnd ?? effectiveValue.length;
-			const next = effectiveValue.slice(0, start) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(end);
-			pendingCaretRef.current = start + textValue.length + (insertSpaceAfter ? 1 : 0);
+			const selectionStart = el.selectionStart ?? effectiveValue.length;
+			const selectionEnd = el.selectionEnd ?? effectiveValue.length;
+			const next = effectiveValue.slice(0, selectionStart) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(selectionEnd);
+			const caretPos = selectionStart + textValue.length + (insertSpaceAfter ? 1 : 0);
+			start = selectionStart;
+			pendingCaretRef.current = caretPos;
 			handleChange(next);
 		}
 		setDismissedToken(null);
 		onCommand?.(key, {
 			textValue,
-			...(listState?.collection)?.getItem(key)?.props ?? {}
+			...(listState?.collection)?.getItem(key)?.props ?? {},
+			start,
+			end: start + textValue.length
 		});
 	});
 	const onKeyDownHandler = useCallback((e) => {