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

React components UvA

import { jsxs as h, jsx as c } from "react/jsx-runtime";
import { forwardRef as k, useState as b, useRef as g, useEffect as x } from "react";
import { c as y } from "../../clsx-OuTLNxxd.js";
import '../../assets/InputField.css';const e = {
  "input-field-wrapper": "_input-field-wrapper_1h8mk_1",
  "input-field": "_input-field_1h8mk_1",
  "input-field--large": "_input-field--large_1h8mk_22",
  "input-field--compact": "_input-field--compact_1h8mk_26",
  "input-field__clear-button": "_input-field__clear-button_1h8mk_34"
}, W = k(
  ({
    autoComplete: p = "off",
    id: r,
    value: i,
    variant: f,
    width: o,
    type: s = "text",
    clearTrigger: n,
    onClear: u,
    ...a
  }, t) => {
    const [_, d] = b(0), l = g(null);
    x(() => {
      l.current && d(l.current.offsetWidth);
    }, [i]);
    const m = () => {
      u && t && "current" in t && t.current && (u(), t.current.focus());
    };
    return /* @__PURE__ */ h("div", { className: e["input-field-wrapper"], children: [
      /* @__PURE__ */ c(
        "input",
        {
          ...a,
          autoComplete: p,
          ref: t,
          id: r,
          className: y(e["input-field"], {
            [e["input-field--large"]]: f === "large",
            [e["input-field--compact"]]: o === "compact"
          }),
          type: s,
          value: i,
          style: { paddingRight: i && n ? _ : void 0 }
        }
      ),
      i && n && /* @__PURE__ */ c(
        "button",
        {
          type: "button",
          className: e["input-field__clear-button"],
          onClick: m,
          ref: l,
          "aria-label": `clear trigger for ${r}`,
          children: n
        }
      )
    ] });
  }
);
export {
  W as InputField
};
//# sourceMappingURL=InputField.js.map