@altinn/altinn-components 0.35.8 → 0.35.9

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._field_5zm0g_1{position:relative}._icon_5zm0g_5{position:absolute;top:1px;left:1px;font-size:1.25em;color:var(--ds-color-text-subtle);margin:.5em}._input_5zm0g_14{padding-left:2.25em;padding-right:2.25em}._input_5zm0g_14[type=search]::-webkit-search-decoration,._input_5zm0g_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_5zm0g_24{font-size:inherit;position:absolute;top:1px;right:1px;margin:.25em;border:0;border-radius:100%;width:2em;height:2em;display:flex;justify-content:center;align-items:center;background-color:var(--ds-color-background-tinted);color:var(--ds-color-base-default)}._clear_5zm0g_24:hover{background-color:var(--ds-color-surface-active);color:var(--ds-color-base-default);cursor:pointer}._clear_5zm0g_24 ._clearIcon_5zm0g_48{font-size:1.5em}
+._field_zk1f7_1{position:relative}._icon_zk1f7_5{position:absolute;top:1px;left:1px;font-size:1.25em;color:var(--ds-color-text-subtle);margin:.5em}._input_zk1f7_14{padding-left:2.25em;padding-right:2.25em}._input_zk1f7_14[type=search]::-webkit-search-decoration,._input_zk1f7_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_zk1f7_24{font-size:inherit;position:absolute;top:0;right:0;margin:.375em;border:0;border-radius:100%;font-size:.75em;background-color:var(--ds-color-surface-tinted);color:var(--ds-color-base-default)}._clear_zk1f7_24:focus-visible{outline-offset:0;outline-width:2px}

package/dist/assets/SearchbarField.css

