@airplane/views/dist/components/textinput/TextInput.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx } from "react/jsx-runtime";
import { TextInput as TextInput$1 } from "@mantine/core";
import { useMergedRef } from "@mantine/hooks";
import { forwardRef, useRef, useCallback } from "react";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { useRegisterFormInput } from "../../state/components/form/useRegisterFormInput.js";
import { useInput } from "../../state/components/input/useInput.js";
import { useTextInputState } from "../../state/components/text-input/useTextInputState.js";
import { useComponentId } from "../../state/components/useId.js";
const TextInputComponent = /* @__PURE__ */ forwardRef(({
  width,
  ...props
}, ref) => /* @__PURE__ */ jsx(TextInput$1, { ...props, ref }));
const TextInput = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: DISPLAY_NAME, children: /* @__PURE__ */ jsx(TextInputWithoutRef, { ...props, innerRef: ref }) }));
const TextInputWithoutRef = (props) => {
  const [inputRef, focus] = useFocus();
  const mergedRef = useMergedRef(inputRef, props.innerRef);
  const id = useComponentId(props.id);
  const {
    state,
    dispatch
  } = useTextInputState(id, {
    initialState: {
      disabled: props.disabled ?? props.defaultDisabled,
      value: props.value ?? props.defaultValue
    },
    focus
  });
  const {
    inputProps
  } = useInput(props, state, dispatch, (e) => e.currentTarget.value);
  useRegisterFormInput(id, "text-input");
  const {
    className,
    style,
    width,
    height,
    grow,
    innerRef: _,
    validate: __,
    onChange: ___,
    defaultDisabled: ____,
    defaultValue: _____,
    ...restProps
  } = props;
  const {
    classes: layoutClasses,
    cx
  } = useCommonLayoutStyle({
    width,
    height,
    grow
  });
  return /* @__PURE__ */ jsx(TextInputComponent, { ref: mergedRef, className: cx(layoutClasses.style, className), style, ...inputProps, ...restProps });
};
const useFocus = () => {
  const htmlElRef = useRef(null);
  const focus = useCallback(() => {
    var _a;
    (_a = htmlElRef.current) == null ? void 0 : _a.focus();
  }, []);
  return [htmlElRef, focus];
};
TextInputComponent.displayName = "TextInputComponent";
const DISPLAY_NAME = "TextInput";
TextInput.displayName = DISPLAY_NAME;
export {
  TextInput,
  TextInputComponent,
  TextInputWithoutRef
};
//# sourceMappingURL=TextInput.js.map