@altinn/altinn-components 0.9.0 → 0.10.0

package/dist/components/Menu/MenuItem.d.ts

@@ -28,7 +28,7 @@ export interface MenuItemProps {
     linkIcon?: IconName;
     linkText?: string;
     className?: string;
-    children?: ReactNode;
+    label?: ReactNode;
     items?: MenuItemProps[];
 }
-export declare const MenuItem: ({ as, color, size, collapsible, expanded, icon, avatar, avatarGroup, title, description, badge, linkText, linkIcon, children, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ as, color, size, collapsible, expanded, icon, avatar, avatarGroup, title, description, badge, linkText, linkIcon, label, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-import { jsxs as h, jsx as m } from "react/jsx-runtime";
+import { jsxs as s, jsx as m } from "react/jsx-runtime";
 import { MenuItemBase as k } from "./MenuItemBase.js";
 import { MenuItemLabel as L } from "./MenuItemLabel.js";
 import { MenuItemMedia as b } from "./MenuItemMedia.js";
@@ -6,32 +6,32 @@ const B = ({
   as: t = "a",
   color: e = "neutral",
   size: n = "sm",
-  collapsible: o,
-  expanded: r,
+  collapsible: r,
+  expanded: o,
   icon: c,
   avatar: i,
   avatarGroup: p,
   title: a,
   description: u,
   badge: I,
-  linkText: M,
-  linkIcon: f,
-  children: l,
-  ...s
-}) => /* @__PURE__ */ h(
+  linkText: l,
+  linkIcon: M,
+  label: f,
+  ...h
+}) => /* @__PURE__ */ s(
   k,
   {
     as: t,
     size: n,
     badge: I,
-    linkText: M,
-    linkIcon: o && r ? "chevron-up" : o ? "chevron-down" : f,
+    linkText: l,
+    linkIcon: r && o ? "chevron-up" : r ? "chevron-down" : M,
     color: e,
-    expanded: r,
-    ...s,
+    expanded: o,
+    ...h,
     children: [
       /* @__PURE__ */ m(b, { color: e, size: n, icon: c, avatar: i, avatarGroup: p }),
-      /* @__PURE__ */ m(L, { title: a, description: u, size: n, children: l })
+      /* @__PURE__ */ m(L, { title: a, description: u, size: n, children: f })
     ]
   }
 );

package/dist/components/Menu/MenuItem.stories.js

@@ -4,11 +4,11 @@ import { LayoutBase as l } from "../Layout/LayoutBase.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
-import "../RootProvider/RootProvider.js";
-import { MetaItem as p } from "../Meta/MetaItem.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { MenuItem as o } from "./MenuItem.js";
-import { MenuBase as m } from "./MenuBase.js";
-import "../Searchbar/AutocompleteBase.js";
+import { MenuBase as p } from "./MenuBase.js";
+import { MetaItem as m } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
 const I = {
   title: "Menu/MenuItem",
   component: o,
@@ -117,9 +117,9 @@ const I = {
   }
 }, L = () => {
   const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
-  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(m, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
+  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(p, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
     /* @__PURE__ */ n(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
-    /* @__PURE__ */ n(p, { children: e + "/" + r })
+    /* @__PURE__ */ n(m, { children: e + "/" + r })
   ] }, r)) }) }) }, e)) });
 };
 export {

package/dist/components/Menu/MenuItemBase.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
 import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
-export type MenuItemSize = 'sm' | 'md' | 'lg';
+export type MenuItemSize = 'xs' | 'sm' | 'md' | 'lg';
 export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
 export interface MenuItemBaseProps {
     as?: ElementType;

package/dist/components/Menu/MenuItemBase.js

@@ -1,63 +1,63 @@
 import { jsxs as i, jsx as c } from "react/jsx-runtime";
-import { c as N } from "../../index-L8X2o7IH.js";
-import { Badge as u } from "../Badge/Badge.js";
-import { Icon as v } from "../Icon/Icon.js";
+import { c as v } from "../../index-L8X2o7IH.js";
+import { Badge as T } from "../Badge/Badge.js";
+import { Icon as j } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/MenuItemBase.css';const T = "_item_y1gbn_1", j = "_content_y1gbn_37", B = "_action_y1gbn_45", k = "_linkText_y1gbn_52", z = "_linkIcon_y1gbn_57", E = "_media_y1gbn_77", t = {
-  item: T,
-  content: j,
-  action: B,
-  linkText: k,
-  linkIcon: z,
-  media: E
-}, G = ({
+import '../../assets/MenuItemBase.css';const B = "_item_uwh99_1", k = "_content_uwh99_41", z = "_action_uwh99_49", E = "_linkText_uwh99_56", M = "_linkIcon_uwh99_61", b = "_media_uwh99_81", t = {
+  item: B,
+  content: k,
+  action: z,
+  linkText: E,
+  linkIcon: M,
+  media: b
+}, H = ({
   as: d,
   size: _,
   color: l,
-  className: p,
-  href: x,
-  onClick: n,
-  onKeyPress: a,
-  tabIndex: f = 0,
-  hidden: b,
+  className: h,
+  href: p,
+  onClick: a,
+  onKeyPress: e,
+  tabIndex: u = 0,
+  hidden: x,
   disabled: o = !1,
-  active: g = !1,
-  selected: h = !1,
-  expanded: y = !1,
-  linkIcon: e,
+  active: f = !1,
+  selected: w = !1,
+  expanded: I = !1,
+  linkIcon: n,
   linkText: m,
   badge: s,
-  children: I
+  children: N
 }) => /* @__PURE__ */ i(
   d || "a",
   {
     role: "menuitem",
-    tabIndex: o ? "-1" : f ?? 0,
-    className: N(t.item, p),
+    tabIndex: o ? "-1" : u ?? 0,
+    className: v(t.item, h),
     "data-size": _,
     "data-color": l,
-    "data-active": g,
-    "aria-hidden": b,
-    "aria-expanded": y,
+    "data-active": f,
+    "aria-hidden": x,
+    "aria-expanded": I,
     "aria-disabled": o,
-    "aria-selected": h,
-    href: x,
+    "aria-selected": w,
+    href: p,
     onKeyPress: (r) => {
-      r.key === "Enter" && (n == null || n()), a == null || a(r);
+      r.key === "Enter" && (a == null || a()), e == null || e(r);
     },
-    onClick: n,
+    onClick: a,
     children: [
       /* @__PURE__ */ i("div", { className: t.content, children: [
-        I,
-        s && /* @__PURE__ */ c(u, { ...s })
+        N,
+        s && /* @__PURE__ */ c(T, { ...s })
       ] }),
-      e && /* @__PURE__ */ i("div", { className: t.action, children: [
+      n && /* @__PURE__ */ i("div", { className: t.action, children: [
         m && /* @__PURE__ */ c("span", { className: t.linkText, children: m }),
-        e && /* @__PURE__ */ c(v, { name: e, className: t.linkIcon })
+        n && /* @__PURE__ */ c(j, { name: n, className: t.linkIcon })
       ] })
     ]
   }
 );
 export {
-  G as MenuItemBase
+  H as MenuItemBase
 };

package/dist/components/Menu/MenuItemLabel.js

@@ -1,11 +1,11 @@
-import { jsx as t, jsxs as r, Fragment as c } from "react/jsx-runtime";
-import '../../assets/MenuItemLabel.css';const o = "_label_1rsak_1", d = "_title_1rsak_7", _ = "_description_1rsak_29", e = {
-  label: o,
+import { jsx as e, jsxs as o, Fragment as c } from "react/jsx-runtime";
+import '../../assets/MenuItemLabel.css';const r = "_label_1ohd5_1", d = "_title_1ohd5_7", _ = "_description_1ohd5_35", s = {
+  label: r,
   title: d,
   description: _
-}, p = ({ size: s = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ t("span", { className: e.label, "data-size": s, children: a || /* @__PURE__ */ r(c, { children: [
-  /* @__PURE__ */ t("strong", { className: e.title, "data-size": s, children: n || l }),
-  /* @__PURE__ */ t("span", { className: e.description, "data-size": s, children: i })
+}, p = ({ size: t = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: a || /* @__PURE__ */ o(c, { children: [
+  /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, children: n || l }),
+  /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: i })
 ] }) });
 export {
   p as MenuItemLabel

package/dist/components/Menu/MenuItemMedia.js

@@ -1,25 +1,27 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import { Avatar as l } from "../Avatar/Avatar.js";
 import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
-import { Icon as u } from "../Icon/Icon.js";
+import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemMedia.css';const f = "_media_7n7uy_1", _ = "_icon_7n7uy_16", e = {
+import '../../assets/MenuItemMedia.css';const f = "_media_1n26h_1", u = "_icon_1n26h_21", e = {
   media: f,
-  icon: _
+  icon: u
 }, m = {
   avatar: {
+    xs: "xs",
     sm: "sm",
     md: "md",
     lg: "lg"
   },
   avatarGroup: {
+    xs: "xs",
     sm: "xs",
     md: "sm",
     lg: "md"
   }
-}, A = ({ size: o = "sm", color: n, icon: t, avatar: s, avatarGroup: r, children: i }) => !t && !s && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": o, "data-color": t ? n : null, children: [
-  t && /* @__PURE__ */ a(u, { name: t, variant: n === "strong" ? "solid" : "outline", className: e.icon }) || s && /* @__PURE__ */ a(l, { ...s, size: m == null ? void 0 : m.avatar[o] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[o] }),
+}, A = ({ size: t = "sm", color: n, icon: s, avatar: o, avatarGroup: r, children: i }) => !s && !o && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": t, "data-color": s ? n : null, children: [
+  s && /* @__PURE__ */ a(x, { name: s, variant: n === "strong" ? "solid" : "outline", className: e.icon }) || o && /* @__PURE__ */ a(l, { ...o, size: m == null ? void 0 : m.avatar[t] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[t] }),
   i
 ] });
 export {

package/dist/components/Menu/MenuItems.d.ts

@@ -1,4 +1,5 @@
 import { MenuItemColor, MenuItemProps, MenuItemSize } from '../';
+import { MenuSearchProps } from './MenuSearch';
 export interface MenuGroupProps {
     title?: string;
     divider?: boolean;
@@ -9,9 +10,10 @@ export type MenuItemGroups = Record<string, MenuGroupProps>;
 export interface MenuItemsProps {
     level?: number;
     expanded?: boolean;
+    search?: MenuSearchProps;
     items: MenuItemProps[];
     groups?: MenuItemGroups;
     defaultItemColor?: MenuItemColor;
     defaultItemSize?: MenuItemSize;
 }
-export declare const MenuItems: ({ level, expanded, items, groups, defaultItemColor, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItems: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItems.js

@@ -1,68 +1,73 @@
 "use client";
-import { jsx as i, jsxs as c, Fragment as z } from "react/jsx-runtime";
-import { Fragment as L } from "react";
+import { jsxs as a, jsx as i, Fragment as L } from "react/jsx-runtime";
+import { Fragment as k } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import { useMenu as B } from "../../hooks/useMenu.js";
+import "../Autocomplete/AutocompleteBase.js";
+import { MenuItem as E } from "./MenuItem.js";
+import { MenuSearch as G } from "./MenuSearch.js";
+import { MenuHeader as H } from "./MenuHeader.js";
+import { MenuList as K, MenuListItem as d } from "./MenuBase.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as k } from "./MenuItem.js";
-import { MenuHeader as B } from "./MenuHeader.js";
-import { MenuList as E, MenuListItem as s } from "./MenuBase.js";
-import { useMenu as G } from "../../hooks/useMenu.js";
-import "../Searchbar/AutocompleteBase.js";
-const H = ({
+const S = ({
   level: l = 0,
-  expanded: I,
-  items: v,
-  groups: o = {},
-  defaultItemColor: f,
-  defaultItemSize: x
+  expanded: v,
+  search: o,
+  items: b,
+  groups: f = {},
+  defaultItemColor: x,
+  defaultItemSize: M
 }) => {
-  const { menu: h } = G({
-    items: v,
-    groups: o,
+  const { menu: h } = B({
+    items: b,
+    groups: f,
     groupByKey: "groupId",
     keyboardEvents: !1
   });
-  return /* @__PURE__ */ i(E, { expanded: I, children: h.map((t, m) => {
-    const n = (t == null ? void 0 : t.props) || {}, { title: M, divider: b = !0 } = n, y = h[m + 1];
-    return /* @__PURE__ */ c(L, { children: [
-      (l > 0 || m) && b ? /* @__PURE__ */ i(s, { role: "separator" }) : "",
-      M && /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(B, { title: M }) }),
-      t == null ? void 0 : t.items.filter((d) => {
-        var a;
-        return !((a = d.props) != null && a.hidden);
-      }).map((d, a) => {
-        const { active: F } = d, { groupId: K, ...e } = d.props || {}, { expanded: r } = e, j = t == null ? void 0 : t.items[a + 1];
-        return /* @__PURE__ */ c(s, { role: "presentation", expanded: r, children: [
-          /* @__PURE__ */ i(
-            k,
-            {
-              ...e,
-              color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || f,
-              size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || x,
-              active: F,
-              tabIndex: e != null && e.disabled ? -1 : 0
-            }
-          ),
-          r && (e == null ? void 0 : e.items) && /* @__PURE__ */ c(z, { children: [
+  return /* @__PURE__ */ a(K, { expanded: v, children: [
+    o && /* @__PURE__ */ i(G, { ...o }),
+    h.map((t, s) => {
+      const n = (t == null ? void 0 : t.props) || {}, { title: I, divider: y = !0 } = n, F = h[s + 1];
+      return /* @__PURE__ */ a(k, { children: [
+        (l > 0 || s) && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
+        I && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(H, { title: I }) }),
+        t == null ? void 0 : t.items.filter((r) => {
+          var m;
+          return !((m = r.props) != null && m.hidden);
+        }).map((r, m) => {
+          const { active: j } = r, { groupId: _, ...e } = r.props || {}, { expanded: c } = e, z = t == null ? void 0 : t.items[m + 1];
+          return /* @__PURE__ */ a(d, { role: "presentation", expanded: c, children: [
             /* @__PURE__ */ i(
-              H,
+              E,
               {
-                expanded: r,
-                level: l + 1,
-                items: e == null ? void 0 : e.items,
-                groups: o,
-                defaultItemColor: f,
-                defaultItemSize: x
+                ...e,
+                color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || x,
+                size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || M,
+                active: j,
+                tabIndex: e != null && e.disabled ? -1 : 0
               }
             ),
-            (y || j) && /* @__PURE__ */ i(s, { role: "separator", as: "div" })
-          ] })
-        ] }, a);
-      })
-    ] }, m);
-  }) });
+            c && (e == null ? void 0 : e.items) && /* @__PURE__ */ a(L, { children: [
+              /* @__PURE__ */ i(
+                S,
+                {
+                  expanded: c,
+                  level: l + 1,
+                  items: e == null ? void 0 : e.items,
+                  groups: f,
+                  defaultItemColor: x,
+                  defaultItemSize: M
+                }
+              ),
+              (F || z) && /* @__PURE__ */ i(d, { role: "separator", as: "div" })
+            ] })
+          ] }, m);
+        })
+      ] }, s);
+    })
+  ] });
 };
 export {
-  H as MenuItems
+  S as MenuItems
 };

package/dist/components/Menu/MenuItems.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemSize, }: import('./MenuItems').MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InboxMenu: Story;
+export declare const PersonMenu: Story;
+export declare const CompanyMenu: Story;
+export declare const AccountMenu: Story;
+export declare const CollapsibleGlobalMenu: Story;
+export declare const ExpandedGlobalMenu: Story;
+export declare const DrilldownMenu: Story;

package/dist/components/Menu/MenuItems.stories.js

@@ -1,16 +1,17 @@
+import { menuItems as i } from "../../examples/menuItems.js";
 import { MenuItems as r } from "./MenuItems.js";
-const o = {
+const n = {
   title: "Menu/MenuItems",
   component: r,
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, a = {
+}, s = {
   args: {
     groups: {
       shortcuts: {
         title: "Snarveier",
-        defaultItemColor: "default"
+        defaultItemColor: "neutral"
       }
     },
     defaultItemColor: "subtle",
@@ -85,7 +86,7 @@ const o = {
       }
     ]
   }
-}, l = {
+}, a = {
   args: {
     groups: {},
     defaultItemColor: "subtle",
@@ -132,7 +133,7 @@ const o = {
       }
     ]
   }
-}, n = {
+}, d = {
   args: {
     groups: {},
     defaultItemColor: "subtle",
@@ -173,104 +174,17 @@ const o = {
       }
     ]
   }
-}, d = {
+}, g = {
   args: {
     groups: {
       a1: {
         title: "Deg selv, favoritter og grupper"
       },
       b1: {
-        id: "companies",
         title: "Andre kontoer"
       }
     },
-    items: [
-      {
-        id: "1",
-        groupId: "a1",
-        avatar: {
-          type: "person",
-          name: "Dolly Duck"
-        },
-        title: "Dolly Duck",
-        badge: {
-          label: "15"
-        }
-      },
-      {
-        id: "2",
-        groupId: "a2",
-        avatar: {
-          type: "company",
-          name: "Bergen Bar"
-        },
-        title: "Bergen Bar",
-        badge: {
-          label: "21"
-        }
-      },
-      {
-        id: "3",
-        groupId: "a2",
-        avatar: {
-          type: "company",
-          name: "Sportsklubben Brann"
-        },
-        title: "Sportsklubben Brann",
-        badge: {
-          label: "4"
-        }
-      },
-      {
-        id: "4",
-        groupId: "a3",
-        avatarGroup: {
-          type: "company",
-          items: [
-            {
-              name: "Sportsklubben Brann"
-            },
-            {
-              name: "Bergen Bar"
-            }
-          ]
-        },
-        title: "Alle virksomheter",
-        badge: {
-          label: "45"
-        }
-      },
-      {
-        id: "5",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Jensens Laks"
-        },
-        title: "Jensens laks"
-      },
-      {
-        id: "6",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Haralds gym"
-        },
-        title: "Haralds gym",
-        badge: {
-          label: "2"
-        }
-      },
-      {
-        id: "7",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Trim og tran"
-        },
-        title: "Trim og tran"
-      }
-    ]
+    items: i
   }
 }, t = {
   args: {
@@ -355,7 +269,7 @@ const o = {
       }
     ]
   }
-}, s = {
+}, u = {
   args: {
     ...t.args,
     items: [...t.args.items].map((e) => e.collapsible ? {
@@ -363,7 +277,7 @@ const o = {
       expanded: !0
     } : e)
   }
-}, g = {
+}, p = {
   args: {
     defaultItemColor: "subtle",
     groups: {
@@ -385,7 +299,7 @@ const o = {
         items: [
           {
             groupId: "level-2",
-            name: "tema",
+            id: "tema",
             icon: "teddy-bear",
             title: "Tema",
             expanded: !0,
@@ -413,12 +327,12 @@ const o = {
   }
 };
 export {
-  d as AccountMenu,
+  g as AccountMenu,
   t as CollapsibleGlobalMenu,
-  n as CompanyMenu,
-  g as DrilldownMenu,
-  s as ExpandedGlobalMenu,
-  a as InboxMenu,
-  l as PersonMenu,
-  o as default
+  d as CompanyMenu,
+  p as DrilldownMenu,
+  u as ExpandedGlobalMenu,
+  s as InboxMenu,
+  a as PersonMenu,
+  n as default
 };

package/dist/components/Menu/MenuOption.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ size, type, name, value, label, title, description, badge, checked, disabled, onChange, }: import('./MenuOption').MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        value: string;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Checkbox: Story;
+export declare const CheckboxChecked: Story;
+export declare const Radio: Story;
+export declare const RadioChecked: Story;

package/dist/components/Menu/MenuSearch.d.ts

@@ -2,8 +2,8 @@ import { ChangeEventHandler } from 'react';
 export interface MenuSearchProps {
     placeholder?: string;
     name: string;
-    value: string;
-    onChange: ChangeEventHandler;
+    value?: string;
+    onChange?: ChangeEventHandler;
     onClear?: () => void;
 }
 export declare const MenuSearch: ({ value, name, placeholder, onChange, onClear }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;