@altinn/altinn-components 0.65.0 → 0.66.0

package/dist/components/Toolbar/ToolbarFilterMenu.js

@@ -1,83 +1,86 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useRef as G, useEffect as H } from "react";
+import { useRef as J, useEffect as K } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
-import { g as E, M as J } from "../../ToolbarSearch-DeQTx93w.js";
+import { g as j, M as N } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
-import { useDropdownMenuController as K } from "../Menu/useDropdownMenuController.js";
+import { useDropdownMenuController as Q } from "../Menu/useDropdownMenuController.js";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarFilterButton as g } from "./ToolbarFilterButton.js";
-const tr = ({
-  as: j,
-  disabled: D,
-  size: v,
+import { ToolbarFilterButton as v } from "./ToolbarFilterButton.js";
+const er = ({
+  as: D,
+  disabled: O,
+  size: y,
   name: o,
   label: d = "",
   searchable: u,
-  groups: h,
-  items: y,
-  removable: O,
-  removeLabel: b = "Fjern filter",
+  groups: b,
+  items: h,
+  removable: B,
+  removeLabel: k = "Fjern filter",
   filterState: c,
-  onFilterStateChange: k,
-  onFilterChange: B,
-  onRemove: w,
+  onFilterStateChange: w,
+  onFilterChange: V,
+  onRemove: I,
   open: t,
-  onToggle: I,
-  onClose: m,
-  submitLabel: x,
-  search: A,
-  virtualized: M,
-  title: R,
-  variant: l,
-  dropdownSize: C = "sm"
+  onToggle: x,
+  onClose: a,
+  submitLabel: A,
+  search: M,
+  virtualized: R,
+  title: C,
+  htmlTitle: m,
+  variant: f,
+  dropdownSize: F = "sm"
 }) => {
-  const F = G(t), e = K({ id: "toolbar-filter-menu" });
-  H(() => {
-    const r = F.current;
-    F.current = t, r && !t && e?.triggerRef?.current?.focus();
+  const P = J(t), e = Q({ id: "toolbar-filter-menu" });
+  K(() => {
+    const r = P.current;
+    P.current = t, r && !t && e?.triggerRef?.current?.focus();
   }, [t, e.triggerRef]);
-  const T = (r) => {
-    const i = r.target.type, p = r.target.name, q = r.target.value;
-    B?.(i, p, q), i === "radio" && m();
-  }, a = y?.map((r) => ({
+  const q = (r) => {
+    const i = r.target.type, g = r.target.name, H = r.target.value;
+    V?.(i, g, H), i === "radio" && a();
+  }, l = h?.map((r) => ({
     ...r,
-    onChange: (i) => T(i)
-  })), f = (y?.filter((r) => r.checked)?.map((r) => r.value || "true")).length > 0 || c?.[o]?.length ? "tinted" : "outline", P = j || J, s = u ? "combobox" : "menu", V = () => {
-    m();
+    onChange: (i) => q(i)
+  })), p = (h?.filter((r) => r.checked)?.map((r) => r.value || "true")).length > 0 || c?.[o]?.length ? "tinted" : "outline", E = D || N, s = u ? "combobox" : "menu", G = () => {
+    a();
     const r = c?.[o]?.[0];
-    a?.filter((p) => p.checked)?.length === 0 && !r && w?.();
+    l?.filter((g) => g.checked)?.length === 0 && !r && I?.();
   };
-  return D ? /* @__PURE__ */ n(
-    g,
+  return O ? /* @__PURE__ */ n(
+    v,
     {
       disabled: !0,
       name: o,
       removable: !0,
-      variant: l || f,
-      removeLabel: b,
+      variant: f || p,
+      removeLabel: k,
       open: t,
+      htmlTitle: m,
       children: d
     }
-  ) : O ? /* @__PURE__ */ n(
-    E,
+  ) : B ? /* @__PURE__ */ n(
+    j,
     {
-      submitLabel: x,
-      title: R,
+      submitLabel: A,
+      title: C,
       variant: "drawer-dropdown",
-      size: C,
+      size: F,
       trigger: /* @__PURE__ */ n(
-        g,
+        v,
         {
           name: o,
-          onClick: I,
-          onRemove: w,
+          onClick: x,
+          onRemove: I,
           removable: !0,
-          variant: l || f,
-          removeLabel: b,
+          variant: f || p,
+          removeLabel: k,
           open: t,
+          htmlTitle: m,
           "aria-expanded": t,
           "aria-controls": e.menuId,
           ref: e.triggerRef,
@@ -85,58 +88,58 @@ const tr = ({
         }
       ),
       open: t,
-      onClose: V,
+      onClose: G,
       ...e.dropdownA11yProps,
       children: /* @__PURE__ */ n(
-        P,
+        E,
         {
           open: t,
-          search: A,
+          search: M,
           name: o,
           filterState: c,
-          onFilterStateChange: k,
-          size: v,
+          onFilterStateChange: w,
+          size: y,
           searchable: u,
-          groups: h,
-          items: a,
+          groups: b,
+          items: l,
           keyboardEvents: t,
           a11yMode: s,
           ...s === "combobox" ? { id: e.menuId } : e.menuA11yProps,
-          virtualized: M
+          virtualized: R
         }
       )
     }
   ) : /* @__PURE__ */ n(
-    E,
+    j,
     {
-      size: C,
-      title: R,
+      size: F,
+      title: C,
       variant: "drawer-dropdown",
-      submitLabel: x,
-      trigger: /* @__PURE__ */ n(g, { name: o, onClick: I, variant: l || f, children: d }),
+      submitLabel: A,
+      trigger: /* @__PURE__ */ n(v, { name: o, onClick: x, variant: f || p, htmlTitle: m, children: d }),
       open: t,
-      onClose: m,
+      onClose: a,
       ...e.dropdownA11yProps,
       children: /* @__PURE__ */ n(
-        P,
+        E,
         {
-          search: A,
+          search: M,
           name: o,
           filterState: c,
-          onFilterStateChange: k,
-          size: v,
+          onFilterStateChange: w,
+          size: y,
           searchable: u,
-          groups: h,
-          items: a,
+          groups: b,
+          items: l,
           keyboardEvents: t,
           a11yMode: s,
           ...s === "combobox" ? { id: e.menuId } : e.menuA11yProps,
-          virtualized: M
+          virtualized: R
         }
       )
     }
   );
 };
 export {
-  tr as ToolbarFilterMenu
+  er as ToolbarFilterMenu
 };

package/dist/components/Toolbar/ToolbarMenu.js

@@ -3,7 +3,7 @@ import "react";
 import "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
-import { T as l } from "../../ToolbarSearch-DeQTx93w.js";
+import { T as l } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../Typography/Link.js";
 import "../Menu/useDropdownMenuController.js";
 import "../GlobalMenu/GlobalMenuBase.js";

package/dist/components/Toolbar/ToolbarSearch.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../tooltip-Ct39-719.js";
 import "../../index-p1eeF8LQ.js";
-import { t as h } from "../../ToolbarSearch-DeQTx93w.js";
+import { t as h } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";

package/dist/components/Toolbar/index.js

@@ -1,7 +1,7 @@
 import { Toolbar as e } from "./Toolbar.js";
 import { ToolbarFilter as l } from "./ToolbarFilter.js";
 import { ToolbarFilterMenu as m } from "./ToolbarFilterMenu.js";
-import { T as p, t as x } from "../../ToolbarSearch-DeQTx93w.js";
+import { T as p, t as x } from "../../ToolbarSearch-DFYx6gIb.js";
 import { useFilter as T } from "./useFilter.js";
 import { SelectDateFilter as i } from "./SelectDateFilter.js";
 import { QueryLabel as s } from "./QueryLabel.js";

package/dist/components/Transmission/Transmission.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as t, jsxs as l, Fragment as x } from "react/jsx-runtime";
 import { useState as g } from "react";
-import { B as v } from "../../ToolbarSearch-DeQTx93w.js";
+import { B as v } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../../index-p1eeF8LQ.js";
 import { AttachmentList as L } from "../Attachment/AttachmentList.js";
 import "../../tooltip-Ct39-719.js";

package/dist/components/Transmission/TransmissionList.js

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import { createElement as l } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
-import { a } from "../../ToolbarSearch-DeQTx93w.js";
+import { a } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";

package/dist/components/Transmission/TransmissionType.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { B as o } from "../../ToolbarSearch-DeQTx93w.js";
+import { B as o } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../../tooltip-Ct39-719.js";

package/dist/components/Typography/Heading.js

@@ -3,7 +3,7 @@ import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Skeleton/Skeleton.js";
 import "../../tooltip-Ct39-719.js";
-import { H as s } from "../../ToolbarSearch-DeQTx93w.js";
+import { H as s } from "../../ToolbarSearch-DFYx6gIb.js";
 import "./useHighlightedText.js";
 import "./Link.js";
 import "../Button/Button.js";

package/dist/components/Typography/index.js

@@ -1,5 +1,5 @@
 import { Typography as p } from "./Typography.js";
-import { H as a } from "../../ToolbarSearch-DeQTx93w.js";
+import { H as a } from "../../ToolbarSearch-DFYx6gIb.js";
 import { Link as m } from "./Link.js";
 export {
   a as Heading,

package/dist/components/UserListItem/UserListItem.js

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as _ } from "react/jsx-runtime";
-import { B as h } from "../../ToolbarSearch-DeQTx93w.js";
+import { B as h } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../../tooltip-Ct39-719.js";

package/dist/components/index.js

@@ -11,7 +11,7 @@ import { AccountNotificationSettings as A } from "./Account/AccountNotificationS
 import { AccountOrganization as y } from "./Account/AccountOrganization.js";
 import { AccountSelector as k } from "./AccountSelector/AccountSelector.js";
 import { Alert as v } from "./Alert/Alert.js";
-import { B as P, a as C, D as H, b as w, c as E, d as G, e as O, f as R, g as N, F as V, H as U, I as z, h as j, i as Q, M as q, j as J, k as K, l as W, m as X, n as Y, R as Z, S as _, T as $, t as oo, V as ro, u as eo, w as to } from "../ToolbarSearch-DeQTx93w.js";
+import { B as P, a as C, D as H, b as w, c as E, d as G, e as O, f as R, g as N, F as V, H as U, I as z, h as j, i as Q, M as q, j as J, k as K, l as W, m as X, n as Y, R as Z, S as _, T as $, t as oo, V as ro, u as eo, w as to } from "../ToolbarSearch-DFYx6gIb.js";
 import { Banner as ao, BannerColorEnum as po, BannerVariantEnum as io } from "./Banner/Banner.js";
 import { BookmarkSettingsItem as fo } from "./Bookmarks/BookmarkSettingsItem.js";
 import { BookmarkSettingsList as no } from "./Bookmarks/BookmarkSettingsList.js";

package/dist/hooks/useAccountSelector.js

@@ -2,7 +2,7 @@ import { jsx as S } from "react/jsx-runtime";
 import { useRef as x, useMemo as z } from "react";
 import "../index-p1eeF8LQ.js";
 import "../tooltip-Ct39-719.js";
-import "../ToolbarSearch-DeQTx93w.js";
+import "../ToolbarSearch-DFYx6gIb.js";
 import "../components/Typography/Link.js";
 import { Button as G } from "../components/Button/Button.js";
 import "react-dom";

package/dist/index.js

@@ -11,7 +11,7 @@ import { AccountNotificationSettings as b } from "./components/Account/AccountNo
 import { AccountOrganization as y } from "./components/Account/AccountOrganization.js";
 import { AccountSelector as k } from "./components/AccountSelector/AccountSelector.js";
 import { Alert as v } from "./components/Alert/Alert.js";
-import { B as C, a as P, D as H, b as w, c as E, d as G, e as O, f as N, g as R, F as V, H as U, I as z, h as j, i as Q, M as K, j as q, k as J, l as W, m as X, n as Y, R as Z, S as _, T as $, t as oo, V as ro, u as eo, w as to } from "./ToolbarSearch-DeQTx93w.js";
+import { B as C, a as P, D as H, b as w, c as E, d as G, e as O, f as N, g as R, F as V, H as U, I as z, h as j, i as Q, M as K, j as q, k as J, l as W, m as X, n as Y, R as Z, S as _, T as $, t as oo, V as ro, u as eo, w as to } from "./ToolbarSearch-DFYx6gIb.js";
 import { Banner as ao, BannerColorEnum as po, BannerVariantEnum as xo } from "./components/Banner/Banner.js";
 import { BookmarkSettingsItem as fo } from "./components/Bookmarks/BookmarkSettingsItem.js";
 import { BookmarkSettingsList as no } from "./components/Bookmarks/BookmarkSettingsList.js";

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

@@ -20,6 +20,8 @@ export interface MenuItemProps extends AriaAttributes {
     icon?: IconProps | SvgElement | AvatarProps | AvatarGroupProps;
     /** Title */
     title?: string;
+    /** Advisory text set as the native HTML `title` attribute (tooltip) on the item element. */
+    htmlTitle?: string;
     /** Description */
     description?: string;
     /** Custom label */
@@ -56,4 +58,4 @@ export interface MenuItemProps extends AriaAttributes {
     /** data-testid */
     'data-testid'?: string;
 }
-export declare const MenuItem: ({ id, groupId, role, as, href, onClick, onChange, onKeyPress, onMouseEnter, size, variant, color, name, value, checked, icon, label, badge, controls, title, description, highlightWords, count, linkIcon, disabled, selected, active, tabIndex, className, "data-testid": dataTestId, ...attributes }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ id, groupId, role, as, href, onClick, onChange, onKeyPress, onMouseEnter, size, variant, color, name, value, checked, icon, label, badge, controls, title, htmlTitle, description, highlightWords, count, linkIcon, disabled, selected, active, tabIndex, className, "data-testid": dataTestId, ...attributes }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/useMenuSearch.d.ts

@@ -28,6 +28,7 @@ export declare const useMenuSearch: ({ placeholder, name, onChange, onClear, cle
         color?: import('./MenuItem').MenuItemColor;
         icon?: import('..').IconProps | import('..').SvgElement | import('..').AvatarProps | import('..').AvatarGroupProps;
         title?: string;
+        htmlTitle?: string;
         description?: string;
         label?: React.ReactNode | (() => React.ReactElement);
         badge?: import('..').BadgeProps;

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

@@ -24,6 +24,7 @@ declare const meta: {
 };
 export default meta;
 export declare const Composition: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithHtmlTitle: () => import("react/jsx-runtime").JSX.Element;
 export declare const SearchAndFilter: () => import("react/jsx-runtime").JSX.Element;
 export declare const SearchAndSwitch: () => import("react/jsx-runtime").JSX.Element;
 export declare const StaticFilters: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarFilterButton.d.ts

@@ -12,6 +12,8 @@ interface ToolbarFilterButtonProps {
     menuId?: string;
     ref?: React.Ref<HTMLButtonElement>;
     variant?: ButtonProps['variant'];
+    /** Advisory text set as the native HTML `title` attribute (tooltip) on the filter button. */
+    htmlTitle?: string;
 }
-export declare function ToolbarFilterButton({ disabled, name, onClick, removable, removeLabel, onRemove, children, open, variant, ref, }: ToolbarFilterButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolbarFilterButton({ disabled, name, onClick, removable, removeLabel, onRemove, children, open, variant, ref, htmlTitle, }: ToolbarFilterButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/Toolbar/ToolbarFilterMenu.d.ts

@@ -18,4 +18,4 @@ export interface ToolbarFilterMenuProps extends Omit<FilterProps, 'variant'> {
     variant?: ButtonProps['variant'];
     dropdownSize?: DropdownProps['size'];
 }
-export declare const ToolbarFilterMenu: ({ as, disabled, size, name, label, searchable, groups, items, removable, removeLabel, filterState, onFilterStateChange, onFilterChange, onRemove, open, onToggle, onClose, submitLabel, search, virtualized, title, variant: customVariant, dropdownSize, }: ToolbarFilterMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarFilterMenu: ({ as, disabled, size, name, label, searchable, groups, items, removable, removeLabel, filterState, onFilterStateChange, onFilterChange, onRemove, open, onToggle, onClose, submitLabel, search, virtualized, title, htmlTitle, variant: customVariant, dropdownSize, }: ToolbarFilterMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarMenu.d.ts

@@ -4,9 +4,11 @@ import { MenuProps } from '../Menu/';
 export interface ToolbarMenuProps extends Omit<MenuProps, 'variant'> {
     disabled?: boolean;
     title?: string;
+    /** Advisory text set as the native HTML `title` attribute (tooltip) on the trigger button. */
+    htmlTitle?: string;
     label?: string;
     variant?: ButtonProps['variant'];
     dropdownSize?: DropdownProps['size'];
     onSelectId?: (id: string) => void;
 }
-export declare const ToolbarMenu: import('react').MemoExoticComponent<({ disabled, label, variant, title, items, dropdownSize, id, onSelectId, ...props }: ToolbarMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ToolbarMenu: import('react').MemoExoticComponent<({ disabled, label, variant, title, htmlTitle, items, dropdownSize, id, onSelectId, ...props }: ToolbarMenuProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/lib/components/Toolbar/ToolbarSearch.d.ts

@@ -1,5 +1,7 @@
 import { SearchFieldProps } from '../Forms';
 export interface ToolbarSearchProps extends SearchFieldProps {
     collapsible?: boolean;
+    /** Advisory text set as the native HTML `title` attribute (tooltip) on the search input. */
+    htmlTitle?: string;
 }
-export declare const ToolbarSearch: import('react').MemoExoticComponent<({ label, hideLabel, value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ToolbarSearch: import('react').MemoExoticComponent<({ label, hideLabel, value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, htmlTitle, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/lib/components/Toolbar/ToolbarSearch.stories.d.ts

@@ -1,11 +1,12 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: import('react').MemoExoticComponent<({ label, hideLabel, value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, }: import('./ToolbarSearch').ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;
+    component: import('react').MemoExoticComponent<({ label, hideLabel, value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, htmlTitle, }: import('./ToolbarSearch').ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;
     tags: string[];
     parameters: {};
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
         collapsible?: boolean | undefined;
+        htmlTitle?: string | undefined;
         className?: string | undefined;
         value?: string | number | readonly string[] | undefined;
         label?: import('react').ReactNode;
@@ -328,6 +329,7 @@ declare const meta: {
         'data-indeterminate'?: boolean | undefined;
     }>, _: import('storybook/internal/csf').StoryContext<import('@storybook/react-vite').ReactRenderer, {
         collapsible?: boolean | undefined;
+        htmlTitle?: string | undefined;
         className?: string | undefined;
         value?: string | number | readonly string[] | undefined;
         label?: import('react').ReactNode;

package/dist/types/lib/components/Toolbar/useFilter.d.ts

@@ -11,6 +11,8 @@ export interface FilterProps extends Omit<MenuProps, 'variant'> {
     icon?: MenuItemProps['icon'];
     label?: string;
     title?: MenuItemProps['title'];
+    /** Advisory text set as the native HTML `title` attribute (tooltip) on the filter button. */
+    htmlTitle?: string;
     description?: MenuItemProps['description'];
     removable?: boolean;
     groups?: FilterGroups;
@@ -34,6 +36,7 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
             color?: import('..').MenuItemColor;
             icon?: import('..').IconProps | import('..').SvgElement | import('..').AvatarProps | import('..').AvatarGroupProps;
             title?: string;
+            htmlTitle?: string;
             description?: string;
             label?: import('react').ReactNode | (() => import('react').ReactElement);
             badge?: import('..').BadgeProps;
@@ -118,6 +121,8 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
         icon?: MenuItemProps["icon"];
         label?: string;
         title?: MenuItemProps["title"];
+        /** Advisory text set as the native HTML `title` attribute (tooltip) on the filter button. */
+        htmlTitle?: string;
         description?: MenuItemProps["description"];
         removable?: boolean;
         groups?: FilterGroups;
@@ -150,6 +155,8 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
         icon?: MenuItemProps["icon"];
         label?: string;
         title?: MenuItemProps["title"];
+        /** Advisory text set as the native HTML `title` attribute (tooltip) on the filter button. */
+        htmlTitle?: string;
         description?: MenuItemProps["description"];
         removable?: boolean;
         groups?: FilterGroups;

package/package.json

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