@altinn/altinn-components 0.45.4 → 0.46.1

package/dist/assets/LayoutSidebar.css

@@ -1 +1 @@
-._sidebar_lkphj_1,._sidebar_lkphj_1[aria-hidden=true]{display:none}@media (min-width: 1024px){._sidebar_lkphj_1{align-self:flex-start;flex-shrink:0;display:flex;flex-direction:column;width:224px}._sidebar_lkphj_1[data-sticky=true]{position:sticky;top:0}._sidebar_lkphj_1[aria-hidden=true]{display:none}}
+._sidebar_bcso7_1,._sidebar_bcso7_1[aria-hidden=true]{display:none}@media (min-width: 1024px){._sidebar_bcso7_1{align-self:flex-start;flex-shrink:0;display:flex;flex-direction:column;width:224px}._sidebar_bcso7_1[data-use-global-header=true]{margin-top:4.125rem}._sidebar_bcso7_1[data-sticky=true]{position:sticky;top:0}._sidebar_bcso7_1[aria-hidden=true]{display:none}}

package/dist/assets/SearchbarBase.css

@@ -1 +1 @@
-._searchbar_1qnvb_1{position:relative}._searchbar_1qnvb_1[data-autocomplete=true][aria-expanded=true] input{border-bottom-left-radius:0;border-bottom-right-radius:0}._searchbar_1qnvb_1 nav{display:none}._searchbarExpanded_1qnvb_14 nav{position:absolute;display:block;border-top-left-radius:0;border-top-right-radius:0;margin-top:-2px}
+._searchbar_13e7s_1{position:relative}._searchbar_13e7s_1[data-autocomplete=true][aria-expanded=true] input{border-bottom-left-radius:0;border-bottom-right-radius:0}._searchbar_13e7s_1 nav{display:none}._searchbarExpanded_13e7s_14 nav{position:absolute;display:block;border-top-left-radius:0;border-top-right-radius:0;margin-top:-2px}._searchbarLocal_13e7s_22{width:100%;padding:var(--dsc-spacing-4) 0;z-index:100;margin-bottom:16px}@media (min-width: 1024px){._searchbarLocal_13e7s_22{max-width:320px;margin-right:auto}._searchbarLocal_13e7s_22._searchbarExpanded_13e7s_14{max-width:640px}}

package/dist/components/InboxSearch/InboxSearch.js

@@ -0,0 +1,30 @@
+import { jsxs as i, Fragment as s, jsx as e } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { useRootContext as m } from "../RootProvider/RootProvider.js";
+import { Searchbar as x } from "../Searchbar/Searchbar.js";
+import "../Snackbar/useSnackbar.js";
+import { Backdrop as p } from "../Dropdown/Backdrop.js";
+const f = ({ search: n }) => {
+  const { currentId: o, toggleId: t, openId: c } = m(), a = () => {
+    c("inboxSearch");
+  }, r = () => {
+    t("inboxSearch");
+  };
+  return /* @__PURE__ */ i(s, { children: [
+    o === "inboxSearch" && /* @__PURE__ */ e(p, { onClick: r }),
+    /* @__PURE__ */ e(
+      x,
+      {
+        ...n,
+        expanded: o === "inboxSearch",
+        onClose: r,
+        onFocus: a,
+        useGlobalHeader: !0
+      }
+    )
+  ] });
+};
+export {
+  f as InboxSearch
+};

package/dist/components/InboxSearch/index.js

@@ -0,0 +1,4 @@
+import { InboxSearch as e } from "./InboxSearch.js";
+export {
+  e as InboxSearch
+};

package/dist/components/Layout/Layout.js

@@ -1,43 +1,47 @@
 "use client";
