@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/src/drag-drop/useDragDropNaturalMovement.js

@@ -1,205 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { useDragDisplacers } from "./useDragDisplacers.js";
-import { dispatchMouseEvent } from "@vuu-ui/vuu-utils";
-import { NOT_HIDDEN, NOT_OVERFLOWED, dimensions, getIndexOfDraggedItem, getItemParentContainer, getNextDropTarget, measureDropTargets } from "./drop-target-utils.js";
-const useDragDropNaturalMovement = ({ containerRef, orientation = "horizontal", itemQuery = "*", selected, viewportRange })=>{
-    const dragPositionRef = useRef({
-        direction: void 0,
-        insertionPosition: -1
-    });
-    const isScrollable = useRef(false);
-    const dragPosRef = useRef(-1);
-    const measuredDropTargets = useRef([]);
-    const overflowMenuShowingRef = useRef(false);
-    const [showOverflow, setShowOverflow] = useState(false);
-    const { clearSpacers, displaceItem, displaceLastItem, setTerminalSpacer } = useDragDisplacers(orientation);
-    const draggedItemRef = useRef(void 0);
-    const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;
-    const indexOf = (dropTarget)=>measuredDropTargets.current.findIndex((d)=>d.id === dropTarget.id);
-    const rangeRef = useRef(void 0);
-    rangeRef.current = viewportRange;
-    const handleScrollStart = useCallback((scrollDirection)=>{
-        const itemContainer = getItemParentContainer(containerRef.current, itemQuery);
-        const { current: draggedItem } = draggedItemRef;
-        if (itemContainer && draggedItem) setTerminalSpacer(itemContainer, "fwd" === scrollDirection ? "end" : "start", draggedItem.size);
-    }, [
-        containerRef,
-        itemQuery,
-        setTerminalSpacer
-    ]);
-    const handleScrollStop = useCallback((scrollDirection)=>{
-        const { current: container } = containerRef;
-        const { current: draggedItem } = draggedItemRef;
-        const { current: dragPosition } = dragPositionRef;
-        if (container && draggedItem) {
-            const dropTargets = measuredDropTargets.current = measureDropTargets(container, orientation, fullItemQuery, rangeRef.current);
-            const dropTargetAtBoundary = "fwd" === scrollDirection ? dropTargets.at(-1) : dropTargets.at(0);
-            if (dropTargetAtBoundary) {
-                const { mid, end, size, start } = dropTargetAtBoundary;
-                if ("fwd" === scrollDirection) {
-                    const draggedDropTarget = {
-                        ...draggedItem,
-                        start: Math.round(start + size),
-                        mid: Math.round(mid + size),
-                        end: Math.round(end + size)
-                    };
-                    dropTargets.push(draggedDropTarget);
-                    dragPosition.insertionPosition = dropTargetAtBoundary.index + 1;
-                } else {
-                    const draggedDropTarget = {
-                        ...draggedItem,
-                        start: Math.round(start - size),
-                        mid: Math.round(mid - size),
-                        end: Math.round(end - size)
-                    };
-                    dropTargets.unshift(draggedDropTarget);
-                    dragPosition.insertionPosition = 0;
-                }
-            }
-        }
-    }, [
-        containerRef,
-        fullItemQuery,
-        orientation
-    ]);
-    const beginDrag = useCallback((dragElement)=>{
-        if (dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1) console.log("its a selected element, and we have a multi select");
-        const { current: container } = containerRef;
-        const { current: dragPosition } = dragPositionRef;
-        if (container && dragElement) {
-            const internalDrag = container.contains(dragElement);
-            const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
-            const { id: draggedItemId } = dragElement;
-            const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
-            isScrollable.current = scrollSize > clientSize;
-            const dropTargets = measuredDropTargets.current = measureDropTargets(container, orientation, fullItemQuery, viewportRange, draggedItemId);
-            if (internalDrag) {
-                const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
-                const draggedItem = dropTargets[indexOfDraggedItem];
-                if (draggedItem && container) {
-                    draggedItemRef.current = draggedItem;
-                    const displaceFunction = draggedItem.isLast ? displaceLastItem : displaceItem;
-                    dragPosition.insertionPosition = displaceFunction(dropTargets, draggedItem, draggedItem.size, false, "static");
-                }
-            } else {
-                const { top: dragPos, height: size } = dragElement.getBoundingClientRect();
-                const dropTarget = getNextDropTarget(dropTargets, dragPos, size, "fwd");
-                const index = dropTargets.indexOf(dropTarget);
-                const { start, end, mid } = dropTarget;
-                const draggedItem = draggedItemRef.current = {
-                    end,
-                    mid,
-                    start,
-                    isDraggedItem: true,
-                    isExternal: true,
-                    size
-                };
-                const indexOfDropTarget = dropTargets.indexOf(dropTarget);
-                dropTargets.splice(indexOfDropTarget, 0, draggedItem);
-                for(let i = index + 1; i < dropTargets.length; i++){
-                    const target = dropTargets[i];
-                    target.mid += size;
-                    target.end += size;
-                    target.start += size;
-                }
-                const displaceFunction = dropTarget.isLast ? displaceLastItem : displaceItem;
-                displaceFunction(dropTargets, dropTarget, dropTarget.size, true, "static");
-            }
-        }
-    }, [
-        containerRef,
-        displaceItem,
-        displaceLastItem,
-        fullItemQuery,
-        orientation,
-        selected,
-        viewportRange
-    ]);
-    const [showPopup, hidePopup] = useMemo(()=>{
-        let popupShowing = false;
-        const show = (dropTarget)=>{
-            if (!popupShowing) {
-                popupShowing = true;
-                const button = dropTarget.element.querySelector(".vuuPopupMenu");
-                if (button) dispatchMouseEvent(button, "click");
-            }
-        };
-        const hide = (dropTarget)=>{
-            if (popupShowing) {
-                popupShowing = false;
-                const button = dropTarget.element.querySelector(".vuuPopupMenu");
-                if (button) dispatchMouseEvent(button, "click");
-            }
-        };
-        return [
-            show,
-            hide
-        ];
-    }, []);
-    const drag = useCallback((dragPos, mouseMoveDirection)=>{
-        const { current: draggedItem } = draggedItemRef;
-        const { current: dragPosition } = dragPositionRef;
-        if (draggedItem) {
-            if (containerRef.current) {
-                dragPosRef.current = dragPos;
-                const { current: dropTargets } = measuredDropTargets;
-                const nextDropTarget = getNextDropTarget(dropTargets, dragPos, draggedItem.size, mouseMoveDirection);
-                if (nextDropTarget && !nextDropTarget.isDraggedItem) if (nextDropTarget.isOverflowIndicator) {
-                    setShowOverflow(overflowMenuShowingRef.current = true);
-                    showPopup(nextDropTarget);
-                } else {
-                    const { size } = draggedItem;
-                    const targetIndex = indexOf(nextDropTarget);
-                    const displaceFunc = targetIndex === dropTargets.length - 1 ? displaceLastItem : displaceItem;
-                    dragPosition.insertionPosition = displaceFunc(dropTargets, nextDropTarget, size, true, mouseMoveDirection);
-                    const overflowIndicator = dropTargets.at(-1);
-                    hidePopup(overflowIndicator);
-                    setShowOverflow(overflowMenuShowingRef.current = false);
-                }
-                dragPosition.direction = mouseMoveDirection;
-            }
-        }
-    }, [
-        containerRef,
-        displaceItem,
-        displaceLastItem,
-        hidePopup,
-        showPopup
-    ]);
-    const drop = useCallback(()=>{
-        clearSpacers();
-        const { current: dropTargets } = measuredDropTargets;
-        const { current: dragPosition } = dragPositionRef;
-        const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
-        const draggedItem = dropTargets[indexOfDraggedItem];
-        const { insertionPosition } = dragPosition;
-        const { index: fromIndex, isExternal } = draggedItem;
-        if (overflowMenuShowingRef.current) setShowOverflow(false);
-        dragPosition.direction = void 0;
-        dragPosition.insertionPosition = -1;
-        const isLastItem = indexOfDraggedItem === dropTargets.length - 1;
-        const toIndex = overflowMenuShowingRef.current ? -1 : fromIndex < insertionPosition && !isLastItem ? insertionPosition - 1 : insertionPosition;
-        return {
-            fromIndex,
-            toIndex,
-            isExternal
-        };
-    }, [
-        clearSpacers
-    ]);
-    const releaseDrag = useCallback(()=>{
-        clearSpacers(true);
-    }, [
-        clearSpacers
-    ]);
-    return {
-        beginDrag,
-        drag,
-        drop,
-        handleScrollStart,
-        handleScrollStop,
-        releaseDrag,
-        revealOverflowedItems: showOverflow
-    };
-};
-export { useDragDropNaturalMovement };

