@cube-dev/ui-kit 0.142.10 → 0.143.1

package/dist/utils/warnings.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.1 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.142.10";
+const VERSION = "0.143.1";
 const TASTY_VERSION = "2.8.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/fields/CommandTextArea.md

@@ -0,0 +1,153 @@
+# CommandTextArea
+
+A multiline text input (built on `TextArea` / `TextInputBase`) that shows a
+command-autocomplete popover when the text matches a configurable trigger. The
+focus always stays in the textarea; arrow keys, Enter/Tab, and Escape drive the
+list only while it is open. Selecting an option inserts the option's literal
+value (e.g. `/clear`) into the text and fires `onCommand`.
+
+## When to Use
+
+- Chat or prompt inputs where users type slash commands (`/clear`, `/help`).
+- Inputs that need token-based autocomplete (`@mentions`, snippets) without
+  giving up free-form, multiline editing.
+- Any textarea that should "feel like a textarea" but offer inline suggestions.
+
+## Component
+
+---
+
+### Properties
+
+- **`triggers`** `CommandTrigger[]` (default: `[{ char: '/', atLineStart: true }]`) — Descriptors that open the autocomplete. `atLineStart` restricts the token to the start of the line the caret is on (after a newline, or at the very start of the input); `false` allows it anywhere after whitespace.
+- **`items`** `Iterable<T>` — Data-driven option source (alternative to JSX children).
+- **`children`** `ReactNode | ((item) => ReactElement)` — Static items or a render function (same shape as `ComboBox` / `ListBox`).
+- **`filter`** `(textValue, query) => boolean | false` — Custom filter. Pass `false` to disable internal filtering (e.g. server-side).
+- **`onCommand`** `(key, item) => void` — Fired when the user picks a command. The option's `textValue` is inserted into the textarea regardless.
+- **`insertSpaceAfter`** `boolean` (default: `true`) — Insert a trailing space after the chosen command.
+- **`disabledKeys`** `Iterable<Key>` — Keys of disabled options.
+- **`direction`** `'top' | 'bottom'` (default: `'top'`) — Popover placement. Chat inputs usually want `top`.
+- **`shouldFlip`** `boolean` (default: `true`) — Whether the popover flips when overflowing.
+- **`overlayOffset`** `number` (default: `8`) — Distance between the textarea and the popover.
+- **`containerPadding`** `number` (default: `8`) — Padding between the popover and the viewport edge.
+- **`autoSize`** `boolean` (default: `false`) — Resize to fit content.
+- **`rows`** `number` (default: `3`) — Visible rows.
+- **`maxRows`** `number` (default: `10`) — Max visible rows when `autoSize` is true.
+
+Each option's value is the **literal string to insert**. For commands, set the
+item's `textValue` (and `key`) to the full `/clear` — the slash is part of both
+the active token and the inserted value, so `/cle` becomes `/clear ` with no
+duplication. This decouples insertion from the trigger, so non-command
+autocomplete (e.g. a `@mention` resolving to `@john`) works the same way.
+
+> **What the filter matches.** The trigger char is stripped from the active
+> token before matching (so `/co` searches for `co`), and the query is matched
+> against each option's `textValue`, its plain-text `children`, and its
+> plain-text `description`. This means an option can match by its description
+> even though the description doesn't contain the trigger char (e.g. typing
+> `/co` keeps `/clear` because its description "Clear conversation" contains
+> "co"). A recommended layout is to put the command in `children` (e.g.
+> `/clear`) and the human-readable text in the `description` prop (e.g.
+> `Clear conversation`), keeping `textValue` equal to the command so it inserts
+> correctly.
+
+The matched substring (the query with the trigger char stripped) is highlighted
+within each option's plain-text `children` **and** `description`, so wherever the
+query matched is visible.
+
+> **Popover anchors to the caret.** The autocomplete popover tracks the text
+> caret on both axes — it opens at the caret's horizontal position and on the
+> caret's current line (not pinned to the textarea's top/bottom edge). This
+> matters for multiline inputs, where the caret can be on any line. The popover
+> is clamped to the viewport, so it flips or shifts when the caret is near an
+> edge. `direction` still controls whether it prefers to open above (`top`) or
+> below (`bottom`) the caret.
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+(`label`, `name`, `isRequired`, `isDisabled`, `isReadOnly`, `validationState`,
+`description`, `rules`, etc.).
+
+### Styling Properties
+
+- **`overlayStyles`** — Styles for the popover overlay.
+- **`listBoxStyles`** — Styles for the inner listbox.
+- **`optionStyles`** — Styles for individual options.
+- **`sectionStyles`** — Styles for section containers.
+- **`headingStyles`** — Styles for section headings.
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+
+## Examples
+
+### Basic usage
+
+```jsx
+<CommandTextArea
+  label="Message"
+  placeholder="Type / to see commands…"
+  onCommand={(key) => console.log('picked', key)}
+>
+  <CommandTextArea.Item key="/clear" textValue="/clear" description="Clear conversation">/clear</CommandTextArea.Item>
+  <CommandTextArea.Item key="/help" textValue="/help" description="Show help">/help</CommandTextArea.Item>
+</CommandTextArea>
+```
+
+### Mention trigger (anywhere in the text)
+
+```jsx
+<CommandTextArea
+  label="Message"
+  triggers={[{ char: '@', atLineStart: false }]}
+>
+  <CommandTextArea.Item key="@john" textValue="@john" description="John Doe">@john</CommandTextArea.Item>
+  <CommandTextArea.Item key="@jane" textValue="@jane" description="Jane Roe">@jane</CommandTextArea.Item>
+</CommandTextArea>
+```
+
+### Data-driven with sections
+
+```jsx
+<CommandTextArea items={commands}>
+  {(item) => <CommandTextArea.Item key={item.key} textValue={item.key} description={item.label}>{item.key}</CommandTextArea.Item>}
+</CommandTextArea>
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+- `Tab` — Moves focus into / out of the textarea.
+- `ArrowUp` / `ArrowDown` — Move the highlighted option (only while the popover is open; otherwise moves the caret).
+- `Home` / `End` — Jump to the first / last option while open.
+- `Enter` / `Tab` — Insert the highlighted option while open; otherwise insert a newline / submit.
+- `Escape` — Close the popover without changing the text.
+
+### Screen Reader Support
+
+- The textarea is announced as a `combobox` with `aria-autocomplete="list"`.
+- `aria-expanded`, `aria-controls`, and `aria-activedescendant` track the
+  popover and the highlighted option.
+
+## Integration with Forms
+
+This component supports all [Field properties](../../FieldProperties.md) when used within a Form. Its `value` is the full textarea string.
+
+## Related Components
+
+- [TextArea](./TextArea.md) — The base multiline field this builds on.
+- [ComboBox](./ComboBox.md) — Single-value select with search (different semantics: commits a `selectedKey`).
+- [ListBox](./ListBox.md) — The virtual-focus list rendered inside the popover.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.142.10",
+  "version": "0.143.1",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -77,7 +77,6 @@
     "@codemirror/lang-json": "^6.0.2",
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
-    "@eslint/js": "^9.25.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@size-limit/file": "^8.2.4",
     "@size-limit/webpack": "^8.2.4",
@@ -97,8 +96,6 @@
     "@types/react-dom": "^19.1.7",
     "@types/react-is": "^18.2.4",
     "@types/react-test-renderer": "^18.0.7",
-    "@typescript-eslint/eslint-plugin": "^8.31.0",
-    "@typescript-eslint/parser": "^8.31.0",
     "@uiw/react-codemirror": "^4.25.4",
     "@vitejs/plugin-react": "^6.0.0",
     "@vitest/coverage-v8": "^4.1.0",
@@ -107,20 +104,12 @@
     "chromatic": "^13.1.4",
     "csstype": "^3.1.2",
     "dedent": "^0.7.0",
-    "eslint": "^9.25.1",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^10.3.6",
-    "globals": "^16.0.0",
     "husky": "^6.0.0",
     "jsdom": "^29.1.1",
     "lint-staged": "^10.0.0",
     "markdown-table": "^3.0.3",
     "npm-run-all": "^4.1.5",
+    "oxlint": "^1.72.0",
     "prettier": "^3.2.5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -134,7 +123,6 @@
     "storybook-dark-mode": "^5.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.31.0",
     "vite": "^8.0.0",
     "vitest": "^4.1.0"
   },
@@ -157,11 +145,10 @@
     "test-watch": "vitest",
     "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "eslint": "eslint --cache src",
-    "eslint:fix": "eslint --cache --fix src",
-    "eslint:errors": "eslint --cache --quiet src",
-    "lint": "npm-run-all -p eslint prettier",
-    "fix": "npm-run-all -p eslint:fix prettier:fix",
+    "oxlint": "oxlint src",
+    "oxlint:fix": "oxlint --fix src",
+    "lint": "npm-run-all -p oxlint prettier",
+    "fix": "npm-run-all -p oxlint:fix prettier:fix",
     "storybook": "STORYBOOK_MODE=stories storybook dev -p 6060",
     "build-storybook": "STORYBOOK_MODE=stories storybook build --stats-json",
     "build-docs": "STORYBOOK_MODE=docs storybook build --docs -o storybook-docs",