@wordpress/components/build/input-control/input-field.js

UI components for WordPress.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/input-control/input-field.tsx
var input_field_exports = {};
__export(input_field_exports, {
  default: () => input_field_default
});
module.exports = __toCommonJS(input_field_exports);
var import_react = require("@use-gesture/react");
var import_element = require("@wordpress/element");
var import_utils = require("./utils");
var import_input_control_styles = require("./styles/input-control-styles");
var import_reducer = require("./reducer/reducer");
var import_with_ignore_ime_events = require("../utils/with-ignore-ime-events");
var import_jsx_runtime = require("react/jsx-runtime");
var noop = () => {
};
function InputField({
  disabled = false,
  dragDirection = "n",
  dragThreshold = 10,
  id,
  isDragEnabled = false,
  isPressEnterToChange = false,
  onBlur = noop,
  onChange = noop,
  onDrag = noop,
  onDragEnd = noop,
  onDragStart = noop,
  onKeyDown = noop,
  onValidate = noop,
  size = "default",
  stateReducer = (state) => state,
  value: valueProp,
  type,
  ...props
}, ref) {
  const {
    // State.
    state,
    // Actions.
    change,
    commit,
    drag,
    dragEnd,
    dragStart,
    invalidate,
    pressDown,
    pressEnter,
    pressUp,
    reset
  } = (0, import_reducer.useInputControlStateReducer)(stateReducer, {
    isDragEnabled,
    value: valueProp,
    isPressEnterToChange
  }, onChange);
  const {
    value,
    isDragging,
    isDirty
  } = state;
  const wasDirtyOnBlur = (0, import_element.useRef)(false);
  const dragCursor = (0, import_utils.useDragCursor)(isDragging, dragDirection);
  const handleOnBlur = (event) => {
    onBlur(event);
    if (isDirty || !event.target.validity.valid) {
      wasDirtyOnBlur.current = true;
      handleOnCommit(event);
    }
  };
  const handleOnChange = (event) => {
    const nextValue = event.target.value;
    change(nextValue, event);
  };
  const handleOnCommit = (event) => {
    const nextValue = event.currentTarget.value;
    try {
      onValidate(nextValue);
      commit(nextValue, event);
    } catch (err) {
      invalidate(err, event);
    }
  };
  const handleOnKeyDown = (event) => {
    const {
      key
    } = event;
    onKeyDown(event);
    switch (key) {
      case "ArrowUp":
        pressUp(event);
        break;
      case "ArrowDown":
        pressDown(event);
        break;
      case "Enter":
        pressEnter(event);
        if (isPressEnterToChange) {
          event.preventDefault();
          handleOnCommit(event);
        }
        break;
      case "Escape":
        if (isPressEnterToChange && isDirty) {
          event.preventDefault();
          reset(valueProp, event);
        }
        break;
    }
  };
  const dragGestureProps = (0, import_react.useDrag)((dragProps2) => {
    const {
      distance,
      dragging,
      event,
      target
    } = dragProps2;
    dragProps2.event = {
      ...dragProps2.event,
      target
    };
    if (!distance) {
      return;
    }
    event.stopPropagation();
    if (!dragging) {
      onDragEnd(dragProps2);
      dragEnd(dragProps2);
      return;
    }
    onDrag(dragProps2);
    drag(dragProps2);
    if (!isDragging) {
      onDragStart(dragProps2);
      dragStart(dragProps2);
    }
  }, {
    axis: dragDirection === "e" || dragDirection === "w" ? "x" : "y",
    threshold: dragThreshold,
    enabled: isDragEnabled,
    pointer: {
      capture: false
    }
  });
  const dragProps = isDragEnabled ? dragGestureProps() : {};
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_control_styles.Input, {
    ...props,
    ...dragProps,
    className: "components-input-control__input",
    disabled,
    dragCursor,
    isDragging,
    id,
    onBlur: handleOnBlur,
    onChange: handleOnChange,
    onKeyDown: (0, import_with_ignore_ime_events.withIgnoreIMEEvents)(handleOnKeyDown),
    ref,
    inputSize: size,
    value: value !== null && value !== void 0 ? value : "",
    type
  });
}
var ForwardedComponent = (0, import_element.forwardRef)(InputField);
var input_field_default = ForwardedComponent;
//# sourceMappingURL=input-field.js.map