@area2-ai/a2-react-keystroke-package/dist/a2-react-keystroke-package.cjs.development.js

# a2-react-keystroke-package

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var a2NodeKeystrokePackage = require('@area2-ai/a2-node-keystroke-package');
var reactDeviceDetect = require('react-device-detect');

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}

var Area2Context = /*#__PURE__*/React.createContext({});

var AREA2_INITIAL_STATE = {};
var Area2Provider = function Area2Provider(_ref) {
  var children = _ref.children;
  var _useReducer = React.useReducer(area2Reducer, AREA2_INITIAL_STATE),
    state = _useReducer[0]; //[state, dispatch]
  var keystrokeManagerRef = React.useRef();
  var androidKeystrokeManagerRef = React.useRef();
  var iosKeystrokeManagerRef = React.useRef();
  var getKeystrokeManager = function getKeystrokeManager() {
    return keystrokeManagerRef.current;
  };
  var getAndroidKeystrokeManager = function getAndroidKeystrokeManager() {
    return androidKeystrokeManagerRef.current;
  };
  var getIosKeystrokeManager = function getIosKeystrokeManager() {
    return iosKeystrokeManagerRef.current;
  };
  React.useEffect(function () {
    keystrokeManagerRef.current = new a2NodeKeystrokePackage.KeystrokeManager();
    androidKeystrokeManagerRef.current = new a2NodeKeystrokePackage.AndroidKeystrokeManager();
    iosKeystrokeManagerRef.current = new a2NodeKeystrokePackage.IosKeystrokeManager();
  }, []);
  return React__default.createElement(Area2Context.Provider, {
    value: _extends({}, state, {
      getKeystrokeManager: getKeystrokeManager,
      getAndroidKeystrokeManager: getAndroidKeystrokeManager,
      getIosKeystrokeManager: getIosKeystrokeManager
    })
  }, children);
};

var area2Reducer = function area2Reducer(state, action) {
  switch (action.type) {
    case '[A2 Desktop] - Update text':
      return _extends({}, state, {
        desktopTextValue: action.payload.newValue
      });
    default:
      return state;
  }
};

var getBrowserInfo = function getBrowserInfo() {
  return reactDeviceDetect.browserName;
};

var getOsInfo = function getOsInfo() {
  return reactDeviceDetect.osName;
};

var getPlatform = function getPlatform() {
  if (reactDeviceDetect.isAndroid) return 'android';
  if (reactDeviceDetect.isDesktop) return 'desktop';
  return 'ios';
};

/**
 * Keystroke hook for android mobile browser
 */
var useMobileKeystrokeAndroid = function useMobileKeystrokeAndroid() {
  var _useContext = React.useContext(Area2Context),
    getAndroidKeystrokeManager = _useContext.getAndroidKeystrokeManager;
  /**
   * Handles the before input event.
   * @param {string} newValue - The new value of the input before the input event.
   * @param {string} inputValue - The current value of the input.
   */
  var handleProcessOnBeforeInput = React.useCallback(function (newValue, inputValue) {
    getAndroidKeystrokeManager().processBeforeInput(newValue, inputValue);
  }, []);
  /**
   * Handles the paste event.
   * @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
   */
  var handleProcessPaste = React.useCallback(function (event) {
    var pastedText = event.clipboardData.getData("text");
    getAndroidKeystrokeManager().processPaste(pastedText);
  }, []);
  /**
   * Handles the key input event.
   * @param {string} inputContent - The content of the key input.
   */
  var handleProcessKeyInput = React.useCallback(function (inputContent) {
    getAndroidKeystrokeManager().processKeyInput(inputContent);
  }, []);
  /**
   * Handles the keydown event.
   * @param {HTMLInputElement} target - The target input element.
   */
  var handleProcessKeydown = React.useCallback(function (target) {
    getAndroidKeystrokeManager().processKeydown(target);
  }, []);
  /**
   * Handles the keyup event.
   */
  var handleProcessKeyup = React.useCallback(function () {
    getAndroidKeystrokeManager().processKeyup();
  }, []);
  /**
   * Ends the typing session and returns the typing data.
   * @returns {A2CapturePayload | undefined} - The typing data or undefined if no data.
   */
  var handleEndTypingSession = React.useCallback(function () {
    var typingData = getAndroidKeystrokeManager().endTypingSession();
    getAndroidKeystrokeManager().resetTypingData();
    if (!typingData.startUnixTime) {
      console.warn("Empty typing data for session: " + typingData.sessionID + ". Skipping...");
      return;
    }
    typingData.appContext = getOsInfo() + " - " + getBrowserInfo();
    return typingData;
  }, []);
  return {
    handleProcessOnBeforeInput: handleProcessOnBeforeInput,
    handleProcessPaste: handleProcessPaste,
    handleProcessKeyInput: handleProcessKeyInput,
    handleProcessKeydown: handleProcessKeydown,
    handleProcessKeyup: handleProcessKeyup,
    handleEndTypingSession: handleEndTypingSession
  };
};

