@altinn/altinn-components 0.54.3 → 0.55.0

package/dist/components/Metadata/MetaItemIcon.js

@@ -8,16 +8,16 @@ import { isAvatarGroupProps as l, AvatarGroup as u } from "../Avatar/AvatarGroup
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MetaItemIcon.css';const _ = "_media_1pqyq_1", d = "_icon_1pqyq_7", y = "_avatarGroup_1pqyq_11", t = {
+import '../../assets/MetaItemIcon.css';const _ = "_media_1x8z9_1", d = "_icon_1x8z9_10", v = "_avatarGroup_1x8z9_17", t = {
   media: _,
   icon: d,
-  avatarGroup: y
+  avatarGroup: v
 };
-function v(r) {
+function x(r) {
   return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || p(r);
 }
 const g = ({ size: r = "xs", icon: a, progress: s }) => !a && typeof s != "number" ? !1 : /* @__PURE__ */ e("span", { className: t.media, "data-size": r, children: [
-  c(a) && /* @__PURE__ */ o(f, { ...a, className: t.avatar }) || l(a) && /* @__PURE__ */ o(u, { ...a, className: t.avatarGroup }) || i(a) && /* @__PURE__ */ o(m, { ...a, className: t.icon }) || v(a) && a || /* @__PURE__ */ o(m, { svgElement: a, className: t.icon }),
+  c(a) && /* @__PURE__ */ o(f, { ...a, className: t.avatar }) || l(a) && /* @__PURE__ */ o(u, { ...a, className: t.avatarGroup }) || i(a) && /* @__PURE__ */ o(m, { ...a, className: t.icon }) || x(a) && a || /* @__PURE__ */ o(m, { svgElement: a, className: t.icon }),
   s && /* @__PURE__ */ o(n, { value: s, className: t.icon })
 ] });
 export {

package/dist/components/Notifications/NotificationItemBase.js

@@ -1,87 +1,86 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { getAriaLabelFromTitle as j } from "../Menu/MenuItemLabel.js";
-import { ListItemBase as B } from "../List/ListItemBase.js";
-import { ListItemLink as v } from "../List/ListItemLink.js";
-import { ListItemLabel as y } from "../List/ListItemLabel.js";
-import { NotificationItemControls as z } from "./NotificationItemControls.js";
-import { NotificationItemIcon as A } from "./NotificationItemIcon.js";
+import { ListItemBase as j } from "../List/ListItemBase.js";
+import { ListItemLink as B } from "../List/ListItemLink.js";
+import { ListItemLabel as v } from "../List/ListItemLabel.js";
+import { NotificationItemControls as y } from "./NotificationItemControls.js";
+import { NotificationItemIcon as z } from "./NotificationItemIcon.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_header_w20tn_24", g = "_link_w20tn_43", q = "_linkFocus_w20tn_47", D = "_controls_w20tn_56", t = {
+import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", q = "_header_w20tn_24", A = "_link_w20tn_43", D = "_linkFocus_w20tn_47", E = "_controls_w20tn_56", t = {
   item: C,
-  header: T,
-  link: g,
-  linkFocus: q,
-  controls: D
-}, V = ({
+  header: q,
+  link: A,
+  linkFocus: D,
+  controls: E
+}, U = ({
   as: s,
-  href: m,
+  href: r,
   ref: n,
-  disabled: a,
-  loading: i,
-  onClick: c,
-  onKeyPress: l,
-  tabIndex: _,
-  color: d,
-  variant: p,
-  icon: f,
+  disabled: m,
+  loading: o,
+  onClick: a,
+  onKeyPress: c,
+  tabIndex: l,
+  color: _,
+  variant: d,
+  icon: p,
   iconBadge: h,
-  label: k,
-  title: e,
+  label: f,
+  title: k,
   description: N,
-  highlightWords: L,
-  dismissable: b,
-  dismissLabel: I,
+  highlightWords: I,
+  dismissable: L,
+  dismissLabel: b,
   onDismiss: u,
   contextMenu: w,
   ...F
 }) => {
-  const x = F.ariaLabel || j(e);
-  return /* @__PURE__ */ o(B, { ref: n, className: t.item, color: d, variant: p, size: "md", children: /* @__PURE__ */ r("header", { className: t.header, children: [
-    /* @__PURE__ */ o(A, { icon: f, badge: h }),
-    /* @__PURE__ */ r(
-      v,
+  const x = F.ariaLabel;
+  return /* @__PURE__ */ i(j, { ref: n, className: t.item, color: _, variant: d, size: "md", children: /* @__PURE__ */ e("header", { className: t.header, children: [
+    /* @__PURE__ */ i(z, { icon: p, badge: h }),
+    /* @__PURE__ */ e(
+      B,
       {
         as: s,
-        href: m,
-        onClick: c,
-        onKeyPress: l,
-        tabIndex: _,
-        loading: i,
-        disabled: a || i,
+        href: r,
+        onClick: a,
+        onKeyPress: c,
+        tabIndex: l,
+        loading: o,
+        disabled: m || o,
         ariaLabel: x,
         className: t.link,
         children: [
-          /* @__PURE__ */ o("div", { className: t.linkFocus, "aria-hidden": "true" }),
-          /* @__PURE__ */ o(
-            y,
+          /* @__PURE__ */ i("div", { className: t.linkFocus, "aria-hidden": "true" }),
+          /* @__PURE__ */ i(
+            v,
             {
-              loading: i,
-              highlightWords: L,
+              loading: o,
+              highlightWords: I,
               className: t.label,
-              title: e,
+              title: k,
               description: N,
-              children: k
+              children: f
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ o(
-      z,
+    /* @__PURE__ */ i(
+      y,
       {
         className: t.controls,
         contextMenu: w,
-        dismissable: b,
-        dismissLabel: I,
+        dismissable: L,
+        dismissLabel: b,
         onDismiss: u
       }
     )
   ] }) });
 };
 export {
-  V as NotificationItemBase
+  U as NotificationItemBase
 };

package/dist/components/Page/ContactButtons.js

@@ -1,16 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
-import { createElement as p } from "react";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import { Button as u } from "../Button/Button.js";
-import { ButtonIcon as c } from "../Button/ButtonIcon.js";
-import { ButtonLabel as a } from "../Button/ButtonLabel.js";
-import { ButtonGroup as l } from "../Button/ButtonGroup.js";
+import "react";
+import { Button as l } from "../Button/Button.js";
+import { ButtonIcon as a } from "../Button/ButtonIcon.js";
+import { ButtonLabel as s } from "../Button/ButtonLabel.js";
+import { ButtonGroup as f } from "../Button/ButtonGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-const v = ({ items: o }) => /* @__PURE__ */ t(l, { children: o.map((r, n) => {
-  const { icon: m, label: i, ...e } = r;
-  return /* @__PURE__ */ p(u, { ...e, variant: "outline", key: n }, /* @__PURE__ */ t(c, { icon: m }), /* @__PURE__ */ t(a, { children: i }));
+const G = ({ items: t }) => /* @__PURE__ */ o(f, { children: t.map((r, n) => {
+  const { as: i, href: m, onClick: p, icon: e, label: c } = r;
+  return /* @__PURE__ */ u(l, { as: i, href: m, onClick: p, variant: "outline", children: [
+    /* @__PURE__ */ o(a, { icon: e }),
+    /* @__PURE__ */ o(s, { children: c })
+  ] }, n);
 }) });
 export {
-  v as ContactButtons
+  G as ContactButtons
 };

package/dist/components/Page/PageTabs.js

@@ -1,15 +1,6 @@
-import { jsx as t } from "react/jsx-runtime";
-import "../../index-p1eeF8LQ.js";
-import "react";
-import "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
-import { MenuItem as p } from "../Menu/MenuItem.js";
-import "../Snackbar/useSnackbar.js";
-import { Flex as l } from "./Flex.js";
-import '../../assets/PageTabs.css';const c = "_list_gp6cp_1", n = "_item_gp6cp_21", m = {
-  list: c,
-  item: n
-}, N = ({ variant: r, color: e, items: o = [], padding: s = 0 }) => /* @__PURE__ */ t(l, { theme: r, color: e, padding: s, children: /* @__PURE__ */ t("ul", { className: m.list, children: o.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(p, { ...i, className: m.item }) }, i.id)) }) });
+import { jsx as r } from "react/jsx-runtime";
+import { TabMenu as m } from "../Menu/TabMenu.js";
+const e = (o) => /* @__PURE__ */ r(m, { ...o });
 export {
-  N as PageTabs
+  e as PageTabs
 };

package/dist/components/Searchbar/Autocomplete.js

@@ -1,54 +1,56 @@
-import { jsx as e, jsxs as B } from "react/jsx-runtime";
-import { useRef as C, Fragment as P } from "react";
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import { useRef as B, Fragment as C } from "react";
 import "../../index-p1eeF8LQ.js";
-import { useMenu as k } from "../../hooks/useMenu.js";
+import { useMenu as P } from "../../hooks/useMenu.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuHeader as y } from "../Menu/MenuHeader.js";
-import { MenuList as F, MenuListItem as r } from "../Menu/MenuBase.js";
+import { MenuList as k } from "../Menu/MenuList.js";
+import { MenuListItem as y } from "../Menu/MenuListItem.js";
+import { MenuListDivider as D } from "../Menu/MenuListDivider.js";
+import { MenuListHeading as F } from "../Menu/MenuListHeading.js";
 import { AutocompleteBase as H } from "./AutocompleteBase.js";
 import { AutocompleteItem as K } from "./AutocompleteItem.js";
 import "../Snackbar/useSnackbar.js";
-const Q = ({
+const V = ({
   className: u,
-  items: d,
-  id: l,
-  groups: a = {},
-  expanded: f,
-  keyboardEvents: t,
-  onSelect: n
+  items: c,
+  id: d,
+  groups: l = {},
+  expanded: a,
+  keyboardEvents: o,
+  onSelect: r
 }) => {
-  const p = C(null), { menu: x, setActiveIndex: h } = k({
-    items: d,
-    groups: a,
+  const i = B(null), { menu: f, setActiveIndex: v } = P({
+    items: c,
+    groups: l,
     groupByKey: "groupId",
-    keyboardEvents: t,
-    onSelect: n,
-    ref: p
+    keyboardEvents: o,
+    onSelect: r,
+    ref: i
   });
-  return /* @__PURE__ */ e(H, { className: u, expanded: f, ref: p, id: l, children: /* @__PURE__ */ e(F, { role: "menu", children: x.map((i, m) => {
-    const M = i?.props || {}, { title: s, divider: I = !0 } = M;
-    return /* @__PURE__ */ B(P, { children: [
-      m && I ? /* @__PURE__ */ e(r, { role: "separator" }) : "",
-      s && /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(y, { title: s }) }),
-      i?.items.filter((o) => !o.props?.hidden).map((o, v) => {
-        const { active: A, onMouseEnter: g } = o, { groupId: R, onClick: L, ...c } = o.props || {}, { expanded: j } = c;
-        return /* @__PURE__ */ e(r, { expanded: j, onMouseLeave: () => h(-1), children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(H, { className: u, expanded: a, ref: i, id: d, children: /* @__PURE__ */ e(k, { variant: "default", children: f.map((n, m) => {
+    const x = n?.props || {}, { title: p, divider: M = !0 } = x;
+    return /* @__PURE__ */ j(C, { children: [
+      m && M ? /* @__PURE__ */ e(D, {}) : null,
+      p && /* @__PURE__ */ e(F, { title: p, level: 1 }),
+      n?.items.filter((t) => !t.props?.hidden).map((t, h) => {
+        const { active: I, onMouseEnter: L } = t, { groupId: R, onClick: g, ...s } = t.props || {}, { expanded: A } = s;
+        return /* @__PURE__ */ e(y, { expanded: A, onMouseLeave: () => v(-1), children: /* @__PURE__ */ e(
           K,
           {
-            ...c,
-            active: t && A,
+            ...s,
+            active: o && I,
             tabIndex: -1,
-            onMouseEnter: g,
+            onMouseEnter: L,
             onClick: () => {
-              L?.(), n?.();
+              g?.(), r?.();
             }
           }
-        ) }, v);
+        ) }, h);
       })
     ] }, m);
   }) }) });
 };
 export {
-  Q as Autocomplete
+  V as Autocomplete
 };

package/dist/components/Searchbar/AutocompleteBase.js

@@ -1,8 +1,8 @@
 import { jsx as c } from "react/jsx-runtime";
 import { c as m } from "../../index-p1eeF8LQ.js";
-import '../../assets/AutocompleteBase.css';const p = "_autocomplete_zufwr_1", r = {
+import '../../assets/AutocompleteBase.css';const p = "_autocomplete_nifdf_1", r = {
   autocomplete: p
-}, n = ({ expanded: t, children: e, className: o, ref: a, id: s }) => /* @__PURE__ */ c("nav", { className: m(r.autocomplete, o), "aria-expanded": t, "data-size": "sm", ref: a, id: s, children: e });
+}, u = ({ expanded: t, children: e, className: o, ref: a, id: s }) => /* @__PURE__ */ c("nav", { className: m(r.autocomplete, o), "aria-expanded": t, "data-size": "sm", ref: a, id: s, children: e });
 export {
-  n as AutocompleteBase
+  u as AutocompleteBase
 };

package/dist/components/Searchbar/AutocompleteItem.js

@@ -1,56 +1,43 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Badge as l } from "../Badge/Badge.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Badge as n } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as s } from "../Menu/MenuItem.js";
-import { QueryLabel as f } from "./QueryLabel.js";
+import { MenuItem as e } from "../Menu/MenuItem.js";
+import { QueryLabel as l } from "./QueryLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/AutocompleteItem.css';const p = "_item_4v2ol_1", I = {
-  item: p
-}, M = ({
-  interactive: o = !0,
-  role: r = "menuitem",
-  params: u,
-  badge: t,
-  label: c,
-  size: n = "md",
+import '../../assets/AutocompleteItem.css';const s = "_item_4v2ol_1", f = {
+  item: s
+}, B = ({
+  role: o = "menuitem",
+  params: c,
+  badge: m,
+  label: u,
+  size: r = "md",
   ...i
-}) => u ? /* @__PURE__ */ m(
-  s,
+}) => c ? /* @__PURE__ */ t(
+  e,
   {
     ...i,
-    role: r,
-    interactive: o,
-    label: /* @__PURE__ */ m(f, { params: u }),
-    controls: t && /* @__PURE__ */ m(l, { ...t }),
-    linkIcon: o,
-    size: n || "md"
+    role: o,
+    label: /* @__PURE__ */ t(l, { params: c }),
+    controls: m && /* @__PURE__ */ t(n, { ...m }),
+    size: r || "md",
+    linkIcon: !0
   }
-) : c ? /* @__PURE__ */ m(
-  s,
+) : u ? /* @__PURE__ */ t(
+  e,
   {
     ...i,
-    role: r,
-    interactive: o,
-    label: c,
-    className: I.item,
-    controls: t && /* @__PURE__ */ m(l, { ...t }),
-    linkIcon: o,
-    size: n || "md"
+    role: o,
+    label: u,
+    className: f.item,
+    controls: m && /* @__PURE__ */ t(n, { ...m }),
+    size: r || "md",
+    linkIcon: !0
   }
-) : /* @__PURE__ */ m(
-  s,
-  {
-    ...i,
-    role: r,
-    interactive: o,
-    controls: t && /* @__PURE__ */ m(l, { ...t }),
-    linkIcon: o,
-    size: n
-  }
-);
+) : /* @__PURE__ */ t(e, { ...i, role: o, controls: m && /* @__PURE__ */ t(n, { ...m }), size: r, linkIcon: !0 });
 export {
-  M as AutocompleteItem
+  B as AutocompleteItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -1,49 +1,48 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { getAriaLabelFromTitle as f } from "../Menu/MenuItemLabel.js";
-import { ListItemBase as g } from "../List/ListItemBase.js";
+import { ListItemBase as f } from "../List/ListItemBase.js";
 import { ListItemHeader as I } from "../List/ListItemHeader.js";
-import { ListItemLabel as k } from "../List/ListItemLabel.js";
+import { ListItemLabel as g } from "../List/ListItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItemBase.css';const N = "_item_lk1g7_1", j = "_label_lk1g7_20", x = "_header_lk1g7_24", e = {
-  item: N,
-  label: j,
-  header: x
-}, w = ({
+import '../../assets/SettingsItemBase.css';const k = "_item_lk1g7_1", N = "_label_lk1g7_20", j = "_header_lk1g7_24", e = {
+  item: k,
+  label: N,
+  header: j
+}, z = ({
   ref: s,
   loading: t,
-  color: l,
-  size: o,
+  color: i,
+  size: l,
   expanded: r,
-  icon: c,
-  label: n,
-  title: m,
+  icon: o,
+  label: c,
+  title: n,
   value: _,
   description: b,
-  children: p,
-  highlightWords: h,
-  ...a
+  children: h,
+  highlightWords: p,
+  ...m
 }) => {
-  const L = a.ariaLabel || f(m);
-  return /* @__PURE__ */ d(g, { ref: s, className: e.item, color: l, size: o, expanded: r, children: [
-    /* @__PURE__ */ i(I, { ...a, loading: t, ariaLabel: L, className: e.header, icon: c, children: /* @__PURE__ */ i(
-      k,
+  const L = m.ariaLabel;
+  return /* @__PURE__ */ d(f, { ref: s, className: e.item, color: i, size: l, expanded: r, children: [
+    /* @__PURE__ */ a(I, { ...m, loading: t, ariaLabel: L, className: e.header, icon: o, children: /* @__PURE__ */ a(
+      g,
       {
         loading: t,
-        highlightWords: h,
+        highlightWords: p,
         className: e.label,
-        title: m,
+        title: n,
         value: _,
         description: b,
-        children: n
+        children: c
       }
     ) }),
-    r && p
+    r && h
   ] });
 };
 export {
-  w as SettingsItemBase
+  z as SettingsItemBase
 };

package/dist/components/Settings/UsedByLog.js

@@ -12,18 +12,18 @@ import { Flex as j } from "../Page/Flex.js";
 import { Section as g } from "../Page/Section.js";
 import { UsedByLogItem as f } from "./UsedByLogItem.js";
 const w = ({
-  collapsible: i = !0,
+  collapsible: m = !0,
   expanded: h,
   title: t,
   items: n,
   size: e = "sm",
-  endUserLabel: m
+  endUserLabel: i
 }) => {
-  const [p, l] = y(h || !i && !0), v = () => {
+  const [p, l] = y(h || !m && !0), v = () => {
     l((r) => !r);
   };
   if (n?.length === 1)
-    return /* @__PURE__ */ o(g, { spacing: 1, children: /* @__PURE__ */ o(u, { size: e, spacing: 1, children: n?.map((r) => /* @__PURE__ */ B(f, { ...r, key: r.id, size: e, endUserLabel: m })) }) });
+    return /* @__PURE__ */ o(g, { spacing: 1, children: /* @__PURE__ */ o(u, { size: e, spacing: 1, children: n?.map((r) => /* @__PURE__ */ B(f, { ...r, key: r.id, size: e, endUserLabel: i })) }) });
   const c = L(
     () => n.map((r) => ({
       ...r,
@@ -32,11 +32,11 @@ const w = ({
     [n]
   );
   return /* @__PURE__ */ a(g, { spacing: 1, children: [
-    t && /* @__PURE__ */ o(j, { children: i ? /* @__PURE__ */ o(s, { icon: { items: c }, as: "button", onClick: v, children: t }) : /* @__PURE__ */ o(s, { icon: { items: c }, as: "div", children: t }) }),
+    t && /* @__PURE__ */ o(j, { children: m ? /* @__PURE__ */ o(s, { items: c, as: "button", onClick: v, children: t }) : /* @__PURE__ */ o(s, { items: c, as: "div", children: t }) }),
     t && p && /* @__PURE__ */ o(d, {}),
     p && /* @__PURE__ */ o(u, { size: e, spacing: 1, children: n?.map((r, x) => /* @__PURE__ */ a(S, { children: [
       x > 0 && /* @__PURE__ */ o(d, {}),
-      /* @__PURE__ */ o(f, { ...r, size: e, endUserLabel: m })
+      /* @__PURE__ */ o(f, { ...r, size: e, endUserLabel: i })
     ] }, r.id)) })
   ] });
 };

package/dist/components/Toolbar/DatepickerFilter.js

@@ -0,0 +1,87 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as x, useEffect as L } from "react";
+import { Datepicker as M } from "../Datepicker/Datepicker.js";
+import { Field as l } from "../Forms/Field.js";
+import { Fieldset as T } from "../Forms/Fieldset.js";
+import { Label as s } from "../Forms/Label.js";
+import { Input as p } from "../Forms/Input.js";
+import "../../index-p1eeF8LQ.js";
+import "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as I } from "../Menu/MenuItem.js";
+import { MenuList as j } from "../Menu/MenuList.js";
+import { MenuListItem as a } from "../Menu/MenuListItem.js";
+import { MenuListDivider as f } from "../Menu/MenuListDivider.js";
+import "../Snackbar/useSnackbar.js";
+import { formatDateRange as y } from "./formatDateRange.js";
+import { S as V } from "../../ArrowUndo-hge1gMu8.js";
+const Y = ({
+  backLabel: d = "Tilbake",
+  fromLabel: D = "From date",
+  selectFromDateLabel: u = "Velg fra dato ...",
+  toLabel: h = "To date",
+  selectToDateLabel: v = "Velg til dato ...",
+  formData: r = { fromDate: "", toDate: "" },
+  onChange: m,
+  onSubmit: F
+}) => {
+  const { fromDate: o, toDate: i } = r, [c, g] = x(""), k = (t) => {
+    m?.({
+      ...r,
+      fromDate: t.target.value
+    });
+  }, S = (t) => {
+    m?.({
+      ...r,
+      toDate: t.target.value
+    });
+  }, b = (t) => {
+    if (i) {
+      m?.({
+        ...r,
+        fromDate: t,
+        toDate: ""
+      });
+      return;
+    }
+    if (!o) {
+      m?.({
+        ...r,
+        fromDate: t
+      });
+      return;
+    }
+    t < o ? m?.({
+      ...r,
+      toDate: o,
+      fromDate: t
+    }) : m?.({
+      ...r,
+      toDate: t
+    });
+  };
+  return L(() => {
+    const t = o && i ? y(o, i) : "";
+    g(t);
+  }, [o, i]), /* @__PURE__ */ n(j, { children: [
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(I, { variant: "default", icon: V, title: d, description: c || (o ? v : u), onClick: () => {
+      F?.({ fromDate: o, toDate: i });
+    } }) }),
+    /* @__PURE__ */ e(f, {}),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ n(T, { size: "xs", children: [
+      /* @__PURE__ */ n(l, { children: [
+        /* @__PURE__ */ e(s, { children: D }),
+        /* @__PURE__ */ e(p, { name: "fromDate", value: o, type: "date", onChange: k })
+      ] }),
+      /* @__PURE__ */ n(l, { children: [
+        /* @__PURE__ */ e(s, { children: h }),
+        /* @__PURE__ */ e(p, { name: "toDate", value: i, type: "date", onChange: S })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(f, {}),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(M, { onSelect: b, selectFrom: o, selectTo: i }) })
+  ] });
+};
+export {
+  Y as DatepickerFilter
+};

package/dist/components/Toolbar/SelectDateFilter.js

@@ -0,0 +1,51 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { Menu as g } from "../Menu/Menu.js";
+import "../../index-p1eeF8LQ.js";
+import "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { DatepickerFilter as C } from "./DatepickerFilter.js";
+import { formatDateRange as h } from "./formatDateRange.js";
+const y = ({
+  name: t = "time",
+  size: m,
+  searchable: s,
+  keyboardEvents: D,
+  items: u,
+  groups: f,
+  filterState: o = {},
+  onFilterStateChange: r
+}) => {
+  const [d, i] = b(!1), a = o?.fromDate?.[0] || "", n = o?.toDate?.[0] || "", k = () => {
+    i(!1);
+  }, l = (e) => {
+    r?.({
+      ...o,
+      fromDate: e.fromDate ? [e.fromDate] : void 0,
+      toDate: e.toDate ? [e.toDate] : void 0,
+      [t]: ["custom"]
+    });
+  }, p = h(a, n), v = u?.map((e) => e.role === "datepicker" ? {
+    ...e,
+    description: p,
+    selected: !!p,
+    onClick: () => {
+      i(!0);
+    }
+  } : {
+    ...e,
+    onChange: () => {
+      r?.({
+        ...o,
+        fromDate: void 0,
+        toDate: void 0,
+        [t]: e?.value ? [e.value] : void 0
+      });
+    }
+  });
+  return d ? /* @__PURE__ */ c(C, { formData: { fromDate: a, toDate: n }, onChange: l, onSubmit: k }) : /* @__PURE__ */ c(g, { size: m, searchable: s, keyboardEvents: D, items: v, groups: f });
+};
+export {
+  y as SelectDateFilter
+};