@cube-dev/ui-kit 0.142.10 → 0.143.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"caretPosition.js","names":[],"sources":["../../../../src/components/fields/CommandTextArea/caretPosition.ts"],"sourcesContent":["/**\n * Computes the caret's position for a `<textarea>` using a mirror-element\n * technique. jsdom returns zeros (no layout), but in a real browser this gives\n * the caret's viewport coordinates and its line height, so a popover can be\n * anchored to it.\n */\n\nexport interface CaretRect {\n  /** Caret left edge, in viewport coordinates (px). */\n  left: number;\n  /** Caret top edge, in viewport coordinates (px). */\n  top: number;\n  /** Caret height (the textarea's line height), in px. */\n  height: number;\n}\n\n// Computed styles that affect text wrapping / caret placement inside a textarea.\nconst MIRROR_STYLES: ReadonlyArray<keyof CSSStyleDeclaration> = [\n  'boxSizing',\n  'width',\n  'height',\n  'overflowX',\n  'overflowY',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'borderTopWidth',\n  'borderRightWidth',\n  'borderBottomWidth',\n  'borderLeftWidth',\n  'fontStyle',\n  'fontVariant',\n  'fontWeight',\n  'fontStretch',\n  'fontSize',\n  'fontSizeAdjust',\n  'lineHeight',\n  'fontFamily',\n  'textAlign',\n  'textTransform',\n  'textIndent',\n  'textDecoration',\n  'letterSpacing',\n  'wordSpacing',\n  'tabSize',\n  'whiteSpace',\n  'wordWrap',\n  'wordBreak',\n  'overflowWrap',\n];\n\n/**\n * Returns the viewport-space rect of the caret at `index` within `textarea`,\n * or `null` if it can't be measured (e.g. jsdom, no layout, detached node).\n */\nexport function getCaretRect(\n  textarea: HTMLTextAreaElement,\n  index: number,\n): CaretRect | null {\n  if (typeof document === 'undefined') return null;\n\n  const doc = textarea.ownerDocument;\n  const style = doc.defaultView?.getComputedStyle(textarea);\n  if (!style) return null;\n\n  // Bail out in environments without real layout (jsdom reports 0x0).\n  const box = textarea.getBoundingClientRect();\n  if (box.width === 0 && box.height === 0) return null;\n\n  const mirror = doc.createElement('div');\n  mirror.setAttribute('data-caret-mirror', '');\n  mirror.style.position = 'absolute';\n  mirror.style.visibility = 'hidden';\n  mirror.style.whiteSpace = 'pre-wrap';\n  mirror.style.wordWrap = 'break-word';\n  mirror.style.top = '0';\n  mirror.style.left = '0';\n  // Prevent the mirror from affecting scroll/anchor lookups.\n  mirror.style.overflow = 'hidden';\n\n  for (const prop of MIRROR_STYLES) {\n    const value = style[prop];\n    if (value != null) {\n      mirror.style.setProperty(\n        prop.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()),\n        value,\n      );\n    }\n  }\n\n  // Match the textarea's content width, not its border-box scroll width.\n  mirror.style.width = style.width;\n\n  const value = textarea.value;\n  const before = value.slice(0, index);\n  const after = value.slice(index) || '.';\n\n  mirror.textContent = before;\n\n  const marker = doc.createElement('span');\n  marker.textContent = after;\n  marker.style.display = 'inline-block';\n  mirror.appendChild(marker);\n\n  // The mirror must be attached to the same document to inherit fonts.\n  doc.body.appendChild(mirror);\n\n  let rect: CaretRect | null = null;\n  try {\n    const mirrorRect = mirror.getBoundingClientRect();\n    const markerRect = marker.getBoundingClientRect();\n    // The mirror is not scrolled, so subtract the textarea's scroll to map the\n    // unscrolled caret offset back into viewport space.\n    const { scrollTop, scrollLeft } = textarea;\n    rect = {\n      left: box.left - scrollLeft + (markerRect.left - mirrorRect.left),\n      top: box.top - scrollTop + (markerRect.top - mirrorRect.top),\n      height: markerRect.height || parseFloat(style.lineHeight) || 0,\n    };\n  } finally {\n    mirror.remove();\n  }\n\n  return rect.height > 0 ? rect : null;\n}\n"],"mappings":";;AAiBA,MAAM,gBAA0D;CAC9D;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;AAMD,SAAgB,aACd,UACA,OACkB;AAClB,KAAI,OAAO,aAAa,YAAa,QAAO;CAE5C,MAAM,MAAM,SAAS;CACrB,MAAM,QAAQ,IAAI,aAAa,iBAAiB,SAAS;AACzD,KAAI,CAAC,MAAO,QAAO;CAGnB,MAAM,MAAM,SAAS,uBAAuB;AAC5C,KAAI,IAAI,UAAU,KAAK,IAAI,WAAW,EAAG,QAAO;CAEhD,MAAM,SAAS,IAAI,cAAc,MAAM;AACvC,QAAO,aAAa,qBAAqB,GAAG;AAC5C,QAAO,MAAM,WAAW;AACxB,QAAO,MAAM,aAAa;AAC1B,QAAO,MAAM,aAAa;AAC1B,QAAO,MAAM,WAAW;AACxB,QAAO,MAAM,MAAM;AACnB,QAAO,MAAM,OAAO;AAEpB,QAAO,MAAM,WAAW;AAExB,MAAK,MAAM,QAAQ,eAAe;EAChC,MAAM,QAAQ,MAAM;AACpB,MAAI,SAAS,KACX,QAAO,MAAM,YACX,KAAK,QAAQ,WAAW,MAAM,MAAM,EAAE,aAAa,CAAC,EACpD,MACD;;AAKL,QAAO,MAAM,QAAQ,MAAM;CAE3B,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,MAAM,MAAM,GAAG,MAAM;CACpC,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAEpC,QAAO,cAAc;CAErB,MAAM,SAAS,IAAI,cAAc,OAAO;AACxC,QAAO,cAAc;AACrB,QAAO,MAAM,UAAU;AACvB,QAAO,YAAY,OAAO;AAG1B,KAAI,KAAK,YAAY,OAAO;CAE5B,IAAI,OAAyB;AAC7B,KAAI;EACF,MAAM,aAAa,OAAO,uBAAuB;EACjD,MAAM,aAAa,OAAO,uBAAuB;EAGjD,MAAM,EAAE,WAAW,eAAe;AAClC,SAAO;GACL,MAAM,IAAI,OAAO,cAAc,WAAW,OAAO,WAAW;GAC5D,KAAK,IAAI,MAAM,aAAa,WAAW,MAAM,WAAW;GACxD,QAAQ,WAAW,UAAU,WAAW,MAAM,WAAW,IAAI;GAC9D;WACO;AACR,SAAO,QAAQ;;AAGjB,QAAO,KAAK,SAAS,IAAI,OAAO"}

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

@@ -0,0 +1,2 @@
+
+import { ActiveToken, CommandTextAreaFilterFn, CommandTrigger, CubeCommandTextAreaProps, _CommandTextArea } from "./CommandTextArea.js";

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

@@ -0,0 +1,68 @@
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | 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.142.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.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";

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

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

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

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

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

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

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

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

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

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

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

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

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