gd-design-library 1.0.2 → 1.2.0

package/components/core/Select/Select.js

@@ -1,195 +1,223 @@
 "use client";
-import { jsx as l, jsxs as Y, Fragment as Ae } from "@emotion/react/jsx-runtime";
-import { forwardRef as Ie, useRef as x, useState as m, useEffect as E, useCallback as q, useImperativeHandle as ke, isValidElement as Le } from "react";
-import { KEYBOARD_KEYS as w } from "../../../constants/keyboard.js";
-import { DropdownItem as Oe } from "../DropdownItem/DropdownItem.js";
-import { Dropdown as We } from "../Dropdown/Dropdown.js";
-import { DEFAULT_SELECTED_VALUE as xe, COMPONENT_NAME as g } from "./constants.js";
-import { SelectWrapperStyled as Me, InitiatorWrapperStyled as Ce, DropdownButtonStyled as Ne, SelectAdornmentStyled as M, ArrowIconWrapperStyled as Be } from "./SelectStyled.js";
-import { getClosestFocusable as C } from "../../../utils/focus.js";
-import { get as G, toNumber as J } from "../../../utils/helpers.js";
+import { jsx as a, jsxs as J, Fragment as Oe } from "@emotion/react/jsx-runtime";
+import { forwardRef as $e, useRef as x, useState as w, useEffect as y, useCallback as Q, useImperativeHandle as ke, isValidElement as Ie } from "react";
+import { KEYBOARD_KEYS as h } from "../../../constants/keyboard.js";
+import { DropdownItem as Ce } from "../DropdownItem/DropdownItem.js";
+import { Dropdown as Le } from "../Dropdown/Dropdown.js";
+import { DEFAULT_SELECTED_VALUE as We, COMPONENT_NAME as s } from "./constants.js";
+import { SelectWrapperStyled as xe, InitiatorWrapperStyled as Me, DropdownButtonStyled as Ne, SelectAdornmentStyled as M, ArrowIconWrapperStyled as Be } from "./SelectStyled.js";
+import { getClosestFocusable as N } from "../../../utils/focus.js";
+import { get as V, toNumber as X } from "../../../utils/helpers.js";
 import { useTheme as He } from "../../../hooks/useTheme/useTheme.js";
