@stratakit/bricks/dist/TextBox.js

Small, modular components for StrataKit

import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { Focusable } from "@ariakit/react/focusable";
import { Role } from "@ariakit/react/role";
import { Icon } from "@stratakit/foundations";
import {
  forwardRef,
  useEventHandlers,
  useMergedRefs
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { useFieldControlType } from "./Field.internal.js";
const TextBoxInput = forwardRef(
  (props, forwardedRef) => {
    useFieldControlType("textlike");
    const rootContext = React.useContext(TextBoxRootContext);
    const setDisabled = rootContext?.setDisabled;
    React.useEffect(() => {
      setDisabled?.(props.disabled);
    }, [setDisabled, props.disabled]);
    return /* @__PURE__ */ jsx(
      Role.input,
      {
        readOnly: props.disabled,
        ...props,
        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
        placeholder: props.placeholder ?? " ",
        render: /* @__PURE__ */ jsx(
          Focusable,
          {
            accessibleWhenDisabled: true,
            render: props.render || /* @__PURE__ */ jsx("input", {})
          }
        ),
        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
      }
    );
  }
);
const TextBoxTextarea = forwardRef(
  (props, forwardedRef) => {
    useFieldControlType("textlike");
    const rootContext = React.useContext(TextBoxRootContext);
    return /* @__PURE__ */ jsx(
      Role.textarea,
      {
        readOnly: props.disabled,
        ...props,
        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
        placeholder: props.placeholder ?? " ",
        render: /* @__PURE__ */ jsx(
          Focusable,
          {
            accessibleWhenDisabled: true,
            render: props.render || /* @__PURE__ */ jsx("textarea", {})
          }
        ),
        ref: forwardedRef
      }
    );
  }
);
const TextBoxRoot = forwardRef(
  (props, forwardedRef) => {
    const inputRef = React.useRef(null);
    const [disabled, setDisabled] = React.useState();
    return /* @__PURE__ */ jsx(
      TextBoxRootContext.Provider,
      {
        value: React.useMemo(() => ({ setDisabled, inputRef }), []),
        children: /* @__PURE__ */ jsx(
          Role.div,
          {
            ...props,
            "data-kiwi-disabled": disabled,
            className: cx("\u{1F95D}-text-box", props.className),
            onPointerDown: useEventHandlers(props.onPointerDown, (e) => {
              if (disabled) return;
              if (e.target !== e.currentTarget) return;
              e.preventDefault();
              inputRef.current?.focus();
            }),
            ref: forwardedRef
          }
        )
      }
    );
  }
);
const TextBoxIcon = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Icon,
      {
        ...props,
        className: cx("\u{1F95D}-text-box-decoration", props.className),
        ref: forwardedRef
      }
    );
  }
);
const TextBoxText = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Role.span,
      {
        ...props,
        className: cx("\u{1F95D}-text-box-decoration", props.className),
        ref: forwardedRef
      }
    );
  }
);
const TextBoxRootContext = React.createContext(void 0);
export {
  TextBoxIcon as Icon,
  TextBoxInput as Input,
  TextBoxRoot as Root,
  TextBoxText as Text,
  TextBoxTextarea as Textarea
};