/**
 * Keystroke hook for desktop platforms.
 */
var useDesktopKeystroke = function useDesktopKeystroke() {
  var _useContext = React.useContext(Area2Context),
    getKeystrokeManager = _useContext.getKeystrokeManager;
  var getIsTypingSessionActive = function getIsTypingSessionActive() {
    return getKeystrokeManager().getIsTypingSessionActive;
  };
  /**
   * Handles the keydown event.
   * @param {string} key - The key pressed.
   */
  var handleProcessKeydown = React.useCallback(function (key) {
    getKeystrokeManager().processKeydown(key);
  }, []);
  /**
   * Handles the keyup event.
   * @param {string} key - The key released.
   */
  var handleProcessKeyup = React.useCallback(function (key) {
    getKeystrokeManager().processKeyup(key);
  }, []);
  /**
   * Ends the typing session and returns the typing data.
   * @returns {A2CapturePayload | undefined} - The typing session data or undefined if no data.
   */
  var handleEndTypingSession = React.useCallback(function () {
    var typingData = getKeystrokeManager().endTypingSession();
    getKeystrokeManager().resetTypingData();
    if (!typingData.startUnixTime) {
      console.warn("Empty typing data for session: " + typingData.sessionID + ". Skipping...");
      return;
    }
    typingData.appContext = getOsInfo() + " - " + getBrowserInfo();
    return typingData;
  }, []);
  return {
    handleProcessKeydown: handleProcessKeydown,
    handleProcessKeyup: handleProcessKeyup,
    getIsTypingSessionActive: getIsTypingSessionActive,
    handleEndTypingSession: handleEndTypingSession
  };
};

/**
 * Keystroke for ios mobile browser
 * @param {string} inputValue - The current value of the text input - Needed to detect auto-correct changes.
 */