package/src/drag-drop/useDropIndicator.js

@@ -1,21 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { createDropIndicatorPosition } from "./Draggable.js";
-const SPACER_SIZE = 0;
-const useDropIndicator = ()=>{
-    const spacer = useMemo(()=>createDropIndicatorPosition(), []);
-    const clearSpacer = useCallback(()=>spacer.remove(), [
-        spacer
-    ]);
-    const positionDropIndicator = useCallback((dropTarget, dropZone = "end")=>{
-        if ("end" === dropZone) dropTarget.element.after(spacer);
-        else dropTarget.element.before(spacer);
-        return spacer;
-    }, [
-        spacer
-    ]);
-    return {
-        positionDropIndicator,
-        clearSpacer
-    };
-};
-export { SPACER_SIZE, useDropIndicator };

package/src/drag-drop/useGlobalDragDrop.js

@@ -1,67 +0,0 @@
-import { boxContainsPoint, dispatchCustomEvent } from "@vuu-ui/vuu-utils";
-import { useCallback, useRef } from "react";
-const useGlobalDragDrop = ({ onDragOverDropTarget, onDrop })=>{
-    const dropTargetRef = useRef(void 0);
-    const measuredDropTargetsRef = useRef(void 0);
-    const dragDropStateRef = useRef(null);
-    const mousePosRef = useRef({
-        x: 0,
-        y: 0
-    });
-    const overDropTarget = useCallback((x, y)=>{
-        const { current: dropTargets } = measuredDropTargetsRef;
-        if (dropTargets) {
-            for (const [id, measuredTarget] of Object.entries(dropTargets))if (boxContainsPoint(measuredTarget, x, y)) return id;
-        }
-    }, []);
-    const dragMouseMoveHandler = useCallback((evt)=>{
-        const { clientX, clientY } = evt;
-        const { current: dragDropState } = dragDropStateRef;
-        mousePosRef.current.x = clientX;
-        mousePosRef.current.y = clientY;
-        if (dragDropState?.draggableElement) {
-            const { draggableElement, mouseOffset } = dragDropState;
-            const dragPosX = mousePosRef.current.x - mouseOffset.x;
-            const dragPosY = mousePosRef.current.y - mouseOffset.y;
-            draggableElement.style.top = `${dragPosY}px`;
-            draggableElement.style.left = `${dragPosX}px`;
-            const dropTargetId = overDropTarget(dragPosX, dragPosY);
-            if (dropTargetId) {
-                const dropTargetWillResumeDrag = onDragOverDropTarget(dropTargetId, dragDropState);
-                if (dropTargetWillResumeDrag) {
-                    document.removeEventListener("mousemove", dragMouseMoveHandler, false);
-                    document.removeEventListener("mouseup", dragMouseUpHandler, false);
-                    dragDropStateRef.current = null;
-                    dropTargetRef.current = void 0;
-                } else dropTargetRef.current = dropTargetId;
-            } else dropTargetRef.current = void 0;
-        }
-    }, []);
-    const dragMouseUpHandler = useCallback(()=>{
-        document.removeEventListener("mousemove", dragMouseMoveHandler, false);
-        document.removeEventListener("mouseup", dragMouseUpHandler, false);
-        const { current: dragDropState } = dragDropStateRef;
-        if (dragDropState) {
-            dragDropStateRef.current = null;
-            if (dropTargetRef.current) onDrop(dropTargetRef.current, dragDropState);
-            if (dragDropState.draggableElement) dispatchCustomEvent(dragDropState.draggableElement, "vuu-dropped");
-        }
-    }, [
-        dragMouseMoveHandler,
-        onDrop
-    ]);
-    const resumeDrag = useCallback((dragDropState)=>{
-        dragDropStateRef.current = dragDropState;
-        document.addEventListener("mousemove", dragMouseMoveHandler, false);
-        document.addEventListener("mouseup", dragMouseUpHandler, false);
-        return true;
-    }, [
-        dragMouseMoveHandler,
-        dragMouseUpHandler
-    ]);
-    return {
-        measuredDropTargetsRef,
-        resumeDrag
-    };
-};
-export { useGlobalDragDrop };

