@altinn/altinn-components 0.10.4 → 0.11.0

package/dist/components/Searchbar/SearchField.js

@@ -1,56 +1,56 @@
 "use client";
-import { jsxs as q, jsx as i } from "react/jsx-runtime";
-import { c as h } from "../../index-L8X2o7IH.js";
-import { useRef as w } from "react";
-import { Icon as N } from "../Icon/Icon.js";
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import { c as q } from "../../index-L8X2o7IH.js";
+import { useRef as b } from "react";
+import { Icon as w } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import { IconButton as l } from "../Button/IconButton.js";
-import '../../assets/SearchField.css';const b = "_field_1wjpq_1", g = "_icon_1wjpq_10", C = "_input_1wjpq_17", I = "_dismiss_1wjpq_41", K = "_clear_1wjpq_47", s = {
-  field: b,
-  icon: g,
-  input: C,
-  dismiss: I,
+import '../../assets/SearchField.css';const I = "_field_1wjpq_1", N = "_icon_1wjpq_10", g = "_input_1wjpq_17", C = "_dismiss_1wjpq_41", K = "_clear_1wjpq_47", s = {
+  field: I,
+  icon: N,
+  input: g,
+  dismiss: C,
   clear: K
-}, O = ({
+}, F = ({
   className: m,
-  expanded: c,
+  expanded: a,
   name: p = "q",
   value: e,
   placeholder: u = "Søk",
-  onFocus: f,
-  onBlur: d,
+  onFocus: d,
+  onBlur: f,
   onChange: _,
   onClear: x,
   onClose: y,
-  onEnter: a,
-  tabIndex: j
+  onEnter: c,
+  tabIndex: h
 }) => {
-  const o = w(null), k = (t) => {
+  const t = b(null), j = (o) => {
     var r, n;
-    t.key === "Escape" && ((r = o.current) == null || r.blur()), t.key === "Enter" && ((n = o.current) == null || n.blur(), a == null || a());
+    o.key === "Escape" && ((r = t.current) == null || r.blur()), o.key === "Enter" && ((n = t.current) == null || n.blur(), c == null || c());
   };
-  return /* @__PURE__ */ q("div", { className: h(s.field, m), "aria-expanded": c, children: [
+  return /* @__PURE__ */ k("div", { className: q(s.field, m), "aria-expanded": a, children: [
     /* @__PURE__ */ i(
       "input",
       {
-        ref: o,
-        onFocus: f,
-        onBlur: d,
+        ref: t,
+        onFocus: d,
+        onBlur: f,
         name: p,
         value: e,
         onChange: _,
         placeholder: u,
         className: s.input,
-        onKeyUp: k,
+        onKeyUp: j,
         type: "search",
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        "aria-expanded": c,
-        tabIndex: j ?? 0
+        "aria-expanded": a,
+        tabIndex: h ?? 0
       }
     ),
-    /* @__PURE__ */ i(N, { name: "magnifying-glass", className: s.icon }),
+    /* @__PURE__ */ i(w, { name: "magnifying-glass", className: s.icon }),
     e && /* @__PURE__ */ i(
       l,
       {
@@ -59,11 +59,21 @@ import '../../assets/SearchField.css';const b = "_field_1wjpq_1", g = "_icon_1wj
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: x
+        onClick: x,
+        dataTestId: "search-button-clear"
       }
-    ) || c && /* @__PURE__ */ i(l, { icon: "x-mark", variant: "text", className: s.dismiss, onClick: y })
+    ) || a && /* @__PURE__ */ i(
+      l,
+      {
+        icon: "x-mark",
+        variant: "text",
+        className: s.dismiss,
+        onClick: y,
+        dataTestId: "search-button-close"
+      }
+    )
   ] });
 };
 export {
-  O as SearchField
+  F as SearchField
 };

package/dist/components/TextField/FieldBase.js

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import { Typography as m } from "../Typography/Typography.js";
+import { Heading as p } from "../Typography/Heading.js";
+import '../../assets/FieldBase.css';const d = "_field_5tnbv_1", x = "_label_5tnbv_7", _ = "_helperText_5tnbv_11", e = {
+  field: d,
+  label: x,
+  helperText: _
+}, y = ({ as: o, size: n, classname: r, label: s, helperText: l, children: a }) => /* @__PURE__ */ i(o || "label", { className: c(e.field, r), "data-size": n, children: [
+  s && /* @__PURE__ */ t(p, { size: "xs", className: e.label, children: s }),
+  a,
+  l && /* @__PURE__ */ t(m, { className: e.helperText, size: "xs", children: l })
+] });
+export {
+  y as FieldBase
+};

package/dist/components/TextField/InputBase.js

@@ -0,0 +1,33 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import '../../assets/InputBase.css';const x = "_input_dxhtf_1", f = {
+  input: x
+}, l = ({
+  type: t = "text",
+  name: s,
+  value: n,
+  placeholder: p,
+  onChange: i,
+  onFocus: o,
+  onBlur: e,
+  size: r,
+  className: u,
+  ...a
+}) => /* @__PURE__ */ c(
+  "input",
+  {
+    className: m(f.input, u),
+    "data-size": r,
+    type: t,
+    name: s,
+    value: n,
+    placeholder: p,
+    onChange: i,
+    onFocus: o,
+    onBlur: e,
+    ...a
+  }
+);
+export {
+  l as InputBase
+};

package/dist/components/TextField/TextField.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { FieldBase as i } from "./FieldBase.js";
+import { InputBase as p } from "./InputBase.js";
+const l = ({ size: r = "md", label: t, helperText: e, ...m }) => /* @__PURE__ */ o(i, { size: r, label: t, helperText: e, children: /* @__PURE__ */ o(p, { ...m, size: r }) });
+export {
+  l as TextField
+};

package/dist/components/TextField/index.js

@@ -0,0 +1,8 @@
+import { FieldBase as r } from "./FieldBase.js";
+import { InputBase as p } from "./InputBase.js";
+import { TextField as f } from "./TextField.js";
+export {
+  r as FieldBase,
+  p as InputBase,
+  f as TextField
+};

package/dist/components/Typography/Heading.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import { c as d } from "../../index-L8X2o7IH.js";
-import '../../assets/Heading.css';const o = "_heading_15ax1_1", m = {
-  heading: o
-}, h = ({ as: a = "h2", size: e = "md", weight: t = "medium", className: s, children: i }) => /* @__PURE__ */ n(a, { className: d(m.heading, s), "data-size": e, "data-weight": t, children: i });
+import '../../assets/Heading.css';const m = "_heading_mt0g8_1", o = {
+  heading: m
+}, h = ({ as: t = "h2", size: a = "md", weight: e = "medium", className: s, children: i }) => /* @__PURE__ */ n(t, { className: d(o.heading, s), "data-size": a, "data-weight": e, children: i });
 export {
   h as Heading
 };

package/dist/components/Typography/Typography.js

@@ -1,16 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as s } from "../../index-L8X2o7IH.js";
-import '../../assets/Typography.css';const n = "_typography_19j8u_1", y = "_item_19j8u_7", i = {
-  typography: n,
-  item: y
+import { jsx as y } from "react/jsx-runtime";
+import { c as e } from "../../index-L8X2o7IH.js";
+import '../../assets/Typography.css';const n = "_typography_15hc3_1", m = {
+  typography: n
 }, g = ({
   as: t = "div",
   size: o = "md",
   theme: p = "inherit",
-  className: e,
-  children: r,
-  ...a
-}) => /* @__PURE__ */ m(t, { className: s(i.typography, e), "data-size": o, "data-theme": p, ...a, children: r });
+  className: r,
+  children: a,
+  ...s
+}) => /* @__PURE__ */ y(t, { className: e(m.typography, r), "data-size": o, "data-theme": p, ...s, children: a });
 export {
   g as Typography
 };