-import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import { LayoutBase as L } from "./LayoutBase.js";
-import { LayoutBody as x } from "./LayoutBody.js";
-import { LayoutContent as j } from "./LayoutContent.js";
-import { LayoutSidebar as B } from "./LayoutSidebar.js";
-import { Footer as C } from "../Footer/Footer.js";
-import { GlobalHeader as F } from "../GlobalHeader/GlobalHeader.js";
+import { LayoutBody as S } from "./LayoutBody.js";
+import { LayoutContent as i } from "./LayoutContent.js";
+import { LayoutSidebar as j } from "./LayoutSidebar.js";
+import { Footer as B } from "../Footer/Footer.js";
+import { GlobalHeader as C } from "../GlobalHeader/GlobalHeader.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { useRootContext as H } from "../RootProvider/RootProvider.js";
-import { Menu as S } from "../Menu/Menu.js";
-import { Header as G } from "../Header/Header.js";
+import { useRootContext as F } from "../RootProvider/RootProvider.js";
+import { Menu as I } from "../Menu/Menu.js";
+import { Header as v } from "../Header/Header.js";
 import "../Snackbar/useSnackbar.js";
-import { SkipLink as I } from "../SkipLink/SkipLink.js";
-const O = ({
-  color: c,
-  theme: f = "subtle",
-  header: t,
-  footer: n,
+import { InboxSearch as M } from "../InboxSearch/InboxSearch.js";
+import { SkipLink as R } from "../SkipLink/SkipLink.js";
+const T = ({
+  color: h,
+  theme: y = "subtle",
+  header: m,
+  footer: u,
   sidebar: o,
-  content: l = {},
-  children: y,
-  skipLink: r,
-  useGlobalHeader: h = !1
+  content: n = {},
+  children: x,
+  skipLink: f,
+  useGlobalHeader: p = !1
 }) => {
-  const { currentId: u } = H();
-  return /* @__PURE__ */ p(L, { color: c, theme: u === "accountFullscreen" ? "default" : f, currentId: u, children: [
-    r && /* @__PURE__ */ m(I, { ...r }),
-    t && (h ? /* @__PURE__ */ m(F, { ...t }) : /* @__PURE__ */ m(G, { ...t })),
-    /* @__PURE__ */ p(x, { currentId: u, children: [
-      o && /* @__PURE__ */ p(B, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
-        (o == null ? void 0 : o.menu) && /* @__PURE__ */ m(S, { ...o == null ? void 0 : o.menu }),
+  const { currentId: r } = F(), l = m && "search" in m ? m.search : void 0;
+  return /* @__PURE__ */ c(L, { color: h, theme: r === "accountFullscreen" ? "default" : y, currentId: r, children: [
+    f && /* @__PURE__ */ t(R, { ...f }),
+    m && (p ? /* @__PURE__ */ t(C, { ...m }) : /* @__PURE__ */ t(v, { ...m })),
+    /* @__PURE__ */ c(S, { currentId: r, children: [
+      o && /* @__PURE__ */ c(j, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, useGlobalHeader: p, children: [
+        (o == null ? void 0 : o.menu) && /* @__PURE__ */ t(I, { ...o == null ? void 0 : o.menu }),
         o == null ? void 0 : o.children
       ] }),
-      /* @__PURE__ */ m(j, { color: l == null ? void 0 : l.color, id: "main-content", children: y })
+      /* @__PURE__ */ c(i, { color: n == null ? void 0 : n.color, id: "main-content", children: [
+        p && l && /* @__PURE__ */ t(M, { search: l }),
+        x
+      ] })
     ] }),
-    n && /* @__PURE__ */ m(C, { ...n })
+    u && /* @__PURE__ */ t(B, { ...u })
   ] });
 };
 export {
-  O as Layout
+  T as Layout
 };

package/dist/components/Layout/LayoutSidebar.js

@@ -1,7 +1,23 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/LayoutSidebar.css';const d = "_sidebar_lkphj_1", i = {
-  sidebar: d
-}, c = ({ color: a, hidden: s = !1, sticky: e, children: r }) => /* @__PURE__ */ t("aside", { className: i.sidebar, "data-color": a, "data-sticky": e, "aria-hidden": s, children: r });
+import '../../assets/LayoutSidebar.css';const o = "_sidebar_bcso7_1", i = {
+  sidebar: o
+}, c = ({
+  color: a,
+  hidden: s = !1,
+  sticky: e,
+  children: r,
+  useGlobalHeader: d = !1
+}) => /* @__PURE__ */ t(
+  "aside",
+  {
+    className: i.sidebar,
+    "data-color": a,
+    "data-sticky": e,
+    "data-use-global-header": d,
+    "aria-hidden": s,
+    children: r
+  }
+);
 export {
   c as LayoutSidebar
 };

package/dist/components/Searchbar/Searchbar.js

@@ -1,23 +1,24 @@
-import { jsxs as S, jsx as g } from "react/jsx-runtime";
-import { useState as k } from "react";
+import { jsxs as k, jsx as g } from "react/jsx-runtime";
+import { useState as v } from "react";
 import "../../index-L8X2o7IH.js";
-import { useIsDesktop as v } from "../../hooks/useIsDesktop.js";
-import { useRootContext as j } from "../RootProvider/RootProvider.js";
-import { SearchbarBase as x } from "./SearchbarBase.js";
-import { SearchbarField as D } from "./SearchbarField.js";
-import { Autocomplete as P } from "./Autocomplete.js";
+import { useIsDesktop as j } from "../../hooks/useIsDesktop.js";
+import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { SearchbarBase as D } from "./SearchbarBase.js";
+import { SearchbarField as P } from "./SearchbarField.js";
+import { Autocomplete as y } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
-const K = ({
+const L = ({
   className: I,
   autocomplete: a,
   expanded: u = !1,
   onClose: o,
   tabIndex: T,
+  useGlobalHeader: A = !1,
   ...e
 }) => {
-  const [i, l] = k(!1), { previousId: A, openId: B } = j(), F = v();
-  return /* @__PURE__ */ S(
-    x,
+  const [i, l] = v(!1), { previousId: B, openId: F } = x(), S = j();
+  return /* @__PURE__ */ k(
+    D,
     {
       className: I,
       expanded: u,
@@ -25,11 +26,12 @@ const K = ({
       onBlurCapture: (t) => {
         var s, n, m, d, p, b, c, f;
         const r = (m = (n = (s = t.target) == null ? void 0 : s.attributes) == null ? void 0 : n.getNamedItem("data-testid")) == null ? void 0 : m.value;
-        (d = t == null ? void 0 : t.relatedTarget) != null && d.closest('[data-autocomplete="true"]') || t.relatedTarget === null || (r === "search-button-clear" || r === "search-button-close" || r === "searchbar-input" && ((p = t.relatedTarget) == null ? void 0 : p.getAttribute("data-testid")) !== "searchbar-input" && ((b = t.relatedTarget) == null ? void 0 : b.getAttribute("data-testid")) !== "search-button-clear" && ((c = t.relatedTarget) == null ? void 0 : c.getAttribute("data-testid")) !== "search-button-close" && ((f = t.relatedTarget) == null ? void 0 : f.getAttribute("data-testid")) !== "autocomplete-list") && (F || A !== "menu" ? o == null || o() : B("menu"));
+        (d = t == null ? void 0 : t.relatedTarget) != null && d.closest('[data-autocomplete="true"]') || t.relatedTarget === null || (r === "search-button-clear" || r === "search-button-close" || r === "searchbar-input" && ((p = t.relatedTarget) == null ? void 0 : p.getAttribute("data-testid")) !== "searchbar-input" && ((b = t.relatedTarget) == null ? void 0 : b.getAttribute("data-testid")) !== "search-button-clear" && ((c = t.relatedTarget) == null ? void 0 : c.getAttribute("data-testid")) !== "search-button-close" && ((f = t.relatedTarget) == null ? void 0 : f.getAttribute("data-testid")) !== "autocomplete-list") && (S || B !== "menu" ? o == null || o() : F("menu"));
       },
+      useGlobalHeader: A,
       children: [
         /* @__PURE__ */ g(
-          D,
+          P,
           {
             ...e,
             expanded: u,
@@ -47,7 +49,7 @@ const K = ({
           }
         ),
         a && /* @__PURE__ */ g(
-          P,
+          y,
           {
             ...a,
             expanded: u,
@@ -61,5 +63,5 @@ const K = ({
   );
 };
 export {
-  K as Searchbar
+  L as Searchbar
 };

package/dist/components/Searchbar/SearchbarBase.js

@@ -1,18 +1,25 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as b } from "../../index-L8X2o7IH.js";
-import '../../assets/SearchbarBase.css';const d = "_searchbar_1qnvb_1", h = "_searchbarExpanded_1qnvb_14", a = {
-  searchbar: d,
-  searchbarExpanded: h
-}, l = ({
+import { jsx as b } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
+import '../../assets/SearchbarBase.css';const n = "_searchbar_13e7s_1", d = "_searchbarExpanded_13e7s_14", _ = "_searchbarLocal_13e7s_22", a = {
+  searchbar: n,
+  searchbarExpanded: d,
+  searchbarLocal: _
+}, m = ({
   className: r,
-  children: e,
-  expanded: s = !1,
+  children: s,
+  expanded: e = !1,
   onBlurCapture: c,
-  autocomplete: t = !1
+  autocomplete: o = !1,
+  useGlobalHeader: t = !1
 }) => {
-  const n = b(a.searchbar, r, s && a.searchbarExpanded);
-  return /* @__PURE__ */ o("div", { className: n, "data-autocomplete": t, onBlurCapture: c, children: e });
+  const h = l(
+    a.searchbar,
+    r,
+    e && a.searchbarExpanded,
+    t && a.searchbarLocal
+  );
+  return /* @__PURE__ */ b("div", { className: h, "data-autocomplete": o, onBlurCapture: c, children: s });
 };
 export {
-  l as SearchbarBase
+  m as SearchbarBase
 };

package/dist/types/lib/components/InboxSearch/InboxSearch.d.ts

@@ -0,0 +1,5 @@
+import { SearchbarProps } from '../Searchbar';
+export interface InboxSearchProps {
+    search: SearchbarProps;
+}
+export declare const InboxSearch: ({ search }: InboxSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/InboxSearch/index.d.ts

@@ -0,0 +1 @@
+export { InboxSearch, type InboxSearchProps } from './InboxSearch';

package/dist/types/lib/components/Layout/LayoutSidebar.d.ts

@@ -10,5 +10,6 @@ export interface LayoutSidebarProps {
     hidden?: boolean;
     sticky?: boolean;
     children?: ReactNode;
+    useGlobalHeader?: boolean;
 }
-export declare const LayoutSidebar: ({ color, hidden, sticky, children }: LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutSidebar: ({ color, hidden, sticky, children, useGlobalHeader, }: LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Searchbar/Searchbar.d.ts

@@ -4,5 +4,6 @@ export interface SearchbarProps extends SearchbarFieldProps {
     autocomplete?: AutocompleteProps;
     expanded?: boolean;
     tabIndex?: number;
+    useGlobalHeader?: boolean;
 }
-export declare const Searchbar: ({ className, autocomplete, expanded, onClose, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Searchbar: ({ className, autocomplete, expanded, onClose, tabIndex, useGlobalHeader, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Searchbar/Searchbar.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { SearchbarProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ className, autocomplete, expanded, onClose, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, autocomplete, expanded, onClose, tabIndex, useGlobalHeader, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {
         placeholder: string;

package/dist/types/lib/components/Searchbar/SearchbarBase.d.ts

@@ -5,5 +5,6 @@ export interface SearchbarBaseProps {
     expanded?: boolean;
     autocomplete?: boolean;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
+    useGlobalHeader?: boolean;
 }
-export declare const SearchbarBase: ({ className, children, expanded, onBlurCapture, autocomplete, }: SearchbarBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchbarBase: ({ className, children, expanded, onBlurCapture, autocomplete, useGlobalHeader, }: SearchbarBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/stories/Inbox.stories.d.ts

@@ -9,6 +9,7 @@ declare const meta: {
 export default meta;
 export declare const InboxPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const InboxEmptyPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const InboxWithGlobalSearch: () => import("react/jsx-runtime").JSX.Element;
 export declare const SearchPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const SearchEmptyPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const DraftsPage: () => import("react/jsx-runtime").JSX.Element;

package/package.json

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