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

package/esm/time-input/MaskedInput.js

@@ -0,0 +1,375 @@
+import { EventEmitter, updateTimeString, zeroTimeUnit, incrementTimeUnitValue, decrementTimeUnitValue, zeroTime, isValidTimeString, createSyntheticEvent } from '@vuu-ui/vuu-utils';
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _controlled, _input, _isFocused, _isIncrementalChange, _selectionStart, _selectionEnd, _value, _unitSelected, _halfUnitSelected;
+const NullSelection = { end: null, start: null };
+const FullSelection = { end: 0, start: 8 };
+const CursorAtEnd = { end: 8, start: 8 };
+class MaskedInput extends EventEmitter {
+  constructor(defaultValue, inputEl = null) {
+    super();
+    __privateAdd(this, _controlled, false);
+    __privateAdd(this, _input, null);
+    __privateAdd(this, _isFocused, false);
+    __privateAdd(this, _isIncrementalChange, false);
+    __privateAdd(this, _selectionStart, -1);
+    __privateAdd(this, _selectionEnd, -1);
+    __privateAdd(this, _value);
+    __privateAdd(this, _unitSelected);
+    __privateAdd(this, _halfUnitSelected);
+    /**
+     * The change event is fired programatically. This will only be handled
+     * by a native event handler ( not a React handler). We handle this event
+     * and convert to a React (Synthetic) event.
+     */
+    __publicField(this, "emitSyntheticChangeEvent", (e) => {
+      const syntheticEvent = createSyntheticEvent(
+        e
+      );
+      this.emit("change", syntheticEvent);
+    });
+    __publicField(this, "focus", () => {
+      if (__privateGet(this, _input)) {
+        __privateSet(this, _isFocused, true);
+        requestAnimationFrame(() => {
+          this.select("hours");
+        });
+      }
+    });
+    __publicField(this, "blur", () => {
+      this.removeSelection();
+      __privateSet(this, _isFocused, false);
+    });
+    if (inputEl) {
+      this.input = inputEl;
+    }
+    __privateSet(this, _value, defaultValue ?? zeroTime);
+  }
+  set input(el) {
+    if (__privateGet(this, _input)) {
+      throw Error(
+        "MaskedInput cannot be reused, create a new instance for a new input"
+      );
+    }
+    __privateSet(this, _input, el);
+    el.addEventListener("change", this.emitSyntheticChangeEvent);
+  }
+  get cursorPos() {
+    return this.selectionStart;
+  }
+  set cursorPos(value) {
+    this.selectionStart = value;
+    this.selectionEnd = value;
+    if (__privateGet(this, _input)) {
+      __privateGet(this, _input).setSelectionRange(value, value);
+    }
+  }
+  get isFocused() {
+    return __privateGet(this, _isFocused);
+  }
+  get selectionStart() {
+    return __privateGet(this, _selectionStart);
+  }
+  set selectionStart(value) {
+    __privateSet(this, _selectionStart, value);
+  }
+  get selectionEnd() {
+    return __privateGet(this, _selectionEnd);
+  }
+  set selectionEnd(value) {
+    __privateSet(this, _selectionEnd, value);
+  }
+  setValue(value) {
+    if (!__privateGet(this, _controlled)) {
+      __privateSet(this, _isIncrementalChange, false);
+      __privateSet(this, _value, value);
+    }
+    if (__privateGet(this, _input)) {
+      __privateGet(this, _input).value = value;
+      __privateGet(this, _input).dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  setUnitValue(unit, value) {
+    const newTimeString = updateTimeString(__privateGet(this, _value), unit, value);
+    this.setValue(newTimeString);
+  }
+  getUnitValue(unit) {
+    switch (unit) {
+      case "hours":
+        return __privateGet(this, _value).slice(0, 2);
+      case "minutes":
+        return __privateGet(this, _value).slice(3, 5);
+      case "seconds":
+        return __privateGet(this, _value).slice(6, 8);
+      default:
+        throw Error(`[MaskedInout] invalue unit ${unit}`);
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  /**
+   * Setting the value this way invokes 'controlled' mode
+   */
+  set value(value) {
+    __privateSet(this, _controlled, true);
+    __privateSet(this, _value, value);
+    if (this.isFocused) {
+      const isIncremental = __privateGet(this, _isIncrementalChange);
+      __privateSet(this, _isIncrementalChange, false);
+      requestAnimationFrame(() => {
+        if (isIncremental) {
+          this.restoreSelection();
+        } else {
+          this.advanceSelection();
+        }
+      });
+    }
+  }
+  clear(unit) {
+    if (__privateGet(this, _input)) {
+      let newValue = __privateGet(this, _value);
+      if (unit === "hours") {
+        newValue = zeroTimeUnit.concat(__privateGet(this, _value).slice(2));
+      } else if (unit === "minutes") {
+        newValue = __privateGet(this, _value).slice(0, 3).concat(zeroTimeUnit).concat(__privateGet(this, _value).slice(5));
+      } else if (unit === "seconds") {
+        newValue = __privateGet(this, _value).slice(0, 6).concat(zeroTimeUnit);
+      }
+      if (newValue !== __privateGet(this, _value)) {
+        this.setValue(newValue);
+      }
+    }
+  }
+  select(unit, halfUnit = false) {
+    if (__privateGet(this, _input)) {
+      const offset = halfUnit ? 1 : 0;
+      if (unit === "hours") {
+        this.selectionStart = __privateGet(this, _input).selectionStart = 0 + offset;
+        this.selectionEnd = __privateGet(this, _input).selectionEnd = 2;
+      } else if (unit === "minutes") {
+        this.selectionStart = __privateGet(this, _input).selectionStart = 3 + offset;
+        this.selectionEnd = __privateGet(this, _input).selectionEnd = 5;
+      } else if (unit === "seconds") {
+        this.selectionStart = __privateGet(this, _input).selectionStart = 6 + offset;
+        this.selectionEnd = __privateGet(this, _input).selectionEnd = 8;
+      }
+      __privateGet(this, _input).setSelectionRange(this.selectionStart, this.selectionEnd);
+      if (halfUnit) {
+        __privateSet(this, _halfUnitSelected, unit);
+        __privateSet(this, _unitSelected, void 0);
+      } else {
+        __privateSet(this, _halfUnitSelected, void 0);
+        __privateSet(this, _unitSelected, unit);
+      }
+    }
+  }
+  removeSelection() {
+    __privateSet(this, _selectionStart, this.selectionEnd = 8);
+    __privateSet(this, _unitSelected, void 0);
+    __privateSet(this, _halfUnitSelected, void 0);
+  }
+  restoreSelection() {
+    if (__privateGet(this, _unitSelected)) {
+      this.select(__privateGet(this, _unitSelected));
+    }
+  }
+  advanceSelection() {
+    if (__privateGet(this, _unitSelected)) {
+      this.select(__privateGet(this, _unitSelected), true);
+    } else if (__privateGet(this, _halfUnitSelected) === "hours") {
+      this.select("minutes");
+    } else if (__privateGet(this, _halfUnitSelected) === "minutes") {
+      this.select("seconds");
+    } else if (__privateGet(this, _halfUnitSelected) === "seconds") {
+      this.select("seconds");
+    } else {
+      throw Error("unreachable code, in theory");
+    }
+  }
+  moveFocus(direction) {
+    if (direction === "right") {
+      if (__privateGet(this, _unitSelected) === "hours" || __privateGet(this, _halfUnitSelected) === "hours") {
+        this.select("minutes");
+      } else if (__privateGet(this, _unitSelected) === "minutes" || __privateGet(this, _halfUnitSelected) === "minutes") {
+        this.select("seconds");
+      } else if (__privateGet(this, _unitSelected) === "seconds" || __privateGet(this, _halfUnitSelected) === "seconds") {
+        this.select("seconds");
+      }
+    } else {
+      if (__privateGet(this, _unitSelected) === "seconds" || __privateGet(this, _halfUnitSelected) === "seconds") {
+        this.select("minutes");
+      } else if (__privateGet(this, _unitSelected) === "minutes" || __privateGet(this, _halfUnitSelected) === "minutes") {
+        this.select("hours");
+      } else if (__privateGet(this, _unitSelected) === "hours" || __privateGet(this, _halfUnitSelected) === "hours") {
+        this.select("hours");
+      } else {
+        const selection = this.getSelection();
+        if (selection === CursorAtEnd) {
+          this.select("seconds");
+        }
+      }
+    }
+  }
+  pasteValue(value) {
+    __privateSet(this, _halfUnitSelected, void 0);
+    __privateSet(this, _unitSelected, void 0);
+    __privateSet(this, _value, value);
+  }
+  getUnitAtCursorPos(cursorPos = this.cursorPos) {
+    if (cursorPos >= 0 && cursorPos < 3) {
+      return "hours";
+    } else if (cursorPos < 6) {
+      return "minutes";
+    } else if (cursorPos <= 8) {
+      return "seconds";
+    } else {
+      throw Error(
+        `[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`
+      );
+    }
+  }
+  incrementValue() {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _isIncrementalChange, true);
+      const unit = this.getUnitAtCursorPos();
+      const unitValue = this.getUnitValue(unit);
+      const newUnitValue = incrementTimeUnitValue(unit, unitValue);
+      this.setUnitValue(unit, newUnitValue);
+      this.select(unit);
+    }
+  }
+  decrementValue() {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _isIncrementalChange, true);
+      const unit = this.getUnitAtCursorPos();
+      const unitValue = this.getUnitValue(unit);
+      const newUnitValue = decrementTimeUnitValue(unit, unitValue);
+      this.setUnitValue(unit, newUnitValue);
+      this.select(unit);
+    }
+  }
+  backspace() {
+    if (__privateGet(this, _input)) {
+      const { cursorPos } = this;
+      if (__privateGet(this, _unitSelected) === "seconds") {
+        this.clear("seconds");
+        this.select("minutes");
+      } else if (__privateGet(this, _unitSelected) === "minutes") {
+        this.clear("minutes");
+        this.select("hours");
+      } else if (__privateGet(this, _unitSelected) === "hours") {
+        this.clear("hours");
+        this.select("hours");
+      } else {
+        if (cursorPos > 0) {
+          const offset = this.selectionStart === 6 || this.selectionStart === 3 ? 2 : 1;
+          const newValue = __privateGet(this, _value).slice(0, cursorPos - offset).concat(zeroTime.slice(cursorPos - offset, cursorPos)).concat(__privateGet(this, _value).slice(cursorPos));
+          this.selectionStart -= offset;
+          this.selectionEnd -= offset;
+          this.setValue(newValue);
+          requestAnimationFrame(() => {
+            __privateGet(this, _input)?.setSelectionRange(
+              __privateGet(this, _selectionStart),
+              this.selectionEnd
+            );
+          });
+        }
+      }
+    }
+  }
+  update(key) {
+    if (__privateGet(this, _input)) {
+      const { cursorPos } = this;
+      if (cursorPos < 8) {
+        const originalValue = __privateGet(this, _value);
+        const newValue = __privateGet(this, _value).split("").toSpliced(cursorPos, 1, key).join("");
+        this.setValue(newValue);
+        if (!isValidTimeString(newValue)) {
+          if (__privateGet(this, _unitSelected)) {
+            this.select(__privateGet(this, _unitSelected));
+            __privateGet(this, _input).classList.add("invalid");
+          }
+        } else {
+          __privateGet(this, _input).classList.remove("invalid");
+          if (__privateGet(this, _controlled) && newValue === originalValue) {
+            this.advanceSelection();
+          } else if (!__privateGet(this, _controlled)) {
+            this.advanceSelection();
+          }
+        }
+      }
+    }
+  }
+  getSelection() {
+    if (__privateGet(this, _input)) {
+      const { selectionEnd, selectionStart } = __privateGet(this, _input);
+      if (selectionEnd === null || selectionStart === null) {
+        return NullSelection;
+      } else if (selectionStart === 0 && selectionEnd === 8) {
+        return FullSelection;
+      } else if (selectionStart === 8 && selectionEnd === 8) {
+        return CursorAtEnd;
+      } else {
+        return {
+          end: selectionEnd,
+          start: selectionStart
+        };
+      }
+    } else {
+      throw Error(`[MasketInput] selection referenced, but no input`);
+    }
+  }
+  click() {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _isFocused, true);
+      const selection = this.getSelection();
+      if (selection === NullSelection) {
+        this.select("hours");
+      } else if (selection === FullSelection) ; else {
+        const cursorPos = __privateGet(this, _input).selectionStart ?? 0;
+        this.select(this.getUnitAtCursorPos(cursorPos));
+      }
+    }
+  }
+  doubleClick() {
+    if (__privateGet(this, _input)) {
+      const { selectionStart, selectionEnd } = __privateGet(this, _input);
+      if (selectionStart === null || selectionEnd === null) ; else {
+        if (selectionStart < 3) {
+          this.select("hours");
+        } else if (selectionStart < 6) {
+          this.select("minutes");
+        } else if (selectionStart <= 8) {
+          this.select("seconds");
+        }
+      }
+    }
+  }
+}
+_controlled = new WeakMap();
+_input = new WeakMap();
+_isFocused = new WeakMap();
+_isIncrementalChange = new WeakMap();
+_selectionStart = new WeakMap();
+_selectionEnd = new WeakMap();
+_value = new WeakMap();
+_unitSelected = new WeakMap();
+_halfUnitSelected = new WeakMap();
+
+export { MaskedInput };
+//# sourceMappingURL=MaskedInput.js.map

