@rikstv/shared-components 2.0.15 → 2.0.16

package/dist/components/core/hooks/useMutationObserver.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare const useMutationObserver: (target: Element | RefObject<HTMLElement>, onObservation: MutationCallback, config?: Partial<MutationObserverInit>) => void;
+export declare const useMutationObserver: (target: Element | RefObject<Element>, onObservation: MutationCallback, config?: MutationObserverInit) => void;

package/dist/components/dropdown/Dropdown-3cf2ddf7.mjs

@@ -0,0 +1,44 @@
+import { j as e } from "../accordion/Accordion-5e72e67b.mjs";
+const u = ({
+  label: r,
+  id: d,
+  options: l,
+  onChange: i,
+  className: t = "",
+  defaultValue: o,
+  rightIcon: h,
+  leftIcon: a,
+  innerRef: m,
+  ...x
+}) => {
+  var c;
+  const j = `dropdown-styling ${a ? "menu-with-left-icon" : ""} ${t}`;
+  return /* @__PURE__ */ e.jsxs("span", { className: j, children: [
+    /* @__PURE__ */ e.jsx("label", { htmlFor: d, children: r }),
+    /* @__PURE__ */ e.jsxs("div", { className: "select-wrapper", children: [
+      /* @__PURE__ */ e.jsx(
+        "select",
+        {
+          defaultValue: o,
+          value: (c = l.find((s) => s.selected)) == null ? void 0 : c.value,
+          id: d,
+          ref: m,
+          onChange: ({ target: s }) => {
+            const n = l.find((p) => p.value === s.value) ?? l[0];
+            i(n);
+          },
+          ...x,
+          children: l.map((s, n) => /* @__PURE__ */ e.jsx("option", { value: s.value, children: s.title }, `dropdown-${r}-${s.title}-${n}`))
+        }
+      ),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("div", { className: "left-icon", children: a }),
+        /* @__PURE__ */ e.jsx("div", { className: "right-icon", children: h })
+      ] })
+    ] })
+  ] });
+};
+u.displayName = "Dropdown";
+export {
+  u as D
+};

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 interface BaseDropdownOption {
     title: string;
     value: string;
@@ -14,6 +14,10 @@ interface DropdownProps<T extends BaseDropdownOption> {
     isFilter?: boolean;
     rightIcon?: JSX.Element;
     leftIcon?: JSX.Element;
+    innerRef?: RefObject<HTMLSelectElement>;
 }
-export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps<BaseDropdownOption> & import("react").RefAttributes<HTMLSelectElement>>;
+export declare const Dropdown: {
+    <T extends BaseDropdownOption>({ label, id, options, onChange, className, defaultValue, rightIcon, leftIcon, innerRef, ...rest }: DropdownProps<T>): JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/shared-components.mjs

@@ -10,10 +10,10 @@ import { B as ae, a as ce } from "./components/breadcrumb/Breadcrumb-19678339.mj
 import { P as me } from "./components/progress/Progress-068e34f7.mjs";
 import { L as fe } from "./components/loader/Loader-55215a54.mjs";
 import { C as xe } from "./components/progress/CircularProgress-ac261d40.mjs";
-import { D as ye } from "./components/dropdown/Dropdown-499736ab.mjs";
-import { P as ge, S as ve, T as Te } from "./components/button/Button-3754ac0a.mjs";
+import { D as ge } from "./components/dropdown/Dropdown-3cf2ddf7.mjs";
+import { P as he, S as Te, T as ve } from "./components/button/Button-3754ac0a.mjs";
 import { P as Be, S as we, T as Ee } from "./components/button/ArrowButton-4fa3c028.mjs";
-import { P as Me, S as be, T as Re } from "./components/button/IconButton-be3ae8eb.mjs";
+import { P as Me, S as Re, T as be } from "./components/button/IconButton-be3ae8eb.mjs";
 import { T as Se } from "./components/toggleButton/ToggleButton-d50d64ec.mjs";
 import { T as Ce } from "./components/toggleInlineButton/ToggleInlineButton-ff76d094.mjs";
 import { T as Fe } from "./components/toggleLinkButton/ToggleLinkButton-c6127fa1.mjs";
@@ -27,7 +27,7 @@ import { C as sr } from "./components/list/CheckmarkListItem-f97a2aae.mjs";
 import { L as ar } from "./components/list/ListItem-fe58799f.mjs";
 import { C as ur } from "./components/list/CrossmarkListItem-60e093df.mjs";
 import { O as dr } from "./components/list/OrderedListItem-1a4b67c5.mjs";
-import { useState as x, useEffect as d, useRef as c, useCallback as p, useLayoutEffect as g } from "react";
+import { useState as x, useEffect as d, useRef as c, useCallback as p, useLayoutEffect as y } from "react";
 import { L as lr } from "./components/button/LinkButton-3a3f73b6.mjs";
 import { B as pr } from "./components/button/BaseLinkButton-d325fecb.mjs";
 import "./components/core/Core-5cdbbcd4.mjs";
@@ -43,21 +43,21 @@ import "./components/icons/Arrow-48abbbdf.mjs";
 import "./components/checkbox/BaseCheckbox-9b7c43b3.mjs";
 import "./components/icons/HeartToggle-a5a93ca7.mjs";
 import "./components/icons/Icons-32b173f0.mjs";
-const y = "(prefers-reduced-motion: reduce)", v = (e) => typeof window < "u" && window.matchMedia ? window.matchMedia(e).matches : !1, T = (e, t) => {
+const g = "(prefers-reduced-motion: reduce)", h = (e) => typeof window < "u" && window.matchMedia ? window.matchMedia(e).matches : !1, T = (e, t) => {
   typeof e.addEventListener < "u" && e.addEventListener("change", t);
-}, L = () => {
-  const [e, t] = x(v(y));
+}, v = () => {
+  const [e, t] = x(h(g));
   return d(() => {
-    typeof window < "u" && window.matchMedia && T(window.matchMedia(y), (o) => {
-      t(o.matches);
+    typeof window < "u" && window.matchMedia && T(window.matchMedia(g), (n) => {
+      t(n.matches);
     });
   }, []), { prefersReducedMotion: e };
 };
 function V(e, t) {
-  const o = c(), s = c(), n = c(null), a = c(!0), { prefersReducedMotion: u } = L();
+  const n = c(), s = c(), o = c(null), a = c(!0), { prefersReducedMotion: u } = v();
   function m(r) {
     var l;
-    const i = n.current;
+    const i = o.current;
     i && r.target === i && (i.removeAttribute("style"), (l = t == null ? void 0 : t.onTransitionEnd) == null || l.call(t, e));
   }
   const f = p(() => {
@@ -68,7 +68,7 @@ function V(e, t) {
       (l = t == null ? void 0 : t.onTransitionEnd) == null || l.call(t, e);
       return;
     }
-    const r = n.current;
+    const r = o.current;
     if (r)
       if (r.style.display = "block", r.style.overflow = "hidden", e)
         r.style.height = "0", r.style.height = `${r.scrollHeight}px`;
@@ -77,55 +77,55 @@ function V(e, t) {
           r.removeAttribute("style");
           return;
         }
-        r.style.height = `${r.scrollHeight}px`, o.current = requestAnimationFrame(() => {
+        r.style.height = `${r.scrollHeight}px`, n.current = requestAnimationFrame(() => {
           s.current = requestAnimationFrame(() => {
             r.style.height = `${0}px`;
           });
         });
       }
   }, [e, t, u]);
-  return g(() => {
+  return y(() => {
     f();
   }, [e, f]), d(() => {
-    const r = n.current;
+    const r = o.current;
     return r && r.addEventListener("transitionend", m), () => {
       r && r.removeEventListener("transitionend", m);
     };
   }, [e]), d(() => {
-    const r = o.current, i = s.current;
+    const r = n.current, i = s.current;
     return a.current = !1, () => {
       r && cancelAnimationFrame(r), i && cancelAnimationFrame(i);
     };
-  }, [o, s]), [n, f];
+  }, [n, s]), [o, f];
 }
-const N = ({ ref: e, callback: t, condition: o = !0 }) => {
+const N = ({ ref: e, callback: t, condition: n = !0 }) => {
   const s = p(
-    (n) => {
-      e != null && e.current && !e.current.contains(n.target) && t(n);
+    (o) => {
+      e != null && e.current && !e.current.contains(o.target) && t(o);
     },
     [t, e]
   );
-  d(() => (e && o && document && document.addEventListener("click", s), () => {
+  d(() => (e && n && document && document.addEventListener("click", s), () => {
     document && document.removeEventListener("click", s);
-  }), [e, o, s]);
-}, B = (() => {
+  }), [e, n, s]);
+}, L = (() => {
   const e = globalThis.IntersectionObserverEntry;
   return "IntersectionObserver" in globalThis && e && "isIntersecting" in e.prototype;
-})(), w = () => {
-}, E = (e, t = {}, o = w, s = !0) => {
-  const [n, a] = x(null), u = p((r) => a(r), [a]), m = c(t), f = c(null);
+})(), B = () => {
+}, w = (e, t = {}, n = B, s = !0) => {
+  const [o, a] = x(null), u = p((r) => a(r), [a]), m = c(t), f = c(null);
   return d(() => {
-    if (!B) {
-      o == null || o();
+    if (!L) {
+      n == null || n();
       return;
     }
     let r = f.current;
-    return r == null || r.disconnect(), n && s && (r = new IntersectionObserver(e, m.current), r.observe(n)), () => {
+    return r == null || r.disconnect(), o && s && (r = new IntersectionObserver(e, m.current), r.observe(o)), () => {
       r == null || r.disconnect();
     };
-  }, [n, e, o, s]), [u];
+  }, [o, e, n, s]), [u];
 }, $ = (e = { rootMargin: "150px" }, t = !0) => {
-  const [o, s] = x(!1), [n] = E(
+  const [n, s] = x(!1), [o] = w(
     (a) => {
       const u = a.some((m) => m.isIntersecting);
       s(u);
@@ -134,15 +134,15 @@ const N = ({ ref: e, callback: t, condition: o = !0 }) => {
     void 0,
     t
   );
-  return [n, o];
-}, h = () => typeof window < "u" && typeof MutationObserver < "u", Q = (e, t, o) => {
-  const s = c(null);
+  return [o, n];
+}, E = () => typeof window < "u" && typeof MutationObserver < "u", Q = (e, t, n) => {
+  const s = c(n);
   d(() => {
-    let n = s.current;
-    return h() && (n && n.disconnect(), n = new MutationObserver(t), e && ("current" in e ? e.current && n.observe(e.current, o) : n.observe(e, o))), () => {
-      h() && n && n.disconnect();
-    };
-  }, [e, t, o]);
+    if (E() && e) {
+      const o = new MutationObserver(t);
+      return "current" in e ? e.current && o.observe(e.current, s.current) : o.observe(e, s.current), () => o.disconnect();
+    }
+  }, [e, t]);
 };
 export {
   ne as Accordion,
@@ -156,7 +156,7 @@ export {
   xe as CircularProgress,
   ur as CrossmarkListItem,
   Ue as DisplayTitle,
-  ye as Dropdown,
+  ge as Dropdown,
   Ne as FieldSet,
   X as Gutter,
   Z as GutterPadding,
@@ -175,29 +175,29 @@ export {
   dr as OrderedListItem,
   se as Panel,
   Be as PrimaryArrowButton,
-  ge as PrimaryButton,
+  he as PrimaryButton,
   Me as PrimaryIconButton,
   me as Progress,
   Ge as RadioToggleInput,
   q as RiksTVProvider,
   we as SecondaryArrowButton,
-  ve as SecondaryButton,
-  be as SecondaryIconButton,
+  Te as SecondaryButton,
+  Re as SecondaryIconButton,
   Ze as Span,
   j as StrimProvider,
   er as SubBody,
   rr as Tag,
   Ee as TertiaryArrowButton,
-  Te as TertiaryButton,
-  Re as TertiaryIconButton,
+  ve as TertiaryButton,
+  be as TertiaryIconButton,
   Qe as TextField,
   Se as ToggleButton,
   Ce as ToggleInlineButton,
   Fe as ToggleLinkButton,
   V as useAnimatedHeight,
-  L as useBrowserPreferences,
+  v as useBrowserPreferences,
   N as useClickOutsideListener,
   $ as useElementVisible,
-  E as useIntersectionObserver,
+  w as useIntersectionObserver,
   Q as useMutationObserver
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikstv/shared-components",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "publishConfig": {
     "access": "public"
   },

package/dist/components/dropdown/Dropdown-499736ab.mjs

@@ -1,35 +0,0 @@
-import { j as e } from "../accordion/Accordion-5e72e67b.mjs";
-import { forwardRef as j } from "react";
-const u = j(
-  ({ label: d, id: n, options: r, onChange: i, className: o = "", defaultValue: t, rightIcon: m, leftIcon: a }, h) => {
-    var c;
-    const p = `dropdown-styling ${a ? "menu-with-left-icon" : ""} ${o}`;
-    return /* @__PURE__ */ e.jsxs("span", { className: p, children: [
-      /* @__PURE__ */ e.jsx("label", { htmlFor: n, children: d }),
-      /* @__PURE__ */ e.jsxs("div", { className: "select-wrapper", children: [
-        /* @__PURE__ */ e.jsx(
-          "select",
-          {
-            defaultValue: t,
-            value: (c = r.find((s) => s.selected)) == null ? void 0 : c.value,
-            id: n,
-            ref: h,
-            onChange: ({ target: s }) => {
-              const l = r.find((x) => x.value === s.value) ?? r[0];
-              i(l);
-            },
-            children: r.map((s, l) => /* @__PURE__ */ e.jsx("option", { value: s.value, children: s.title }, `dropdown-${d}-${s.title}-${l}`))
-          }
-        ),
-        /* @__PURE__ */ e.jsxs("div", { children: [
-          /* @__PURE__ */ e.jsx("div", { className: "left-icon", children: a }),
-          /* @__PURE__ */ e.jsx("div", { className: "right-icon", children: m })
-        ] })
-      ] })
-    ] });
-  }
-);
-u.displayName = "Dropdown";
-export {
-  u as D
-};