package/src/drag-drop/useTransition.js

@@ -1,11 +0,0 @@
-import { useCallback } from "react";
-const animationDuration = "0.15s";
-const useTransition = ()=>{
-    const applyTransition = useCallback((element, property, value)=>{
-        element.style.cssText = `${property}: ${value};transition: ${property} ${animationDuration};`;
-    }, []);
-    return {
-        applyTransition
-    };
-};
-export { useTransition };

package/src/editable/index.js

@@ -1 +0,0 @@
-export * from "./useEditableText.js";

package/src/editable/useEditableText.js

@@ -1,199 +0,0 @@
-import { DataValidationError, dispatchCustomEvent, getTypedValue, isRpcError, isRpcSuccess } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef, useState } from "react";
-const stringValueOf = (value)=>value?.toString() ?? "";
-const useEditableText = ({ column, value, onEdit, type = "string" })=>{
-    const [editState, setEditState] = useState({
-        editing: false,
-        value: stringValueOf(value)
-    });
-    const initialValueRef = useRef(value?.toString() ?? "");
-    const isDirtyRef = useRef(false);
-    useMemo(()=>{
-        if (initialValueRef.current !== value?.toString()) {
-            initialValueRef.current = stringValueOf(value);
-            setEditState((editState)=>({
-                    ...editState,
-                    message: void 0,
-                    value: stringValueOf(value)
-                }));
-        }
-    }, [
-        value
-    ]);
-    const commit = useCallback(async ()=>{
-        const { value } = editState;
-        const result = column.clientSideEditValidationCheck?.(value, "*");
-        if (result?.ok === false) setEditState((state)=>({
-                ...state,
-                message: result?.messages?.join(",")
-            }));
-        else {
-            const { current: initialValue } = initialValueRef;
-            const previousValue = getTypedValue(initialValue, type);
-            try {
-                const typedValue = getTypedValue(value, type, true);
-                const response = await onEdit?.({
-                    editType: "commit",
-                    isValid: true,
-                    previousValue,
-                    value: typedValue
-                }, "commit");
-                if (isRpcSuccess(response)) {
-                    isDirtyRef.current = false;
-                    setEditState(({ previousValue, value })=>({
-                            editing: false,
-                            previousValue: previousValue === value ? void 0 : void 0 === previousValue ? initialValue : previousValue,
-                            value
-                        }));
-                } else if (isRpcError(response)) {
-                    setEditState((state)=>({
-                            ...state,
-                            message: response.errorMessage
-                        }));
-                    return false;
-                }
-                initialValueRef.current = value;
-                return true;
-            } catch (e) {
-                if (e instanceof DataValidationError) {
-                    const { actualType, expectedType, message } = e;
-                    if (column) {
-                        const { name, label = name } = column;
-                        const message = `${label} is a ${expectedType} value, data entered is ${actualType} `;
-                        setEditState((state)=>({
-                                ...state,
-                                message
-                            }));
-                        onEdit?.({
-                            editType: "commit",
-                            isValid: false,
-                            previousValue,
-                            value
-                        }, "commit");
-                    } else setEditState((state)=>({
-                            ...state,
-                            message
-                        }));
-                }
-            }
-        }
-        return false;
-    }, [
-        column,
-        editState,
-        onEdit,
-        type
-    ]);
-    const toggleActivation = useCallback(async (input, cancel = false)=>{
-        if (editState.editing) if (isDirtyRef.current) if (cancel) {
-            const { value: previousValue } = editState;
-            isDirtyRef.current = false;
-            setEditState({
-                editing: false,
-                value: initialValueRef.current,
-                message: void 0
-            });
-            onEdit?.({
-                editType: "cancel",
-                isValid: true,
-                previousValue,
-                value: initialValueRef.current
-            }, "commit");
-        } else {
-            const commitSuccessful = await commit();
-            if (commitSuccessful) {
-                setEditState((editState)=>({
-                        ...editState,
-                        editing: false
-                    }));
-                dispatchCustomEvent(input, "vuu-commit");
-            }
-        }
-        else setEditState((editState)=>({
-                ...editState,
-                editing: false
-            }));
-        else if (!cancel) {
-            setEditState((editState)=>({
-                    ...editState,
-                    editing: true
-                }));
-            input.select();
-        }
-    }, [
-        commit,
-        editState,
-        onEdit
-    ]);
-    const handleKeyDown = useCallback(async (evt)=>{
-        const { key, target } = evt;
-        const input = target;
-        if ("Enter" === key) toggleActivation(input);
-        else if ("ArrowRight" === key || "ArrowLeft" === key || "ArrowUp" === key || "ArrowDown" === key) {
-            if (editState.editing) evt.stopPropagation();
-        } else if ("Escape" === evt.key) toggleActivation(input, true);
-    }, [
-        editState,
-        toggleActivation
-    ]);
-    const handleFocus = useCallback((e)=>{
-        const input = e.target;
-        const source = e.relatedTarget;
-        if (source?.classList.contains("vuuTableCell") && source.contains(input)) toggleActivation(input);
-    }, [
-        toggleActivation
-    ]);
-    const handleBlur = useCallback(async ()=>{
-        if (editState.editing) {
-            if (isDirtyRef.current) {
-                const commitSuccessful = await commit();
-                console.log({
-                    commitSuccessful
-                });
-            }
-            setEditState((editState)=>({
-                    ...editState,
-                    editing: false
-                }));
-        }
-    }, [
-        commit,
-        editState
-    ]);
-    const handleChange = useCallback((evt)=>{
-        const { value } = evt.target;
-        isDirtyRef.current = value !== initialValueRef.current;
-        const result = column.clientSideEditValidationCheck?.(value, "change");
-        setEditState({
-            editing: true,
-            value
-        });
-        onEdit?.({
-            editType: "change",
-            isValid: result?.ok !== false,
-            previousValue: initialValueRef.current,
-            value
-        }, "change");
-        if (result?.ok === false) setEditState({
-            editing: true,
-            value,
-            message: result.messages?.join(",")
-        });
-    }, [
-        column,
-        onEdit
-    ]);
-    return {
-        editing: editState.editing,
-        inputProps: {
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            onKeyDown: handleKeyDown
-        },
-        onChange: handleChange,
-        previousValue: editState.previousValue,
-        value: editState.value,
-        warningMessage: editState.message
-    };
-};
-export { useEditableText };