var useMobileKeystrokeIOS = function useMobileKeystrokeIOS() {
  var _useContext = React.useContext(Area2Context),
    getIosKeystrokeManager = _useContext.getIosKeystrokeManager;
  //! Undefined behavior - Try to load via context - provider
  /**
   * Processes auto-correction based on the current input value.
   * @param {string} inputValue - The current value of the text input.
   */
  // const processAutoCorrection = getIosKeystrokeManager().processAutocorrection;
  /**
   * Handles the before input event.
   * @param {number} value - The length of the content before the input event.
   */
  var handleProcessOnBeforeInput = React.useCallback(function (value) {
    getIosKeystrokeManager().setPrevContentLength = value;
  }, []);
  /**
   * Handles the paste event.
   * @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
   */
  var handleProcessPaste = React.useCallback(function (event) {
    var pastedText = event.clipboardData.getData("text");
    getIosKeystrokeManager().processPaste(pastedText);
  }, []);
  /**
   * Checks for text prediction and processes it.
   * @param {string} newValue - The new value of the text input.
   * @param {string} inputValue - The current value of the text input.
   */
  var checkForPrediction = React.useCallback(function (newValue, inputValue) {
    var textSnapshot = inputValue; // Before it changes
    getIosKeystrokeManager().processPrediction(newValue, textSnapshot);
  }, []);
  /**
   * Handles the input change event
   * @param {ChangeEvent<HTMLInputElement>} event - The input change event
   * @param {string} inputValue - The current value of the text input
   */
  var handleProcessInputChange = function handleProcessInputChange(event, inputValue) {
    var newValue = event.target.value;
    checkForPrediction(newValue, inputValue);
  };
  /**
   * Handles the keydown event.
   * @param {string} keyPressed - The key that was pressed.
   * @param {HTMLInputElement} target - The target input element.
   */
  var handleProcessKeydown = React.useCallback(function (keyPressed, target) {
    getIosKeystrokeManager().processKeydown(keyPressed, target);
  }, []);
  /**
   * Handles the keyup event.
   * @param {string} key - The key that was released.
   */
  var handleProcessKeyup = React.useCallback(function (keyPressed) {
    getIosKeystrokeManager().processKeyup(keyPressed);
  }, []);
  /**
   * Ends the typing session and returns the typing data.
   * @returns {A2CapturePayload | undefined} - The typing data or undefined if no data.
   */
  var handleEndTypingSession = React.useCallback(function () {
    var typingData = getIosKeystrokeManager().endTypingSession();
    getIosKeystrokeManager().resetTypingData();
    if (!typingData.startUnixTime) {
      console.warn("Empty typing data for session: " + typingData.sessionID + ". Skipping...");
      return;
    }
    typingData.appContext = getOsInfo() + " - " + getBrowserInfo();
    return typingData;
  }, []);
  return {
    // processAutoCorrection,
    handleProcessInputChange: handleProcessInputChange,
    handleProcessKeydown: handleProcessKeydown,
    handleProcessPaste: handleProcessPaste,
    handleProcessOnBeforeInput: handleProcessOnBeforeInput,
    handleProcessKeyup: handleProcessKeyup,
    handleEndTypingSession: handleEndTypingSession
  };
};

function useKeystrokeBuilder(target) {
  var targetPlatform = target != null ? target : getPlatform();
  switch (targetPlatform) {
    case 'android':
      return useMobileKeystrokeAndroid();
    case 'ios':
      return useMobileKeystrokeIOS();
    case 'desktop':
    default:
      return useDesktopKeystroke();
  }
}

var _excluded = ["ref", "autoCapitalize", "value", "onChange"];
/**
 * Component that renders a text input field and generates an A2CapturePayload data.
 * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
 */
var A2AndroidTextInput = function A2AndroidTextInput(_ref) {
  var ref = _ref.ref,
    autoCapitalize = _ref.autoCapitalize,
    value = _ref.value,
    onChange = _ref.onChange,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useMobileKeystrokeAn = useMobileKeystrokeAndroid(),
    handleProcessKeydown = _useMobileKeystrokeAn.handleProcessKeydown,
    handleProcessKeyup = _useMobileKeystrokeAn.handleProcessKeyup,
    handleProcessPaste = _useMobileKeystrokeAn.handleProcessPaste,
    handleProcessKeyInput = _useMobileKeystrokeAn.handleProcessKeyInput,
    handleProcessOnBeforeInput = _useMobileKeystrokeAn.handleProcessOnBeforeInput;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", Object.assign({
    ref: ref,
    type: "text",
    placeholder: "Using android implementation",
    autoCapitalize: autoCapitalize || 'sentences',
    value: value,
    onChange: onChange,
    onKeyDown: function onKeyDown(_ref2) {
      var currentTarget = _ref2.currentTarget;
      return handleProcessKeydown(currentTarget);
    },
    onKeyUp: handleProcessKeyup,
    onPaste: handleProcessPaste,
    onInput: function onInput(_ref3) {
      var currentTarget = _ref3.currentTarget;
      handleProcessKeyInput(currentTarget.value);
    },
    onBeforeInput: function onBeforeInput(_ref4) {
      var currentTarget = _ref4.currentTarget;
      return handleProcessOnBeforeInput(currentTarget.value, (value == null ? void 0 : value.toString()) || '');
    }
  }, rest)));
};

var _excluded$1 = ["ref", "value", "onChange"];
/**
 * Component that renders a text input field and generates an A2CapturePayload data.
 * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
 */