@@ -1 +1 @@
-._field_73ung_1{position:relative;display:flex;align-items:center;font-size:1.125rem;background-color:transparent;color:currentColor}._field_73ung_1[data-expanded=true]{background-color:#fff}._icon_73ung_14{position:absolute;left:0;font-size:1.5rem;margin:0 1rem}._input_73ung_21{height:3.5rem;background-color:transparent;font-size:inherit;flex-grow:1;padding:1rem 1rem 1rem 3rem;border:2px solid;border-radius:.25rem;outline:none}._input_73ung_21[type=search]::-webkit-search-decoration,._input_73ung_21[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_73ung_21:focus,._input_73ung_21:not(:placeholder-shown){background-color:var(--ds-color-background-default)}._dismiss_73ung_42{position:absolute;right:0;margin:.375rem}._clear_73ung_48{background-color:var(--ds-color-neutral-surface-active);border:var(--ds-color-neutral-surface-active);color:var(--ds-color-neutral-base-default);position:absolute;right:0;margin:1rem;border-radius:100%;width:1.5rem;height:1.5rem}
+._field_1f56c_1{position:relative;display:flex;align-items:center;font-size:1.125rem;background-color:transparent;color:currentColor}._icon_1f56c_10{position:absolute;left:0;font-size:1.5rem;margin:0 1rem}._input_1f56c_17{height:3.5rem;background-color:transparent;font-size:inherit;flex-grow:1;padding:1rem 1rem 1rem 3rem;border:2px solid;border-radius:.25rem;outline:none}._input_1f56c_17[type=search]::-webkit-search-decoration,._input_1f56c_17[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_1f56c_17[data-expanded=true],._input_1f56c_17:focus,._input_1f56c_17:not(:placeholder-shown){background-color:var(--ds-color-background-default)}._clear_1f56c_39{background-color:var(--ds-color-surface-tinted);color:var(--ds-color-base-default);border:0;position:absolute;right:0;margin:.75rem;border-radius:100%;width:1.5rem;height:1.5rem}._clear_1f56c_39:focus-visible{outline-offset:0;outline-width:2px}._dismiss_1f56c_56{position:absolute;right:0;margin:.5rem}._dismiss_1f56c_56:focus-visible{outline-offset:0;outline-width:2px}

package/dist/components/Forms/SearchField.js

@@ -1,34 +1,44 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { Icon as p } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
+import { IconButton as f } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Input as _ } from "./Input.js";
-import { FieldBase as f } from "./FieldBase.js";
-import { S as d } from "../../MagnifyingGlass-3Ln1MufI.js";
-import { S as g } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchField.css';const u = "_field_5zm0g_1", h = "_icon_5zm0g_5", I = "_input_5zm0g_14", z = "_clear_5zm0g_24", N = "_clearIcon_5zm0g_48", c = {
-  field: u,
+import { FieldBase as d } from "./FieldBase.js";
+import { S as u } from "../../MagnifyingGlass-3Ln1MufI.js";
+import { S as k } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/SearchField.css';const g = "_field_zk1f7_1", h = "_icon_zk1f7_5", z = "_input_zk1f7_14", S = "_clear_zk1f7_24", o = {
+  field: g,
   icon: h,
-  input: I,
-  clear: z,
-  clearIcon: N
-}, E = ({
-  className: t,
-  size: i,
-  color: n = "neutral",
-  label: a,
-  value: o,
-  onClear: e,
-  clearButtonAltText: s = "Clear search",
-  ...l
-}) => /* @__PURE__ */ r(f, { size: i, color: n, label: a, className: t, children: /* @__PURE__ */ m("div", { className: c.field, children: [
-  /* @__PURE__ */ r(_, { ...l, type: "search", value: o, className: c.input }),
-  /* @__PURE__ */ r(p, { svgElement: d, className: c.icon }),
-  e && !!o && /* @__PURE__ */ r("button", { type: "button", className: c.clear, onClick: e, "aria-label": s, children: /* @__PURE__ */ r(g, { className: c.clearIcon }) })
+  input: z,
+  clear: S
+}, G = ({
+  className: s,
+  size: c,
+  color: e = "neutral",
+  label: n,
+  value: t,
+  onClear: r,
+  clearButtonAltText: m = "Clear search",
+  ...a
+}) => /* @__PURE__ */ i(d, { size: c, color: e, label: n, className: s, children: /* @__PURE__ */ l("div", { className: o.field, children: [
+  /* @__PURE__ */ i(_, { ...a, type: "search", value: t, className: o.input }),
+  /* @__PURE__ */ i(p, { svgElement: u, className: o.icon }),
+  r && !!t && /* @__PURE__ */ i(
+    f,
+    {
+      icon: k,
+      variant: "solid",
+      size: "custom",
+      className: o.clear,
+      onClick: r,
+      iconAltText: m
+    }
+  )
 ] }) });
 export {
-  E as SearchField
+  G as SearchField
 };

package/dist/components/Searchbar/Searchbar.js

@@ -1,33 +1,33 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { SearchbarBase as A } from "./SearchbarBase.js";
+import { SearchbarBase as n } from "./SearchbarBase.js";
 import { SearchbarField as T } from "./SearchbarField.js";
 import "./AutocompleteBase.js";
-import { Autocomplete as n } from "./Autocomplete.js";
+import { Autocomplete as A } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
 const k = ({
-  className: l,
+  className: p,
   autocomplete: e,
   expanded: a = !1,
-  onClose: t,
+  onClose: r,
   tabIndex: g,
   ...h
 }) => /* @__PURE__ */ f(
-  A,
+  n,
   {
-    className: l,
+    className: p,
     expanded: a,
     autocomplete: !!e,
-    onBlurCapture: (r) => {
-      var c, s, u, m, d, b, o;
-      const i = (u = (s = (c = r.target) == null ? void 0 : c.attributes) == null ? void 0 : s.getNamedItem("data-testid")) == null ? void 0 : u.value;
-      (i === "search-button-clear" || i === "search-button-close" || i === "searchbar-input" && ((m = r.relatedTarget) == null ? void 0 : m.getAttribute("data-testid")) !== "searchbar-input" && ((d = r.relatedTarget) == null ? void 0 : d.getAttribute("data-testid")) !== "search-button-clear" && ((b = r.relatedTarget) == null ? void 0 : b.getAttribute("data-testid")) !== "search-button-close" && ((o = r.relatedTarget) == null ? void 0 : o.getAttribute("data-testid")) !== "autocomplete-list") && (t == null || t());
+    onBlurCapture: (t) => {
+      var u, c, s, d, m, b, l;
+      const i = (s = (c = (u = t.target) == null ? void 0 : u.attributes) == null ? void 0 : c.getNamedItem("data-testid")) == null ? void 0 : s.value;
+      t.relatedTarget !== null && (i === "search-button-clear" || i === "search-button-close" || i === "searchbar-input" && ((d = t.relatedTarget) == null ? void 0 : d.getAttribute("data-testid")) !== "searchbar-input" && ((m = t.relatedTarget) == null ? void 0 : m.getAttribute("data-testid")) !== "search-button-clear" && ((b = t.relatedTarget) == null ? void 0 : b.getAttribute("data-testid")) !== "search-button-close" && ((l = t.relatedTarget) == null ? void 0 : l.getAttribute("data-testid")) !== "autocomplete-list") && (r == null || r());
     },
     children: [
-      /* @__PURE__ */ p(T, { ...h, expanded: a, onClose: t, tabIndex: g }),
-      e && /* @__PURE__ */ p(n, { ...e, expanded: a, onSelect: t })
+      /* @__PURE__ */ o(T, { ...h, expanded: a, onClose: r, tabIndex: g }),
+      e && /* @__PURE__ */ o(A, { ...e, expanded: a, onSelect: r })
     ]
   }
 );

package/dist/components/Searchbar/SearchbarField.js

@@ -9,42 +9,42 @@ import "./AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as T } from "../../MagnifyingGlass-3Ln1MufI.js";
 import { S as m } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchbarField.css';const j = "_field_73ung_1", A = "_icon_73ung_14", K = "_input_73ung_21", M = "_dismiss_73ung_42", U = "_clear_73ung_48", s = {
+import '../../assets/SearchbarField.css';const j = "_field_1f56c_1", z = "_icon_1f56c_10", A = "_input_1f56c_17", K = "_clear_1f56c_39", M = "_dismiss_1f56c_56", s = {
   field: j,
-  icon: A,
-  input: K,
-  dismiss: M,
-  clear: U
+  icon: z,
+  input: A,
+  clear: K,
+  dismiss: M
 }, H = ({
   className: p,
   expanded: e,
-  name: u = "q",
-  value: c,
+  name: f = "q",
+  value: a,
   placeholder: d = "Search",
-  closeButtonAltText: f = "Close search",
+  closeButtonAltText: u = "Close search",
   clearButtonAltText: _ = "Clear search",
   onFocus: h,
-  onBlur: g,
-  onChange: x,
-  onClear: b,
-  onClose: y,
+  onBlur: x,
+  onChange: b,
+  onClear: y,
+  onClose: S,
   onEnter: i,
-  tabIndex: S
+  tabIndex: g
 }) => {
-  const a = N(null), k = (o) => {
+  const c = N(null), k = (o) => {
     var r, n;
-    o.key === "Escape" && ((r = a.current) == null || r.blur()), o.key === "Enter" && ((n = a.current) == null || n.blur(), i == null || i());
+    o.key === "Escape" && ((r = c.current) == null || r.blur()), o.key === "Enter" && ((n = c.current) == null || n.blur(), i == null || i());
   };
-  return /* @__PURE__ */ C("div", { className: I(s.field, p), "data-expanded": e, children: [
+  return /* @__PURE__ */ C("div", { className: I(s.field, p), children: [
     /* @__PURE__ */ t(
       "input",
       {
-        ref: a,
+        ref: c,
         onFocus: h,
-        onBlur: g,
-        name: u,
-        value: c,
-        onChange: x,
+        onBlur: x,
+        name: f,
+        value: a,
+        onChange: b,
         placeholder: d,
         className: s.input,
         onKeyUp: k,
@@ -52,19 +52,20 @@ import '../../assets/SearchbarField.css';const j = "_field_73ung_1", A = "_icon_
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        tabIndex: S ?? 0,
+        tabIndex: g ?? 0,
+        "data-expanded": e,
         "data-testid": "searchbar-input"
       }
     ),
     /* @__PURE__ */ t(v, { svgElement: T, className: s.icon }),
-    c && /* @__PURE__ */ t(
+    a && /* @__PURE__ */ t(
       l,
       {
         icon: m,
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: b,
+        onClick: y,
         dataTestId: "search-button-clear",
         iconAltText: _
       }
@@ -72,11 +73,12 @@ import '../../assets/SearchbarField.css';const j = "_field_73ung_1", A = "_icon_
       l,
       {
         icon: m,
+        size: "sm",
         variant: "text",
         className: s.dismiss,
-        onClick: y,
+        onClick: S,
         dataTestId: "search-button-close",
-        iconAltText: f
+        iconAltText: u
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.35.8",
+  "version": "0.35.9",
   "main": "dist/index.js",
   "files": [
     "dist/",