@stratakit/bricks/dist/TextBox.js

Small, modular components for StrataKit

import { c as _c } from "react-compiler-runtime";
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 { useInit } from "./~utils.useInit.js";
import { useFieldControlType } from "./Field.internal.js";
const TextBoxInput = forwardRef((props, forwardedRef) => {
  const $ = _c(4);
  useInit();
  useFieldControlType("textlike");
  const rootContext = React.useContext(TextBoxRootContext);
  const setDisabled = rootContext?.setDisabled;
  let t0;
  let t1;
  if ($[0] !== props.disabled || $[1] !== setDisabled) {
    t0 = () => {
      setDisabled?.(props.disabled);
    };
    t1 = [setDisabled, props.disabled];
    $[0] = props.disabled;
    $[1] = setDisabled;
    $[2] = t0;
    $[3] = t1;
  } else {
    t0 = $[2];
    t1 = $[3];
  }
  React.useEffect(t0, t1);
  return jsx(Role.input, {
    readOnly: props.disabled,
    ...props,
    className: cx({
      "\u{1F95D}TextBox": !rootContext
    }, props.className),
    placeholder: props.placeholder ?? " ",
    render: jsx(Focusable, {
      accessibleWhenDisabled: true,
      render: props.render || 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}TextBox": !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-_sk-disabled": disabled,
      className: cx("\u{1F95D}TextBox", 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}TextBoxDecoration", props.className),
    ref: forwardedRef
  });
});
const TextBoxText = forwardRef((props, forwardedRef) => {
  return /* @__PURE__ */ jsx(Role.span, {
    ...props,
    className: cx("\u{1F95D}TextBoxDecoration", 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
};