package/src/editable-label/EditableLabel.css.js

@@ -1,81 +0,0 @@
-const css = `
-.vuuEditableLabel {
-  --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);
-  --editableLabel-height: var(--vuuEditableLabel-height, 26px);
-  --saltInput-background: transparent;
-  --saltInput-height: calc(var(--editableLabel-height) - 4px);
-  --saltInput-minWidth: 14px;
-  color: inherit;
-  cursor: default;
-  font-size: var(--salt-text-fontSize);
-  letter-spacing: normal;
-  height: 100%;
-  padding-right: var(--editableLabel-padding);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  z-index: var(--salt-zIndex-default);
-  flex-direction: column;
-  justify-content: center;
-  display: inline-flex;
-  position: relative;
-  overflow: hidden;
-
-  &[data-embedded] {
-    outline: none;
-  }
-
-  & .saltInput-activationIndicator {
-    display: none;
-  }
-
-  & .saltInput-focused {
-    background-color: inherit;
-    outline: none;
-  }
-}
-
-.vuuEditableLabel:before {
-  box-sizing: content-box;
-  content: attr(data-text);
-  height: 0;
-  padding: 0 var(--salt-spacing-200);
-  visibility: hidden;
-  white-space: pre-wrap;
-  display: block;
-}
-
-.vuuEditableLabel .saltInput {
-  font-weight: var(--salt-text-fontWeight);
-  left: var(--editableLabel-padding, 0);
-  padding: 0 var(--salt-spacing-100);
-  right: var(--editableLabel-padding, 0);
-  top: var(--saltEditableLabel-top, 1px);
-  width: calc(100% - 4px);
-}
-
-.vuuEditableLabel-input {
-  box-sizing: content-box;
-  color: inherit;
-  font: inherit;
-  background-color: #0000;
-  border: none;
-  outline: none;
-  flex: 1;
-  width: 0;
-  min-width: 0;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-
-.vuuEditableLabel-label {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: 10px;
-  overflow: hidden;
-}
-
-
-`;
-export default css;