var A2IosTextInput = function A2IosTextInput(_ref) {
  var ref = _ref.ref,
    value = _ref.value,
    _onChange = _ref.onChange,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
  var _useMobileKeystrokeIO = useMobileKeystrokeIOS(),
    handleProcessInputChange = _useMobileKeystrokeIO.handleProcessInputChange,
    handleProcessKeydown = _useMobileKeystrokeIO.handleProcessKeydown,
    handleProcessKeyup = _useMobileKeystrokeIO.handleProcessKeyup,
    handleProcessPaste = _useMobileKeystrokeIO.handleProcessPaste,
    handleProcessOnBeforeInput = _useMobileKeystrokeIO.handleProcessOnBeforeInput;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", Object.assign({
    ref: ref,
    type: "text",
    placeholder: "Using iOS implementation",
    onKeyDownCapture: function onKeyDownCapture(_ref2) {
      var key = _ref2.key,
        currentTarget = _ref2.currentTarget;
      return handleProcessKeydown(key, currentTarget);
    },
    onKeyUpCapture: function onKeyUpCapture(_ref3) {
      var key = _ref3.key;
      return handleProcessKeyup(key);
    },
    value: value,
    onChange: function onChange(event) {
      handleProcessInputChange(event, (value == null ? void 0 : value.toString()) || ''); //? Execute internal change handler
      _onChange == null || _onChange(event); //? Execute parent's onChange if it exists
    },
    onPaste: handleProcessPaste,
    onBeforeInput: function onBeforeInput(_ref4) {
      var currentTarget = _ref4.currentTarget;
      handleProcessOnBeforeInput(currentTarget.value.length);
    }
  }, rest)));
};

var _excluded$2 = ["ref", "onChange", "handleEndSessionOnEnter"];
/**
 * Component that renders a text input field and generates an A2CapturePayload data.
 *
 * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
 * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press.
 */
var A2DesktopTextInput = function A2DesktopTextInput(_ref) {
  var ref = _ref.ref,
    _onChange = _ref.onChange,
    handleEndSessionOnEnter = _ref.handleEndSessionOnEnter,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
  var _useDesktopKeystroke = useDesktopKeystroke(),
    handleProcessKeydown = _useDesktopKeystroke.handleProcessKeydown,
    handleProcessKeyup = _useDesktopKeystroke.handleProcessKeyup,
    getIsTypingSessionActive = _useDesktopKeystroke.getIsTypingSessionActive;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", Object.assign({
    ref: ref,
    type: "text",
    placeholder: "Using desktop implementation",
    onKeyDownCapture: function onKeyDownCapture(_ref2) {
      var key = _ref2.key;
      return handleProcessKeydown(key);
    },
    onKeyUpCapture: function onKeyUpCapture(_ref3) {
      var key = _ref3.key;
      handleProcessKeyup(key);
      //? Handle ENTER key
      if (key !== 'Enter') {
        return;
      }
      if (!getIsTypingSessionActive()) {
        return;
      }
      handleEndSessionOnEnter == null || handleEndSessionOnEnter(); //? Call parent's function if it exists
    },
    onChange: function onChange(event) {
      _onChange == null || _onChange(event); //? Execute parent's onChange if it exists
    }
  }, rest)));
};

var _excluded$3 = ["ref", "target", "handleEndSessionOnEnter"];
/**
 * Component that renders a text input field and generates an A2CapturePayload data.
 *
 * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
 * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.
 * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).
 */
var A2Textbox = function A2Textbox(_ref) {
  var ref = _ref.ref,
    target = _ref.target,
    handleEndSessionOnEnter = _ref.handleEndSessionOnEnter,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
  var targetPlatform = target != null ? target : getPlatform();
  if (targetPlatform === 'android') {
    return React__default.createElement(A2AndroidTextInput, Object.assign({}, rest, {
      ref: ref
    }));
  }
  if (targetPlatform === 'ios') {
    return React__default.createElement(A2IosTextInput, Object.assign({}, rest, {
      ref: ref
    }));
  }
  return React__default.createElement(A2DesktopTextInput, Object.assign({}, rest, {
    ref: ref,
    handleEndSessionOnEnter: handleEndSessionOnEnter
  }));
};

exports.A2Textbox = A2Textbox;
exports.Area2Provider = Area2Provider;
exports.useCipherCapture = useKeystrokeBuilder;
//# sourceMappingURL=a2-react-keystroke-package.cjs.development.js.map