@cube-dev/ui-kit 0.0.0-canary-3a7cbbe → 0.0.0-canary-009d53f

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

@@ -0,0 +1,68 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | Cube Dev Team */
+import { getCaretRect } from "./caretPosition.js";
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+//#region src/components/fields/CommandTextArea/useCaretAnchor.ts
+/**
+* Keeps a zero-size "caret anchor" element positioned at the textarea's caret
+* (both axes), inside the (position: relative) input wrapper. The anchor is a
+* real DOM node so react-aria's `useOverlayPosition` can measure it with
+* `getBoundingClientRect`, while interaction/outside-click stays on the
+* wrapper via a separate `triggerRef`.
+*/
+function useCaretAnchor({ inputRef, wrapperRef, caret, value, isActive }) {
+	const anchorRef = useRef(null);
+	const positionApiRef = useRef(null);
+	useEffect(() => {
+		const wrapper = wrapperRef.current;
+		if (!wrapper) return;
+		const anchor = document.createElement("span");
+		anchor.setAttribute("data-caret-anchor", "");
+		anchor.style.position = "absolute";
+		anchor.style.top = "0";
+		anchor.style.left = "0";
+		anchor.style.width = "0";
+		anchor.style.height = "0";
+		anchor.style.pointerEvents = "none";
+		anchor.style.overflow = "hidden";
+		anchor.style.opacity = "0";
+		wrapper.appendChild(anchor);
+		anchorRef.current = anchor;
+		return () => {
+			anchor.remove();
+			anchorRef.current = null;
+		};
+	}, [wrapperRef]);
+	useLayoutEffect(() => {
+		const anchor = anchorRef.current;
+		const wrapper = wrapperRef.current;
+		const input = inputRef.current;
+		if (!anchor || !wrapper || !input) return;
+		if (!isActive) {
+			anchor.style.transform = "translate(0px, 0px)";
+			return;
+		}
+		const rect = getCaretRect(input, caret);
+		if (!rect) return;
+		const wrapperRect = wrapper.getBoundingClientRect();
+		const x = rect.left - wrapperRect.left;
+		const y = rect.top - wrapperRect.top;
+		anchor.style.transform = `translate(${x}px, ${y}px)`;
+		anchor.style.height = `${rect.height}px`;
+		positionApiRef.current?.updatePosition();
+	}, [
+		caret,
+		value,
+		isActive,
+		inputRef,
+		wrapperRef
+	]);
+	return {
+		anchorRef,
+		positionApiRef
+	};
+}
+
+//#endregion
+export { useCaretAnchor };
+//# sourceMappingURL=useCaretAnchor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCaretAnchor.js","names":[],"sources":["../../../../src/components/fields/CommandTextArea/useCaretAnchor.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { CaretRect, getCaretRect } from './caretPosition';\n\nexport interface CaretAnchorApi {\n  updatePosition: () => void;\n}\n\nexport interface UseCaretAnchorOptions {\n  inputRef: RefObject<HTMLTextAreaElement>;\n  wrapperRef: RefObject<HTMLElement>;\n  caret: number;\n  value: string;\n  isActive: boolean;\n}\n\nexport interface UseCaretAnchorResult {\n  /** A real (zero-size) element positioned at the caret; used as the popover's\n   * geometric anchor. `null` until the wrapper mounts. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Imperative handle to force the popover to re-position. */\n  positionApiRef: RefObject<CaretAnchorApi | null>;\n}\n\n/**\n * Keeps a zero-size \"caret anchor\" element positioned at the textarea's caret\n * (both axes), inside the (position: relative) input wrapper. The anchor is a\n * real DOM node so react-aria's `useOverlayPosition` can measure it with\n * `getBoundingClientRect`, while interaction/outside-click stays on the\n * wrapper via a separate `triggerRef`.\n */\nexport function useCaretAnchor({\n  inputRef,\n  wrapperRef,\n  caret,\n  value,\n  isActive,\n}: UseCaretAnchorOptions): UseCaretAnchorResult {\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const positionApiRef = useRef<CaretAnchorApi | null>(null);\n\n  // Lazily create the anchor element inside the wrapper and clean it up on\n  // unmount. It is not managed by React so the shared TextInputBase structure\n  // stays untouched.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    const anchor = document.createElement('span');\n    anchor.setAttribute('data-caret-anchor', '');\n    anchor.style.position = 'absolute';\n    anchor.style.top = '0';\n    anchor.style.left = '0';\n    anchor.style.width = '0';\n    anchor.style.height = '0';\n    anchor.style.pointerEvents = 'none';\n    // Off the flow so it never affects layout or a11y.\n    anchor.style.overflow = 'hidden';\n    anchor.style.opacity = '0';\n    wrapper.appendChild(anchor);\n    anchorRef.current = anchor;\n\n    return () => {\n      anchor.remove();\n      anchorRef.current = null;\n    };\n  }, [wrapperRef]);\n\n  // Position the anchor at the caret whenever the caret/value/active state\n  // changes, then nudge the popover to re-anchor.\n  useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    const wrapper = wrapperRef.current;\n    const input = inputRef.current;\n    if (!anchor || !wrapper || !input) return;\n\n    if (!isActive) {\n      // Reset to the wrapper's origin when not active so a stale position is\n      // never measured if the popover reopens without a caret move.\n      anchor.style.transform = 'translate(0px, 0px)';\n      return;\n    }\n\n    const rect = getCaretRect(input, caret);\n    if (!rect) return;\n\n    const wrapperRect = wrapper.getBoundingClientRect();\n    // Position relative to the wrapper's border-box (it's position: relative).\n    const x = rect.left - wrapperRect.left;\n    const y = rect.top - wrapperRect.top;\n    anchor.style.transform = `translate(${x}px, ${y}px)`;\n    // Give it a real height so cross-axis centering uses the caret line.\n    anchor.style.height = `${rect.height}px`;\n\n    positionApiRef.current?.updatePosition();\n  }, [caret, value, isActive, inputRef, wrapperRef]);\n\n  return { anchorRef, positionApiRef };\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,SAAgB,eAAe,EAC7B,UACA,YACA,OACA,OACA,YAC8C;CAC9C,MAAM,YAAY,OAA2B,KAAK;CAClD,MAAM,iBAAiB,OAA8B,KAAK;AAK1D,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;EAEd,MAAM,SAAS,SAAS,cAAc,OAAO;AAC7C,SAAO,aAAa,qBAAqB,GAAG;AAC5C,SAAO,MAAM,WAAW;AACxB,SAAO,MAAM,MAAM;AACnB,SAAO,MAAM,OAAO;AACpB,SAAO,MAAM,QAAQ;AACrB,SAAO,MAAM,SAAS;AACtB,SAAO,MAAM,gBAAgB;AAE7B,SAAO,MAAM,WAAW;AACxB,SAAO,MAAM,UAAU;AACvB,UAAQ,YAAY,OAAO;AAC3B,YAAU,UAAU;AAEpB,eAAa;AACX,UAAO,QAAQ;AACf,aAAU,UAAU;;IAErB,CAAC,WAAW,CAAC;AAIhB,uBAAsB;EACpB,MAAM,SAAS,UAAU;EACzB,MAAM,UAAU,WAAW;EAC3B,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAO;AAEnC,MAAI,CAAC,UAAU;AAGb,UAAO,MAAM,YAAY;AACzB;;EAGF,MAAM,OAAO,aAAa,OAAO,MAAM;AACvC,MAAI,CAAC,KAAM;EAEX,MAAM,cAAc,QAAQ,uBAAuB;EAEnD,MAAM,IAAI,KAAK,OAAO,YAAY;EAClC,MAAM,IAAI,KAAK,MAAM,YAAY;AACjC,SAAO,MAAM,YAAY,aAAa,EAAE,MAAM,EAAE;AAEhD,SAAO,MAAM,SAAS,GAAG,KAAK,OAAO;AAErC,iBAAe,SAAS,gBAAgB;IACvC;EAAC;EAAO;EAAO;EAAU;EAAU;EAAW,CAAC;AAElD,QAAO;EAAE;EAAW;EAAgB"}

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3a7cbbe | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | 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.0.0-canary-3a7cbbe | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | 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.0.0-canary-3a7cbbe | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | 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.0.0-canary-3a7cbbe | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-009d53f | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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