package/esm/time-input/MaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/MaskedInput.ts"],"sourcesContent":["import {\n  createSyntheticEvent,\n  decrementTimeUnitValue,\n  EventEmitter,\n  Hours,\n  incrementTimeUnitValue,\n  isValidTimeString,\n  Minutes,\n  Seconds,\n  TimeString,\n  TimeUnit,\n  TimeUnitValue,\n  updateTimeString,\n  zeroTime,\n  zeroTimeUnit,\n} from \"@vuu-ui/vuu-utils\";\nimport { ChangeEventHandler } from \"react\";\n\nexport type Digit = \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\";\n\ntype NullSelection = {\n  end: null;\n  start: null;\n};\ntype Selection =\n  | {\n      end: number;\n      start: number;\n    }\n  | NullSelection;\n\nconst NullSelection: NullSelection = { end: null, start: null };\nconst FullSelection: Selection = { end: 0, start: 8 };\nconst CursorAtEnd: Selection = { end: 8, start: 8 };\n\nexport type MaskedInputEvents = {\n  change: ChangeEventHandler<HTMLInputElement>;\n};\n\nexport class MaskedInput extends EventEmitter<MaskedInputEvents> {\n  #controlled = false;\n  #input: HTMLInputElement | null = null;\n  #isFocused = false;\n  #isIncrementalChange = false;\n  #selectionStart = -1;\n  #selectionEnd = -1;\n  #value;\n  #unitSelected?: TimeUnit;\n  #halfUnitSelected?: TimeUnit;\n\n  constructor(\n    defaultValue: TimeString | undefined,\n    inputEl: HTMLInputElement | null = null,\n  ) {\n    super();\n    if (inputEl) {\n      this.input = inputEl;\n    }\n    this.#value = defaultValue ?? zeroTime;\n  }\n\n  set input(el: HTMLInputElement) {\n    if (this.#input) {\n      throw Error(\n        \"MaskedInput cannot be reused, create a new instance for a new input\",\n      );\n    }\n    this.#input = el;\n    el.addEventListener(\"change\", this.emitSyntheticChangeEvent);\n  }\n\n  /**\n   * The change event is fired programatically. This will only be handled\n   * by a native event handler ( not a React handler). We handle this event\n   * and convert to a React (Synthetic) event.\n   */\n  private emitSyntheticChangeEvent = (e: Event) => {\n    const syntheticEvent = createSyntheticEvent(\n      e,\n    ) as React.ChangeEvent<HTMLInputElement>;\n\n    this.emit(\"change\", syntheticEvent);\n  };\n\n  get cursorPos() {\n    return this.selectionStart;\n  }\n  set cursorPos(value: number) {\n    this.selectionStart = value;\n    this.selectionEnd = value;\n    if (this.#input) {\n      this.#input.setSelectionRange(value, value);\n    }\n  }\n\n  get isFocused() {\n    return this.#isFocused;\n  }\n\n  get selectionStart() {\n    return this.#selectionStart;\n  }\n  set selectionStart(value: number) {\n    this.#selectionStart = value;\n  }\n\n  get selectionEnd() {\n    return this.#selectionEnd;\n  }\n  set selectionEnd(value: number) {\n    this.#selectionEnd = value;\n  }\n\n  private setValue(value: TimeString) {\n    if (!this.#controlled) {\n      this.#isIncrementalChange = false;\n      this.#value = value;\n    }\n\n    if (this.#input) {\n      // HM this updateds the input value, even if we are controlled.\n      // Thats not right, but if we don't update it, the event will\n      // not carry thwe right value. I don;t thibnk we can simulate\n      // the correct behaviour\n      this.#input.value = value;\n      // this triggers the native change event, which we convert\n      // // to synthetic event and emit in input setter above\n      this.#input.dispatchEvent(\n        new Event(\"change\", {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  private setUnitValue(unit: TimeUnit, value: Hours | Minutes | Seconds) {\n    const newTimeString = updateTimeString(this.#value, unit, value);\n    this.setValue(newTimeString);\n  }\n\n  private getUnitValue<T extends TimeUnit>(unit: T): TimeUnitValue<T> {\n    switch (unit) {\n      case \"hours\":\n        return this.#value.slice(0, 2) as TimeUnitValue<T>;\n      case \"minutes\":\n        return this.#value.slice(3, 5) as TimeUnitValue<T>;\n      case \"seconds\":\n        return this.#value.slice(6, 8) as TimeUnitValue<T>;\n      default:\n        throw Error(`[MaskedInout] invalue unit ${unit}`);\n    }\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  /**\n   * Setting the value this way invokes 'controlled' mode\n   */\n  set value(value: TimeString) {\n    this.#controlled = true;\n    this.#value = value;\n    if (this.isFocused) {\n      const isIncremental = this.#isIncrementalChange;\n      this.#isIncrementalChange = false;\n\n      requestAnimationFrame(() => {\n        if (isIncremental) {\n          this.restoreSelection();\n        } else {\n          this.advanceSelection();\n        }\n      });\n    }\n  }\n\n  clear(unit: TimeUnit) {\n    if (this.#input) {\n      let newValue = this.#value;\n      if (unit === \"hours\") {\n        newValue = zeroTimeUnit.concat(this.#value.slice(2)) as TimeString;\n      } else if (unit === \"minutes\") {\n        newValue = this.#value\n          .slice(0, 3)\n          .concat(zeroTimeUnit)\n          .concat(this.#value.slice(5)) as TimeString;\n      } else if (unit === \"seconds\") {\n        newValue = this.#value.slice(0, 6).concat(zeroTimeUnit) as TimeString;\n      }\n      if (newValue !== this.#value) {\n        this.setValue(newValue);\n      }\n    }\n  }\n\n  select(unit: TimeUnit, halfUnit = false) {\n    if (this.#input) {\n      const offset = halfUnit ? 1 : 0;\n      if (unit === \"hours\") {\n        this.selectionStart = this.#input.selectionStart = 0 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 2;\n      } else if (unit === \"minutes\") {\n        this.selectionStart = this.#input.selectionStart = 3 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 5;\n      } else if (unit === \"seconds\") {\n        this.selectionStart = this.#input.selectionStart = 6 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 8;\n      }\n      this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);\n      if (halfUnit) {\n        this.#halfUnitSelected = unit;\n        this.#unitSelected = undefined;\n      } else {\n        this.#halfUnitSelected = undefined;\n        this.#unitSelected = unit;\n      }\n    }\n  }\n\n  removeSelection() {\n    this.#selectionStart = this.selectionEnd = 8;\n    this.#unitSelected = undefined;\n    this.#halfUnitSelected = undefined;\n  }\n\n  restoreSelection() {\n    if (this.#unitSelected) {\n      this.select(this.#unitSelected);\n    }\n  }\n\n  advanceSelection() {\n    if (this.#unitSelected) {\n      this.select(this.#unitSelected, true);\n    } else if (this.#halfUnitSelected === \"hours\") {\n      this.select(\"minutes\");\n    } else if (this.#halfUnitSelected === \"minutes\") {\n      this.select(\"seconds\");\n    } else if (this.#halfUnitSelected === \"seconds\") {\n      this.select(\"seconds\");\n    } else {\n      throw Error(\"unreachable code, in theory\");\n    }\n  }\n\n  moveFocus(direction: \"left\" | \"right\") {\n    if (direction === \"right\") {\n      if (\n        this.#unitSelected === \"hours\" ||\n        this.#halfUnitSelected === \"hours\"\n      ) {\n        this.select(\"minutes\");\n      } else if (\n        this.#unitSelected === \"minutes\" ||\n        this.#halfUnitSelected === \"minutes\"\n      ) {\n        this.select(\"seconds\");\n      } else if (\n        this.#unitSelected === \"seconds\" ||\n        this.#halfUnitSelected === \"seconds\"\n      ) {\n        // Already at the rightmost field, stay at seconds\n        this.select(\"seconds\");\n      }\n    } else {\n      if (\n        this.#unitSelected === \"seconds\" ||\n        this.#halfUnitSelected === \"seconds\"\n      ) {\n        this.select(\"minutes\");\n      } else if (\n        this.#unitSelected === \"minutes\" ||\n        this.#halfUnitSelected === \"minutes\"\n      ) {\n        this.select(\"hours\");\n      } else if (\n        this.#unitSelected === \"hours\" ||\n        this.#halfUnitSelected === \"hours\"\n      ) {\n        // Already at the leftmost field, stay at hours\n        this.select(\"hours\");\n      } else {\n        const selection = this.getSelection();\n        if (selection === CursorAtEnd) {\n          this.select(\"seconds\");\n        }\n      }\n    }\n  }\n\n  pasteValue(value: TimeString) {\n    this.#halfUnitSelected = undefined;\n    this.#unitSelected = undefined;\n    this.#value = value;\n  }\n\n  private getUnitAtCursorPos(cursorPos = this.cursorPos): TimeUnit {\n    if (cursorPos >= 0 && cursorPos < 3) {\n      return \"hours\";\n    } else if (cursorPos < 6) {\n      return \"minutes\";\n    } else if (cursorPos <= 8) {\n      return \"seconds\";\n    } else {\n      throw Error(\n        `[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`,\n      );\n    }\n  }\n\n  incrementValue() {\n    if (this.#input) {\n      this.#isIncrementalChange = true;\n      const unit = this.getUnitAtCursorPos();\n      const unitValue = this.getUnitValue(unit);\n      const newUnitValue = incrementTimeUnitValue(unit, unitValue);\n      this.setUnitValue(unit, newUnitValue);\n      this.select(unit);\n    }\n  }\n\n  decrementValue() {\n    if (this.#input) {\n      this.#isIncrementalChange = true;\n      const unit = this.getUnitAtCursorPos();\n      const unitValue = this.getUnitValue(unit);\n      const newUnitValue = decrementTimeUnitValue(unit, unitValue);\n      this.setUnitValue(unit, newUnitValue);\n      this.select(unit);\n    }\n  }\n\n  backspace() {\n    if (this.#input) {\n      const { cursorPos } = this;\n\n      if (this.#unitSelected === \"seconds\") {\n        this.clear(\"seconds\");\n        this.select(\"minutes\");\n      } else if (this.#unitSelected === \"minutes\") {\n        this.clear(\"minutes\");\n        this.select(\"hours\");\n      } else if (this.#unitSelected === \"hours\") {\n        this.clear(\"hours\");\n        this.select(\"hours\");\n      } else {\n        if (cursorPos > 0) {\n          const offset =\n            this.selectionStart === 6 || this.selectionStart === 3 ? 2 : 1;\n          const newValue = this.#value\n            .slice(0, cursorPos - offset)\n            .concat(zeroTime.slice(cursorPos - offset, cursorPos))\n            .concat(this.#value.slice(cursorPos)) as TimeString;\n          this.selectionStart -= offset;\n          this.selectionEnd -= offset;\n          this.setValue(newValue);\n\n          requestAnimationFrame(() => {\n            this.#input?.setSelectionRange(\n              this.#selectionStart,\n              this.selectionEnd,\n            );\n          });\n        }\n      }\n    }\n  }\n\n  update(key: Digit) {\n    if (this.#input) {\n      const { cursorPos } = this;\n      if (cursorPos < 8) {\n        const originalValue = this.#value;\n        const newValue = this.#value\n          .split(\"\")\n          .toSpliced(cursorPos, 1, key)\n          .join(\"\") as TimeString;\n\n        this.setValue(newValue);\n\n        if (!isValidTimeString(newValue)) {\n          if (this.#unitSelected) {\n            this.select(this.#unitSelected);\n            this.#input.classList.add(\"invalid\");\n          }\n        } else {\n          this.#input.classList.remove(\"invalid\");\n\n          if (this.#controlled && newValue === originalValue) {\n            // Special case - user has overtyped a digit with same digit,\n            // value has not changed, so will not be set, which would normally\n            // trigger advance in controlled mode. Advance so next digit\n            // typed will be in correct position\n            this.advanceSelection();\n          } else if (!this.#controlled) {\n            this.advanceSelection();\n          }\n        }\n      }\n    }\n  }\n\n  private getSelection(): Selection {\n    if (this.#input) {\n      const { selectionEnd, selectionStart } = this.#input;\n      if (selectionEnd === null || selectionStart === null) {\n        return NullSelection;\n      } else if (selectionStart === 0 && selectionEnd === 8) {\n        return FullSelection;\n      } else if (selectionStart === 8 && selectionEnd === 8) {\n        return CursorAtEnd;\n      } else {\n        return {\n          end: selectionEnd,\n          start: selectionStart,\n        };\n      }\n    } else {\n      throw Error(`[MasketInput] selection referenced, but no input`);\n    }\n  }\n\n  click() {\n    if (this.#input) {\n      this.#isFocused = true;\n      const selection = this.getSelection();\n      if (selection === NullSelection) {\n        this.select(\"hours\");\n      } else if (selection === FullSelection) {\n        // do nothing\n      } else {\n        const cursorPos = this.#input.selectionStart ?? 0;\n        this.select(this.getUnitAtCursorPos(cursorPos));\n      }\n    }\n  }\n  doubleClick() {\n    if (this.#input) {\n      const { selectionStart, selectionEnd } = this.#input;\n      if (selectionStart === null || selectionEnd === null) {\n        // do nothing\n      } else {\n        if (selectionStart < 3) {\n          this.select(\"hours\");\n        } else if (selectionStart < 6) {\n          this.select(\"minutes\");\n        } else if (selectionStart <= 8) {\n          this.select(\"seconds\");\n        }\n      }\n    }\n    // }\n  }\n\n  focus = () => {\n    if (this.#input) {\n      this.#isFocused = true;\n\n      requestAnimationFrame(() => {\n        this.select(\"hours\");\n      });\n    }\n  };\n\n  blur = () => {\n    this.removeSelection();\n    this.#isFocused = false;\n  };\n}\n"],"names":[],"mappings":"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"}

