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

package/cjs/drag-drop/useGlobalDragDrop.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+
+const useGlobalDragDrop = ({
+  onDragOverDropTarget,
+  onDrop
+}) => {
+  const dropTargetRef = React.useRef(void 0);
+  const measuredDropTargetsRef = React.useRef(void 0);
+  const dragDropStateRef = React.useRef(null);
+  const mousePosRef = React.useRef({ x: 0, y: 0 });
+  const overDropTarget = React.useCallback((x, y) => {
+    const { current: dropTargets } = measuredDropTargetsRef;
+    if (dropTargets) {
+      for (const [id, measuredTarget] of Object.entries(dropTargets)) {
+        if (vuuUtils.boxContainsPoint(measuredTarget, x, y)) {
+          return id;
+        }
+      }
+    }
+    return void 0;
+  }, []);
+  const dragMouseMoveHandler = React.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;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const dragMouseUpHandler = React.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) {
+        vuuUtils.dispatchCustomEvent(dragDropState.draggableElement, "vuu-dropped");
+      }
+    }
+  }, [dragMouseMoveHandler, onDrop]);
+  const resumeDrag = React.useCallback(
+    (dragDropState) => {
+      dragDropStateRef.current = dragDropState;
+      document.addEventListener("mousemove", dragMouseMoveHandler, false);
+      document.addEventListener("mouseup", dragMouseUpHandler, false);
+      return true;
+    },
+    [dragMouseMoveHandler, dragMouseUpHandler]
+  );
+  return {
+    measuredDropTargetsRef,
+    resumeDrag
+  };
+};
+
+exports.useGlobalDragDrop = useGlobalDragDrop;
+//# sourceMappingURL=useGlobalDragDrop.js.map

package/cjs/drag-drop/useGlobalDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalDragDrop.js","sources":["../../../../packages/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.ts"],"sourcesContent":["import { boxContainsPoint, dispatchCustomEvent } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\nimport { MeasuredTarget } from \"./DragDropProvider\";\nimport { DragDropState } from \"./DragDropState\";\nimport { MouseOffset } from \"./dragDropTypes\";\n\nexport type ResumeDragHandler = (dragDropState: DragDropState) => boolean;\nexport type GlobalDropHandler = (dragDropState: DragDropState) => void;\n\nexport const useGlobalDragDrop = ({\n  onDragOverDropTarget,\n  onDrop,\n}: {\n  onDragOverDropTarget: (\n    dropTargetId: string,\n    dragDropState: DragDropState,\n  ) => boolean;\n  onDrop: (dropTargetId: string, dragDropState: DragDropState) => void;\n}) => {\n  const dropTargetRef = useRef<string>(undefined);\n  const measuredDropTargetsRef =\n    useRef<Record<string, MeasuredTarget>>(undefined);\n\n  const dragDropStateRef = useRef<DragDropState | null>(null);\n  /** current mouse position */\n  const mousePosRef = useRef<MouseOffset>({ x: 0, y: 0 });\n\n  const overDropTarget = useCallback((x: number, y: number) => {\n    const { current: dropTargets } = measuredDropTargetsRef;\n    if (dropTargets) {\n      for (const [id, measuredTarget] of Object.entries(dropTargets)) {\n        if (boxContainsPoint(measuredTarget, x, y)) {\n          return id;\n        }\n      }\n    }\n    return undefined;\n  }, []);\n\n  const dragMouseMoveHandler = useCallback(\n    (evt: MouseEvent) => {\n      const { clientX, clientY } = evt;\n      const { current: dragDropState } = dragDropStateRef;\n\n      mousePosRef.current.x = clientX;\n      mousePosRef.current.y = clientY;\n\n      if (dragDropState?.draggableElement) {\n        const { draggableElement, mouseOffset } = dragDropState;\n\n        const dragPosX = mousePosRef.current.x - mouseOffset.x;\n        const dragPosY = mousePosRef.current.y - mouseOffset.y;\n        draggableElement.style.top = `${dragPosY}px`;\n        draggableElement.style.left = `${dragPosX}px`;\n\n        const dropTargetId = overDropTarget(dragPosX, dragPosY);\n        if (dropTargetId) {\n          const dropTargetWillResumeDrag = onDragOverDropTarget(\n            dropTargetId,\n            dragDropState,\n          );\n          if (dropTargetWillResumeDrag) {\n            // prettier-ignore\n            document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n            document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n            dragDropStateRef.current = null;\n            dropTargetRef.current = undefined;\n          } else {\n            dropTargetRef.current = dropTargetId;\n          }\n        } else {\n          dropTargetRef.current = undefined;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  const dragMouseUpHandler = useCallback(() => {\n    document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n    document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n    const { current: dragDropState } = dragDropStateRef;\n    if (dragDropState) {\n      dragDropStateRef.current = null;\n      if (dropTargetRef.current) {\n        onDrop(dropTargetRef.current, dragDropState);\n      }\n      if (dragDropState.draggableElement) {\n        dispatchCustomEvent(dragDropState.draggableElement, \"vuu-dropped\");\n      }\n    }\n  }, [dragMouseMoveHandler, onDrop]);\n\n  const resumeDrag = useCallback<ResumeDragHandler>(\n    (dragDropState) => {\n      dragDropStateRef.current = dragDropState;\n      document.addEventListener(\"mousemove\", dragMouseMoveHandler, false);\n      document.addEventListener(\"mouseup\", dragMouseUpHandler, false);\n\n      return true;\n    },\n    [dragMouseMoveHandler, dragMouseUpHandler],\n  );\n\n  return {\n    measuredDropTargetsRef,\n    resumeDrag,\n  };\n};\n"],"names":["useRef","useCallback","boxContainsPoint","dispatchCustomEvent"],"mappings":"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"}