-import { SelectContext as Te } from "./hooks/useSelectContext.js";
-import { Icon as $e } from "../Icon/Icon.js";
-import { Portal as Pe } from "../Portal/Portal.js";
-const _e = Ie((Q, X) => {
+import { useLogger as Te } from "../../../hooks/useLogger/useLogger.js";
+import { SelectContext as Pe } from "./hooks/useSelectContext.js";
+import { Icon as _e } from "../Icon/Icon.js";
+import { Portal as Ke } from "../Portal/Portal.js";
+const Fe = $e((Z, ee) => {
   const {
-    onSelect: b,
-    children: S,
-    initiator: Z,
-    onInitiatorClick: N,
-    renderOption: B,
-    emptyItemsResult: ee,
-    autoOpen: te = !0,
-    width: R = "100%",
-    minWidth: H,
-    maxWidth: T = "initial",
-    styles: oe,
-    activeIndex: A,
-    value: I,
+    onSelect: R,
+    children: v,
+    initiator: te,
+    onInitiatorClick: B,
+    renderOption: H,
+    emptyItemsResult: oe,
+    autoOpen: re = !0,
+    width: A = "100%",
+    minWidth: T,
+    maxWidth: P = "initial",
+    styles: ne,
+    activeIndex: O,
+    value: $,
     onChange: k,
-    placeholder: ne = xe,
-    itemStringifier: re = (e) => G(e, "name", String(e)),
-    itemIdentifier: ie = (e, t) => (e == null ? void 0 : e.value) === (t == null ? void 0 : t.value),
-    disabled: o = !1,
-    items: u,
-    adornmentStart: $,
-    adornmentEnd: P,
-    dropdownMaxHeight: L = "240px"
-  } = Q, {
-    theme: a
-  } = He(), i = x(null), O = x(null), y = x(null), [s, d] = m(!1), [f, _] = m(I), [se, ce] = m(R), [le, de] = m("bottom"), [ae, me] = m(L), [pe, ue] = m(-9999), [fe, K] = m(void 0), [we, F] = m(void 0), he = 1;
-  E(() => {
-    if (s && (y.current || i.current)) {
-      const e = y.current || i.current;
-      ce(`${e.getBoundingClientRect().width}px`);
+    placeholder: I = We,
+    itemStringifier: ie = (e) => V(e, "name", String(e)),
+    itemIdentifier: se = (e, t) => (e == null ? void 0 : e.value) === (t == null ? void 0 : t.value),
+    disabled: r = !1,
+    items: p,
+    adornmentStart: _,
+    adornmentEnd: K,
+    dropdownMaxHeight: C = "240px"
+  } = Z, {
+    theme: m
+  } = He(), f = Te(), c = x(null), L = x(null), D = x(null), [l, u] = w(!1), [o, F] = w($), [ce, le] = w(A), [de, ae] = w("bottom"), [pe, ue] = w(C), [me, fe] = w(-9999), [we, U] = w(void 0), [ge, z] = w(void 0), he = 1;
+  y(() => {
+    if (l && (f.debug(`${s}: Open`, {
+      trigger: "programmatic",
+      hasItems: !!(p != null && p.length || v),
+      placeholder: I,
+      currentValue: o == null ? void 0 : o.value
+    }), D.current || c.current)) {
+      const e = D.current || c.current;
+      le(`${e.getBoundingClientRect().width}px`);
     }
-  }, [s, R]);
-  const D = q(() => {
-    const e = y.current || i.current;
+  }, [l, A, p, v, I, o]);
+  const S = Q(() => {
+    const e = D.current || c.current;
     if (!e) return;
-    const t = e.getBoundingClientRect(), r = window.innerHeight || document.documentElement.clientHeight, c = r - t.bottom, n = t.top, h = parseFloat(String(L)), p = he, z = c >= h + p, j = n >= h + p;
-    let v = "bottom";
-    !z && j ? v = "top" : !z && !j && (v = c >= n ? "bottom" : "top"), de(v);
-    const Se = (v === "bottom" ? c : n) - p, Re = Math.max(0, Math.min(h, Se));
-    me(`${Math.floor(Re)}px`), ue(Math.floor(t.left)), v === "bottom" ? (K(Math.floor(t.bottom + p)), F(void 0)) : (K(void 0), F(Math.floor(r - t.top + p)));
-  }, [L]);
-  E(() => {
-    if (!s) return;
-    D();
-    const e = () => D(), t = () => D();
+    const t = e.getBoundingClientRect(), i = window.innerHeight || document.documentElement.clientHeight, d = i - t.bottom, n = t.top, b = parseFloat(String(C)), g = he, q = d >= b + g, G = n >= b + g;
+    let E = "bottom";
+    !q && G ? E = "top" : !q && !G && (E = d >= n ? "bottom" : "top"), ae(E);
+    const Re = (E === "bottom" ? d : n) - g, Ae = Math.max(0, Math.min(b, Re));
+    ue(`${Math.floor(Ae)}px`), fe(Math.floor(t.left)), E === "bottom" ? (U(Math.floor(t.bottom + g)), z(void 0)) : (U(void 0), z(Math.floor(i - t.top + g)));
+  }, [C]);
+  y(() => {
+    if (!l) return;
+    S();
+    const e = () => S(), t = () => S();
     return window.addEventListener("resize", e), window.addEventListener("scroll", t, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", t, !0);
     };
-  }, [s, D]);
-  const W = q(() => {
-    if (i.current && !o) {
-      const e = C({
-        initial: i.current,
-        root: i.current,
+  }, [l, S]);
+  const W = Q(() => {
+    if (c.current && !r) {
+      const e = N({
+        initial: c.current,
+        root: c.current,
         keyboard: !0
       });
       e == null || e.focus();
     }
-  }, [o]), ve = () => u != null && u.length ? be() : ee, U = ({
+  }, [r]), ve = () => p != null && p.length ? Se() : oe, j = ({
     event: e,
     data: t
   }) => {
-    o || (e.preventDefault(), _(t), k == null || k(t), b == null || b({
+    r || (e.preventDefault(), f.debug(`${s}: Select`, {
+      value: t == null ? void 0 : t.value,
+      name: t == null ? void 0 : t.name,
+      previousValue: o == null ? void 0 : o.value,
+      previousName: o == null ? void 0 : o.name
+    }), F(t), k == null || k(t), R == null || R({
       event: e,
       data: t
-    }), d(!1), setTimeout(() => {
+    }), u(!1), setTimeout(() => {
       W();
     }));
-  }, Ee = {
-    onSelect: U,
-    value: f,
-    itemIdentifier: ie
-  }, ge = (e) => {
-    if (!(o || ![w.ARROW_DOWN, w.ARROW_UP].includes(e.key)))
+  }, be = {
+    onSelect: j,
+    value: o,
+    itemIdentifier: se
+  }, Ee = (e) => {
+    if (!(r || ![h.ARROW_DOWN, h.ARROW_UP].includes(e.key)))
       switch (e.preventDefault(), e.key) {
-        case w.ARROW_DOWN:
-          V(e, !1);
+        case h.ARROW_DOWN:
+          Y(e, !1);
           break;
-        case w.ARROW_UP:
-          V(e, !0);
+        case h.ARROW_UP:
+          Y(e, !0);
           break;
       }
-  }, V = (e, t) => {
-    if (o)
+  }, Y = (e, t) => {
+    if (r)
       return;
     e.preventDefault();
-    const r = O.current;
-    if (!r) {
-      d(!0);
+    const i = L.current;
+    if (!i) {
+      f.debug(`${s}: Open`, {
+        trigger: "arrow",
+        direction: t ? "up" : "down"
+      }), u(!0);
       return;
     }
-    const c = t ? r.appendChild(document.createElement("div")) : r, n = C({
-      initial: c,
+    f.debug(`${s}: Arrow navigation`, {
+      direction: t ? "up" : "down"
+    });
+    const d = t ? i.appendChild(document.createElement("div")) : i, n = N({
+      initial: d,
       previous: t,
-      root: r
+      root: i
     });
     n == null || n.focus();
   }, ye = () => {
-    !o && te && d(!s);
+    if (!r && re) {
+      const e = !l;
+      f.debug(`${s}: ${e ? "Open" : "Close"}`, {
+        trigger: "click"
+      }), u(e);
+    }
   }, De = (e) => {
-    o || (N ? N(e) : ye());
-  }, be = () => /* @__PURE__ */ l(Ae, { children: u == null ? void 0 : u.map((e, t) => B ? B({
+    r || (B ? B(e) : ye());
+  }, Se = () => /* @__PURE__ */ a(Oe, { children: p == null ? void 0 : p.map((e, t) => H ? H({
     item: e,
     index: t,
-    isActiveItem: A == t,
-    className: J(A) === t ? "active" : ""
-  }) : /* @__PURE__ */ l(Oe, { value: e.value, name: e.name, className: `${J(A) === t ? "active" : ""}` }, `dropdown-item-${e.value}-${t}`)) });
-  return E(() => {
-    _(I);
-  }, [I]), E(() => {
-    if (!s) return;
+    isActiveItem: O == t,
+    className: X(O) === t ? "active" : ""
+  }) : /* @__PURE__ */ a(Ce, { value: e.value, name: e.name, className: `${X(O) === t ? "active" : ""}` }, `dropdown-item-${e.value}-${t}`)) });
+  return y(() => {
+    F($);
+  }, [$]), y(() => {
+    if (!l) return;
     const e = (t) => {
-      const r = t.target, c = i.current, n = O.current, h = !!c && c.contains(r), p = !!n && n.contains(r);
-      !h && !p && d(!1);
+      const i = t.target, d = c.current, n = L.current, b = !!d && d.contains(i), g = !!n && n.contains(i);
+      !b && !g && (f.debug(`${s}: Close`, {
+        trigger: "outsideClick"
+      }), u(!1));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [s]), E(() => {
+  }, [l]), y(() => {
     const e = (t) => {
-      var r;
-      if (!(!s || o)) {
-        if (t.key === w.ESCAPE)
-          t.preventDefault(), d(!1), W();
-        else if (t.key === w.TAB && (t.preventDefault(), d(!1), i.current)) {
-          const c = document.createElement("div");
-          (r = i.current.parentNode) == null || r.insertBefore(c, i.current.nextSibling);
-          const n = C({
-            initial: c,
+      var i;
+      if (!(!l || r)) {
+        if (t.key === h.ESCAPE)
+          t.preventDefault(), f.debug(`${s}: Close`, {
+            trigger: "escape"
+          }), u(!1), W();
+        else if (t.key === h.TAB && (t.preventDefault(), f.debug(`${s}: Close`, {
+          trigger: "tab"
+        }), u(!1), c.current)) {
+          const d = document.createElement("div");
+          (i = c.current.parentNode) == null || i.insertBefore(d, c.current.nextSibling);
+          const n = N({
+            initial: d,
             root: document.body,
             keyboard: !0
           });
-          c.remove(), n == null || n.focus();
+          d.remove(), n == null || n.focus();
         }
       }
     };
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [s, o, W]), ke(X, () => ({
-    ref: i,
-    isOpen: s,
-    selectedValue: f,
-    onSelect: U,
+  }, [l, r, W]), ke(ee, () => ({
+    ref: c,
+    isOpen: l,
+    selectedValue: o,
+    onSelect: j,
     open: () => {
-      o || d(!0);
+      r || u(!0);
     },
-    close: () => d(!1),
+    close: () => u(!1),
     toggle: () => {
-      o || d((e) => !e);
+      r || u((e) => !e);
     }
-  })), /* @__PURE__ */ l(Te.Provider, { value: Ee, children: /* @__PURE__ */ Y(Me, { ref: i, theme: a, "data-testid": g, styles: {
-    ...oe,
-    width: R,
-    maxWidth: T,
-    minWidth: H
-  }, $disabled: o, children: [
-    /* @__PURE__ */ l(Ce, { ref: y, theme: a, onClick: De, onKeyDown: ge, "data-testid": `${g}-initiator-wrapper`, children: Z ?? /* @__PURE__ */ l(Ne, { theme: a, disabled: o, iconStart: $ && /* @__PURE__ */ l(M, { theme: a, children: $ }), iconEnd: /* @__PURE__ */ Y(M, { theme: a, children: [
-      P && /* @__PURE__ */ l(M, { theme: a, children: P }),
-      /* @__PURE__ */ l(Be, { theme: a, $isOpen: s, children: /* @__PURE__ */ l($e, { ...G(a, "select.arrowIcon", {
+  })), /* @__PURE__ */ a(Pe.Provider, { value: be, children: /* @__PURE__ */ J(xe, { ref: c, theme: m, "data-testid": s, styles: {
+    ...ne,
+    width: A,
+    maxWidth: P,
+    minWidth: T
+  }, $disabled: r, children: [
+    /* @__PURE__ */ a(Me, { ref: D, theme: m, onClick: De, onKeyDown: Ee, "data-testid": `${s}-initiator-wrapper`, children: te ?? /* @__PURE__ */ a(Ne, { theme: m, disabled: r, iconStart: _ && /* @__PURE__ */ a(M, { theme: m, children: _ }), iconEnd: /* @__PURE__ */ J(M, { theme: m, children: [
+      K && /* @__PURE__ */ a(M, { theme: m, children: K }),
+      /* @__PURE__ */ a(Be, { theme: m, $isOpen: l, children: /* @__PURE__ */ a(_e, { ...V(m, "select.icons.arrowIcon", {
         name: "arrowDown"
       }) }) })
-    ] }), "data-testid": `${g}-initiator`, children: f != null && f.value ? re(f) : ne }) }),
-    s && !o && /* @__PURE__ */ l(Pe, { withWrapper: !1, blocksScroll: !0, children: /* @__PURE__ */ l(We, { "data-testid": `${g}-dropdown`, styles: {
+    ] }), "data-testid": `${s}-initiator`, children: o != null && o.value ? ie(o) : I }) }),
+    l && !r && /* @__PURE__ */ a(Ke, { withWrapper: !1, blocksScroll: !0, children: /* @__PURE__ */ a(Le, { "data-testid": `${s}-dropdown`, styles: {
       position: "fixed",
-      width: se,
-      maxWidth: T,
-      minWidth: H,
-      maxHeight: ae,
-      left: pe,
-      ...le === "bottom" ? {
-        top: fe
+      width: ce,
+      maxWidth: P,
+      minWidth: T,
+      maxHeight: pe,
+      left: me,
+      ...de === "bottom" ? {
+        top: we
       } : {
-        bottom: we
+        bottom: ge
       }
-    }, ref: O, children: Array.isArray(S) || Le(S) ? S : ve() }) })
+    }, ref: L, children: Array.isArray(v) || Ie(v) ? v : ve() }) })
   ] }) });
 });
-_e.displayName = g;
+Fe.displayName = s;
 export {
-  _e as Select
+  Fe as Select
 };

package/components/core/Select/Select.types.d.ts

@@ -1,7 +1,6 @@
 import { PropsWithChildren, ReactNode, MouseEvent, ReactEventHandler, Ref } from 'react';
 import { Theme } from '../../../hooks/useTheme';
-import { ButtonProps, CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
-import { OnSelectProps } from '../types/index.types';
+import { ButtonProps, CommonCssComponentProps, CommonCssComponentStyledProps, OnSelectProps } from '../..';
 export type ItemIdentifier = (selected: Option | null, current: Option) => boolean;
 export type SelectOnSelect = (props: OnSelectProps) => void;
 export interface Option<V = unknown> {
@@ -46,10 +45,9 @@ export interface SelectRef {
     onSelect: SelectOnSelect;
     open: () => void;
     close: () => void;
-    toggle: () => void;
 }
 export interface SelectContextType {
-    onSelect?: SelectOnSelect;
+    onSelect: SelectOnSelect;
     value?: Option | null;
     itemIdentifier?: ItemIdentifier;
 }

package/components/core/Snackbar/Snackbar.js

@@ -1,48 +1,71 @@
 "use client";
-import { jsxs as a, jsx as t } from "@emotion/react/jsx-runtime";
-import { forwardRef as T, useState as b, useCallback as A, useEffect as I } from "react";
-import { DEFAULT_VARIANT as N, ANIMATION_DURATION as v, COMPONENT_NAME as O } from "./constants.js";
-import { SnackbarStyled as $, CloseButtonWrapperStyled as g, CloseButtonIconStyled as x, SnackbarBodyStyled as B, SnackbarIconStyled as E, SnackbarContentStyled as D, SnackbarTitleStyled as M, SnackbarDescriptionStyled as R, SnackbarActionsContainerStyled as _ } from "./SnackbarStyled.js";
-import { useTheme as j } from "../../../hooks/useTheme/useTheme.js";
+import { jsxs as S, jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as I, useState as N, useCallback as h, useEffect as p } from "react";
+import { COMPONENT_NAME as s, DEFAULT_VARIANT as x, ANIMATION_DURATION as B } from "./constants.js";
+import { SnackbarStyled as E, CloseButtonWrapperStyled as D, CloseButtonIconStyled as M, SnackbarBodyStyled as R, SnackbarIconStyled as _, SnackbarContentStyled as j, SnackbarTitleStyled as L, SnackbarDescriptionStyled as O, SnackbarActionsContainerStyled as U } from "./SnackbarStyled.js";
+import { useTheme as w } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as F } from "../../../hooks/useLogger/useLogger.js";
 import { convertToInlineBoxStyles as P } from "../../../tokens/utils.js";
-const q = T((m, S) => {
+const K = I(({
+  title: c,
+  message: f,
+  variant: e = x,
+  isAnimated: u = !0,
+  duration: n,
+  onClose: o,
+  action: i,
+  colored: k = !1,
+  dismissOnClick: a = !0,
+  icon: y,
+  position: t,
+  ...T
+}, g) => {
   const {
-    title: u,
-    message: l,
-    variant: s = N,
-    isAnimated: i = !0,
-    duration: n,
-    onClose: r,
-    action: c,
-    colored: f = !1,
-    dismissOnClick: C = !0,
-    icon: k,
-    ...p
-  } = m, {
-    theme: e
-  } = j(), [d, h] = b(!1), o = A(() => {
-    h(!0), setTimeout(() => {
-      r == null || r();
-    }, i ? v : 0);
-  }, [i, r]);
-  return I(() => {
+    theme: r
+  } = w(), m = F(), [b, A] = N(!1), d = h(() => {
+    m.debug(`${s}: Close`, {
+      variant: e,
+      position: t,
+      title: c,
+      hasAction: !!i
+    }), A(!0), setTimeout(() => {
+      o == null || o();
+    }, u ? B : 0);
+  }, [u, o, e, t, c, i]);
+  p(() => {
     if (!n) return;
-    const y = setTimeout(() => {
-      o();
+    m.debug(`${s}: Auto-dismiss timer started`, {
+      duration: n,
+      variant: e,
+      position: t
+    });
+    const C = setTimeout(() => {
+      m.debug(`${s}: Auto-dismiss timer fired`, {
+        variant: e,
+        position: t
+      }), d();
     }, n);
-    return () => clearTimeout(y);
-  }, [n]), /* @__PURE__ */ a($, { ref: S, $variant: s, $colored: f, $isClosing: d, $isAnimated: i, onClick: C ? o : void 0, theme: e, role: "alert", "aria-live": "polite", "aria-hidden": d, "data-testid": O, ...P(p), children: [
-    r && /* @__PURE__ */ t(g, { theme: e, onClick: o, "aria-label": "Close notification", children: /* @__PURE__ */ t(x, { theme: e }) }),
-    /* @__PURE__ */ a(B, { theme: e, children: [
-      k || /* @__PURE__ */ t(E, { theme: e, $variant: s }),
-      /* @__PURE__ */ a(D, { theme: e, children: [
-        /* @__PURE__ */ t(M, { children: u }),
-        l && /* @__PURE__ */ t(R, { children: l }),
-        c && /* @__PURE__ */ t(_, { theme: e, children: c })
+    return () => clearTimeout(C);
+  }, [n, d, e, t]);
+  const $ = h(() => {
+    a && (m.debug(`${s}: Click (dismiss)`, {
+      variant: e,
+      position: t,
+      title: c
+    }), d());
+  }, [a, d, e, t, c]);
+  return /* @__PURE__ */ S(E, { ref: g, $variant: e, $colored: k, $isClosing: b, $isAnimated: u, onClick: a ? $ : void 0, theme: r, role: "alert", "aria-live": "polite", "aria-hidden": b, "data-testid": s, ...P(T), children: [
+    o && /* @__PURE__ */ l(D, { theme: r, onClick: d, "aria-label": "Close notification", children: /* @__PURE__ */ l(M, { theme: r, $variant: e }) }),
+    /* @__PURE__ */ S(R, { theme: r, children: [
+      y || /* @__PURE__ */ l(_, { theme: r, $variant: e }),
+      /* @__PURE__ */ S(j, { theme: r, children: [
+        /* @__PURE__ */ l(L, { theme: r, children: c }),
+        f && /* @__PURE__ */ l(O, { theme: r, children: f }),
+        i && /* @__PURE__ */ l(U, { theme: r, children: i })
       ] })
     ] })
   ] });
 });
 export {
-  q as Snackbar
+  K as Snackbar
 };

package/components/core/Snackbar/Snackbar.types.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssComponentStyledProps } from '../../index.types';
-import { IconProps } from '../Icon';
 import { EnumOrPrimitive, SnackbarPosition, SnackbarVariant } from '../../../types';
 export interface SnackbarOptions {
     title?: ReactNode;
@@ -28,7 +27,7 @@ export interface SnackbarStyledProps extends BoxCssComponentStyledProps {
     $colored: boolean;
 }
 export type SnackbarCommonStyledProps = CommonCssComponentStyledProps;
-export interface SnackbarIconProps extends Partial<Omit<IconProps, 'onClick'>>, CommonCssComponentStyledProps {
+export interface SnackbarIconProps extends CommonCssComponentStyledProps {
     $variant: EnumOrPrimitive<SnackbarVariant>;
 }
 export interface SnackbarContainerStyledProps extends CommonCssComponentStyledProps {

package/components/core/Snackbar/SnackbarManager.js

@@ -1,48 +1,63 @@
 "use client";
 import { jsx as m } from "@emotion/react/jsx-runtime";
-import { useState as a, useEffect as l, useMemo as S } from "react";
+import { useState as S, useEffect as g, useMemo as h } from "react";
 import { v4 as A } from "uuid";
-import { SnackbarContainerStyled as h } from "./SnackbarStyled.js";
-import { Snackbar as E } from "./Snackbar.js";
-import { DEFAULT_DURATION as N, DEFAULT_POSITION as p, DEFAULT_VARIANT as T, COMPONENT_SNACKBAR_MANAGER_NAME as b } from "./constants.js";
-import { get as O } from "../../../utils/helpers.js";
-import { useTheme as _ } from "../../../hooks/useTheme/useTheme.js";
+import { SnackbarContainerStyled as E } from "./SnackbarStyled.js";
+import { Snackbar as N } from "./Snackbar.js";
+import { DEFAULT_DURATION as T, DEFAULT_POSITION as a, DEFAULT_VARIANT as b, COMPONENT_SNACKBAR_MANAGER_NAME as u } from "./constants.js";
+import { get as v } from "../../../utils/helpers.js";
+import { useTheme as O } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as _ } from "../../../hooks/useLogger/useLogger.js";
 import { Portal as C } from "../Portal/Portal.js";
 let i = [];
-const s = [], d = () => {
-  s.forEach((e) => e(i));
+const c = [], d = () => {
+  c.forEach((e) => e(i));
 }, M = (e) => {
-  const c = {
-    id: O(e, "id", A()),
-    variant: T,
-    position: p,
-    duration: N,
+  const s = {
+    id: v(e, "id", A()),
+    variant: b,
+    position: a,
+    duration: T,
     ...e
   };
-  i = [...i, c].slice(-50), d();
-}, g = (e) => {
+  i = [...i, s].slice(-50), d();
+}, x = (e) => {
   i = i.filter((n) => n.id !== e), d();
-}, v = (e) => M(e), y = () => {
+}, q = (e) => M(e), B = () => {
   const {
     theme: e
-  } = _(), [n, c] = a(i);
-  l(() => {
-    const r = (o) => c(o);
-    return s.push(r), () => {
-      const o = s.indexOf(r);
-      o > -1 && s.splice(o, 1);
+  } = O(), n = _(), [s, l] = S(i);
+  g(() => {
+    const r = (o) => {
+      n.debug(`${u}: Snackbar queue updated`, {
+        count: o.length,
+        snackbars: o.map((t) => ({
+          id: t.id,
+          variant: t.variant,
+          position: t.position,
+          title: t.title
+        }))
+      }), l(o);
+    };
+    return c.push(r), () => {
+      const o = c.indexOf(r);
+      o > -1 && c.splice(o, 1);
     };
   }, []);
-  const f = S(() => n.reduce((r, o) => {
-    const t = o.position || p;
+  const f = h(() => s.reduce((r, o) => {
+    const t = o.position || a;
     return r[t] = r[t] || [], r[t].push(o), r;
-  }, {}), [n]);
-  return n.length ? /* @__PURE__ */ m(C, { withWrapper: !1, "data-testid": b, children: Object.entries(f).map(([r, o]) => /* @__PURE__ */ m(h, { theme: e, $position: r, children: o.map((t) => /* @__PURE__ */ m(E, { ...t, onClose: () => {
-    var u;
-    (u = t.onClose) == null || u.call(t), g(t.id);
+  }, {}), [s]);
+  return s.length ? /* @__PURE__ */ m(C, { withWrapper: !1, "data-testid": u, children: Object.entries(f).map(([r, o]) => /* @__PURE__ */ m(E, { theme: e, $position: r, children: o.map((t) => /* @__PURE__ */ m(N, { ...t, onClose: () => {
+    var p;
+    n.debug(`${u}: Snackbar closed via manager`, {
+      id: t.id,
+      variant: t.variant,
+      position: t.position
+    }), (p = t.onClose) == null || p.call(t), x(t.id);
   } }, t.id)) }, r)) }) : null;
 };
 export {
-  y as SnackbarManager,
-  v as showSnackbar
+  B as SnackbarManager,
+  q as showSnackbar
 };

package/components/core/Snackbar/SnackbarStyled.d.ts

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
-import { SnackbarCommonStyledProps, SnackbarContainerStyledProps, SnackbarIconProps, SnackbarStyledProps } from './Snackbar.types';
+import { CommonCssComponentStyledProps } from '../..';
+import { SnackbarCommonStyledProps, SnackbarContainerStyledProps, SnackbarIconProps, SnackbarStyledProps } from './';
 export declare const SnackbarStyled: import('react').ForwardRefExoticComponent<Omit<SnackbarStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const CloseButtonWrapperStyled: (props: SnackbarCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const CloseButtonIconStyled: (props: SnackbarCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CloseButtonIconStyled: (props: SnackbarIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SnackbarIconStyled: (props: SnackbarIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SnackbarBodyStyled: (props: SnackbarCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SnackbarContentStyled: (props: SnackbarCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const SnackbarTitleStyled: (props: PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const SnackbarDescriptionStyled: (props: PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SnackbarTitleStyled: (props: CommonCssComponentStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SnackbarDescriptionStyled: (props: CommonCssComponentStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SnackbarActionsContainerStyled: (props: SnackbarCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SnackbarContainerStyled: (props: SnackbarContainerStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;