package/esm/time-input/TimeInput.css.js

@@ -0,0 +1,4 @@
+var timeInputCss = ".salt-density-high .vuuTimeInput {\n    --time-input-width: 60px;\n}\n.salt-density-medium .vuuTimeInput {\n    --time-input-width: 70px;\n}\n.salt-density-low .vuuTimeInput {\n    --time-input-width: 80px;\n}\n.salt-density-touch .vuuTimeInput {\n    --time-input-width: 90px;\n}\n\n.vuuTimeInput {\n    background: var(--vuuTimeInput-background, inherit);\n    border-width: 1px;\n    font-family: var(--salt-typography-fontFamily);\n    width: var(--vuuTimeInput-width, var(--time-input-width));\n\n    &:focus::-webkit-input-placeholder {\n        color: transparent;\n    }\n\n    &:focus {\n        outline: var(--vuuTimeInput-outline, var(--salt-focused-outline));\n    }\n\n}\n\n.invalid {\n    border-color: red;\n}\n\n";
+
+export { timeInputCss as default };
+//# sourceMappingURL=TimeInput.css.js.map

package/esm/time-input/TimeInput.css.js.map

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

package/esm/time-input/TimeInput.js

@@ -0,0 +1,54 @@
+import { forwardRef, createElement } from 'react';
+import { useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useTimeInput } from './useTimeInput.js';
+import timeInputCss from './TimeInput.css.js';
+
+const classBase = "vuuTimeInput";
+const TimeInput = forwardRef(
+  function TimeInput2({
+    className,
+    date,
+    defaultValue,
+    onChange,
+    onCommit,
+    placeholder = "hh:mm:ss",
+    value,
+    ...htmlAttributes
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-time-input",
+      css: timeInputCss,
+      window: targetWindow
+    });
+    const { inputRef, eventHandlers } = useTimeInput({
+      date,
+      defaultValue,
+      onChange,
+      onCommit,
+      value
+    });
+    return /* @__PURE__ */ createElement(
+      "input",
+      {
+        ...htmlAttributes,
+        ...eventHandlers,
+        "aria-placeholder": placeholder,
+        className: cx(classBase, className),
+        defaultValue,
+        key: defaultValue,
+        placeholder,
+        readOnly: true,
+        ref: useForkRef(ref, inputRef),
+        spellCheck: "false",
+        value
+      }
+    );
+  }
+);
+
+export { TimeInput };
+//# sourceMappingURL=TimeInput.js.map

