@motifx-community/ui 0.1.0-beta.1 → 0.1.0-beta.3

package/docs/scheduler.md

@@ -1,6 +1,6 @@
 # Scheduler
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 Appointments over days and hours: day, week, work week and month views, all-day and multi-day bars, appointments at the same time side by side, and "+N more" where a day is full. From an array or a data source, with every setting live.
 
@@ -229,15 +229,15 @@ export default function Templates() {
 }
 ```
 
-## From code
+## Programmatic use
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Scheduler, Stack } from '@motifx-community/ui';
 import { sampleAppointments, type Meeting } from './sample-appointments';
 
-/** A scheduler made with `new`, added from code and driven by its methods. */
-export default function FromCode() {
+/** A scheduler made with `new`, added programmatically and driven by its methods. */
+export default function Programmatic() {
   const state = reactive({ said: '' });
   let host: Stack | null = null;
   let scheduler: Scheduler<Meeting> | null = null;

package/docs/scrollview.md

@@ -0,0 +1,185 @@
+# ScrollView
+
+> Navigation · @motifx-community/ui 0.1.0-beta.3
+
+Content that scrolls in a box of its own: the bars shown as told, a pull from the top that asks for what is new, a reach near the end that asks for more. Moved programmatically to a position or to an element.
+
+## Import
+
+```tsx
+import { ScrollView } from '@motifx-community/ui';
+```
+
+## A box that scrolls
+
+The JSX children are the content. `showScrollbar` says when the bars show; `scrollTo` and `scrollToElement` move the content programmatically, `onScrolled` tells where it stands.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, ScrollView, Stack, type ScrollViewBars } from '@motifx-community/ui';
+
+const LINES = Array.from({ length: 40 }, (_, i) => `Line ${i + 1} of a long text that needs a box of its own to scroll in.`);
+const MODES: ScrollViewBars[] = ['onScroll', 'onHover', 'always', 'never'];
+
+/** A box that scrolls, its bars shown as told; moved programmatically to a line and back to the top. */
+export default function Bars() {
+    const s = reactive({ bars: 'onScroll' as ScrollViewBars, top: 0 });
+    let view!: ScrollView;
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                {MODES.map(mode => (
+                    <Button key={mode} text={mode} size="sm" variant={() => (s.bars === mode ? 'solid' : 'outline')} onclick={() => (s.bars = mode)} />
+                ))}
+                <Button text="Line 20" variant="outline" size="sm" onclick={() => view.scrollToElement(view.content.element.querySelectorAll('p')[19], true)} />
+                <Button text="Top" variant="outline" size="sm" onclick={() => view.scrollTo(0, true)} />
+                <output class="sv-top">{() => `scrollTop: ${Math.round(s.top)}`}</output>
+            </Stack>
+            <ScrollView ref={(v: ScrollView) => (view = v)} label="Long text" class="sv-text" showScrollbar={() => s.bars} style="block-size: 12rem" onScrolled={e => (s.top = e.top)}>
+                {LINES.map(line => (
+                    <p key={line}>{line}</p>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Pull to refresh
+
+With `pullToRefresh`, the content pulled down from its top asks `onPullDown`. Set `promise` (or call `release()`) and the panel goes when the work is done.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, ScrollView, Stack } from '@motifx-community/ui';
+
+/** Pulled down from the top, the list asks for what is new and shows the panel until the promise settles. */
+export default function Pull() {
+    const s = reactive({ notes: ['Welcome aboard', 'Your plan was renewed', 'A new comment on "Roadmap"'], count: 0 });
+    const reload = () =>
+        new Promise<void>(resolve =>
+            setTimeout(() => {
+                s.count++;
+                s.notes = [`Fresh note ${s.count}`, ...s.notes];
+                resolve();
+            }, 1200)
+        );
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <span>Drag the list down from its top (a finger, or the mouse) and let go.</span>
+            <ScrollView label="Notes" class="sv-notes" pullToRefresh onPullDown={e => (e.promise = reload())} style="block-size: 12rem">
+                {s.notes.map(note => (
+                    <Panel key={note} variant="outline" padding="sm">
+                        {note}
+                    </Panel>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Load more near the end
+
+With `loadOnReachBottom`, a scroll within `reachBottomOffset` of the end asks `onReachBottom` once; `release()` lets the next reach ask again, `release(true)` says there is no more. Content that does not fill the box asks at once.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, ScrollView, Stack } from '@motifx-community/ui';
+
+const TOTAL = 60;
+const PAGE = 15;
+
+// A page of rows, as a server would send them.
+const fetchRows = (from: number) =>
+    new Promise<string[]>(resolve => setTimeout(() => resolve(Array.from({ length: Math.min(PAGE, TOTAL - from) }, (_, i) => `Order #${1000 + from + i}`)), 800));
+
+/** Near the end the view asks for more; the indicator stays until the rows are in, and `release(true)` ends it for good when there is no more. */
+export default function More() {
+    const s = reactive({ rows: [] as string[] });
+    const more = () =>
+        fetchRows(s.rows.length).then(rows => {
+            s.rows = [...s.rows, ...rows];
+            return s.rows.length >= TOTAL;
+        });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <output class="sv-more-told">{() => (s.rows.length >= TOTAL ? `All ${TOTAL} orders are in.` : `${s.rows.length} of ${TOTAL} orders`)}</output>
+            <ScrollView label="Orders" class="sv-orders" loadOnReachBottom reachBottomOffset={80} onReachBottom={e => more().then(done => e.release(done))} style="block-size: 14rem">
+                {s.rows.map(row => (
+                    <Panel key={row} variant="outline" padding="sm">
+                        {row}
+                    </Panel>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Scrolling` | The box scrolls with the wheel, the keys when focused, a finger, and programmatically. `direction` locks the other axis; the page behind does not scroll on when the content ends. |
+| `Scrollbars` | The design system’s bars. With `onScroll` the thumb shows while the content moves and goes a moment after; with `onHover` while the pointer is over the view or focus is in it; `always` leaves them; `never` hides them, the content still scrolls. |
+| `Pull to refresh` | From the top, with a finger or the pointer: the content comes down (harder the farther it goes) and the panel above it says to pull, then to release. Let go far enough it refreshes: the spinner turns until `release()` or the promise. A short pull goes back. |
+| `Load more` | Within `reachBottomOffset` of the end, `onReachBottom` is asked once; the panel under the content shows meanwhile. Released, the next reach asks again, until `release(true)`. Content that does not fill the box asks at once, and again as it grows. |
+| `Texts` | The kit’s, in the kit language, unless the text props say otherwise. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Region` | A focusable box named by `label`; the arrow keys, Page Up/Down, Home and End scroll it as the browser does. |
+| `Panels` | Live regions: “Refreshing…” and “Loading…” are read when they appear. |
+| `Spinners` | Decorative; the texts say what is going on. |
+| `Motion` | A finger that pulls does not scroll the page; a finger that scrolls does not pull. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-scroll-view` | The box. `data-direction`, `data-bars`, `data-scrolling` while the content moves, `data-pull` when pulling is on, `data-pulling` during a pull, `data-pull-state` (`pull`, `release`, `refreshing`), `data-loading`. |
+| `.mx-scroll-view__content` | What holds the children; it moves down during a pull. |
+| `.mx-scroll-view__pull, .mx-scroll-view__pull-text, .mx-scroll-view__pull-spinner` | The panel above the content, its text and the kit’s spinner. |
+| `.mx-scroll-view__bottom, .mx-scroll-view__bottom-text, .mx-scroll-view__bottom-spinner` | The panel under the content while more loads. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `scroll-view.box` | Unit: the box (`focus`). |
+| `scroll-view.pull, .pull-text, .bottom, .bottom-text` | Units: the two panels (the pull one `release` and `refreshing`) and their texts. |
+| `scroll-view.panel-height, .panel-gap` | The panels’ height; the space between a panel’s spinner and its text. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `Bind<ScrollViewDirection>` | `'vertical'` | `vertical`, `horizontal` or `both`: which way the content scrolls. |
+| `showScrollbar` | `Bind<ScrollViewBars>` | `'onScroll'` | When the bars show: `onScroll` while scrolling, `onHover` while the pointer is over the view, `always`, `never`. |
+| `pullToRefresh` | `Bind<boolean>` | `false` | Pulling the content down from its top asks `onPullDown` for what is new. |
+| `loadOnReachBottom` | `Bind<boolean>` | `false` | Scrolling near the end asks `onReachBottom` for more; so does content that does not reach the end. |
+| `reachBottomOffset` | `Bind<number>` | `100` | Pixels before the end at which `onReachBottom` is asked. |
+| `pullDownText, releaseText, refreshingText` | `Bind<string>` | the kit’s texts | The pull panel’s texts: while pulling, once far enough, while refreshing. |
+| `reachBottomText` | `Bind<string>` | the kit’s “Loading…” | The text under the content while more loads. |
+| `label` | `Bind<string>` | `''` | What screen readers call the scrolling region. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onPullDown` | event | The content was pulled down and let go. Load what is new, then `release()`, or set `promise` and the panel goes when it settles. |
+| `onReachBottom` | event | The content was scrolled near its end. Load more, then `release()`; `release(true)` says there is no more and the view stops asking. A `promise` releases too. |
+| `onScrolled` | event | The position changed: `top`, `left`. |
+| `scrollTo(where, smooth?)` | `void` | To a top, or `{ top, left }`; `smooth` animates. |
+| `scrollBy({ top, left }, smooth?)` | `void` | By a distance. |
+| `scrollToElement(target, smooth?)` | `void` | Brings an element (or a component) of the content into view. |
+| `refresh(), release()` | `void` | Starts a refresh as a pull would; ends it. |
+| `loadMore(), update()` | `boolean` / `void` | Asks for more now; looks at the position again after the content changed. |
+| `scrollTop, scrollLeft` | read-only | Where the content stands. |
+| `isRefreshing, isLoading` | read-only | A refresh or a loading is going on. |
+| `content` | read-only | The element that holds the children, between the two panels. |

package/docs/showcase.md

@@ -1,5 +1,5 @@
 # Showcase: an order screen
 
-> Get started · @motifx-community/ui 0.1.0-beta.1
+> Get started · @motifx-community/ui 0.1.0-beta.3
 
 An order screen built with the kit, the way a MotifJS app is built: the state and the operations live in a model (`OrderModel`), the page binds to it. The customer list is a data source of 5,000 rows that answers like a server.

package/docs/skeleton.md

@@ -1,6 +1,6 @@
 # Skeleton
 
-> Display · @motifx-community/ui 0.1.0-beta.1
+> Display · @motifx-community/ui 0.1.0-beta.3
 
 The shape of what is loading, so the page keeps its layout while data arrives. Given content, it shows the content in the same place once loading ends.
 
@@ -128,4 +128,4 @@ export default function Animations() {
 | Property | Access | Description |
 | --- | --- | --- |
 | `every prop above` | read/write | A value or a function, like the prop. |
-| `content` | read-only | The part holding what shows once loaded, for adding to it from code. |
+| `content` | read-only | The part holding what shows once loaded, for adding to it programmatically. |

package/docs/slider.md

@@ -1,6 +1,6 @@
 # Slider
 
-> Editors · @motifx-community/ui 0.1.0-beta.1
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 A value picked on a track by dragging a thumb or with the keys: one number, or a range with two thumbs. Steps, marks with labels, a value bubble, a vertical form and number formatting, with the label, help line and validation every field has.
 
@@ -10,21 +10,21 @@ A value picked on a track by dragging a thumb or with the keys: one number, or a
 import { Slider, type SliderValue } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function; `x-model` binds the value two-way. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function; `x-model` binds the value two-way. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Slider, Stack } from '@motifx-community/ui';
 
-/** A slider bound to state with x-model, and sliders created with `new` and added from code. */
-export default function FromCode() {
+/** A slider bound to state with x-model, and sliders created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ volume: 40, result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const slider = new Slider({ label: `Slider ${++added}`, showValue: 'drag' });
     slider.value = 50;
     slider.onValueChanged((e) => (s.result = `${slider.label}: ${String(e.value)}`));
@@ -36,7 +36,7 @@ export default function FromCode() {
     <>
       <Slider label="&Volume" x-model={() => s.volume} helpText={() => `Volume: ${s.volume}`} />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a slider from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a slider programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="sl-result">{() => s.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />
@@ -247,7 +247,7 @@ The names of the two thumbs of a range come from `uiLocale.strings` (`minimum`,
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, Slider, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, Slider, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the names of the thumbs; the price slider writes its numbers in the chosen language. */
@@ -255,7 +255,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>

package/docs/sortable.md

@@ -0,0 +1,213 @@
+# Sortable
+
+> Navigation · @motifx-community/ui 0.1.0-beta.3
+
+Items the user puts in order by dragging them, with the pointer or a finger, or with the keys; lists of one group take each other’s items. A drop moves the element and tells you the indexes: your data stays yours.
+
+## Import
+
+```tsx
+import { Sortable } from '@motifx-community/ui';
+```
+
+## Children as items
+
+The JSX children are the items. Drag one, or focus it and press Ctrl + Down; `onReorder` says from where to where, and the app reorders its own data.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Sortable, Stack } from '@motifx-community/ui';
+
+/** Rows put in order by dragging, or with Ctrl + an arrow on the focused row; the app reorders its data when told. */
+export default function Basic() {
+    const s = reactive({ steps: ['Collect the order', 'Pack it', 'Print the label', 'Hand it over'], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Sortable
+                label="Steps"
+                class="so-steps"
+                onReorder={e => {
+                    const next = s.steps.slice();
+                    next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+                    s.steps = next;
+                    s.told = `"${next[e.toIndex]}" is step ${e.toIndex + 1} now`;
+                }}
+            >
+                <Panel variant="outline" padding="sm">
+                    Collect the order
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Pack it
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Print the label
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Hand it over
+                </Panel>
+            </Sortable>
+            <output class="so-told">{() => s.told || `Order: ${s.steps.join(' → ')}`}</output>
+        </Stack>
+    );
+}
+```
+
+## Items from data, across lists
+
+`items` with an `itemTemplate` draws the rows from your data and keeps each row as the order changes. Two sortables of one `group` take each other’s items: `onRemove` and `onAdd` tell both sides, and each list draws its array again.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Sortable, Stack } from '@motifx-community/ui';
+
+interface Task {
+    id: number;
+    title: string;
+}
+
+// A task as a row.
+const row = (task: Task) => {
+    const panel = new Panel({ variant: 'outline', padding: 'sm' });
+    panel.element.textContent = task.title;
+    return panel;
+};
+
+/** Two lists of one group take each other's items; each list draws its own data and the app moves the task between arrays when told. */
+export default function Groups() {
+    const s = reactive({
+        todo: [{ id: 1, title: 'Write the brief' }, { id: 2, title: 'Book the room' }, { id: 3, title: 'Send the invites' }] as Task[],
+        done: [{ id: 4, title: 'Pick the date' }] as Task[]
+    });
+    const reorder = (key: 'todo' | 'done') => (e: { fromIndex: number; toIndex: number }) => {
+        const next = s[key].slice();
+        next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+        s[key] = next;
+    };
+    // The item leaves one array when removed and joins the other when added: the lists draw themselves again.
+    const remove = (key: 'todo' | 'done') => (e: { fromIndex: number }) => (s[key] = s[key].filter((_, i) => i !== e.fromIndex));
+    const add = (key: 'todo' | 'done') => (e: { item: Task; toIndex: number }) => {
+        const next = s[key].slice();
+        next.splice(e.toIndex, 0, e.item);
+        s[key] = next;
+    };
+    return (
+        <Stack orientation="horizontal" gap="lg" style="inline-size: 100%">
+            <Stack gap="sm" grow>
+                <strong>To do</strong>
+                <Sortable<Task> label="To do" class="so-todo" group="tasks" items={() => s.todo} itemTemplate={row} onReorder={reorder('todo')} onRemove={remove('todo')} onAdd={add('todo')} style="min-block-size: 8rem" />
+            </Stack>
+            <Stack gap="sm" grow>
+                <strong>Done</strong>
+                <Sortable<Task> label="Done" class="so-done" group="tasks" items={() => s.done} itemTemplate={row} onReorder={reorder('done')} onRemove={remove('done')} onAdd={add('done')} style="min-block-size: 8rem" />
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## A handle, side by side, a refused drag
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Chip, Sortable, Stack } from '@motifx-community/ui';
+
+/** Chips side by side, moved by their handle only (the dots), with Ctrl + Left / Right on the handle; a drag may be refused. */
+export default function Handle() {
+    const s = reactive({ tags: ['Design', 'Build', 'Test', 'Ship', 'Locked'], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Sortable
+                label="Tags"
+                class="so-tags"
+                orientation="horizontal"
+                handle=".so-grip"
+                items={() => s.tags}
+                itemTemplate={tag => {
+                    const chip = new Chip({ text: tag });
+                    const grip = document.createElement('span');
+                    grip.className = 'mx-glyph so-grip';
+                    grip.dataset.icon = 'drag-dots';
+                    grip.setAttribute('aria-label', `Move ${tag}`);
+                    chip.element.prepend(grip);
+                    return chip;
+                }}
+                onDragStarting={e => {
+                    if (e.item === 'Locked') {
+                        e.cancel = true;
+                        s.told = 'Locked stays where it is.';
+                    }
+                }}
+                onReorder={e => {
+                    const next = s.tags.slice();
+                    next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+                    s.tags = next;
+                    s.told = next.join(', ');
+                }}
+            />
+            <output class="so-tags-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Dragging` | With the pointer after a few pixels; with a finger after a long press (a finger that moves before that scrolls). A copy follows the pointer, the item stays faint in its place, a line shows where it would land; the list scrolls near its edges. |
+| `Dropping` | The item’s element moves there at once and `onReorder` says from where to where: your data is yours to reorder. Across sortables of a group, `onRemove` and `onAdd` say the same on both sides. |
+| `Items from data` | With `items`, each item keeps its component as the order changes (the rows are keyed by item): reordering your array moves the rows, no row is made again. |
+| `Keys` | The focused item (its handle when there is one) takes Ctrl + Up / Down (Left / Right side by side), Ctrl + Home / End; each move is told to `onReorder` and read out. |
+| `Escape` | Cancels a drag; nothing moves. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `List` | A `group` named by `label`; the items are whatever you put in it. |
+| `Items` | One Tab stop that moves between the items with the keys; an item with a focusable part of its own keeps that. A handle is a button named by you. |
+| `Moves` | Each move by the keys is read out: “Moved to 2 of 5”. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-sortable` | The list. `data-orientation`, `data-sortable`, `data-drop-target` while a dragged item may land here. |
+| `.mx-sortable__item` | Each item. `data-dragging` on the one being dragged. |
+| `.mx-sortable__line` | The line where a drop would land. |
+| `.mx-sortable__ghost` | The copy after the pointer. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `sortable.container, .item, .line, .ghost` | Units: the list (`target`), an item (`sortable`, `dragging`, `focus`), the line (its thickness and colour; standing in a horizontal list), the copy. |
+| `sortable.gap` | Between the items. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Bind<readonly T[]>` | — | The items, each drawn with `itemTemplate`; without them the JSX children are the items. |
+| `itemTemplate` | `(item, index) => ComponentBase` | the item’s text | Makes an item’s component. A function, so it is not bound like the other props. |
+| `handle` | `Bind<string \| null>` | `null` | A selector inside an item that takes the drag and the keys; without one the whole item does. |
+| `group` | `Bind<string \| null>` | `null` | Sortables of one group take each other’s items. |
+| `allowReordering` | `Bind<boolean>` | `true` | The items can be moved; `false` leaves them as they are. |
+| `orientation` | `Bind<SortableOrientation>` | `'vertical'` | `vertical` or `horizontal`: the drop line and the move keys follow. |
+| `label` | `Bind<string>` | `''` | What screen readers call the list. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onDragStarting` | event | A drag (or a move by the keys) is about to start (`item`, `fromIndex`); `cancel = true` refuses. |
+| `onDragChanging` | event | The place it would land changed (`to`, `toIndex`); `cancel = true` refuses that place. |
+| `onDragEnding` | event | About to drop; `cancel = true` leaves everything as it was. |
+| `onReorder` | event | An item moved within this sortable (`fromIndex`, `toIndex`, `item`), by a drop or the keys. Reorder your data here. |
+| `onRemove, onAdd` | event | An item went to another sortable of the group, and came into one: `from`, `to`, the indexes and the item. Move the data between your arrays here. |
+| `move(fromIndex, toIndex)` | `boolean` | Moves an item programmatically as a drop would, telling `onReorder`. |
+| `elements` | read-only | The items’ elements, in order. |
+| `isDragging` | read-only | An item is being dragged. |
+| `refresh()` | `void` | Reads the items again after they were changed in place. |