package/cjs/editable/useEditableText.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+
+const stringValueOf = (value) => value?.toString() ?? "";
+const useEditableText = ({
+  column,
+  value,
+  onEdit,
+  type = "string"
+}) => {
+  const [editState, setEditState] = React.useState({
+    editing: false,
+    value: stringValueOf(value)
+  });
+  const initialValueRef = React.useRef(value?.toString() ?? "");
+  const isDirtyRef = React.useRef(false);
+  React.useMemo(() => {
+    if (initialValueRef.current !== value?.toString()) {
+      initialValueRef.current = stringValueOf(value);
+      setEditState((editState2) => ({
+        ...editState2,
+        message: void 0,
+        value: stringValueOf(value)
+      }));
+    }
+  }, [value]);
+  const commit = React.useCallback(async () => {
+    const { value: value2 } = editState;
+    const result = column.clientSideEditValidationCheck?.(value2, "*");
+    if (result?.ok === false) {
+      setEditState((state) => ({
+        ...state,
+        message: result?.messages?.join(",")
+      }));
+      return false;
+    } else {
+      const { current: initialValue } = initialValueRef;
+      const previousValue = vuuUtils.getTypedValue(initialValue, type);
+      try {
+        const typedValue = vuuUtils.getTypedValue(value2, type, true);
+        const response = await onEdit?.(
+          {
+            editType: "commit",
+            isValid: true,
+            previousValue,
+            value: typedValue
+          },
+          "commit"
+        );
+        if (vuuUtils.isRpcSuccess(response)) {
+          isDirtyRef.current = false;
+          setEditState(({ previousValue: previousValue2, value: value3 }) => ({
+            editing: false,
+            previousValue: previousValue2 === value3 ? void 0 : previousValue2 === void 0 ? initialValue : previousValue2,
+            value: value3
+          }));
+        } else if (vuuUtils.isRpcError(response)) {
+          setEditState((state) => ({
+            ...state,
+            message: response.errorMessage
+          }));
+          return false;
+        }
+        initialValueRef.current = value2;
+        return true;
+      } catch (e) {
+        if (e instanceof vuuUtils.DataValidationError) {
+          const { actualType, expectedType, message } = e;
+          if (column) {
+            const { name, label = name } = column;
+            const message2 = `${label} is a ${expectedType} value, data entered is ${actualType} `;
+            setEditState((state) => ({
+              ...state,
+              message: message2
+            }));
+            onEdit?.(
+              {
+                editType: "commit",
+                isValid: false,
+                previousValue,
+                value: value2
+              },
+              "commit"
+            );
+          } else {
+            setEditState((state) => ({
+              ...state,
+              message
+            }));
+          }
+        }
+      }
+    }
+    return false;
+  }, [column, editState, onEdit, type]);
+  const toggleActivation = React.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((editState2) => ({ ...editState2, editing: false }));
+              vuuUtils.dispatchCustomEvent(input, "vuu-commit");
+            }
+          }
+        } else {
+          setEditState((editState2) => ({ ...editState2, editing: false }));
+        }
+      } else if (!cancel) {
+        setEditState((editState2) => ({ ...editState2, editing: true }));
+        input.select();
+      }
+    },
+    [commit, editState, onEdit]
+  );
+  const handleKeyDown = React.useCallback(
+    async (evt) => {
+      const { key, target } = evt;
+      const input = target;
+      if (key === "Enter") {
+        toggleActivation(input);
+      } else if (key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown") {
+        if (editState.editing) {
+          evt.stopPropagation();
+        }
+      } else if (evt.key === "Escape") {
+        toggleActivation(input, true);
+      }
+    },
+    [editState, toggleActivation]
+  );
+  const handleFocus = React.useCallback(
+    (e) => {
+      const input = e.target;
+      const source = e.relatedTarget;
+      if (source?.classList.contains("vuuTableCell") && source.contains(input)) {
+        toggleActivation(input);
+      }
+    },
+    [toggleActivation]
+  );
+  const handleBlur = React.useCallback(async () => {
+    if (editState.editing) {
+      if (isDirtyRef.current) {
+        const commitSuccessful = await commit();
+        console.log({ commitSuccessful });
+      }
+      setEditState((editState2) => ({ ...editState2, editing: false }));
+    }
+  }, [commit, editState]);
+  const handleChange = React.useCallback(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      isDirtyRef.current = value2 !== initialValueRef.current;
+      const result = column.clientSideEditValidationCheck?.(value2, "change");
+      setEditState({ editing: true, value: value2 });
+      onEdit?.(
+        {
+          editType: "change",
+          isValid: result?.ok !== false,
+          previousValue: initialValueRef.current,
+          value: value2
+        },
+        "change"
+      );
+      if (result?.ok === false) {
+        setEditState({
+          editing: true,
+          value: value2,
+          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
+  };
+};
+
+exports.useEditableText = useEditableText;
+//# sourceMappingURL=useEditableText.js.map

package/cjs/editable/useEditableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.ts"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type {\n  RuntimeColumnDescriptor,\n  TableCellEditHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  DataValidationError,\n  dispatchCustomEvent,\n  getTypedValue,\n  isRpcError,\n  isRpcSuccess,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  column: Pick<\n    RuntimeColumnDescriptor,\n    \"clientSideEditValidationCheck\" | \"label\" | \"name\"\n  >;\n  value?: T;\n  onEdit?: TableCellEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  editing: boolean;\n  message?: string;\n  // Set once we commit an edit, cleared when edit session is ended.\n  previousValue?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\n// @deprecated replaced by InputCell + useInputCell\nexport const useEditableText = <T extends string | number | boolean = string>({\n  column,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  const [editState, setEditState] = useState<EditState>({\n    editing: false,\n    value: stringValueOf(value),\n  });\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState((editState) => ({\n        ...editState,\n        message: undefined,\n        value: stringValueOf(value),\n      }));\n    }\n  }, [value]);\n\n  const commit = useCallback(async () => {\n    const { value } = editState;\n    const result = column.clientSideEditValidationCheck?.(value, \"*\");\n    if (result?.ok === false) {\n      setEditState((state) => ({\n        ...state,\n        message: result?.messages?.join(\",\"),\n      }));\n      return false;\n    } else {\n      //save initial value,it could be reset by time async operation completes\n      const { current: initialValue } = initialValueRef;\n      const previousValue = getTypedValue(initialValue, type);\n      try {\n        const typedValue = getTypedValue(value, type, true);\n        const response = await onEdit?.(\n          {\n            editType: \"commit\",\n            isValid: true,\n            previousValue,\n            value: typedValue,\n          },\n          \"commit\",\n        );\n        if (isRpcSuccess(response)) {\n          isDirtyRef.current = false;\n          setEditState(({ previousValue, value }) => ({\n            editing: false,\n            previousValue:\n              previousValue === value\n                ? undefined\n                : previousValue === undefined\n                  ? initialValue\n                  : previousValue,\n            value,\n          }));\n        } else if (isRpcError(response)) {\n          setEditState((state) => ({\n            ...state,\n            message: response.errorMessage,\n          }));\n          return false;\n        }\n        initialValueRef.current = value;\n        return true;\n      } catch (e) {\n        if (e instanceof DataValidationError) {\n          const { actualType, expectedType, message } = e;\n          if (column) {\n            const { name, label = name } = column;\n            const message = `${label} is a ${expectedType} value, data entered is ${actualType} `;\n            setEditState((state) => ({\n              ...state,\n              message,\n            }));\n            onEdit?.(\n              {\n                editType: \"commit\",\n                isValid: false,\n                previousValue,\n                value,\n              },\n              \"commit\",\n            );\n          } else {\n            setEditState((state) => ({\n              ...state,\n              message,\n            }));\n          }\n        }\n      }\n    }\n    return false;\n  }, [column, editState, onEdit, type]);\n\n  /**\n   * Depending on the current state (editing or not, dirty or not) activation will either be\n   * entering into edit state, leaving edit state or commiting edited value.\n   */\n  const toggleActivation = useCallback(\n    async (input: HTMLInputElement, cancel = false) => {\n      if (editState.editing) {\n        if (isDirtyRef.current) {\n          if (cancel) {\n            const { value: previousValue } = editState;\n            isDirtyRef.current = false;\n            setEditState({\n              editing: false,\n              value: initialValueRef.current,\n              message: undefined,\n            });\n            // this assumes the original value was valid, is that safe ?\n            onEdit?.(\n              {\n                editType: \"cancel\",\n                isValid: true,\n                previousValue,\n                value: initialValueRef.current,\n              },\n              \"commit\",\n            );\n          } else {\n            const commitSuccessful = await commit();\n            if (commitSuccessful) {\n              setEditState((editState) => ({ ...editState, editing: false }));\n              dispatchCustomEvent(input, \"vuu-commit\");\n            }\n          }\n        } else {\n          setEditState((editState) => ({ ...editState, editing: false }));\n        }\n      } else if (!cancel) {\n        setEditState((editState) => ({ ...editState, editing: true }));\n        input.select();\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const handleKeyDown = useCallback(\n    async (evt: KeyboardEvent<HTMLElement>) => {\n      const { key, target } = evt;\n      const input = target as HTMLInputElement;\n      if (key === \"Enter\") {\n        toggleActivation(input);\n      } else if (\n        key === \"ArrowRight\" ||\n        key === \"ArrowLeft\" ||\n        key === \"ArrowUp\" ||\n        key === \"ArrowDown\"\n      ) {\n        if (editState.editing) {\n          evt.stopPropagation();\n        } else {\n          // console.log(\n          //   `[useEditableText] handleKeydown, arrowkey, not editing so let it bubble`,\n          // );\n          // evt.preventDefault();\n        }\n      } else if (evt.key === \"Escape\") {\n        toggleActivation(input, true);\n      }\n    },\n    [editState, toggleActivation],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (e) => {\n      // If focus is transferred from enclosing cell element, we are explicitl entering edit mode\n      const input = e.target as HTMLInputElement;\n      const source = e.relatedTarget as HTMLElement;\n      if (\n        source?.classList.contains(\"vuuTableCell\") &&\n        source.contains(input)\n      ) {\n        toggleActivation(input);\n      }\n    },\n    [toggleActivation],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(async () => {\n    if (editState.editing) {\n      if (isDirtyRef.current) {\n        const commitSuccessful = await commit();\n        console.log({ commitSuccessful });\n      }\n      setEditState((editState) => ({ ...editState, editing: false }));\n    }\n  }, [commit, editState]);\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = column.clientSideEditValidationCheck?.(value, \"change\");\n      setEditState({ editing: true, value });\n\n      onEdit?.(\n        {\n          editType: \"change\",\n          isValid: result?.ok !== false,\n          previousValue: initialValueRef.current,\n          value,\n        },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        setEditState({\n          editing: true,\n          value,\n          message: result.messages?.join(\",\"),\n        });\n      }\n    },\n    [column, onEdit],\n  );\n\n  // console.log(\n  //   `[useEditableText] edited = ${\n  //     editState.previousValue !== undefined &&\n  //     editState.previousValue !== editState.value\n  //   }\n  //   editState.previousValue ${editState.previousValue}\n  //   editState.value ${editState.value}\n  //   `,\n  // );\n\n  return {\n    editing: editState.editing,\n    inputProps: {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    previousValue: editState.previousValue,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","editState","useCallback","value","getTypedValue","isRpcSuccess","previousValue","isRpcError","DataValidationError","message","dispatchCustomEvent"],"mappings":"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"}

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

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