package/esm/time-input/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/TimeInput.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { TimeInputHookProps, useTimeInput } from \"./useTimeInput\";\n\nimport timeInputCss from \"./TimeInput.css\";\n\nconst classBase = \"vuuTimeInput\";\n\nexport interface TimeInputProps\n  extends TimeInputHookProps,\n    Omit<\n      HTMLAttributes<HTMLInputElement>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    Partial<Pick<HTMLInputElement, \"placeholder\">> {}\n\nexport const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(\n  function TimeInput(\n    {\n      className,\n      date,\n      defaultValue,\n      onChange,\n      onCommit,\n      placeholder = \"hh:mm:ss\",\n      value,\n      ...htmlAttributes\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-time-input\",\n      css: timeInputCss,\n      window: targetWindow,\n    });\n\n    const { inputRef, eventHandlers } = useTimeInput({\n      date,\n      defaultValue,\n      onChange,\n      onCommit,\n      value,\n    });\n\n    return (\n      <input\n        {...htmlAttributes}\n        {...eventHandlers}\n        aria-placeholder={placeholder}\n        className={cx(classBase, className)}\n        defaultValue={defaultValue}\n        key={defaultValue}\n        placeholder={placeholder}\n        readOnly\n        ref={useForkRef(ref, inputRef)}\n        spellCheck=\"false\"\n        value={value}\n      />\n    );\n  },\n);\n"],"names":["TimeInput"],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,cAAA;AAUX,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,UAAA;AAAA,IACd,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAA,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,aAAc,EAAA,GAAI,YAAa,CAAA;AAAA,MAC/C,IAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,aAAA;AAAA,QACJ,kBAAkB,EAAA,WAAA;AAAA,QAClB,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,YAAA;AAAA,QACA,GAAK,EAAA,YAAA;AAAA,QACL,WAAA;AAAA,QACA,QAAQ,EAAA,IAAA;AAAA,QACR,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,QAAQ,CAAA;AAAA,QAC7B,UAAW,EAAA,OAAA;AAAA,QACX;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/esm/time-input/useTimeInput.js

