@uva-glass/component-library/dist/components/InputField/InputField.js

React components UvA

import { jsxs as b, jsx as r } from "react/jsx-runtime";
import { forwardRef as g, useState as x, useRef as B, useEffect as y } from "react";
import { c as C } from "../../clsx-OuTLNxxd.js";
import '../../assets/InputField.css';const t = {
  "input-field-wrapper": "_input-field-wrapper_13cvp_1",
  "input-field": "_input-field_13cvp_1",
  "input-field--large": "_input-field--large_13cvp_22",
  "input-field--small": "_input-field--small_13cvp_26",
  "input-field--compact": "_input-field--compact_13cvp_30",
  "input-field--white": "_input-field--white_13cvp_34",
  "input-field--not-valid": "_input-field--not-valid_13cvp_38",
  "input-field__clear-button": "_input-field__clear-button_13cvp_46"
}, j = g(
  ({
    autoComplete: _ = "off",
    id: p,
    value: e,
    variant: o,
    width: u,
    type: s = "text",
    background: c,
    clearTrigger: l,
    notValid: a = !1,
    onClear: f,
    ...d
  }, i) => {
    const [m, v] = x(0), n = B(null);
    y(() => {
      n.current && v(n.current.offsetWidth);
    }, [e]);
    const h = () => {
      f && i && "current" in i && i.current && (f(), i.current.focus());
    };
    return /* @__PURE__ */ b("div", { className: t["input-field-wrapper"], children: [
      /* @__PURE__ */ r(
        "input",
        {
          ...d,
          autoComplete: _,
          ref: i,
          id: p,
          className: C(t["input-field"], {
            [t["input-field--large"]]: o === "large",
            [t[`input-field--${u}`]]: u,
            [t[`input-field--${c}`]]: c,
            [t["input-field--not-valid"]]: a
          }),
          type: s,
          value: e,
          style: { paddingRight: e && l ? m : void 0 }
        }
      ),
      !!e && l && /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          className: t["input-field__clear-button"],
          onClick: h,
          ref: n,
          "aria-label": `clear trigger for ${p}`,
          children: l
        }
      )
    ] });
  }
);
export {
  j as InputField
};
//# sourceMappingURL=InputField.js.map