@mario_hahn/jumpy-ui 0.8.1 → 0.9.0

package/README.md

@@ -1,5 +1,72 @@
 # @mario_hahn/jumpy-ui
 
+## Text with inline tokens
+
+`JumpTokenInput` shares the normal field shell, labels, hints, focus and alarm
+styles, but its value is structured. `JumpInput` remains a native string input.
+
+```tsx
+import { useRef, useState } from 'react'
+import { JumpTokenInput, JumpButton, type JumpTokenInputValue,
+  type JumpTokenInputHandle } from '@mario_hahn/jumpy-ui'
+
+function MessageEditor() {
+  const input = useRef<JumpTokenInputHandle>(null)
+  const [value, setValue] = useState<JumpTokenInputValue>([
+    { type: 'text', text: 'Hello ' },
+    { type: 'token', id: 'name-1', value: 'customer.firstName', label: 'First name' },
+    { type: 'text', text: '!' },
+  ])
+  return <>
+    <JumpTokenInput ref={input} label="Message" hint="Insert placeholders"
+      value={value} onChange={setValue} placeholder="Write a message" />
+    <JumpButton onClick={() => input.current?.insertToken({
+      value: 'order.number', label: 'Order number',
+    })}>Insert order number</JumpButton>
+    <JumpButton onClick={() => setValue([])}>Clear</JumpButton>
+  </>
+}
+```
+
+- `value`/`onChange` control the entire structured value. For uncontrolled editing
+  use `defaultValue`. Adjacent text parts are merged and empty text parts omitted.
+- Each token instance needs a unique `id`; `value` is its business identifier and
+  may repeat. `label` is display text. `insertToken` generates an ID when omitted.
+- Ref methods: `focus()`, `insertToken({ id?, value, label })`, `insertText(text)`,
+  and `removeToken(id)`. Insertion replaces the current/last selection, or appends
+  if there is none. Opening an external toolbar does not lose the insertion point.
+- Backspace **after** a token or Delete **before** it removes the whole token.
+  Backspace before a token deletes the preceding character. Tokens also have a
+  remove button. Explicit `onTokenInsert`/`onTokenRemove` callbacks accompany edit
+  notifications (including undo/redo); `onChange` remains the state update API.
+- Undo/redo uses Lexical history. External value replacement resets that history.
+- Internal copy/paste preserves tokens and assigns fresh IDs to pasted instances.
+  Other applications receive plain labels/text. Plain-text paste is supported;
+  arbitrary HTML is not inserted. The field is single-line: pasted line breaks
+  become spaces and Enter does not insert a paragraph.
+- `disabled`, `readOnly`, `error`, `status`, `label`, `hint`, `placeholder` and ARIA
+  props are supported. Read-only tokens cannot be removed. The ref is an editor
+  handle, not an `HTMLInputElement`. Submit the structured value through your form
+  state; this is not a native input's string-valued form serialization.
+
+Playground: `/?component=token-input`. The component uses Lexical with atomic token
+nodes; there is no manual HTML-to-value parsing and no consumer Tailwind dependency.
+
+## Dropdown popup width
+
+The default dropdown popup aligns with the outer visible field and uses its full
+width, including the icon area (but excluding helper text). For longer options:
+
+```tsx
+<JumpDropdown label="Areas" items={items} popupMinWidth={320} />
+```
+
+`popupMinWidth` is an optional minimum in CSS pixels. The popup never shrinks below
+the field width unless viewport space requires it. It is constrained to the
+available viewport and shifted at screen edges. Searching does not change its
+requested width. The prop does not change the field's own width. `inputRef` still
+points to the combobox input, and Escape/single selection restore input focus.
+
 ## Field widths
 
 Text fields, dropdowns, date pickers and time pickers fill their parent container.
@@ -85,7 +152,7 @@ Jumpy Components als ein gemeinsames UI-Paket.
 Starting with 0.5.0, Jumpy UI uses the public npmjs registry. No package token is required to install:
 
 ```bash
-npm install @mario_hahn/jumpy-ui@^0.8.1
+npm install @mario_hahn/jumpy-ui@^0.9.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases

package/dist/{chunk-B7QIDGY7.js → chunk-3QWVEQL3.js}

@@ -22624,6 +22624,10 @@ var providerStyles = `
     transform var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift);
 }
 
+[data-jumpy-theme='true'] [data-jumpy-component='token-input'] > p {
+  margin: 0;
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='card'][data-interactive='true'] {
   cursor: pointer;
   --jumpy-cmp-card-checkmark-right: var(--jumpy-spacing-gap-xsmall);