skandha-facets 0.11.0 → 0.12.0

package/facets/Addition.d.ts

@@ -4,9 +4,11 @@ export declare class Addition<T = any> {
     static className: () => string;
     item?: T;
     parentId?: string;
+    setParentId(parentId?: string): void;
+    setItem(item?: T): void;
     add(args: {
         values?: GenericObjectT;
-    }): Promise<any>;
+    }): any;
     confirm(): Promise<void>;
     cancel(): void;
     _reset(): void;
@@ -18,7 +20,7 @@ type Cbs<T> = {
         highlightNewItem(): void;
     };
     cancel: {
-        unstageAdd(): void;
+        unstageAdd(parentId: string | undefined): void;
     };
     confirm: {
         confirmAdd(): void;

package/facets/Addition.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { getCallbacks, withCbs } from 'aspiration';
-import { data, decorateCb, operation } from 'skandha';
+import { data, operation } from 'skandha';
 class Addition {
     constructor() {
         Object.defineProperty(this, "item", {
@@ -21,34 +21,39 @@ class Addition {
             value: void 0
         });
     }
+    setParentId(parentId) {
+        this.parentId = parentId;
+    }
+    setItem(item) {
+        this.item = item;
+    }
     add(args) {
         var _a;
         const cbs = getCallbacks(this);
         cbs.stageAdd && cbs.stageAdd();
         const newItem = (_a = args.values) !== null && _a !== void 0 ? _a : cbs.createItem();
-        return Promise.resolve(newItem).then(decorateCb((item) => {
-            this.item = item;
-            cbs.highlightNewItem && cbs.highlightNewItem();
-            return item;
-        }));
+        this.setItem(newItem);
+        cbs.highlightNewItem && cbs.highlightNewItem();
+        return newItem;
     }
     confirm() {
         const cbs = getCallbacks(this);
         const result = cbs.confirmAdd ? cbs.confirmAdd() : undefined;
-        return Promise.resolve(result).then(decorateCb(() => {
+        return Promise.resolve(result).then(() => {
             this._reset();
-        }));
+        });
     }
     cancel() {
         const cbs = getCallbacks(this);
         if (this.item) {
+            const parentId = this.parentId;
             this._reset();
-            cbs.unstageAdd && cbs.unstageAdd();
+            cbs.unstageAdd && cbs.unstageAdd(parentId);
         }
     }
     _reset() {
-        this.item = undefined;
-        this.parentId = undefined;
+        this.setItem(undefined);
+        this.setParentId(undefined);
     }
 }
 Object.defineProperty(Addition, "className", {
@@ -63,6 +68,12 @@ __decorate([
 __decorate([
     data
 ], Addition.prototype, "parentId", void 0);
+__decorate([
+    operation({ log: false })
+], Addition.prototype, "setParentId", null);
+__decorate([
+    operation({ log: false })
+], Addition.prototype, "setItem", null);
 __decorate([
     operation,
     withCbs()

package/facets/DragAndDrop.d.ts

@@ -1,9 +1,9 @@
 import { DefineCbs } from 'aspiration';
-import { DropPositionT } from './Insertion';
+import { HoverPositionT } from './Hovering';
 export declare class DragAndDrop {
     static className: () => string;
     drop(args: {
-        dropPosition: DropPositionT;
+        hoverPosition: HoverPositionT;
     }): Promise<void>;
 }
 type Cbs = {

package/facets/DragAndDrop.js

@@ -9,7 +9,7 @@ import { operation } from 'skandha';
 import { selectionIsInsertedOnDragAndDrop } from '../policies/selectionIsInsertedOnDragAndDrop';
 const dropDefaultCbs = (dragAndDrop) => ({
     drop: function () {
-        selectionIsInsertedOnDragAndDrop(dragAndDrop, this.args.dropPosition);
+        selectionIsInsertedOnDragAndDrop(dragAndDrop, this.args.hoverPosition);
     },
 });
 class DragAndDrop {

package/facets/DragAndDropUIConnector.d.ts

@@ -1,18 +1,15 @@
 import { DragAndDrop } from './DragAndDrop';
-import { DropPositionT } from './Insertion';
+import { Hovering } from './Hovering';
 export interface DragAndDropUIConnectorT {
-    hoverPosition?: DropPositionT;
-    setHoverPosition(x?: DropPositionT): void;
     handle(itemId: string): DragAndDropUIPropsT;
 }
 export type PropsT = {
     dragAndDrop: DragAndDrop;
+    hovering: Hovering;
 };
 export declare class DragAndDropUIConnector implements DragAndDropUIConnectorT {
     props: PropsT;
-    hoverPosition?: DropPositionT;
     constructor(props: PropsT);
-    setHoverPosition(x?: DropPositionT): void;
     handle(itemId: string): DragAndDropUIPropsT;
 }
 export declare function getDragState(hoverPosition: any, itemId: string): "before" | "after" | "none";
@@ -31,4 +28,4 @@ export declare function dragAndDropUIHandlers<T extends DragAndDropUIPropsT>(pro
     onDrop: ((event: any) => void) | undefined;
     onDragEnd: ((event: any) => void) | undefined;
 };
-export declare function createDragAndDropUIConnector(dragAndDrop: DragAndDrop): DragAndDropUIConnector;
+export declare function createDragAndDropUIConnector(dragAndDrop: DragAndDrop, hovering: Hovering): DragAndDropUIConnector;

package/facets/DragAndDropUIConnector.js

@@ -1,10 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { data, decorateCb, operation } from 'skandha';
 import { isBefore } from '../internal/utils';
 export class DragAndDropUIConnector {
     constructor(props) {
@@ -14,50 +7,36 @@ export class DragAndDropUIConnector {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "hoverPosition", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         this.props = props;
     }
-    setHoverPosition(x) {
-        this.hoverPosition = x;
-    }
     handle(itemId) {
         return {
             draggable: true,
             onDragStart: () => { },
             onDragOver: (e) => {
                 e.preventDefault();
-                this.setHoverPosition({
+                this.props.hovering.setHoverPosition({
                     targetItemId: itemId,
                     isBefore: isBefore(e),
                 });
             },
             onDragEnd: () => {
-                this.setHoverPosition(undefined);
+                this.props.hovering.setHoverPosition(undefined);
             },
             onDrop: () => {
-                if (this.hoverPosition) {
+                const hoverPosition = this.props.hovering.hoverPosition;
+                if (hoverPosition) {
                     this.props.dragAndDrop
-                        .drop({ dropPosition: this.hoverPosition })
-                        .then(decorateCb(() => {
-                        this.setHoverPosition(undefined);
-                    }));
+                        .drop({ hoverPosition: hoverPosition })
+                        .then(() => {
+                        this.props.hovering.setHoverPosition(undefined);
+                    });
                 }
             },
-            dragState: getDragState(this.hoverPosition, itemId),
+            dragState: getDragState(this.props.hovering.hoverPosition, itemId),
         };
     }
 }
-__decorate([
-    data
-], DragAndDropUIConnector.prototype, "hoverPosition", void 0);
-__decorate([
-    operation({ log: false })
-], DragAndDropUIConnector.prototype, "setHoverPosition", null);
 export function getDragState(hoverPosition, itemId) {
     return (hoverPosition === null || hoverPosition === void 0 ? void 0 : hoverPosition.targetItemId) === itemId
         ? (hoverPosition === null || hoverPosition === void 0 ? void 0 : hoverPosition.isBefore)
@@ -74,6 +53,9 @@ export function dragAndDropUIHandlers(props) {
         onDragEnd: props.onDragEnd,
     };
 }
-export function createDragAndDropUIConnector(dragAndDrop) {
-    return new DragAndDropUIConnector({ dragAndDrop });
+export function createDragAndDropUIConnector(dragAndDrop, hovering) {
+    return new DragAndDropUIConnector({
+        dragAndDrop,
+        hovering,
+    });
 }

package/facets/Edit.d.ts

@@ -2,6 +2,7 @@ import { DefineCbs } from 'aspiration';
 export declare class Edit {
     static className: () => string;
     isEditing: boolean;
+    reset(): void;
     save(args: {
         values: any;
     }): Promise<any>;

package/facets/Edit.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { getCallbacks, withCbs } from 'aspiration';
-import { data, decorateCb, operation } from 'skandha';
+import { data, operation } from 'skandha';
 class Edit {
     constructor() {
         Object.defineProperty(this, "isEditing", {
@@ -15,17 +15,20 @@ class Edit {
             value: false
         });
     }
+    reset() {
+        this.isEditing = false;
+    }
     save(args) {
         const cbs = getCallbacks(this);
-        return Promise.resolve(cbs.saveItem()).then(decorateCb((localItem) => {
-            this.isEditing = false;
-            return localItem;
-        }));
+        return Promise.resolve(cbs.saveItem()).then((savedObj) => {
+            this.reset();
+            return savedObj;
+        });
     }
     cancel() {
         const cbs = getCallbacks(this);
         if (this.isEditing) {
-            this.isEditing = false;
+            this.reset();
             cbs.onCancel && cbs.onCancel();
         }
     }
@@ -46,6 +49,9 @@ Object.defineProperty(Edit, "className", {
 __decorate([
     data
 ], Edit.prototype, "isEditing", void 0);
+__decorate([
+    operation
+], Edit.prototype, "reset", null);
 __decorate([
     operation,
     withCbs()

package/facets/HighlightUIConnector.d.ts

@@ -1,36 +1,30 @@
 import { Highlight } from './Highlight';
-export type HighlightUIConnectorOptionsT = {
-    useMouse?: boolean;
-    useKeys?: boolean;
-    getDomElement?: (id: string, idx: number) => Element | null;
-    isKeyDown?: (e: any) => boolean;
-    isKeyUp?: (e: any) => boolean;
-    getHighlightableIds?: (e: any) => string[];
-};
 export interface HighlightUIConnectorT {
     handle(itemId: string): HighlightUIPropsT;
 }
 export type PropsT = {
     highlight: Highlight;
-    options?: HighlightUIConnectorOptionsT;
 };
 export declare class HighlightUIConnector implements HighlightUIConnectorT {
     props: PropsT;
-    _handleKeyDown: any;
     _handleMouseDown: any;
     constructor(props: PropsT);
     _highlight(e: any, itemId: string): void;
     _createMouseDownHandler(): (e: any, itemId: string) => void;
-    _createKeyDownHandler(options?: HighlightUIConnectorOptionsT): (e: any, itemId: string, getDomElement: HighlightUIConnectorOptionsT['getDomElement']) => void;
     handle(itemId: any): HighlightUIPropsT;
 }
 export type HighlightUIPropsT = {
     isHighlighted: boolean;
     onMouseDown?: any;
-    onKeyDown?: any;
 };
 export declare function highlightUIHandlers<T extends HighlightUIPropsT>(props: T): {
     onMouseDown: any;
-    onKeyDown: any;
 };
-export declare function createHighlightUIConnector(highlight: Highlight, options?: HighlightUIConnectorOptionsT): HighlightUIConnector;
+export declare function createHighlightUIConnector(highlight: Highlight): HighlightUIConnector;
+export declare const createHighlightKeyHandlers: (highlight: Highlight, options?: {
+    keyDown?: string;
+    keyUp?: string;
+    getHighlightableIds?: () => string[];
+}) => {
+    [x: string]: () => void;
+};

package/facets/HighlightUIConnector.js

@@ -1,19 +1,12 @@
 import { pickNeighbour } from '../internal/utils';
 export class HighlightUIConnector {
     constructor(props) {
-        var _a, _b, _c, _d;
         Object.defineProperty(this, "props", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "_handleKeyDown", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: undefined
-        });
         Object.defineProperty(this, "_handleMouseDown", {
             enumerable: true,
             configurable: true,
@@ -21,14 +14,7 @@ export class HighlightUIConnector {
             value: undefined
         });
         this.props = props;
-        this._handleMouseDown =
-            ((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.useMouse) !== null && _b !== void 0 ? _b : true)
-                ? this._createMouseDownHandler()
-                : undefined;
-        this._handleKeyDown =
-            ((_d = (_c = props.options) === null || _c === void 0 ? void 0 : _c.useKeys) !== null && _d !== void 0 ? _d : true)
-                ? this._createKeyDownHandler(props.options)
-                : undefined;
+        this._handleMouseDown = this._createMouseDownHandler();
     }
     _highlight(e, itemId) {
         this.props.highlight.highlightItem({ id: itemId });
@@ -41,64 +27,44 @@ export class HighlightUIConnector {
             }
         };
     }
-    _createKeyDownHandler(options) {
-        return (e, itemId, getDomElement) => {
-            var _a, _b;
-            const keysDown = ['ArrowDown'];
-            const keysUp = ['ArrowUp'];
-            const isDown = (options === null || options === void 0 ? void 0 : options.isKeyDown)
-                ? options === null || options === void 0 ? void 0 : options.isKeyDown(e)
-                : keysDown.includes(e.key);
-            const isUp = (options === null || options === void 0 ? void 0 : options.isKeyUp)
-                ? options === null || options === void 0 ? void 0 : options.isKeyUp(e)
-                : keysUp.includes(e.key);
-            if (isUp || isDown) {
-                e.preventDefault();
-                e.stopPropagation();
-                const highlightItemById = (itemId) => {
-                    this._highlight(Object.assign(Object.assign({}, e), { ctrlKey: false }), itemId);
-                };
-                const highlightableIds = ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.getHighlightableIds)
-                    ? (_b = this.props.options) === null || _b === void 0 ? void 0 : _b.getHighlightableIds(e)
-                    : this.props.highlight.highlightableIds || [];
-                // Select the neighbour item
-                const newItemId = pickNeighbour(highlightableIds, this.props.highlight.id, isDown, highlightItemById);
-                // Move the focus to the neighbour item. We assume that the
-                // list of UI elements reflects the list of selectable items (that
-                // is stored in highlight.selectableIds).
-                if (newItemId !== itemId && getDomElement) {
-                    const idx = this.props.highlight.highlightableIds.indexOf(newItemId);
-                    const nextElm = getDomElement(itemId, idx);
-                    // @ts-ignore
-                    nextElm && nextElm.focus();
-                }
-            }
-        };
-    }
     handle(itemId) {
-        var _a, _b, _c, _d;
-        const mouseHandlers = ((_b = (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.useMouse) !== null && _b !== void 0 ? _b : true)
-            ? {
-                onMouseDown: (e) => this._handleMouseDown(e, itemId),
-            }
-            : {};
-        const keyDownHandler = ((_d = (_c = this.props.options) === null || _c === void 0 ? void 0 : _c.useKeys) !== null && _d !== void 0 ? _d : true)
-            ? {
-                onKeyDown: (e) => { var _a; return this._handleKeyDown(e, itemId, (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.getDomElement); },
-            }
-            : {};
-        return Object.assign(Object.assign({ isHighlighted: this.props.highlight.id === itemId }, mouseHandlers), keyDownHandler);
+        const mouseHandlers = {
+            onMouseDown: (e) => this._handleMouseDown(e, itemId),
+        };
+        return Object.assign({ isHighlighted: this.props.highlight.id === itemId }, mouseHandlers);
     }
 }
 export function highlightUIHandlers(props) {
     return {
         onMouseDown: props.onMouseDown,
-        onKeyDown: props.onKeyDown,
     };
 }
-export function createHighlightUIConnector(highlight, options) {
+export function createHighlightUIConnector(highlight) {
     return new HighlightUIConnector({
         highlight,
-        options,
     });
 }
+export const createHighlightKeyHandlers = (highlight, options) => {
+    var _a, _b;
+    const down = (_a = options === null || options === void 0 ? void 0 : options.keyDown) !== null && _a !== void 0 ? _a : 'down';
+    const up = (_b = options === null || options === void 0 ? void 0 : options.keyUp) !== null && _b !== void 0 ? _b : 'up';
+    const getAnchor = () => highlight.id;
+    const getHighlightableIds = () => {
+        var _a;
+        return (options === null || options === void 0 ? void 0 : options.getHighlightableIds)
+            ? options === null || options === void 0 ? void 0 : options.getHighlightableIds()
+            : (_a = highlight.highlightableIds) !== null && _a !== void 0 ? _a : [];
+    };
+    return {
+        [down]: () => highlightNext(highlight, getAnchor(), true, getHighlightableIds()),
+        [up]: () => highlightNext(highlight, getAnchor(), false, getHighlightableIds()),
+    };
+};
+const highlightNext = (highlight, currentItemId, isDown, highlightableIds) => {
+    const highlightItemById = (itemId) => {
+        highlight.highlightItem({ id: itemId });
+    };
+    if (currentItemId !== undefined) {
+        pickNeighbour(highlightableIds, currentItemId, isDown, highlightItemById);
+    }
+};

package/facets/Hovering.d.ts

@@ -0,0 +1,10 @@
+export type HoverPositionT = {
+    isBefore: boolean;
+    targetItemId: string;
+    payload?: any;
+};
+export declare class Hovering {
+    static className: () => string;
+    hoverPosition?: HoverPositionT;
+    setHoverPosition(hoverPosition?: HoverPositionT): void;
+}

package/facets/Hovering.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { data, operation } from 'skandha';
+class Hovering {
+    constructor() {
+        Object.defineProperty(this, "hoverPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    setHoverPosition(hoverPosition) {
+        this.hoverPosition = hoverPosition;
+    }
+}
+Object.defineProperty(Hovering, "className", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: () => 'Hovering'
+});
+__decorate([
+    data
+], Hovering.prototype, "hoverPosition", void 0);
+__decorate([
+    operation({ log: false })
+], Hovering.prototype, "setHoverPosition", null);
+export { Hovering };

package/facets/Insertion.d.ts

@@ -1,18 +1,12 @@
 import { DefineCbs } from 'aspiration';
-export type DropPositionT = {
-    isBefore: boolean;
-    targetItemId: string;
-};
-export type DragT = DropPositionT & {
-    payload: any;
-};
-export type DragSourceT = (ctr: any) => DragT | undefined;
+import { HoverPositionT } from './Hovering';
+export type DragSourceT = (ctr: any) => HoverPositionT | undefined;
 export declare class Insertion<T = any> {
     static className: () => string;
     inputItems: Array<T>;
     preview: Array<T>;
     insertItems(args: {
-        drag: DragT;
+        hoverPosition: HoverPositionT;
     }): Promise<any>;
 }
 type Cbs<T> = {

package/facets/Insertion.js

@@ -25,7 +25,7 @@ class Insertion {
     insertItems(args) {
         const cbs = getCallbacks(this);
         if (this.inputItems) {
-            const preview = getPreview(this.inputItems, args.drag.targetItemId, args.drag.isBefore, args.drag.payload);
+            const preview = getPreview(this.inputItems, args.hoverPosition.targetItemId, args.hoverPosition.isBefore, args.hoverPosition.payload);
             return Promise.resolve(cbs.insertItems(preview));
         }
         return Promise.resolve();

package/facets/Selection.js

@@ -82,7 +82,7 @@ export function handleSelectItem(facet, args) {
         const startItemId = facet.anchorId || args.itemId;
         const startIdx = selectableIds.indexOf(startItemId);
         const stopIdx = selectableIds.indexOf(args.itemId);
-        const idxRange = range(Math.min(startIdx, stopIdx), 1 + Math.max(startIdx, stopIdx));
+        const idxRange = range(startIdx, stopIdx);
         facet.ids = idxRange.map((idx) => selectableIds[idx]);
     }
     else if (args.isCtrl) {

package/facets/SelectionUIConnector.d.ts

@@ -1,39 +1,39 @@
 import { Selection } from './Selection';
-export type SelectionUIConnectorOptionsT = {
-    useMouse?: boolean;
-    useKeys?: boolean;
-    getDomElement?: (id: string, idx: number) => Element | null;
-    getSelectableIds?: (e: any) => string[];
-};
 export interface SelectionUIConnectorT {
     handle(itemId: string): SelectionUIPropsT;
 }
 export type PropsT = {
     selection: Selection;
-    options?: SelectionUIConnectorOptionsT;
+    onSelect?: (selectionParams: {
+        itemId: string | undefined;
+        isShift?: boolean;
+        isCtrl?: boolean;
+    }) => void;
 };
 export declare class SelectionUIConnector implements SelectionUIConnectorT {
     props: PropsT;
     _selectOnMouseUp?: string;
-    _handleKeyDown: any;
     _handleMouseUp: any;
     _handleMouseDown: any;
     constructor(props: PropsT);
     _select(e: any, itemId: string): void;
     _createMouseDownHandler(): (e: any, itemId: string) => void;
     _createMouseUpHandler(): (e: any, itemId: string) => void;
-    _createKeyDownHandler(): (e: any, itemId: string, getDomElement: SelectionUIConnectorOptionsT['getDomElement']) => void;
     handle(itemId: any): SelectionUIPropsT;
 }
 export type SelectionUIPropsT = {
     isSelected: boolean;
     onMouseDown?: any;
     onMouseUp?: any;
-    onKeyDown?: any;
 };
 export declare function selectionUIHandlers<T extends SelectionUIPropsT>(props: T): {
     onMouseDown: any;
     onMouseUp: any;
-    onKeyDown: any;
 };
-export declare function createSelectionUIConnector(selection: Selection, options?: SelectionUIConnectorOptionsT): SelectionUIConnector;
+export declare const createSelectionKeyHandlers: (selection: Selection, options?: {
+    keyDown?: string;
+    keyUp?: string;
+    getSelectableIds?: () => string[];
+}) => {
+    [x: string]: () => void;
+};

package/facets/SelectionUIConnector.js

@@ -1,7 +1,6 @@
 import { pickNeighbour } from '../internal/utils';
 export class SelectionUIConnector {
     constructor(props) {
-        var _a, _b, _c, _d, _e, _f;
         Object.defineProperty(this, "props", {
             enumerable: true,
             configurable: true,
@@ -14,12 +13,6 @@ export class SelectionUIConnector {
             writable: true,
             value: undefined
         });
-        Object.defineProperty(this, "_handleKeyDown", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: undefined
-        });
         Object.defineProperty(this, "_handleMouseUp", {
             enumerable: true,
             configurable: true,
@@ -33,24 +26,21 @@ export class SelectionUIConnector {
             value: undefined
         });
         this.props = props;
-        this._handleMouseDown =
-            ((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.useMouse) !== null && _b !== void 0 ? _b : true)
-                ? this._createMouseDownHandler()
-                : undefined;
-        this._handleMouseUp =
-            ((_d = (_c = props.options) === null || _c === void 0 ? void 0 : _c.useMouse) !== null && _d !== void 0 ? _d : true)
-                ? this._createMouseUpHandler()
-                : undefined;
-        this._handleKeyDown =
-            ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.useKeys) !== null && _f !== void 0 ? _f : true) ? this._createKeyDownHandler() : undefined;
+        this._handleMouseDown = this._createMouseDownHandler();
+        this._handleMouseUp = this._createMouseUpHandler();
     }
     _select(e, itemId) {
+        const isShift = e.shiftKey;
+        const isCtrl = e.ctrlKey;
         const selectionParams = {
             itemId: itemId,
-            isShift: e.shiftKey,
-            isCtrl: e.ctrlKey,
+            isShift: isShift,
+            isCtrl: isCtrl,
         };
         this.props.selection.selectItem(selectionParams);
+        if (this.props.onSelect) {
+            this.props.onSelect(selectionParams);
+        }
     }
     _createMouseDownHandler() {
         return (e, itemId) => {
@@ -76,62 +66,43 @@ export class SelectionUIConnector {
             this._selectOnMouseUp = undefined;
         };
     }
-    _createKeyDownHandler() {
-        return (e, itemId, getDomElement) => {
-            var _a, _b;
-            const keysDown = ['ArrowDown'];
-            const keysUp = ['ArrowUp'];
-            const isDown = keysDown.includes(e.key);
-            const isUp = keysUp.includes(e.key);
-            if (isUp || isDown) {
-                e.preventDefault();
-                e.stopPropagation();
-                const selectItemById = (itemId) => {
-                    this._select(Object.assign(Object.assign({}, e), { ctrlKey: false }), itemId);
-                };
-                const selectableIds = ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.getSelectableIds)
-                    ? (_b = this.props.options) === null || _b === void 0 ? void 0 : _b.getSelectableIds(e)
-                    : this.props.selection.selectableIds || [];
-                // Select the neighbour item
-                const newItemId = pickNeighbour(selectableIds, itemId, isDown, selectItemById);
-                // Move the focus to the neighbour item. We assume that the
-                // list of UI elements reflects the list of selectable items (that
-                // is stored in selection.selectableIds).
-                if (newItemId !== itemId && getDomElement) {
-                    const idx = this.props.selection.selectableIds.indexOf(newItemId);
-                    const nextElm = getDomElement(itemId, idx);
-                    // @ts-ignore
-                    nextElm && nextElm.focus();
-                }
-            }
-        };
-    }
     handle(itemId) {
-        var _a, _b, _c, _d;
-        const mouseHandlers = ((_b = (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.useMouse) !== null && _b !== void 0 ? _b : true)
-            ? {
-                onMouseDown: (e) => this._handleMouseDown(e, itemId),
-                onMouseUp: (e) => this._handleMouseUp(e, itemId),
-            }
-            : {};
-        const keyDownHandler = ((_d = (_c = this.props.options) === null || _c === void 0 ? void 0 : _c.useKeys) !== null && _d !== void 0 ? _d : true)
-            ? {
-                onKeyDown: (e) => { var _a; return this._handleKeyDown(e, itemId, (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.getDomElement); },
-            }
-            : {};
-        return Object.assign(Object.assign({ isSelected: this.props.selection.ids.includes(itemId) }, mouseHandlers), keyDownHandler);
+        const mouseHandlers = {
+            onMouseDown: (e) => this._handleMouseDown(e, itemId),
+            onMouseUp: (e) => this._handleMouseUp(e, itemId),
+        };
+        return Object.assign({ isSelected: this.props.selection.ids.includes(itemId) }, mouseHandlers);
     }
 }
 export function selectionUIHandlers(props) {
     return {
         onMouseDown: props.onMouseDown,
         onMouseUp: props.onMouseUp,
-        onKeyDown: props.onKeyDown,
     };
 }
-export function createSelectionUIConnector(selection, options) {
-    return new SelectionUIConnector({
-        selection,
-        options,
-    });
-}
+export const createSelectionKeyHandlers = (selection, options) => {
+    var _a, _b;
+    const down = (_a = options === null || options === void 0 ? void 0 : options.keyDown) !== null && _a !== void 0 ? _a : 'down';
+    const up = (_b = options === null || options === void 0 ? void 0 : options.keyUp) !== null && _b !== void 0 ? _b : 'up';
+    const getAnchor = () => selection.ids[selection.ids.length - 1];
+    const getSelectableIds = () => {
+        var _a;
+        return (options === null || options === void 0 ? void 0 : options.getSelectableIds)
+            ? options === null || options === void 0 ? void 0 : options.getSelectableIds()
+            : (_a = selection.selectableIds) !== null && _a !== void 0 ? _a : [];
+    };
+    return {
+        [down]: () => selectNext(selection, getAnchor(), true, false, getSelectableIds()),
+        [`shift+${down}`]: () => selectNext(selection, getAnchor(), true, true, getSelectableIds()),
+        [up]: () => selectNext(selection, getAnchor(), false, false, getSelectableIds()),
+        [`shift+${up}`]: () => selectNext(selection, getAnchor(), false, true, getSelectableIds()),
+    };
+};
+const selectNext = (selection, currentItemId, isDown, isShift, selectableIds) => {
+    const selectItemById = (itemId) => {
+        selection.selectItem({ itemId, isShift, isCtrl: false });
+    };
+    if (currentItemId !== undefined) {
+        pickNeighbour(selectableIds, currentItemId, isDown, selectItemById);
+    }
+};

package/facets/Store.d.ts

@@ -4,4 +4,5 @@ export declare class Store<T = any> {
     get itemById(): {
         [id: string]: T;
     };
+    setItems(items: T[]): void;
 }

package/facets/Store.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { data, output } from 'skandha';
+import { data, operation, output } from 'skandha';
 import { listToItemById } from '../internal/utils';
 class Store {
     constructor() {
@@ -19,6 +19,9 @@ class Store {
         var _a;
         return listToItemById((_a = this.items) !== null && _a !== void 0 ? _a : []);
     }
+    setItems(items) {
+        this.items = items;
+    }
 }
 Object.defineProperty(Store, "className", {
     enumerable: true,
@@ -32,4 +35,7 @@ __decorate([
 __decorate([
     output
 ], Store.prototype, "itemById", null);
+__decorate([
+    operation
+], Store.prototype, "setItems", null);
 export { Store };

package/index.d.ts

@@ -5,9 +5,10 @@ export { DragAndDrop, type DragAndDropCbs } from './facets/DragAndDrop';
 export { createDragAndDropUIConnector, dragAndDropUIHandlers, type DragAndDropUIConnectorT, type DragAndDropUIPropsT, } from './facets/DragAndDropUIConnector';
 export { Edit, type EditCbs } from './facets/Edit';
 export { Highlight, type HighlightCbs } from './facets/Highlight';
-export { createHighlightUIConnector, highlightUIHandlers, type HighlightUIConnectorOptionsT, type HighlightUIConnectorT, type HighlightUIPropsT, } from './facets/HighlightUIConnector';
+export { createHighlightKeyHandlers, createHighlightUIConnector, highlightUIHandlers, type HighlightUIConnectorT, type HighlightUIPropsT, } from './facets/HighlightUIConnector';
+export { Hovering, type HoverPositionT } from './facets/Hovering';
 export { Insertion, type InsertionCbs } from './facets/Insertion';
 export { Selection, handleSelectItem, type SelectionCbs, } from './facets/Selection';
-export { createSelectionUIConnector, selectionUIHandlers, type SelectionUIConnectorOptionsT, type SelectionUIConnectorT, type SelectionUIPropsT, } from './facets/SelectionUIConnector';
+export { SelectionUIConnector, createSelectionKeyHandlers, selectionUIHandlers, type SelectionUIConnectorT, type SelectionUIPropsT, } from './facets/SelectionUIConnector';
 export { Store } from './facets/Store';
 export { topOfTheList } from './lib/getPreview';

package/index.js

@@ -5,9 +5,10 @@ export { DragAndDrop } from './facets/DragAndDrop';
 export { createDragAndDropUIConnector, dragAndDropUIHandlers, } from './facets/DragAndDropUIConnector';
 export { Edit } from './facets/Edit';
 export { Highlight } from './facets/Highlight';
-export { createHighlightUIConnector, highlightUIHandlers, } from './facets/HighlightUIConnector';
+export { createHighlightKeyHandlers, createHighlightUIConnector, highlightUIHandlers, } from './facets/HighlightUIConnector';
+export { Hovering } from './facets/Hovering';
 export { Insertion } from './facets/Insertion';
 export { Selection, handleSelectItem, } from './facets/Selection';
-export { createSelectionUIConnector, selectionUIHandlers, } from './facets/SelectionUIConnector';
+export { SelectionUIConnector, createSelectionKeyHandlers, selectionUIHandlers, } from './facets/SelectionUIConnector';
 export { Store } from './facets/Store';
 export { topOfTheList } from './lib/getPreview';

package/internal/utils.js

@@ -3,8 +3,15 @@ export function lookUp(keys, obj) {
 }
 export function range(start, stop) {
     var ans = [];
-    for (let i = start; i < stop; i++) {
-        ans.push(i);
+    if (stop >= start) {
+        for (let i = start; i <= stop; i++) {
+            ans.push(i);
+        }
+    }
+    else {
+        for (let i = start; i >= stop; i--) {
+            ans.push(i);
+        }
     }
     return ans;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skandha-facets",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Facets for use with the skandha library",
   "main": "index.js",
   "repository": "https://github.com/mnieber/skandha-facets.git",

package/policies/DragSourceFromNewItem.d.ts

@@ -1,2 +1,2 @@
-import { DragT } from '../facets/Insertion';
-export declare const DragSourceFromNewItem: (ctr: any) => DragT | undefined;
+import { HoverPositionT } from '../facets/Hovering';
+export declare const DragSourceFromNewItem: (ctr: any) => HoverPositionT | undefined;

package/policies/correctHighlight.js

@@ -6,9 +6,9 @@ export function correctHighlight(highlight, allItemIds, highlightableIds) {
         const highlightedItemIdx = allItemIds.indexOf(highlight.id);
         const newIdx = _findNeighbourIdx(highlightableIds, allItemIds, highlightedItemIdx, allItemIds.length, 1) ||
             _findNeighbourIdx(highlightableIds, allItemIds, highlightedItemIdx, -1, -1);
-        if (newIdx) {
-            highlight.highlightItem({ id: allItemIds[newIdx.result] });
-        }
+        highlight.highlightItem({
+            id: newIdx ? allItemIds[newIdx.result] : undefined,
+        });
     }
 }
 function _findNeighbourIdx(filteredItems, allItems, beginIndex, endIndex, step) {

package/policies/createInsertionPreview.js

@@ -1,8 +1,8 @@
 import { findMap } from '../internal/utils';
 import { getPreview } from '../lib/getPreview';
 export const createInsertionPreview = (dragSources, ctr) => (inputItems) => {
-    const drag = findMap((dragSource) => dragSource(ctr), dragSources);
-    return drag
-        ? getPreview(inputItems !== null && inputItems !== void 0 ? inputItems : [], drag.targetItemId, drag.isBefore, drag.payload)
+    const hoverPosition = findMap((dragSource) => dragSource(ctr), dragSources);
+    return hoverPosition
+        ? getPreview(inputItems !== null && inputItems !== void 0 ? inputItems : [], hoverPosition.targetItemId, hoverPosition.isBefore, hoverPosition.payload)
         : inputItems !== null && inputItems !== void 0 ? inputItems : [];
 };

package/policies/newItemsAreInsertedWhenConfirmed.js

@@ -3,8 +3,8 @@ import { Insertion } from '../facets/Insertion';
 import { DragSourceFromNewItem } from './DragSourceFromNewItem';
 export function newItemsAreInsertedWhenConfirmed(facet) {
     const ctr = getc(facet);
-    const drag = DragSourceFromNewItem(ctr);
-    if (drag) {
-        getf(Insertion, ctr).insertItems({ drag });
+    const hoverPosition = DragSourceFromNewItem(ctr);
+    if (hoverPosition) {
+        getf(Insertion, ctr).insertItems({ hoverPosition: hoverPosition });
     }
 }

package/policies/selectionIsInsertedOnDragAndDrop.d.ts

@@ -1,3 +1,3 @@
 import { DragAndDrop } from '../facets/DragAndDrop';
-import { DropPositionT } from '../facets/Insertion';
-export declare function selectionIsInsertedOnDragAndDrop(facet: DragAndDrop, dropPosition: DropPositionT): void;
+import { HoverPositionT } from '../facets/Hovering';
+export declare function selectionIsInsertedOnDragAndDrop(facet: DragAndDrop, hoverPosition: HoverPositionT): void;

package/policies/selectionIsInsertedOnDragAndDrop.js

@@ -1,9 +1,12 @@
 import { getc, getf } from 'skandha';
 import { Insertion } from '../facets/Insertion';
 import { Selection } from '../facets/Selection';
-export function selectionIsInsertedOnDragAndDrop(facet, dropPosition) {
+export function selectionIsInsertedOnDragAndDrop(facet, hoverPosition) {
     const ctr = getc(facet);
+    const selection = getf(Selection, ctr);
+    const selectableIds = selection.selectableIds || [];
+    const items = [...selection.items].sort((a, b) => selectableIds.indexOf(a.id) - selectableIds.indexOf(b.id));
     getf(Insertion, ctr).insertItems({
-        drag: Object.assign(Object.assign({}, dropPosition), { payload: getf(Selection, ctr).items }),
+        hoverPosition: Object.assign(Object.assign({}, hoverPosition), { payload: items }),
     });
 }

package/facets/Labelling.d.ts

@@ -1,28 +0,0 @@
-import { DefineCbs } from 'aspiration';
-export type LabelValueT = {
-    label: string;
-    id: string;
-    flag: boolean;
-};
-export type IdsByLabelT = {
-    [label: string]: Array<any>;
-};
-export type ItemsByLabelT = {
-    [label: string]: Array<any>;
-};
-export declare class Labelling {
-    static className: () => string;
-    idsByLabel: IdsByLabelT;
-    ids: (label: string) => any[];
-    itemsByLabel: ItemsByLabelT;
-    setLabel(args: {
-        labelValue: LabelValueT;
-    }): Promise<any>;
-}
-type Cbs = {
-    setLabel: {
-        saveIds(label: string, ids: string[]): any;
-    };
-};
-export type LabellingCbs = DefineCbs<Labelling, Cbs>;
-export {};

package/facets/Labelling.js

@@ -1,61 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { getCallbacks, stub, withCbs } from 'aspiration';
-import { data, input, operation } from 'skandha';
-class Labelling {
-    constructor() {
-        Object.defineProperty(this, "idsByLabel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        Object.defineProperty(this, "ids", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (label) => this.idsByLabel[label] || []
-        });
-        Object.defineProperty(this, "itemsByLabel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: stub
-        });
-    }
-    setLabel(args) {
-        const cbs = getCallbacks(this);
-        const { label, id, flag } = args.labelValue;
-        this.idsByLabel[label] = this.idsByLabel[label] || [];
-        if (flag && !this.idsByLabel[label].includes(id)) {
-            this.idsByLabel[label].push(id);
-            return Promise.resolve(cbs.saveIds(label, this.idsByLabel[label]));
-        }
-        if (!flag && this.idsByLabel[label].includes(id)) {
-            this.idsByLabel[label] = this.idsByLabel[label].filter((x) => x !== id);
-            return Promise.resolve(cbs.saveIds(label, this.idsByLabel[label]));
-        }
-        return Promise.resolve();
-    }
-}
-Object.defineProperty(Labelling, "className", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: () => 'Labelling'
-});
-__decorate([
-    data
-], Labelling.prototype, "idsByLabel", void 0);
-__decorate([
-    input
-], Labelling.prototype, "itemsByLabel", void 0);
-__decorate([
-    operation,
-    withCbs()
-], Labelling.prototype, "setLabel", null);
-export { Labelling };