@altinn/altinn-components 0.50.7 → 0.50.8

package/dist/assets/FloatingDropdown.css

@@ -1 +1 @@
-._container_1t2id_1{position:fixed;bottom:0;right:0;margin:1rem;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}._button_1t2id_13{--dsc-button-size: var(--ds-size-14);width:var(--ds-button-size);height:var(--ds-button-size);border-radius:50%;flex-shrink:0}._dropdown_1t2id_21{display:flex;flex-direction:column;gap:0;border-radius:.5rem;padding:.5rem;box-shadow:var(--ds-shadow-md);min-width:16rem;overflow:hidden;color:#fff}._dropdown_1t2id_21[data-color=company]{background-color:var(--ds-color-company-base-default)}._dropdown_1t2id_21[data-color=person]{background-color:var(--ds-color-person-base-default)}._dropdown_1t2id_21[data-color=neutral]{background-color:var(--ds-color-neutral-base-default)}._dropdownItem_1t2id_45{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:transparent;border:none;cursor:pointer;text-align:left;color:inherit;border-radius:.25rem;transition:background-color .2s ease;font-size:1rem;font-weight:400;line-height:1.5}._dropdownItem_1t2id_45:hover{background-color:#ffffff1a}._dropdownItem_1t2id_45:focus-visible{outline:2px solid currentColor;outline-offset:-2px}._itemTitle_1t2id_71{flex:1;white-space:nowrap}
+._container_dqumv_1{position:fixed;bottom:0;right:0;margin:1rem;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}._button_dqumv_13{--dsc-button-size: var(--ds-size-14);width:var(--ds-button-size);height:var(--ds-button-size);border-radius:50%;flex-shrink:0}._dropdown_dqumv_21{display:flex;flex-direction:column;gap:0;border-radius:.5rem;padding:.5rem;box-shadow:var(--ds-shadow-md);min-width:16rem;overflow:hidden;color:#fff}._dropdown_dqumv_21[data-color=company]{background-color:var(--ds-color-company-base-default)}._dropdown_dqumv_21[data-color=person]{background-color:var(--ds-color-person-base-default)}._dropdown_dqumv_21[data-color=neutral]{background-color:var(--ds-color-neutral-base-default)}._dropdownItem_dqumv_45{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:transparent;border:none;cursor:pointer;text-align:left;color:inherit;border-radius:.25rem;transition:background-color .2s ease;font-size:1rem;font-weight:400;line-height:1.5}._dropdownItem_dqumv_45:hover{background-color:#ffffff1a}._dropdownItem_dqumv_45:focus-visible{outline:2px solid currentColor;outline-offset:-2px}._dropdownItem_dqumv_45[data-active=true]{background-color:#fff3}._itemTitle_dqumv_75{flex:1;white-space:nowrap}

package/dist/components/ContextMenu/ContextMenu.js

@@ -6,8 +6,8 @@ import { useClickOutside as E } from "../../hooks/useClickOutside.js";
 import { useEnterKey as _ } from "../../hooks/useEnterKey.js";
 import { IconButton as C } from "../Button/IconButton.js";
 import { DropdownBase as M } from "../Dropdown/DropdownBase.js";
-import { MenuItems as j } from "../Menu/MenuItems.js";
-import { useRootContext as R } from "../RootProvider/RootProvider.js";
+import { useRootContext as j } from "../RootProvider/RootProvider.js";
+import { MenuItems as R } from "../Menu/MenuItems.js";
 import "../Snackbar/useSnackbar.js";
 import { u as P } from "../../useId-BVFxCjkq.js";
 import '../../assets/ContextMenu.css';var T = function(e, s) {
@@ -37,7 +37,7 @@ const A = w((e, s) => {
   className: o,
   items: i
 }) => {
-  const { currentId: v, toggleId: p, closeAll: a } = R(), d = O(null), g = "context-menu-" + e, x = () => p(e), u = v === e;
+  const { currentId: v, toggleId: p, closeAll: a } = j(), d = O(null), g = "context-menu-" + e, x = () => p(e), u = v === e;
   E(d, () => {
     u && p(e);
   });
@@ -74,7 +74,7 @@ const A = w((e, s) => {
         onBlurCapture: h
       }
     ),
-    u && /* @__PURE__ */ f(M, { placement: r, open: u, children: /* @__PURE__ */ f(j, { groups: t, items: b, keyboardEvents: !0 }) })
+    u && /* @__PURE__ */ f(M, { placement: r, open: u, children: /* @__PURE__ */ f(R, { groups: t, items: b, keyboardEvents: !0 }) })
   ] });
 };
 export {

package/dist/components/Dropdown/FloatingDropdown.js

@@ -1,61 +1,93 @@
 "use client";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { useState as k, useRef as N } from "react";
-import { useClickOutside as T } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as g } from "../../hooks/useEscapeKey.js";
-import { Icon as x } from "../Icon/Icon.js";
+import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import { useRef as b, useEffect as M } from "react";
+import { useClickOutside as N } from "../../hooks/useClickOutside.js";
+import { useMenu as R } from "../../hooks/useMenu.js";
+import { Icon as T } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
-import { ButtonBase as y } from "../Button/ButtonBase.js";
-import { ButtonIcon as v } from "../Button/ButtonIcon.js";
-import "../RootProvider/RootProvider.js";
+import { ButtonBase as B } from "../Button/ButtonBase.js";
+import { ButtonIcon as j } from "../Button/ButtonIcon.js";
+import { useRootContext as z } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/FloatingDropdown.css';const B = "_container_1t2id_1", j = "_button_1t2id_13", z = "_dropdown_1t2id_21", E = "_dropdownItem_1t2id_45", O = "_itemTitle_1t2id_71", n = {
-  container: B,
-  button: j,
-  dropdown: z,
-  dropdownItem: E,
-  itemTitle: O
-}, L = ({
-  variant: p = "solid",
-  size: u,
-  icon: _,
-  iconOpen: s,
-  iconSize: f,
-  iconAltText: w,
-  color: d = "company",
-  items: h,
-  dataTestId: I
+import '../../assets/FloatingDropdown.css';const D = "_container_dqumv_1", F = "_button_dqumv_13", L = "_dropdown_dqumv_21", A = "_dropdownItem_dqumv_45", S = "_itemTitle_dqumv_75", n = {
+  container: D,
+  button: F,
+  dropdown: L,
+  dropdownItem: A,
+  itemTitle: S
+}, X = ({
+  variant: w = "solid",
+  size: g,
+  icon: h,
+  iconOpen: a,
+  iconSize: x,
+  iconAltText: I,
+  id: r = "floatingDropdown",
+  color: l = "company",
+  items: C,
+  dataTestId: k
 }) => {
-  const [e, c] = k(!1), l = N(null), b = () => {
-    c((t) => !t);
-  }, i = () => {
-    c(!1);
-  }, C = (t) => (r) => {
-    t(r), i();
-  };
-  T(l, i), g(i);
-  const a = e && s ? s : _;
-  return /* @__PURE__ */ m("div", { className: n.container, ref: l, children: [
-    e && /* @__PURE__ */ o("div", { className: n.dropdown, "data-color": d, children: h.map((t, r) => /* @__PURE__ */ m("button", { className: n.dropdownItem, onClick: C(t.onClick), type: "button", children: [
-      /* @__PURE__ */ o(x, { svgElement: t.icon, size: "md", color: "inherit" }),
-      /* @__PURE__ */ o("span", { className: n.itemTitle, children: t.title })
-    ] }, r)) }),
-    /* @__PURE__ */ o(
-      y,
+  var v;
+  const { currentId: q, toggleId: i } = z(), t = q === r, s = b(null), u = b(null), m = () => {
+    var o;
+    (o = u.current) == null || o.focus();
+  }, y = (o) => (d) => {
+    o(d), i(r), m();
+  }, { menu: E, setActiveIndex: p } = R({
+    items: C,
+    groups: { ungrouped: {} },
+    keyboardEvents: t,
+    onSelect: m,
+    ref: s
+  });
+  M(() => {
+    t && p(0);
+  }, [t, p]), N(s, () => {
+    t && i(r);
+  });
+  const f = t && a ? a : h;
+  return /* @__PURE__ */ _("div", { className: n.container, ref: s, children: [
+    t && /* @__PURE__ */ e("div", { className: n.dropdown, "data-color": l, role: "menu", "aria-labelledby": "floating-dropdown-button", children: (v = E[0]) == null ? void 0 : v.items.map((o, d) => {
+      const c = o.props;
+      return /* @__PURE__ */ _(
+        "button",
+        {
+          className: n.dropdownItem,
+          onClick: y(c.onClick),
+          type: "button",
+          role: "menuitem",
+          tabIndex: o.active ? 0 : -1,
+          "data-active": o.active,
+          onMouseEnter: o.onMouseEnter,
+          onMouseLeave: o.onMouseLeave,
+          children: [
+            /* @__PURE__ */ e(T, { svgElement: c.icon, size: "md", color: "inherit" }),
+            /* @__PURE__ */ e("span", { className: n.itemTitle, children: c.title })
+          ]
+        },
+        d
+      );
+    }) }),
+    /* @__PURE__ */ e(
+      B,
       {
         className: n.button,
-        variant: p,
-        color: d,
-        size: u,
-        onClick: b,
-        "data-testid": I,
-        "aria-label": w,
-        "aria-expanded": e,
-        children: a && /* @__PURE__ */ o(v, { icon: a, size: f })
+        variant: w,
+        color: l,
+        size: g,
+        onClick: () => i(r),
+        "data-testid": k,
+        "aria-label": I,
+        "aria-expanded": t,
+        "aria-haspopup": "menu",
+        id: "floating-dropdown-button",
+        ref: u,
+        autoFocus: !1,
+        children: f && /* @__PURE__ */ e(j, { icon: f, size: x })
       }
     )
   ] });
 };
 export {
-  L as FloatingDropdown
+  X as FloatingDropdown
 };

package/dist/types/lib/components/Button/ButtonBase.d.ts

@@ -21,5 +21,6 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     children?: ReactNode;
     ariaLabel?: string;
     dataTestId?: string;
+    ref?: React.Ref<HTMLElement>;
 }
 export declare const ButtonBase: ({ as, color, className, children, disabled, ariaLabel, size, selected, variant, reverse, rounded, tabIndex, dataTestId, ...rest }: ButtonBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dropdown/FloatingDropdown.d.ts

@@ -16,5 +16,6 @@ export interface FloatingDropdownProps {
     size?: ButtonSize;
     variant?: ButtonVariant;
     dataTestId?: string;
+    id?: string;
 }
-export declare const FloatingDropdown: ({ variant, size, icon, iconOpen, iconSize, iconAltText, color, items, dataTestId, }: FloatingDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FloatingDropdown: ({ variant, size, icon, iconOpen, iconSize, iconAltText, id, color, items, dataTestId, }: FloatingDropdownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,10 @@ 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;
+/**
+ * Example showing how to use the FloatingDropdown with custom options
+ */
+export declare const InboxFloatingDropdown: () => 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.50.7",
+  "version": "0.50.8",
   "main": "dist/index.js",
   "files": [
     "dist/",