@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/components/Dialog/DialogSeenBy.js

@@ -1,58 +1,41 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import a, { forwardRef as i } from "react";
+import a, { forwardRef as f } from "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { MetaItem as m } from "../Metadata/MetaItem.js";
-import { u as c } from "../../useId-BVFxCjkq.js";
-var p = function(t, n) {
-  var r = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
+import { S as s } from "../../Eye-BrbjRZJp.js";
+import { u as p } from "../../useId-BVFxCjkq.js";
+var d = function(t, o) {
+  var l = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (l[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
-      n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
-  return r;
+    for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
+      o.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
+  return l;
 };
-const s = i((t, n) => {
-  var { title: r, titleId: e } = t, l = p(t, ["title", "titleId"]);
-  let o = c();
-  return o = r ? e || "title-" + o : void 0, a.createElement(
+const u = f((t, o) => {
+  var { title: l, titleId: e } = t, r = d(t, ["title", "titleId"]);
+  let n = p();
+  return n = l ? e || "title-" + n : void 0, a.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": o }, l),
-    r ? a.createElement("title", { id: o }, r) : null,
-    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.148 12.317A10 10 0 0 1 3.905 12q.103-.14.243-.317c.35-.438.878-1.025 1.582-1.61C7.136 8.902 9.222 7.75 12 7.75a4.25 4.25 0 0 0 0 8.5c-2.778 0-4.864-1.152-6.27-2.323a11.3 11.3 0 0 1-1.582-1.61M12 16.25a4.25 4.25 0 0 0 0-8.5c2.778 0 4.864 1.152 6.27 2.323A11.3 11.3 0 0 1 20.095 12q-.103.14-.243.317a11.3 11.3 0 0 1-1.582 1.61c-1.406 1.171-3.492 2.323-6.27 2.323m0-10c-3.222 0-5.636 1.343-7.23 2.67a12.8 12.8 0 0 0-1.793 1.826 10 10 0 0 0-.576.796l-.05.08-.011.022a1 1 0 0 0-.037.078c-.012.032-.045.17-.053.278.008.108.041.246.053.278l.037.078.012.022.05.08q.04.069.12.182c.103.152.254.363.455.614.4.5.997 1.163 1.793 1.826 1.594 1.327 4.008 2.67 7.23 2.67s5.636-1.343 7.23-2.67a12.8 12.8 0 0 0 1.793-1.826 10 10 0 0 0 .576-.796l.035-.056.005-.009.01-.015.011-.022.016-.03c.004-.01.015-.033.02-.048.013-.032.046-.17.054-.278a1.4 1.4 0 0 0-.053-.278l-.021-.047q-.012-.024-.016-.031l-.02-.034-.006-.012a4 4 0 0 0-.155-.238 10 10 0 0 0-.456-.614c-.4-.5-.997-1.163-1.793-1.826-1.594-1.327-4.008-2.67-7.23-2.67M9.25 12a2.75 2.75 0 1 1 5.5 0 2.75 2.75 0 0 1-5.5 0", clipRule: "evenodd" })
-  );
-});
-var u = function(t, n) {
-  var r = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
-  if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
-      n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
-  return r;
-};
-const b = i((t, n) => {
-  var { title: r, titleId: e } = t, l = u(t, ["title", "titleId"]);
-  let o = c();
-  return o = r ? e || "title-" + o : void 0, a.createElement(
-    "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": o }, l),
-    r ? a.createElement("title", { id: o }, r) : null,
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": n }, r),
+    l ? a.createElement("title", { id: n }, l) : null,
     a.createElement("path", { fill: "currentColor", d: "M2.614 9.357a.75.75 0 0 1 1.029.257l.003.005.02.033.093.139c.085.123.214.303.39.522.35.438.877 1.024 1.581 1.61C7.137 13.097 9.223 14.25 12 14.25s4.863-1.154 6.27-2.326a11.4 11.4 0 0 0 1.582-1.611 9 9 0 0 0 .481-.661q.015-.023.02-.033l.004-.005a.75.75 0 0 1 1.286.772L21 10c.643.386.642.387.642.387v.002l-.004.005-.01.015-.032.051-.118.179c-.103.15-.255.36-.455.61-.304.38-.722.856-1.256 1.353l.841 1.002a.75.75 0 1 1-1.149.965l-.847-1.01c-.577.423-1.24.83-1.987 1.176l.497 1.17a.75.75 0 1 1-1.38.587l-.518-1.22c-.758.233-1.582.394-2.474.453V17a.75.75 0 0 1-1.5 0v-1.275a11 11 0 0 1-2.475-.453l-.516 1.215a.75.75 0 1 1-1.38-.586l.494-1.166a11.7 11.7 0 0 1-1.987-1.178l-.845 1.007a.75.75 0 1 1-1.15-.964l.84-1c-.533-.496-.95-.97-1.254-1.35a11 11 0 0 1-.574-.79l-.032-.05-.01-.016-.002-.005-.001-.002-.001-.001a.75.75 0 0 1 .257-1.03" })
   );
-}), E = ({
+}), j = ({
   size: t = "xs",
-  label: n = "Seen by label",
-  seenByEndUser: r = !1,
+  label: o = "Seen by label",
+  seenByEndUser: l = !1,
   seenByOthersCount: e = 0,
-  onClick: l,
-  ...o
+  onClick: r,
+  ...n
 }) => {
-  const f = r || e > 0 ? s : b;
-  return /* @__PURE__ */ d(m, { size: t, icon: f, ...o, children: n });
+  const i = l || e > 0 ? s : u;
+  return /* @__PURE__ */ c(m, { size: t, icon: i, ...n, children: o });
 };
 export {
-  E as DialogSeenBy
+  j as DialogSeenBy
 };

package/dist/components/Dialog/DialogTabs.js

@@ -1,11 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
+import { TabMenu as t } from "../Menu/TabMenu.js";
 import "../Snackbar/useSnackbar.js";
-import { PageTabs as i } from "../Page/PageTabs.js";
-const f = ({ id: o = "dialog-tabs", items: r = [] }) => /* @__PURE__ */ t(i, { id: o, items: r });
+const b = ({ items: o = [] }) => /* @__PURE__ */ r(t, { items: o });
 export {
-  f as DialogTabs
+  b as DialogTabs
 };

package/dist/components/Dialog/SeenByLog.js

@@ -16,18 +16,18 @@ const q = ({
   expanded: d,
   title: n,
   items: e,
-  size: i = "sm",
+  size: m = "sm",
   endUserLabel: g = "You"
 }) => {
-  const [m, f] = a(d || !t && !0);
+  const [i, f] = a(d || !t && !0);
   return /* @__PURE__ */ p(B, { spacing: 1, children: [
-    n && /* @__PURE__ */ o(y, { children: t ? /* @__PURE__ */ o(c, { icon: { items: e }, as: "button", onClick: () => {
+    n && /* @__PURE__ */ o(y, { children: t ? /* @__PURE__ */ o(c, { items: e, as: "button", onClick: () => {
       f((r) => !r);
-    }, children: n }) : /* @__PURE__ */ o(c, { icon: { items: e }, as: "div", children: n }) }),
-    n && m && /* @__PURE__ */ o(s, {}),
-    m && /* @__PURE__ */ o(x, { size: i, spacing: 1, children: e?.map((r, u) => /* @__PURE__ */ p(h, { children: [
+    }, children: n }) : /* @__PURE__ */ o(c, { items: e, as: "div", children: n }) }),
+    n && i && /* @__PURE__ */ o(s, {}),
+    i && /* @__PURE__ */ o(x, { size: m, spacing: 1, children: e?.map((r, u) => /* @__PURE__ */ p(h, { children: [
       u > 0 && /* @__PURE__ */ o(s, {}),
-      /* @__PURE__ */ l(S, { ...r, key: r.id, size: i, endUserLabel: g })
+      /* @__PURE__ */ l(S, { ...r, key: r.id, size: m, endUserLabel: g })
     ] }, r.id)) })
   ] });
 };

package/dist/components/Dialog/SeenByLogButton.js

@@ -1,12 +1,18 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import "../Button/Button.js";
+import { AvatarGroup as u } from "../Avatar/AvatarGroup.js";
+import { Button as p } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MetaItemLabel as p } from "../Metadata/MetaItemLabel.js";
-import { MetaItem as s } from "../Metadata/MetaItem.js";
 import "../Snackbar/useSnackbar.js";
-const L = ({ as: r, icon: m, children: t, className: e, onClick: i }) => /* @__PURE__ */ o(s, { as: r, size: "xs", className: e, icon: m, onClick: i, children: t && /* @__PURE__ */ o(p, { size: "xs", children: t }) });
+import '../../assets/SeenByLogButton.css';const l = "_button_deo1u_1", m = "_label_deo1u_12", i = "_avatarGroup_deo1u_16", t = {
+  button: l,
+  label: m,
+  avatarGroup: i
+}, f = ({ as: s, items: o, children: a, onClick: e }) => /* @__PURE__ */ n(p, { variant: "ghost", as: s, size: "xs", className: t.button, onClick: e, children: [
+  o && /* @__PURE__ */ r(u, { items: o, className: t.avatarGroup }),
+  a && /* @__PURE__ */ r("span", { "data-size": "xs", className: t.label, children: a })
+] });
 export {
-  L as SeenByLogButton
+  f as SeenByLogButton
 };

package/dist/components/Dropdown/DrawerOrDropdown.js

@@ -2,12 +2,12 @@ import { jsxs as d, Fragment as n, jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
 import { Backdrop as s } from "./Backdrop.js";
 import { DrawerHeader as c } from "./DrawerHeader.js";
 import { DrawerFooter as l } from "./DrawerFooter.js";
 import { DrawerButton as f } from "./DrawerButton.js";
 import { DrawerBody as h } from "./DrawerBody.js";
+import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/DrawerOrDropdown.css';const w = "_drawerOrDropdown_h06dg_1", D = "_header_h06dg_19", _ = "_footer_h06dg_20", e = {
   drawerOrDropdown: w,

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,160 @@
+import { jsxs as g, Fragment as U, jsx as c } from "react/jsx-runtime";
+import { c as Y } from "../../index-p1eeF8LQ.js";
+import { useRef as _, useEffect as x, useState as M, useCallback as O, useLayoutEffect as W } from "react";
+import { Button as F } from "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { S as G } from "../../XMark-tKk6aExO.js";
+import '../../assets/Dropdown.css';const P = "_dropdown_4f5qx_1", $ = "_content_4f5qx_16", J = "_backdrop_4f5qx_43", Q = "_header_4f5qx_68", V = "_footer_4f5qx_69", Z = "_title_4f5qx_140", a = {
+  dropdown: P,
+  content: $,
+  backdrop: J,
+  header: Q,
+  footer: V,
+  title: Z
+}, tt = "data-focus-guard", A = (l) => {
+  const v = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]'
+  ].join(",");
+  return Array.from(l.querySelectorAll(v)).filter((o) => !o.hasAttribute(tt)).filter((o) => !o.hasAttribute("disabled")).filter((o) => o.getAttribute("aria-hidden") !== "true").filter((o) => o.tabIndex !== -1).filter((o) => {
+    const u = o.getClientRects();
+    return u.length > 0 && u[0].width > 0 && u[0].height > 0;
+  });
+}, et = (l) => {
+  A(l)[0]?.focus({ preventScroll: !0 });
+}, lt = ({
+  id: l = "dropdown",
+  size: v = "sm",
+  className: o,
+  backdrop: u = !0,
+  placement: k = "bottom-left",
+  variant: D = "dropdown",
+  title: L = "Title",
+  closeLabel: q = "Close",
+  submitLabel: E,
+  trigger: z,
+  children: H,
+  open: e,
+  onClose: f,
+  onSubmit: C,
+  activeDescendantId: N
+}) => {
+  const h = _(null), m = _(null), R = _(e);
+  x(() => {
+    R.current = e;
+  }, [e]);
+  const [y, B] = M({
+    yDir: k.includes("top") ? "top" : "bottom",
+    xDir: k.includes("right") ? "right" : "left",
+    maxHeight: 300
+  }), w = O(() => {
+    if (e && h.current && m.current) {
+      const t = h.current.getBoundingClientRect(), i = m.current.getBoundingClientRect(), n = window.innerHeight, r = window.innerWidth, s = 16, d = n - t.bottom, p = t.top, b = r - t.right - i.width, S = d < 250 && p > d, T = S ? "top" : "bottom", X = (S ? p : d) - s, j = b < s ? "right" : "left";
+      B((K) => ({
+        ...K,
+        yDir: T,
+        maxHeight: X,
+        xDir: j
+      }));
+    }
+  }, [e]);
+  W(() => (w(), window.addEventListener("resize", w), () => window.removeEventListener("resize", w)), [w]), x(() => {
+    if (!e) return;
+    const t = requestAnimationFrame(() => {
+      const i = m.current;
+      if (!i) return;
+      const n = i.querySelector(
+        'input[type="search"]:not([disabled]), input[role="searchbox"]:not([disabled]), input[data-dropdown-search]:not([disabled])'
+      );
+      if (n) {
+        const r = n.value.length;
+        n.focus({ preventScroll: !0 });
+        try {
+          n.setSelectionRange(r, r);
+        } catch {
+        }
+        return;
+      }
+      i.focus?.({ preventScroll: !0 });
+    });
+    return () => cancelAnimationFrame(t);
+  }, [e]), x(() => {
+    const t = (n) => {
+      n.key === "Escape" && f();
+    }, i = (n) => {
+      h.current && !h.current.contains(n.target) && f();
+    };
+    return e && (document.addEventListener("mousedown", i), document.addEventListener("keydown", t)), () => {
+      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", t);
+    };
+  }, [e, f]), x(() => {
+    if (!e) return;
+    const t = m.current;
+    if (!t) return;
+    const i = (r) => {
+      if (!R.current)
+        return;
+      const s = r.target;
+      s && !t.contains(s) && et(t);
+    }, n = (r) => {
+      if (r.key !== "Tab") return;
+      const s = A(t);
+      if (s.length === 0) {
+        r.preventDefault(), t.focus?.({ preventScroll: !0 });
+        return;
+      }
+      const d = s[0], p = s[s.length - 1], b = document.activeElement;
+      r.shiftKey ? b === d && (r.preventDefault(), p.focus({ preventScroll: !0 })) : b === p && (r.preventDefault(), d.focus({ preventScroll: !0 }));
+    };
+    return document.addEventListener("focusin", i), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("focusin", i), document.removeEventListener("keydown", n);
+    };
+  }, [e]);
+  const I = {
+    position: "absolute",
+    zIndex: 50,
+    width: "max-content",
+    maxHeight: `${y.maxHeight}px`,
+    overflowY: "auto",
+    [y.xDir]: 0,
+    [y.yDir === "bottom" ? "top" : "bottom"]: "100%"
+  };
+  return /* @__PURE__ */ g(U, { children: [
+    u && /* @__PURE__ */ c("div", { className: a.backdrop, "aria-hidden": !e }),
+    /* @__PURE__ */ g("div", { id: l + "-root", ref: h, style: { position: "relative", display: "inline-block" }, children: [
+      z,
+      /* @__PURE__ */ g(
+        "div",
+        {
+          ref: m,
+          className: Y(a.dropdown, o),
+          style: I,
+          "aria-hidden": !e,
+          "data-variant": D,
+          "data-size": v,
+          tabIndex: -1,
+          role: "menu",
+          "aria-modal": D === "drawer-dropdown" ? !0 : void 0,
+          "aria-activedescendant": N,
+          children: [
+            /* @__PURE__ */ g("header", { className: a.header, children: [
+              /* @__PURE__ */ c("h2", { className: a.title, children: L }),
+              /* @__PURE__ */ c(F, { size: "sm", variant: "outline", onClick: f, "aria-label": q, children: /* @__PURE__ */ c(G, {}) })
+            ] }),
+            /* @__PURE__ */ c("div", { className: a.content, children: H }),
+            E && /* @__PURE__ */ c("footer", { className: a.footer, children: /* @__PURE__ */ c(F, { size: "lg", variant: "solid", onClick: C || f, rounded: !0, children: /* @__PURE__ */ c("span", { "data-size": "md", children: E }) }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  lt as Dropdown
+};

package/dist/components/Dropdown/DropdownBase.js

@@ -1,26 +1,26 @@
 import { jsx as i } from "react/jsx-runtime";
 import { c } from "../../index-p1eeF8LQ.js";
-import { useRef as l } from "react";
-import { useClickOutside as f } from "../../hooks/useClickOutside.js";
+import { useRef as f } from "react";
+import { useClickOutside as l } from "../../hooks/useClickOutside.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/DropdownBase.css';const u = "_dropdown_1tyzv_1", w = {
+import '../../assets/DropdownBase.css';const u = "_dropdown_fqgmt_1", w = {
   dropdown: u
-}, j = ({
+}, q = ({
   layout: t,
   size: a = "auto",
   placement: d = "left",
   padding: e = !0,
   open: r = !1,
   className: n,
-  children: p,
-  onClose: s,
-  as: m = "div"
+  children: m,
+  onClose: p,
+  as: s = "div"
 }) => {
-  const o = l(null);
-  return f(o, s), /* @__PURE__ */ i(
-    m,
+  const o = f(null);
+  return l(o, p), /* @__PURE__ */ i(
+    s,
     {
       ref: o,
       className: c(w.dropdown, n),
@@ -31,10 +31,10 @@ import '../../assets/DropdownBase.css';const u = "_dropdown_1tyzv_1", w = {
       "data-placement": d,
       "data-padding": e,
       "data-expanded": r,
-      children: p
+      children: m
     }
   );
 };
 export {
-  j as DropdownBase
+  q as DropdownBase
 };

package/dist/components/Dropdown/FloatingDropdown.js

@@ -1,91 +1,136 @@
 "use client";
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
-import { useRef as _, useEffect as M } from "react";
-import { useClickOutside as N } from "../../hooks/useClickOutside.js";
-import { useMenu as R } from "../../hooks/useMenu.js";
+import { jsxs as q, jsx as c } from "react/jsx-runtime";
+import { useRef as u, useEffect as d } from "react";
+import { useClickOutside as z } from "../../hooks/useClickOutside.js";
+import { useMenu as B } from "../../hooks/useMenu.js";
 import "../../index-p1eeF8LQ.js";
-import { Icon as T } from "../Icon/Icon.js";
-import { Button as b } from "../Button/Button.js";
-import { ButtonIcon as j } from "../Button/ButtonIcon.js";
-import { useRootContext as z } from "../RootProvider/RootProvider.js";
+import { Icon as O } from "../Icon/Icon.js";
+import { Button as D } from "../Button/Button.js";
+import { ButtonIcon as $ } from "../Button/ButtonIcon.js";
+import { useRootContext as G } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/FloatingDropdown.css';const B = "_container_dqumv_1", D = "_button_dqumv_13", F = "_dropdown_dqumv_21", L = "_dropdownItem_dqumv_45", A = "_itemTitle_dqumv_75", n = {
-  container: B,
-  button: D,
-  dropdown: F,
-  dropdownItem: L,
-  itemTitle: A
-}, W = ({
-  variant: w = "solid",
-  size: g,
-  icon: h,
-  iconOpen: c,
-  iconSize: x,
-  iconAltText: I,
-  id: r = "floatingDropdown",
-  color: l = "company",
-  items: C,
-  "data-testid": k
+import '../../assets/FloatingDropdown.css';const H = "_container_dqumv_1", J = "_button_dqumv_13", P = "_dropdown_dqumv_21", Q = "_dropdownItem_dqumv_45", U = "_itemTitle_dqumv_75", i = {
+  container: H,
+  button: J,
+  dropdown: P,
+  dropdownItem: Q,
+  itemTitle: U
+}, st = ({
+  variant: F = "solid",
+  size: C,
+  icon: L,
+  iconOpen: p,
+  iconSize: R,
+  iconAltText: S,
+  id: a = "floatingDropdown",
+  color: v = "company",
+  items: A,
+  "data-testid": M
 }) => {
-  const { currentId: q, toggleId: i } = z(), o = q === r, s = _(null), u = _(null), m = () => {
-    u.current?.focus();
-  }, y = (t) => (d) => {
-    t(d), i(r), m();
-  }, { menu: E, setActiveIndex: p } = R({
-    items: C,
+  const { currentId: N, toggleId: l } = G(), t = N === a, b = u(t), f = u(null), m = u(null), w = u(null), T = (e) => (n) => {
+    e(n), l(a);
+  }, { menu: K, setActiveIndex: g, activeIndex: _ } = B({
+    items: A,
     groups: { ungrouped: {} },
-    keyboardEvents: o,
-    onSelect: m,
-    ref: s
+    keyboardEvents: t,
+    ref: f
   });
-  M(() => {
-    o && p(0);
-  }, [o, p]), N(s, () => {
-    o && i(r);
+  d(() => {
+    const e = b.current;
+    b.current = t, e && !t && w.current?.focus();
+  }, [t]), d(() => {
+    t && g(0);
+  }, [t, g]), d(() => {
+    if (!t) return;
+    const e = requestAnimationFrame(() => {
+      m.current?.focus({ preventScroll: !0 });
+    });
+    return () => cancelAnimationFrame(e);
+  }, [t]), d(() => {
+    if (!t) return;
+    const e = m.current;
+    if (!e) return;
+    const n = () => Array.from(e.querySelectorAll('button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(
+      (o) => o.tabIndex !== -1
+    ), s = () => {
+      n()[0]?.focus({ preventScroll: !0 });
+    }, y = (o) => {
+      const r = o.target;
+      r && !e.contains(r) && s();
+    }, h = (o) => {
+      if (o.key !== "Tab") return;
+      const r = n();
+      if (r.length === 0) {
+        o.preventDefault(), e.focus({ preventScroll: !0 });
+        return;
+      }
+      const x = r[0], E = r[r.length - 1], k = document.activeElement;
+      o.shiftKey && k === x ? (o.preventDefault(), E.focus({ preventScroll: !0 })) : !o.shiftKey && k === E && (o.preventDefault(), x.focus({ preventScroll: !0 }));
+    };
+    return document.addEventListener("focusin", y), document.addEventListener("keydown", h), () => {
+      document.removeEventListener("focusin", y), document.removeEventListener("keydown", h);
+    };
+  }, [t]), z(f, () => {
+    t && l(a);
   });
-  const f = o && c ? c : h;
-  return /* @__PURE__ */ v("div", { className: n.container, ref: s, children: [
-    o && /* @__PURE__ */ e("div", { className: n.dropdown, "data-color": l, role: "menu", "aria-labelledby": "floating-dropdown-button", children: E[0]?.items.map((t, d) => {
-      const a = t.props;
-      return /* @__PURE__ */ v(
-        b,
-        {
-          className: n.dropdownItem,
-          onClick: y(a.onClick),
-          type: "button",
-          role: "menuitem",
-          tabIndex: t.active ? 0 : -1,
-          "data-active": t.active,
-          onMouseEnter: t.onMouseEnter,
-          onMouseLeave: t.onMouseLeave,
-          children: [
-            /* @__PURE__ */ e(T, { svgElement: a.icon, size: "md", color: "inherit" }),
-            /* @__PURE__ */ e("span", { className: n.itemTitle, children: a.title })
-          ]
-        },
-        d
-      );
-    }) }),
-    /* @__PURE__ */ e(
-      b,
+  const I = t && p ? p : L, j = t && _ >= 0 ? `floating-dropdown-button-${_}` : void 0;
+  return /* @__PURE__ */ q("div", { className: i.container, ref: f, children: [
+    t && /* @__PURE__ */ c(
+      "div",
+      {
+        id: "floating-dropdown-menu",
+        className: i.dropdown,
+        "data-color": v,
+        role: "menu",
+        "aria-labelledby": "floating-dropdown-button",
+        "aria-activedescendant": j,
+        tabIndex: -1,
+        ref: m,
+        children: K[0]?.items.map((e, n) => {
+          const s = e.props;
+          return /* @__PURE__ */ q(
+            D,
+            {
+              id: "floating-dropdown-button-" + n,
+              className: i.dropdownItem,
+              onClick: T(s.onClick),
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              "data-active": e.active,
+              onMouseEnter: e.onMouseEnter,
+              onMouseLeave: e.onMouseLeave,
+              children: [
+                /* @__PURE__ */ c(O, { svgElement: s.icon, size: "md", color: "inherit" }),
+                /* @__PURE__ */ c("span", { className: i.itemTitle, children: s.title })
+              ]
+            },
+            n
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ c(
+      D,
       {
-        className: n.button,
-        variant: w,
-        color: l,
-        size: g,
-        onClick: () => i(r),
-        "data-testid": k,
-        "aria-label": I,
-        "aria-expanded": o,
+        className: i.button,
+        variant: F,
+        color: v,
+        size: C,
+        onClick: () => l(a),
+        "data-testid": M,
+        "aria-label": S,
+        "aria-expanded": t,
         "aria-haspopup": "menu",
         id: "floating-dropdown-button",
-        ref: u,
+        ref: w,
         autoFocus: !1,
-        children: f && /* @__PURE__ */ e(j, { icon: f, size: x })
+        "aria-controls": t ? "floating-dropdown-menu" : void 0,
+        children: I && /* @__PURE__ */ c($, { icon: I, size: R })
       }
     )
   ] });
 };
 export {
-  W as FloatingDropdown
+  st as FloatingDropdown
 };

package/dist/components/Dropdown/index.js

@@ -1,20 +1,22 @@
 import { DropdownBase as e } from "./DropdownBase.js";
-import { Backdrop as t } from "./Backdrop.js";
-import { DrawerBase as f } from "./DrawerBase.js";
-import { DrawerHeader as w } from "./DrawerHeader.js";
-import { DrawerFooter as D } from "./DrawerFooter.js";
-import { DrawerButton as n } from "./DrawerButton.js";
-import { DrawerBody as s } from "./DrawerBody.js";
-import { DrawerOrDropdown as c } from "./DrawerOrDropdown.js";
-import { FloatingDropdown as i } from "./FloatingDropdown.js";
+import { Dropdown as t } from "./Dropdown.js";
+import { Backdrop as f } from "./Backdrop.js";
+import { DrawerBase as w } from "./DrawerBase.js";
+import { DrawerHeader as D } from "./DrawerHeader.js";
+import { DrawerFooter as n } from "./DrawerFooter.js";
+import { DrawerButton as s } from "./DrawerButton.js";
+import { DrawerBody as c } from "./DrawerBody.js";
+import { DrawerOrDropdown as i } from "./DrawerOrDropdown.js";
+import { FloatingDropdown as l } from "./FloatingDropdown.js";
 export {
-  t as Backdrop,
-  f as DrawerBase,
-  s as DrawerBody,
-  n as DrawerButton,
-  D as DrawerFooter,
-  w as DrawerHeader,
-  c as DrawerOrDropdown,
+  f as Backdrop,
+  w as DrawerBase,
+  c as DrawerBody,
+  s as DrawerButton,
+  n as DrawerFooter,
+  D as DrawerHeader,
+  i as DrawerOrDropdown,
+  t as Dropdown,
   e as DropdownBase,
-  i as FloatingDropdown
+  l as FloatingDropdown
 };

package/dist/components/DsComponents/index.js

@@ -1,10 +1,10 @@
 import { A as o } from "../../alert-BzifOfXl.js";
-import { B as D, C as r, a as t, b as i, D as n, L as p, c as x, d as f, P as m, e as S, S as d, f as g, T as l, u as P } from "../../textfield-DAuYWtUj.js";
+import { B as D, C as r, a as t, b as i, D as n, L as p, c as x, d as f, P as m, e as S, S as d, f as g, T as l, u as P } from "../../textfield-Drdr9bio.js";
 import { B as h, S as c } from "../../button-BB5sYVKY.js";
 import { H as C, S as L } from "../../switch-Cemfhx0H.js";
 import { D as u } from "../../index-Q0EA2XB0.js";
 import { P as A } from "../../paragraph-BRiIBpbY.js";
-import { S as V } from "../../index-DttADHE1.js";
+import { S as V } from "../../index--jNxJmA8.js";
 import { V as w } from "../../index-z82sbSVU.js";
 export {
   o as DsAlert,