@@ -0,0 +1,119 @@
+import { isValidTimeString } from '@vuu-ui/vuu-utils';
+import { useRef, useMemo, useCallback } from 'react';
+import { MaskedInput } from './MaskedInput.js';
+
+const isDigit = (char) => char.length === 1 && /[0-9]/.test(char);
+const useTimeInput = ({
+  defaultValue,
+  onChange,
+  onCommit,
+  value
+}) => {
+  const mousedDownRef = useRef(false);
+  const maskedInputRef = useRef(void 0);
+  useMemo(() => {
+    if (maskedInputRef.current === void 0) {
+      maskedInputRef.current = new MaskedInput(defaultValue, null);
+      maskedInputRef.current.on(
+        "change",
+        (e) => {
+          onChange?.(e);
+        }
+      );
+    }
+    if (value && value !== maskedInputRef.current.value) {
+      maskedInputRef.current.value = value;
+    }
+  }, [defaultValue, onChange, value]);
+  const setInputEl = useCallback((el) => {
+    if (el && maskedInputRef.current) {
+      maskedInputRef.current.input = el;
+    }
+  }, []);
+  const back = useRef(false);
+  const commitValue = useCallback(
+    (evt, value2) => {
+      if (isValidTimeString(value2)) {
+        onCommit(evt, value2, "text-input");
+      } else if (value2 === "hh:mm:ss") {
+        console.log("no value set");
+      } else {
+        console.log(`value is not valid`);
+      }
+    },
+    [onCommit]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const { current: maskedInput } = maskedInputRef;
+      if (maskedInput) {
+        if (e.key === "Backspace") {
+          maskedInput.backspace();
+          back.current = true;
+        } else if (isDigit(e.key)) {
+          maskedInput.update(e.key);
+        } else if (e.key === "ArrowLeft") {
+          maskedInput.moveFocus("left");
+        } else if (e.key === "ArrowRight") {
+          maskedInput.moveFocus("right");
+        } else if (e.key === "ArrowUp") {
+          maskedInput.incrementValue();
+        } else if (e.key === "ArrowDown") {
+          maskedInput.decrementValue();
+        } else if (e.key === "v" && e.metaKey) {
+          return;
+        } else if (e.key === "Tab") {
+          return;
+        } else if (e.key === "Enter") {
+          commitValue(e, maskedInput.value);
+        }
+      }
+      e.preventDefault();
+    },
+    [commitValue]
+  );
+  const handleDoubleClick = useCallback(() => {
+    maskedInputRef.current?.doubleClick();
+  }, []);
+  const handlePaste = useCallback(
+    (e) => {
+      const value2 = e.clipboardData.getData("text");
+      if (isValidTimeString(value2)) {
+        maskedInputRef.current?.pasteValue(value2);
+      }
+    },
+    []
+  );
+  const handleFocus = useCallback(() => {
+    if (mousedDownRef.current) {
+      mousedDownRef.current = false;
+    } else {
+      maskedInputRef.current?.focus();
+    }
+  }, []);
+  const handleMouseDown = useCallback(() => {
+    mousedDownRef.current = true;
+  }, []);
+  const handleMouseUp = useCallback(
+    (e) => {
+      e.preventDefault();
+      maskedInputRef.current?.click();
+    },
+    []
+  );
+  return {
+    inputRef: setInputEl,
+    eventHandlers: {
+      onBlur: maskedInputRef.current?.blur,
+      onDoubleClick: handleDoubleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      onPaste: handlePaste
+    }
+  };
+};
+
+export { useTimeInput };
+//# sourceMappingURL=useTimeInput.js.map

