@altinn/altinn-components 0.56.9 → 0.56.11

package/dist/components/GlobalHeader/GlobalHeaderBase.js

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as p } from "react/jsx-runtime";
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
 import { c as d } from "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
@@ -6,7 +6,7 @@ import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import "react-dom";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
-import '../../assets/GlobalHeaderBase.css';const i = "_header_t9h1f_1", n = "_backdrop_t9h1f_13", r = {
+import '../../assets/GlobalHeaderBase.css';const i = "_header_pafet_1", n = "_backdrop_pafet_12", r = {
   header: i,
   backdrop: n
 }, u = ({
@@ -15,8 +15,8 @@ import '../../assets/GlobalHeaderBase.css';const i = "_header_t9h1f_1", n = "_ba
   children: e,
   openBackdrop: t,
   onCloseBackdrop: c
-}) => /* @__PURE__ */ s("header", { className: d(r.header, a), "data-current-id": o, children: [
-  t && /* @__PURE__ */ p(m, { className: r.backdrop, onClick: c, color: "transparent" }),
+}) => /* @__PURE__ */ p("header", { className: d(r.header, a), "data-current-id": o, children: [
+  t && /* @__PURE__ */ s(m, { className: r.backdrop, onClick: c, color: "transparent" }),
   e
 ] });
 export {

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import { useState as d, useCallback as G, useEffect as L, useMemo as C } from "react";
-import { M as S } from "../../SearchField-CXMhgFiw.js";
+import { M as S } from "../../SearchField-CYYz0JvC.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "react-dom";

package/dist/components/GlobalMenu/LocaleSwitcher.js

@@ -2,7 +2,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as g, useMemo as l } from "react";
 import { useEnterKey as v } from "../../hooks/useEnterKey.js";
-import { a as h } from "../../SearchField-CXMhgFiw.js";
+import { a as h } from "../../SearchField-CYYz0JvC.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "react-dom";

package/dist/components/GlobalMenu_old/GlobalMenu.js

@@ -6,7 +6,7 @@ import { AccountMenu as x } from "../Account/AccountMenu.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { M as f } from "../../SearchField-CXMhgFiw.js";
+import { M as f } from "../../SearchField-CYYz0JvC.js";
 import { MenuListItem as h } from "../Menu/MenuListItem.js";
 import { CurrentAccount as y } from "./CurrentAccount.js";
 import { BackButton as j } from "./BackButton.js";

package/dist/components/Header/LocaleSwitcher.js

@@ -7,7 +7,7 @@ import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
 import "../../index-p1eeF8LQ.js";
 import "react-dom";
 import "../Button/Button.js";
-import { a as p } from "../../SearchField-CXMhgFiw.js";
+import { a as p } from "../../SearchField-CYYz0JvC.js";
 import { useRootContext as I } from "../RootProvider/RootProvider.js";
 import { LocaleButton as S } from "./LocaleButton.js";
 import "../Snackbar/useSnackbar.js";

package/dist/components/Layout/Layout.js

@@ -1,49 +1,60 @@
 "use client";
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { LayoutBase as h } from "./LayoutBase.js";
-import { LayoutBody as a } from "./LayoutBody.js";
-import { LayoutContent as y } from "./LayoutContent.js";
-import { LayoutSidebar as d } from "./LayoutSidebar.js";
-import { Footer as x } from "../Footer/Footer.js";
-import { GlobalHeader as L } from "../GlobalHeader/GlobalHeader.js";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { LayoutBase as d } from "./LayoutBase.js";
+import { LayoutGrid as a } from "./LayoutGrid.js";
+import { LayoutBody as s } from "./LayoutBody.js";
+import { LayoutContent as h } from "./LayoutContent.js";
+import { LayoutSidebar as L } from "./LayoutSidebar.js";
+import { Breadcrumbs as x } from "../Breadcrumbs/Breadcrumbs.js";
 import "../../index-p1eeF8LQ.js";
+import { Footer as B } from "../Footer/Footer.js";
+import { GlobalHeader as j } from "../GlobalHeader/GlobalHeader.js";
 import "react";
 import "../Button/Button.js";
-import { M as S } from "../../SearchField-CXMhgFiw.js";
-import { useRootContext as j } from "../RootProvider/RootProvider.js";
-import { Header as B } from "../Header/Header.js";
+import { M as k } from "../../SearchField-CYYz0JvC.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { Header as F } from "../Header/Header.js";
 import "../Snackbar/useSnackbar.js";
 import "react-dom";
-import { InboxSearch as C } from "../InboxSearch/InboxSearch.js";
-import { SkipLink as F } from "../SkipLink/SkipLink.js";
-const O = ({
-  color: f,
+import { SkipLink as G } from "../SkipLink/SkipLink.js";
+const Q = ({
+  color: p,
   theme: l = "subtle",
-  header: t,
-  footer: i,
+  header: i,
+  footer: e,
   sidebar: o,
   content: u = {},
-  children: s,
-  skipLink: c,
-  useGlobalHeader: e = !1
+  children: f,
+  skipLink: n,
+  breadcrumbs: c,
+  useGlobalHeader: y = !1
 }) => {
-  const { currentId: n } = j(), p = t && "search" in t ? t.search : void 0;
-  return /* @__PURE__ */ m(h, { color: f, theme: n === "accountFullscreen" ? "default" : l, currentId: n, children: [
-    c && /* @__PURE__ */ r(F, { ...c }),
-    t && (e ? /* @__PURE__ */ r(L, { ...t }) : /* @__PURE__ */ r(B, { ...t })),
-    /* @__PURE__ */ m(a, { currentId: n, children: [
-      o && /* @__PURE__ */ m(d, { hidden: o?.hidden, color: o?.color, footer: o?.footer, children: [
-        o?.menu && /* @__PURE__ */ r(S, { ...o?.menu }),
-        o?.children
-      ] }),
-      /* @__PURE__ */ m(y, { color: u?.color, id: "main-content", children: [
-        e && p && /* @__PURE__ */ r(C, { search: p }),
-        s
+  const { currentId: r } = C();
+  return /* @__PURE__ */ m(d, { color: p, theme: r === "accountFullscreen" ? "default" : l, currentId: r, children: [
+    n && /* @__PURE__ */ t(G, { ...n }),
+    i && (y ? /* @__PURE__ */ t(j, { ...i }) : /* @__PURE__ */ t(F, { ...i })),
+    /* @__PURE__ */ m(a, { currentId: r, children: [
+      c && /* @__PURE__ */ t(x, { items: c }),
+      /* @__PURE__ */ m(s, { currentId: r, children: [
+        o && /* @__PURE__ */ m(
+          L,
+          {
+            sticky: o?.sticky,
+            hidden: o?.hidden,
+            color: o?.color,
+            footer: o?.footer,
+            children: [
+              o?.menu && /* @__PURE__ */ t(k, { ...o?.menu }),
+              o?.children
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(h, { color: u?.color, id: "main-content", children: f })
       ] })
     ] }),
-    i && /* @__PURE__ */ r(x, { ...i })
+    e && /* @__PURE__ */ t(B, { ...e })
   ] });
 };
 export {
-  O as Layout
+  Q as Layout
 };

package/dist/components/Layout/LayoutBody.js

@@ -1,7 +1,7 @@
-import { jsx as d } from "react/jsx-runtime";
-import '../../assets/LayoutBody.css';const s = "_body_1voih_1", r = {
-  body: s
-}, a = ({ currentId: o, children: t }) => /* @__PURE__ */ d("div", { className: r.body, "data-current-id": o, children: t });
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/LayoutBody.css';const d = "_body_1s4on_1", r = {
+  body: d
+}, n = ({ currentId: o, children: t }) => /* @__PURE__ */ s("div", { className: r.body, "data-current-id": o, children: t });
 export {
-  a as LayoutBody
+  n as LayoutBody
 };

package/dist/components/Layout/LayoutContent.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import '../../assets/LayoutContent.css';const e = "_content_1xz06_1", s = {
+import '../../assets/LayoutContent.css';const e = "_content_1508z_1", s = {
   content: e
 }, r = ({ color: t, children: n, id: o = "main-content" }) => /* @__PURE__ */ c("main", { className: s.content, "data-color": t, id: o, children: n });
 export {

package/dist/components/Layout/LayoutGrid.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+import '../../assets/LayoutGrid.css';const o = "_grid_6h47e_1", s = {
+  grid: o
+}, c = ({ currentId: r, children: t, variant: a = "default", color: d }) => /* @__PURE__ */ i("div", { className: s.grid, "data-current-id": r, "data-variant": a, "data-color": d, children: t });
+export {
+  c as LayoutGrid
+};

package/dist/components/Layout/LayoutSidebar.js

@@ -1,11 +1,11 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import '../../assets/LayoutSidebar.css';const c = "_sidebar_1yk7j_1", n = "_footer_1yk7j_9", a = {
+import '../../assets/LayoutSidebar.css';const c = "_sidebar_1b5b3_1", b = "_footer_1b5b3_10", a = {
   sidebar: c,
-  footer: n
-}, _ = ({ color: e, hidden: r = !1, sticky: o, children: t, footer: s }) => /* @__PURE__ */ d("aside", { className: a.sidebar, "data-color": e, "data-sticky": o, "aria-hidden": r, children: [
+  footer: b
+}, l = ({ color: e, hidden: r = !1, sticky: o, children: t, footer: s }) => /* @__PURE__ */ d("aside", { className: a.sidebar, "data-color": e, "data-sticky": o, "aria-hidden": r, children: [
   t,
   s && /* @__PURE__ */ i("div", { className: a.footer, children: s })
 ] });
 export {
-  _ as LayoutSidebar
+  l as LayoutSidebar
 };

package/dist/components/Layout/index.js

@@ -1,12 +1,14 @@
-import { LayoutBase as r } from "./LayoutBase.js";
-import { LayoutBody as a } from "./LayoutBody.js";
-import { LayoutContent as f } from "./LayoutContent.js";
-import { LayoutSidebar as p } from "./LayoutSidebar.js";
-import { Layout as x } from "./Layout.js";
+import { LayoutBase as t } from "./LayoutBase.js";
+import { LayoutGrid as a } from "./LayoutGrid.js";
+import { LayoutBody as f } from "./LayoutBody.js";
+import { LayoutContent as p } from "./LayoutContent.js";
+import { LayoutSidebar as x } from "./LayoutSidebar.js";
+import { Layout as d } from "./Layout.js";
 export {
-  x as Layout,
-  r as LayoutBase,
-  a as LayoutBody,
-  f as LayoutContent,
-  p as LayoutSidebar
+  d as Layout,
+  t as LayoutBase,
+  f as LayoutBody,
+  p as LayoutContent,
+  a as LayoutGrid,
+  x as LayoutSidebar
 };

package/dist/components/Menu/Menu.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { M as t } from "../../SearchField-CXMhgFiw.js";
+import { M as t } from "../../SearchField-CYYz0JvC.js";
 import "./useMenuSearch.js";
 export {
   t as Menu

package/dist/components/Menu/MenuItems.js

@@ -5,7 +5,7 @@ import "../../hooks/useMenu.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { a as c } from "../../SearchField-CXMhgFiw.js";
+import { a as c } from "../../SearchField-CYYz0JvC.js";
 import "./MenuItem.js";
 import "./MenuList.js";
 import "./MenuListItem.js";

package/dist/components/Menu/MenuListSearch.js

@@ -4,7 +4,7 @@ import "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { b } from "../../SearchField-CXMhgFiw.js";
+import { b } from "../../SearchField-CYYz0JvC.js";
 import "../Snackbar/useSnackbar.js";
 export {
   b as MenuListSearch

package/dist/components/Menu/VirtualizedMenuItems.js

@@ -5,7 +5,7 @@ import "../../hooks/useMenu.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { V as I } from "../../SearchField-CXMhgFiw.js";
+import { V as I } from "../../SearchField-CYYz0JvC.js";
 import "./MenuItem.js";
 import "./MenuList.js";
 import "./MenuListItem.js";

package/dist/components/Menu/index.js

@@ -1,4 +1,4 @@
-import { M as t, a as o, b as n, V as u } from "../../SearchField-CXMhgFiw.js";
+import { M as t, a as o, b as n, V as u } from "../../SearchField-CYYz0JvC.js";
 import { MenuItem as M } from "./MenuItem.js";
 import { MenuList as s } from "./MenuList.js";
 import { MenuListItem as a } from "./MenuListItem.js";

package/dist/components/Page/PageNav.js

@@ -3,11 +3,11 @@ import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import a, { forwardRef as c } from "react";
 import { Button as f } from "../Button/Button.js";
+import { Breadcrumbs as m } from "../Breadcrumbs/Breadcrumbs.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as m } from "./Flex.js";
-import { Breadcrumbs as d } from "./Breadcrumbs.js";
+import { Flex as d } from "./Flex.js";
 import { u as p } from "../../useId-BVFxCjkq.js";
 import '../../assets/PageNav.css';var u = function(t, o) {
   var l = {};
@@ -37,8 +37,8 @@ const b = c((t, o) => {
     label: "Back"
   },
   controls: r
-}) => /* @__PURE__ */ s(m, { as: "nav", direction: "row", align: "center", justify: "between", color: t, padding: o, children: [
-  l ? /* @__PURE__ */ i(d, { items: l }) : /* @__PURE__ */ s(f, { ...e, variant: "ghost", size: "sm", children: [
+}) => /* @__PURE__ */ s(d, { as: "nav", direction: "row", align: "center", justify: "between", color: t, padding: o, children: [
+  l ? /* @__PURE__ */ i(m, { items: l }) : /* @__PURE__ */ s(f, { ...e, variant: "ghost", size: "sm", children: [
     /* @__PURE__ */ i(b, {}),
     /* @__PURE__ */ i("span", { children: e?.label || "Back" })
   ] }),

package/dist/components/Page/index.js

@@ -1,28 +1,24 @@
 import { PageBase as e } from "./PageBase.js";
-import { PageNav as m } from "./PageNav.js";
-import { PageMenu as a } from "./PageMenu.js";
+import { PageNav as x } from "./PageNav.js";
+import { PageMenu as f } from "./PageMenu.js";
 import { PageTabs as p } from "./PageTabs.js";
-import { PageDetails as n } from "./PageDetails.js";
-import { Flex as s } from "./Flex.js";
-import { Grid as P } from "./Grid.js";
-import { Breadcrumbs as u } from "./Breadcrumbs.js";
-import { BreadcrumbsLink as b } from "./BreadcrumbsLink.js";
-import { Section as l } from "./Section.js";
-import { ContactSection as k } from "./ContactSection.js";
-import { ContactButtons as A } from "./ContactButtons.js";
-import { AccordionSection as F } from "./AccordionSection.js";
+import { PageDetails as c } from "./PageDetails.js";
+import { Flex as g } from "./Flex.js";
+import { Grid as s } from "./Grid.js";
+import { Section as d } from "./Section.js";
+import { ContactSection as u } from "./ContactSection.js";
+import { ContactButtons as C } from "./ContactButtons.js";
+import { AccordionSection as v } from "./AccordionSection.js";
 export {
-  F as AccordionSection,
-  u as Breadcrumbs,
-  b as BreadcrumbsLink,
-  A as ContactButtons,
-  k as ContactSection,
-  s as Flex,
-  P as Grid,
+  v as AccordionSection,
+  C as ContactButtons,
+  u as ContactSection,
+  g as Flex,
+  s as Grid,
   e as PageBase,
-  n as PageDetails,
-  a as PageMenu,
-  m as PageNav,
+  c as PageDetails,
+  f as PageMenu,
+  x as PageNav,
   p as PageTabs,
-  l as Section
+  d as Section
 };

package/dist/components/Toolbar/DatepickerFilter.js

@@ -1,79 +1,79 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Datepicker as L } from "../Datepicker/Datepicker.js";
-import { Field as m } from "../Forms/Field.js";
-import { Fieldset as k } from "../Forms/Fieldset.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Datepicker as T } from "../Datepicker/Datepicker.js";
+import { Field as n } from "../Forms/Field.js";
+import { Fieldset as v } from "../Forms/Fieldset.js";
 import { Label as c } from "../Forms/Label.js";
 import { Input as s } from "../Forms/Input.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "react-dom";
-import { useRootContext as h } from "../RootProvider/RootProvider.js";
-import { MenuItem as F } from "../Menu/MenuItem.js";
-import { MenuList as T } from "../Menu/MenuList.js";
-import { MenuListItem as l } from "../Menu/MenuListItem.js";
+import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { MenuItem as g } from "../Menu/MenuItem.js";
+import { MenuList as M } from "../Menu/MenuList.js";
+import { MenuListItem as m } from "../Menu/MenuListItem.js";
 import { MenuListDivider as p } from "../Menu/MenuListDivider.js";
 import "../Snackbar/useSnackbar.js";
-import { S as g } from "../../ArrowUndo-hge1gMu8.js";
-const P = ({
+import { S } from "../../ArrowUndo-hge1gMu8.js";
+import '../../assets/DatepickerFilter.css';const u = {}, Q = ({
   formData: t = { fromDate: "", toDate: "" },
   onChange: r,
   onSubmit: f
 }) => {
-  const { fromDate: a, toDate: i } = t, { languageCode: b } = h(), { backLabel: u, fromLabel: d, toLabel: D } = v(b);
-  return /* @__PURE__ */ n(T, { children: [
-    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(F, { variant: "default", icon: g, title: u, onClick: () => {
-      f?.({ fromDate: a, toDate: i });
+  const { fromDate: i, toDate: a } = t, { languageCode: b } = x(), { backLabel: d, fromLabel: L, toLabel: D } = y(b), k = (o) => {
+    r?.({
+      ...t,
+      fromDate: o.target.value
+    });
+  }, h = (o) => {
+    r?.({
+      ...t,
+      toDate: o.target.value
+    });
+  }, F = (o) => {
+    if (a) {
+      r?.({
+        ...t,
+        fromDate: o,
+        toDate: ""
+      });
+      return;
+    }
+    if (!i) {
+      r?.({
+        ...t,
+        fromDate: o
+      });
+      return;
+    }
+    o < i ? r?.({
+      ...t,
+      toDate: i,
+      fromDate: o
+    }) : r?.({
+      ...t,
+      toDate: o
+    });
+  };
+  return /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(g, { variant: "default", icon: S, title: d, onClick: () => {
+      f?.({ fromDate: i, toDate: a });
     } }) }),
     /* @__PURE__ */ e(p, {}),
-    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ n(k, { size: "xs", children: [
-      /* @__PURE__ */ n(m, { children: [
-        /* @__PURE__ */ e(c, { children: d }),
-        /* @__PURE__ */ e(s, { name: "fromDate", value: a, type: "date", onChange: (o) => {
-          r?.({
-            ...t,
-            fromDate: o.target.value
-          });
-        } })
+    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ l(v, { size: "xs", children: [
+      /* @__PURE__ */ l(n, { children: [
+        /* @__PURE__ */ e(c, { children: L }),
+        /* @__PURE__ */ e(s, { className: u.input, name: "fromDate", value: i, type: "date", onChange: k })
       ] }),
-      /* @__PURE__ */ n(m, { children: [
+      /* @__PURE__ */ l(n, { children: [
         /* @__PURE__ */ e(c, { children: D }),
-        /* @__PURE__ */ e(s, { name: "toDate", value: i, type: "date", onChange: (o) => {
-          r?.({
-            ...t,
-            toDate: o.target.value
-          });
-        } })
+        /* @__PURE__ */ e(s, { className: u.input, name: "toDate", value: a, type: "date", onChange: h })
       ] })
     ] }) }),
     /* @__PURE__ */ e(p, {}),
-    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(L, { onSelect: (o) => {
-      if (i) {
-        r?.({
-          ...t,
-          fromDate: o,
-          toDate: ""
-        });
-        return;
-      }
-      if (!a) {
-        r?.({
-          ...t,
-          fromDate: o
-        });
-        return;
-      }
-      o < a ? r?.({
-        ...t,
-        toDate: a,
-        fromDate: o
-      }) : r?.({
-        ...t,
-        toDate: o
-      });
-    }, selectFrom: a, selectTo: i }) })
+    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(T, { onSelect: F, selectFrom: i, selectTo: a }) })
   ] });
-}, v = (t) => {
+}, y = (t) => {
   switch (t) {
     case "nn":
       return {
@@ -96,5 +96,5 @@ const P = ({
   }
 };
 export {
-  P as DatepickerFilter
+  Q as DatepickerFilter
 };

package/dist/components/Toolbar/SelectDateFilter.js

@@ -1,52 +1,67 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { M as g } from "../../SearchField-CXMhgFiw.js";
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as L, useState as u, useCallback as O, useEffect as R } from "react";
+import { M as x } from "../../SearchField-CYYz0JvC.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { DatepickerFilter as C } from "./DatepickerFilter.js";
-import { formatDateRange as h } from "./formatDateRange.js";
-const w = ({
-  name: t = "time",
-  size: m,
-  searchable: c,
-  keyboardEvents: s,
-  items: D,
-  groups: d,
-  filterState: e = {},
-  onFilterStateChange: r
+import { DatepickerFilter as A } from "./DatepickerFilter.js";
+import { formatDateRange as M } from "./formatDateRange.js";
+const N = ({
+  name: n = "time",
+  size: f,
+  searchable: v,
+  keyboardEvents: k,
+  items: l,
+  groups: E,
+  filterState: t = {},
+  onFilterStateChange: c
 }) => {
-  const [f, i] = b(!1), a = e?.fromDate?.[0] || "", n = e?.toDate?.[0] || "", u = () => {
-    i(!1);
-  }, k = (o) => {
-    r?.({
-      ...e,
-      fromDate: o.fromDate ? [o.fromDate] : void 0,
-      toDate: o.toDate ? [o.toDate] : void 0,
-      [t]: ["fromAndToDate"]
-    });
-  }, l = h(a, n), v = D?.map((o) => o.role === "datepicker" ? {
-    ...o,
-    description: l,
-    selected: e?.[t]?.[0] === "fromAndToDate",
+  const s = L(null), [a, p] = u(!1), [o, w] = u(t?.fromDate?.[0] || ""), [r, T] = u(t?.toDate?.[0] || ""), i = O(() => {
+    c?.({
+      ...t,
+      fromDate: o ? [o] : void 0,
+      toDate: r ? [r] : void 0,
+      [n]: o || r ? ["fromAndToDate"] : void 0
+    }), p(!1);
+  }, [c, t, o, r, n]);
+  R(() => {
+    if (!a) return;
+    const e = (m) => {
+      m.key === "Escape" && i();
+    }, D = (m) => {
+      const C = m.target;
+      s.current && !s.current.contains(C) && i();
+    }, y = setTimeout(() => {
+      document.addEventListener("mousedown", D), document.addEventListener("keydown", e);
+    }, 0);
+    return () => {
+      clearTimeout(y), document.removeEventListener("mousedown", D), document.removeEventListener("keydown", e);
+    };
+  }, [a, i]);
+  const b = (e) => {
+    w(e?.fromDate || ""), T(e?.toDate || "");
+  }, g = M(o, r), h = l?.map((e) => e.role === "datepicker" ? {
+    ...e,
+    description: g,
+    selected: t?.[n]?.[0] === "fromAndToDate",
     onClick: () => {
-      i(!0);
+      p(!0);
     }
   } : {
-    ...o,
+    ...e,
     onChange: () => {
-      r?.({
-        ...e,
+      c?.({
+        ...t,
         fromDate: void 0,
         toDate: void 0,
-        [t]: o?.value ? [o.value] : void 0
+        [n]: e?.value ? [e.value] : void 0
       });
     }
   });
-  return f ? /* @__PURE__ */ p(C, { formData: { fromDate: a, toDate: n }, onChange: k, onSubmit: u }) : /* @__PURE__ */ p(g, { size: m, searchable: c, keyboardEvents: s, items: v, groups: d });
+  return a ? /* @__PURE__ */ d("div", { ref: s, children: /* @__PURE__ */ d(A, { formData: { fromDate: o, toDate: r }, onChange: b, onSubmit: i }) }) : /* @__PURE__ */ d(x, { size: f, searchable: v, keyboardEvents: k, items: h, groups: E });
 };
 export {
-  w as SelectDateFilter
+  N as SelectDateFilter
 };

package/dist/components/Toolbar/ToolbarFilter.js

@@ -5,9 +5,9 @@ import "../../index-p1eeF8LQ.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { useFilter as N } from "./useFilter.js";
-import { ToolbarFilterAddMenu as O } from "./ToolbarFilterAddMenu.js";
-import { ToolbarFilterMenu as w } from "./ToolbarFilterMenu.js";
+import { ToolbarFilterMenu as N } from "./ToolbarFilterMenu.js";
+import { useFilter as O } from "./useFilter.js";
+import { ToolbarFilterAddMenu as w } from "./ToolbarFilterAddMenu.js";
 import { S as y } from "../../XMark-tKk6aExO.js";
 const V = ({
   filters: n,
@@ -21,7 +21,7 @@ const V = ({
   getFilterLabel: T,
   virtualized: j
 }) => {
-  const { visibleFilters: l, hiddenFilters: i, onFilterAdd: R, onFilterChange: k, onFilterRemove: s } = N({
+  const { visibleFilters: l, hiddenFilters: i, onFilterAdd: R, onFilterChange: k, onFilterRemove: s } = O({
     filters: n,
     filterState: e,
     onFilterStateChange: r
@@ -38,7 +38,7 @@ const V = ({
     l?.map((o, t) => {
       const M = T?.(o?.name, e?.[o?.id]) ?? o?.label;
       return /* @__PURE__ */ I(
-        w,
+        N,
         {
           ...o,
           submitLabel: h,
@@ -56,7 +56,7 @@ const V = ({
       );
     }),
     i?.length > 0 && /* @__PURE__ */ m(
-      O,
+      w,
       {
         name: "add",
         onToggle: () => p("add"),