@ariakit/react-core/esm/composite/composite-input.js

Ariakit React core

"use client";
import {
  selectTextField
} from "../__chunks/5VQZOHHZ.js";
import {
  createElement,
  createHook,
  forwardRef,
  memo
} from "../__chunks/ILRXHV7V.js";
import {
  useEvent
} from "../__chunks/K2XTQB3X.js";
import "../__chunks/YXGXYGQX.js";

// src/composite/composite-input.tsx
import {
  getDocument,
  getTextboxSelection,
  isTextField
} from "@ariakit/core/utils/dom";
import { removeUndefinedValues } from "@ariakit/core/utils/misc";
import { useEffect } from "react";
var TagName = "input";
function getValueLength(element) {
  if (isTextField(element)) {
    return element.value.length;
  } else if (element.isContentEditable) {
    const range = getDocument(element).createRange();
    range.selectNodeContents(element);
    return range.toString().length;
  }
  return 0;
}
var useCompositeInput = createHook(
  function useCompositeInput2({ store, ...props }) {
    const onKeyDownCaptureProp = props.onKeyDownCapture;
    if (process.env.NODE_ENV !== "production") {
      useEffect(() => {
        console.warn(
          "CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead."
        );
      }, []);
    }
    const onKeyDownCapture = useEvent((event) => {
      onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
      if (event.defaultPrevented) return;
      const element = event.currentTarget;
      if (!element.isContentEditable && !isTextField(element)) return;
      const selection = getTextboxSelection(element);
      const { orientation } = (store == null ? void 0 : store.getState()) || {};
      const isHorizontal = orientation !== "vertical";
      const isVertical = orientation !== "horizontal";
      const isLeft = isHorizontal && event.key === "ArrowLeft";
      const isRight = isHorizontal && event.key === "ArrowRight";
      const isUp = isVertical && event.key === "ArrowUp";
      const isDown = isVertical && event.key === "ArrowDown";
      if (isRight || isDown) {
        if (selection.end !== getValueLength(element)) {
          event.stopPropagation();
        }
      } else if (isLeft || isUp) {
        if (selection.start !== 0) {
          event.stopPropagation();
        }
      }
    });
    const onFocusProp = props.onFocus;
    const onFocus = useEvent((event) => {
      onFocusProp == null ? void 0 : onFocusProp(event);
      if (event.defaultPrevented) return;
      selectTextField(event.currentTarget);
    });
    props = {
      ...props,
      onKeyDownCapture,
      onFocus
    };
    return removeUndefinedValues(props);
  }
);
var CompositeInput = memo(
  forwardRef(function CompositeInput2(props) {
    const htmlProps = useCompositeInput(props);
    return createElement(TagName, htmlProps);
  })
);
export {
  CompositeInput,
  useCompositeInput
};