package/esm/time-input/useTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/useTimeInput.ts"],"sourcesContent":["import {\n  type CommitHandler,\n  DateStringISO,\n  isValidTimeString,\n  type TimeString,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { Digit, MaskedInput } from \"./MaskedInput\";\n\nconst isDigit = (char: string): char is Digit =>\n  char.length === 1 && /[0-9]/.test(char);\n\nexport interface TimeInputHookProps {\n  date?: Date | DateStringISO;\n  defaultValue?: TimeString;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  onCommit: CommitHandler<HTMLInputElement, TimeString>;\n  value?: TimeString;\n}\n\nexport const useTimeInput = ({\n  defaultValue,\n  onChange,\n  onCommit,\n  value,\n}: TimeInputHookProps) => {\n  const mousedDownRef = useRef(false);\n  const maskedInputRef = useRef<MaskedInput | undefined>(undefined);\n  useMemo(() => {\n    if (maskedInputRef.current === undefined) {\n      maskedInputRef.current = new MaskedInput(defaultValue, null);\n      maskedInputRef.current.on(\n        \"change\",\n        (e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n        },\n      );\n    }\n\n    if (value && value !== maskedInputRef.current.value) {\n      maskedInputRef.current.value = value;\n    }\n  }, [defaultValue, onChange, value]);\n\n  const setInputEl = useCallback<RefCallback<HTMLInputElement>>((el) => {\n    if (el && maskedInputRef.current) {\n      maskedInputRef.current.input = el;\n    }\n  }, []);\n  const back = useRef(false);\n\n  const commitValue = useCallback<CommitHandler<HTMLInputElement, string>>(\n    (evt, value) => {\n      if (isValidTimeString(value)) {\n        onCommit(evt, value, \"text-input\");\n      } else if (value === \"hh:mm:ss\") {\n        console.log(\"no value set\");\n      } else {\n        console.log(`value is not valid`);\n      }\n    },\n    [onCommit],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n    (e) => {\n      const { current: maskedInput } = maskedInputRef;\n      if (maskedInput) {\n        if (e.key === \"Backspace\") {\n          maskedInput.backspace();\n          back.current = true;\n        } else if (isDigit(e.key)) {\n          maskedInput.update(e.key);\n        } else if (e.key === \"ArrowLeft\") {\n          maskedInput.moveFocus(\"left\");\n        } else if (e.key === \"ArrowRight\") {\n          maskedInput.moveFocus(\"right\");\n        } else if (e.key === \"ArrowUp\") {\n          maskedInput.incrementValue();\n        } else if (e.key === \"ArrowDown\") {\n          maskedInput.decrementValue();\n        } else if (e.key === \"v\" && e.metaKey) {\n          // keyboard paste, do not prevent default\n          return;\n        } else if (e.key === \"Tab\") {\n          return;\n        } else if (e.key === \"Enter\") {\n          commitValue(e, maskedInput.value);\n        }\n      }\n      e.preventDefault();\n    },\n    [commitValue],\n  );\n\n  const handleDoubleClick = useCallback(() => {\n    maskedInputRef.current?.doubleClick();\n  }, []);\n\n  const handlePaste = useCallback<ClipboardEventHandler<HTMLInputElement>>(\n    (e) => {\n      const value = e.clipboardData.getData(\"text\");\n      if (isValidTimeString(value)) {\n        maskedInputRef.current?.pasteValue(value);\n      }\n    },\n    [],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLInputElement>>(() => {\n    // If keboard has been used, how do we detect SHIFT + TAB\n    if (mousedDownRef.current) {\n      mousedDownRef.current = false;\n    } else {\n      maskedInputRef.current?.focus();\n    }\n  }, []);\n\n  const handleMouseDown = useCallback<MouseEventHandler>(() => {\n    mousedDownRef.current = true;\n  }, []);\n\n  const handleMouseUp = useCallback<MouseEventHandler<HTMLInputElement>>(\n    (e) => {\n      e.preventDefault();\n      maskedInputRef.current?.click();\n    },\n    [],\n  );\n\n  return {\n    inputRef: setInputEl,\n    eventHandlers: {\n      onBlur: maskedInputRef.current?.blur,\n      onDoubleClick: handleDoubleClick,\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n      onMouseDown: handleMouseDown,\n      onMouseUp: handleMouseUp,\n      onPaste: handlePaste,\n    },\n  };\n};\n"],"names":["value"],"mappings":"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"}

