@serendie/ui/dist/components/TextField/TextField.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as W } from "@serendie/symbols";
import z from "../../node_modules/merge-refs/dist/esm/index.js";
import m, { forwardRef as B } from "react";
import { textFieldRecipe as b } from "../../recipes/textFieldRecipe.js";
import { useTranslations as E } from "../../i18n/index.js";
import { css as w } from "../../styled-system/css/css.js";
import { cx as G } from "../../styled-system/css/cx.js";
const X = B(
  ({
    placeholder: F,
    label: d,
    description: o,
    required: u,
    requiredLabel: V,
    invalidMessage: i,
    invalid: s,
    type: y = "text",
    disabled: c,
    onChange: f,
    value: h,
    className: C,
    leftContent: p,
    rightContent: N,
    ...l
  }, P) => {
    const v = E(), a = m.useRef(null), S = z(a, P), [D, _] = b.splitVariantProps({
      ...l
    }), t = b(D), j = o || s && i, [I, T] = m.useState(l.defaultValue || h), g = l.id || m.useId(), k = () => {
      var x;
      const r = {
        target: { value: "" }
      };
      R(r), (x = l.onReset) == null || x.call(l, r), a.current && (a.current.value = "", a.current.focus());
    }, q = (r) => {
      r.button === 0 && r.preventDefault();
    }, R = (r) => {
      T(r.target.value), f && f(r);
    };
    return /* @__PURE__ */ n("div", { className: G(t.root, C), children: [
      d ? /* @__PURE__ */ n("label", { className: t.label, htmlFor: g, children: [
        d,
        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: V ?? v("common.required") })
      ] }) : null,
      /* @__PURE__ */ n(
        "div",
        {
          className: t.inputWrapper,
          "data-invalid": s ? !0 : void 0,
          "data-disabled": c ? !0 : void 0,
          children: [
            p ? /* @__PURE__ */ e("div", { className: t.leftContent, children: p }) : /* @__PURE__ */ e("div", {}),
            /* @__PURE__ */ e(
              "input",
              {
                ref: S,
                id: g,
                placeholder: F,
                required: u,
                disabled: c,
                value: h,
                type: y,
                className: t.input,
                onChange: R,
                ..._
              }
            ),
            N ? /* @__PURE__ */ e("div", { className: t.rightContent, children: N }) : /* @__PURE__ */ e("div", { className: t.icon, children: !c && /* disabledの場合はアイコンを表示しない */
            (s ? /* @__PURE__ */ e(
              "span",
              {
                className: w({
                  color: "sd.system.color.impression.negative"
                }),
                children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
              }
            ) : I ? /* @__PURE__ */ e(
              "button",
              {
                type: "button",
                className: w({ cursor: "pointer" }),
                onPointerDown: q,
                onClick: k,
                "aria-label": v("textField.clearValue"),
                children: /* @__PURE__ */ e(W, { width: 20, height: 20 })
              }
            ) : null) })
          ]
        }
      ),
      j && /* @__PURE__ */ n("div", { className: t.messageField, children: [
        o && /* @__PURE__ */ e("p", { className: t.description, children: o }),
        s && i && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: i })
      ] })
    ] });
  }
);
export {
  X as TextField
};