package/cjs/editable-label/EditableLabel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/editable-label/EditableLabel.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var EditableLabel$1 = require('./EditableLabel.css.js');
+
+const classBase = "vuuEditableLabel";
+const NullEditAPI = {
+  beginEdit: () => void 0
+};
+const EditableLabel = React.forwardRef(function EditableLabel2({
+  className: classNameProp,
+  defaultEditing,
+  defaultValue,
+  editLabelApiRef,
+  editing: editingProp,
+  onChange,
+  onEnterEditMode,
+  onExitEditMode,
+  value: valueProp,
+  ...restProps
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-editable-label",
+    css: EditableLabel$1,
+    window: targetWindow
+  });
+  const inputRef = React.useRef(null);
+  const editingRef = React.useRef(false);
+  const [value, setValue] = core.useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? "",
+    name: "EditableLabel",
+    state: "value"
+  });
+  const [editing, _setEditing] = core.useControlled({
+    controlled: editingProp,
+    default: defaultEditing ?? false,
+    name: "EditableLabel",
+    state: "editing"
+  });
+  const setEditing = React.useCallback(
+    (value2) => {
+      _setEditing(editingRef.current = value2);
+    },
+    [_setEditing]
+  );
+  const initialValue = React.useRef(value);
+  React.useLayoutEffect(() => {
+    if (editing) {
+      if (inputRef.current !== null) {
+        inputRef.current.select();
+        inputRef.current.focus();
+      }
+    }
+  }, [editing, inputRef]);
+  const beginEdit = React.useCallback(() => {
+    setEditing(true);
+    onEnterEditMode?.();
+  }, [onEnterEditMode, setEditing]);
+  React.useImperativeHandle(
+    editLabelApiRef,
+    () => ({
+      beginEdit
+    }),
+    [beginEdit]
+  );
+  const exitEditMode = React.useCallback(
+    ({ cancelEdit = false, allowDeactivation = false } = {}) => {
+      setEditing(false);
+      const originalValue = initialValue.current;
+      if (cancelEdit || originalValue === value) {
+        if (originalValue !== value) {
+          setValue(originalValue);
+        }
+        onExitEditMode?.(
+          originalValue,
+          originalValue,
+          allowDeactivation,
+          cancelEdit
+        );
+      } else {
+        initialValue.current = value;
+        onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit);
+      }
+    },
+    [onExitEditMode, setEditing, setValue, value]
+  );
+  const handleChange = (evt) => {
+    const { value: value2 } = evt.target;
+    setValue(value2);
+    onChange && onChange(value2);
+  };
+  const handleBlur = React.useCallback(() => {
+    if (editingRef.current) {
+      exitEditMode({ allowDeactivation: true });
+    }
+  }, [exitEditMode]);
+  const handleKeyDown = (evt) => {
+    if (editing && evt.key === "Enter") {
+      evt.stopPropagation();
+      exitEditMode();
+    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
+      evt.stopPropagation();
+    } else if (evt.key === "Escape") {
+      exitEditMode({ cancelEdit: true });
+    }
+  };
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-editing`]: editing
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...restProps,
+      className,
+      "data-text": value,
+      ref: forwardedRef,
+      children: editing ? /* @__PURE__ */ jsxRuntime.jsx(
+        core.Input,
+        {
+          inputProps: { className: `${classBase}-input`, spellCheck: false },
+          value,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          inputRef,
+          textAlign: "left",
+          variant: "secondary"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: value })
+    }
+  );
+});
+
+exports.EditableLabel = EditableLabel;
+exports.NullEditAPI = NullEditAPI;
+//# sourceMappingURL=EditableLabel.js.map

package/cjs/editable-label/EditableLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.js","sources":["../../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean,\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode?: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing],\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit],\n  );\n\n  const exitEditMode = useCallback(\n    ({ cancelEdit = false, allowDeactivation = false } = {}) => {\n      setEditing(false);\n      const originalValue = initialValue.current;\n      if (cancelEdit || originalValue === value) {\n        if (originalValue !== value) {\n          setValue(originalValue);\n        }\n        onExitEditMode?.(\n          originalValue,\n          originalValue,\n          allowDeactivation,\n          cancelEdit,\n        );\n      } else {\n        initialValue.current = value;\n        onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit);\n      }\n    },\n    [onExitEditMode, setEditing, setValue, value],\n  );\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = useCallback(() => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  }, [exitEditMode]);\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useCallback","value","useLayoutEffect","useImperativeHandle","jsx","Input"],"mappings":"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"}

package/cjs/expando-input/ExpandoInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var expandoInputCss = ".vuuExpandoInput {\n  --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n  --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n  --saltInput-height: calc(var(--expandoInput-height) - 2px);\n  --saltInput-minHeight: var(--saltInput-height);\n  --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n\n  border: var(--vuuExpandoInput-border, none);\n  border-radius: var(--vuuExpandoInput-borderRadius, 0);\n  color: inherit;\n  cursor: default;\n  display: inline-block;\n  font-size: var(--salt-text-fontSize);\n  height: var(--expandoInput-height);\n  min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n  outline: none;\n  padding: 0 var(--expandoInput-padding);\n  position: relative;\n\n  .saltInput-secondary {\n    --saltInput-background: var(\n      --vuuExpandoInput-background,\n      var(--salt-container-primary-background)\n    );\n  }\n}\n\n.vuuExpandoInput:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n.vuuExpandoInput-error {\n  border-color: var(--vuu-color-red-50);\n}\n\n.vuuExpandoInput .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--expandoInput-padding, 0);\n  padding: 0;\n  outline-style: none;\n  position: absolute;\n  right: var(--expandoInput-padding, 0);\n  width: auto;\n}\n\n.vuuExpandoInput .saltInput-activationIndicator {\n  display: none;\n}\n\n.vuuExpandoInput-input {\n  background-color: transparent;\n  border: none;\n  box-sizing: content-box;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 20px;\n  margin: 0;\n  min-width: 0;\n  outline: none;\n  padding: 0;\n}\n";
+
+module.exports = expandoInputCss;
+//# sourceMappingURL=ExpandoInput.css.js.map

package/cjs/expando-input/ExpandoInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandoInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/expando-input/ExpandoInput.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var VuuInput = require('../vuu-input/VuuInput.js');
+var ExpandoInput$1 = require('./ExpandoInput.css.js');
+
+const classBase = "vuuExpandoInput";
+const noop = () => void 0;
+const ExpandoInput = React.forwardRef(function ExpandoInput2({
+  className: classNameProp,
+  errorMessage,
+  value,
+  inputProps,
+  onCommit = noop,
+  ...props
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-expando-input",
+    css: ExpandoInput$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(classBase, classNameProp, {
+        [`${classBase}-error`]: errorMessage
+      }),
+      "data-text": value,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        VuuInput.VuuInput,
+        {
+          ...props,
+          errorMessage,
+          inputProps: { ...inputProps, className: `${classBase}-input` },
+          onCommit,
+          ref: forwardedRef,
+          style: { padding: 0 },
+          textAlign: "left",
+          value,
+          variant: "secondary"
+        }
+      )
+    }
+  );
+});
+
+exports.ExpandoInput = ExpandoInput;
+//# sourceMappingURL=ExpandoInput.js.map

package/cjs/expando-input/ExpandoInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandoInput.js","sources":["../../../../packages/vuu-ui-controls/src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: CommitHandler;\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["forwardRef","ExpandoInput","useWindow","useComponentCssInjection","expandoInputCss","jsx","VuuInput"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA;AAMN,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAAA,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,GACF;AAEJ,CAAC;;;;"}