package/esm/toolbar/Toolbar.css.js

@@ -0,0 +1,4 @@
+var toolbarCss = ".vuuToolbar {\n    --toolbar-height: var(--vuuToolbar-height, 36px);\n    --toolbar-item-height: var(--vuuToolbarItem-height, 100%);\n    --vuuOverflowContainer-background: var(--vuuToolbar-background);\n    --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);\n    --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);\n    --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);\n    height: var(--toolbar-height);\n}\n\n.vuuToolbar-alignCenter {\n    --vuuOverflowContainer-justifyContent: center;\n}\n\n.vuuToolbar-alignEnd {\n    --vuuOverflowContainer-justifyContent: flex-end;\n}\n\n/* .vuuToolbarItem {\n    height: var(--toolbar-item-height);\n} */\n\n.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {\n    content: '';\n    position: absolute;\n    left: calc(-1 * var(--overflow-item-gap));\n    /* top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2); */\n    top: 0px;\n    width: 1px;\n    height: var(--toolbar-item-height);\n    background-color: var(--salt-separable-primary-borderColor);\n}\n\n\n.vuuToolbarItem.vuuFocusVisible {\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n  }\n\n\n  .vuuToolbarItem:focus,\n  .vuuToolbarItem:focus-visible {\n\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n\n}\n\n\n  ";
+
+export { toolbarCss as default };
+//# sourceMappingURL=Toolbar.css.js.map

package/esm/toolbar/Toolbar.css.js.map

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