se-design 1.0.75 → 1.0.76-dev2

package/dist/index27.js

@@ -1,87 +1,27 @@
-import d, { useMemo as S, useRef as D, useEffect as c } from "react";
-import { Icon as j } from "./index5.js";
-import { getA11yNameAttributes as B } from "./index71.js";
-import { useDismissOnEscape as M } from "./index196.js";
+import e from "react";
+import { ShimmerLoader as c } from "./index55.js";
 /* empty css         */
-function m() {
-  return m = Object.assign ? Object.assign.bind() : function(r) {
-    for (var o = 1; o < arguments.length; o++) {
-      var a = arguments[o];
-      for (var n in a) ({}).hasOwnProperty.call(a, n) && (r[n] = a[n]);
-    }
-    return r;
-  }, m.apply(null, arguments);
-}
-const F = (r) => {
+const f = (r) => {
   const {
-    content: o,
-    className: a = "",
-    alignment: n,
-    noShadow: C,
-    position: i = "fixed",
-    isOpen: t,
-    displayCloseSidebar: N,
-    onClose: u,
-    onSidebarUnmount: b,
-    onPathChange: f,
-    style: s,
-    automationId: x,
-    id: O,
-    currentPath: y = "",
-    closeSidebarIcon: R = "close",
-    closeAriaLabel: E = "Close sidebar",
-    animateSidebar: I = !0,
-    a11yRole: l,
-    ariaLabel: g,
-    ariaLabelledBy: p,
-    ariaDescribedBy: h
-  } = r, v = S(() => l || (i === "fixed" ? "dialog" : "complementary"), [l, i]), _ = v === "dialog", A = S(() => B({
-    ariaLabel: g,
-    ariaLabelledBy: p,
-    ariaDescribedBy: h
-  }), [g, p, h]), w = D(null);
-  c(() => () => {
-    b && b();
-  }, []), c(() => (document.body.style.overflow = t ? "hidden" : "scroll", () => {
-    document.body.style.overflow = "auto";
-  }), [t]), c(() => {
-    f && f(y);
-  }, [y]), M({
-    containerRef: w,
-    onDismiss: u,
-    enabled: t
-  });
-  const L = () => {
-    let e = "se-design-sidebar-overlay-container z-[1000]";
-    return e += a.length > 0 ? ` ${a}` : "", e += n === "left" ? " left-aligned" : " right-aligned", e += C ? " no-shadow" : "", e += i.length > 0 ? ` ${i}` : "", e += t ? " open-sidebar" : " closed-sidebar", I || (e += t ? "" : " hidden"), e;
-  }, P = () => ({
-    ...s,
-    ...t && s?.width ? {
-      width: s?.width
-    } : {
-      width: "0px"
-    }
-  });
-  return /* @__PURE__ */ d.createElement("div", m({
-    ref: w,
-    id: O,
-    className: L(),
-    style: P(),
-    "data-automation-id": x,
-    tabIndex: -1,
-    role: v,
-    "aria-modal": _ ? "true" : void 0
-  }, A), /* @__PURE__ */ d.createElement("div", {
-    className: "overlay-content"
-  }, N && /* @__PURE__ */ d.createElement(j, {
-    name: R,
-    onClick: u,
-    className: "overlay-close",
-    ariaLabel: E,
-    automationId: "sidebar_overlay_close"
-  }), o));
+    noOfRows: o = 2,
+    noOfColumns: a = 4,
+    colSpan: n = [2, 0, 0]
+  } = r;
+  return [...Array(o)].map((l, m) => /* @__PURE__ */ e.createElement("tr", {
+    key: `tr-${m}`,
+    className: "se-design-table-content-loader"
+  }, [...Array(a)].map((p, t) => /* @__PURE__ */ e.createElement("td", {
+    colSpan: n[t],
+    key: `td-${t}`
+  }, /* @__PURE__ */ e.createElement(c, {
+    structure: [{
+      type: "text",
+      width: "80%",
+      height: 20
+    }]
+  })))));
 };
 export {
-  F as SidebarOverlay
+  f as TableContentLoader
 };
 //# sourceMappingURL=index27.js.map

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useMemo } from 'react';\nimport { Icon } from 'components/Icon';\nimport { getA11yNameAttributes, /* useFocusTrap, */ useDismissOnEscape } from '../../utils/a11y';\n\nimport './style.scss';\n\ntype SidebarOverlayA11yRole = 'dialog' | 'complementary';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  id?: string;\n  position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  /**\n   * Accessible label for the close button. Defaults to 'Close sidebar'.\n   */\n  closeAriaLabel?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n  animateSidebar?: boolean;\n  /**\n   * Accessibility role that determines the full behavior bundle.\n   * - 'dialog': modal drawer (focus trap, scroll lock, aria-modal, Escape closes)\n   * - 'complementary': persistent side panel (no trap, no forced focus, no scroll lock)\n   * If not provided, derives from position: fixed|absolute → 'dialog', static|relative|'' → 'complementary'\n   */\n  a11yRole?: SidebarOverlayA11yRole;\n  /**\n   * Accessible name when no visible label exists.\n   * Prefer ariaLabelledBy when a visible title exists inside the sidebar.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this sidebar.\n   * Preferred over ariaLabel when a visible title exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this sidebar (additional context).\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const {\n    content,\n    className = '',\n    alignment,\n    noShadow,\n    position = 'fixed',\n    isOpen,\n    displayCloseSidebar,\n    onClose,\n    onSidebarUnmount,\n    onPathChange,\n    style,\n    automationId,\n    id,\n    currentPath = '',\n    closeSidebarIcon = 'close',\n    closeAriaLabel = 'Close sidebar',\n    animateSidebar = true,\n    a11yRole,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  } = props;\n\n  // Compute effective a11yRole: override or derive from position\n  const effectiveA11yRole = useMemo<SidebarOverlayA11yRole>(() => {\n    if (a11yRole) return a11yRole;\n    // - fixed: modal drawer (dialog bundle)\n    // - absolute/static/relative/'' : persistent side panel (complementary bundle)\n    return position === 'fixed' ? 'dialog' : 'complementary';\n  }, [a11yRole, position]);\n  \n  const isModal = effectiveA11yRole === 'dialog';\n\n  // Get accessible name attributes\n  const accessibleNameProps = useMemo(\n    () => getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy }),\n    [ariaLabel, ariaLabelledBy, ariaDescribedBy]\n  );\n\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n\n  useDismissOnEscape({\n    containerRef: sidebarRef,\n    onDismiss: onClose,\n    enabled: isOpen\n  });\n\n  // Focus trap: only in modal mode\n  // useFocusTrap({\n  //   enabled: Boolean(isModal && isOpen),\n  //   containerRef: sidebarRef,\n  //   restoreFocus: true,\n  //   initialFocus: 'first'\n  // });\n\n  const getSidebarClassName = () => {\n    let defaultClass = `se-design-sidebar-overlay-container z-[1000]`;\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    if(!animateSidebar) {\n      defaultClass += isOpen ? '' : ' hidden';\n    }\n    return defaultClass;\n  };\n\n  const getSidebarStyle = () => {\n    return {\n      ...style,\n      ...(isOpen && style?.width ? { width: style?.width } : { width: '0px' })\n    };\n  };\n\n  return (\n    <div\n      ref={sidebarRef}\n      id={id}\n      className={getSidebarClassName()}\n      style={getSidebarStyle()}\n      data-automation-id={automationId}\n      tabIndex={-1}\n      role={effectiveA11yRole}\n      aria-modal={isModal ? 'true' : undefined}\n      {...accessibleNameProps}\n    >\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <Icon\n            name={closeSidebarIcon}\n            onClick={onClose}\n            className=\"overlay-close\"\n            ariaLabel={closeAriaLabel}\n            automationId=\"sidebar_overlay_close\"\n          />\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","id","currentPath","closeSidebarIcon","closeAriaLabel","animateSidebar","a11yRole","ariaLabel","ariaLabelledBy","ariaDescribedBy","effectiveA11yRole","useMemo","isModal","accessibleNameProps","getA11yNameAttributes","sidebarRef","useRef","useEffect","document","body","overflow","useDismissOnEscape","containerRef","onDismiss","enabled","getSidebarClassName","defaultClass","length","getSidebarStyle","width","React","createElement","_extends","ref","tabIndex","role","undefined","Icon","name","onClick"],"mappings":"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"}
+{"version":3,"file":"index27.js","sources":["../src/components/TableContentLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ShimmerLoader } from 'components/ShimmerLoader';\nimport './style.scss';\n\nexport interface TableContentLoaderProps {\n  noOfRows?: number;\n  noOfColumns?: number;\n  colSpan?: number[];\n}\n\nexport const TableContentLoader: FC<TableContentLoaderProps> = (props) => {\n  const { noOfRows = 2, noOfColumns = 4, colSpan = [2, 0, 0] } = props;\n\n  return [...Array(noOfRows)].map((_, index) => (\n    <tr key={`tr-${index}`} className=\"se-design-table-content-loader\">\n      {[...Array(noOfColumns)].map((_, idx) => (\n        <td colSpan={colSpan[idx]} key={`td-${idx}`}>\n          <ShimmerLoader\n            structure={[{ type: 'text', width: '80%', height: 20 }]}\n          />\n        </td>\n      ))}\n    </tr>\n  ));\n};\n"],"names":["React__default","ShimmerLoader","TableContentLoader","props","noOfRows","noOfColumns","colSpan","Array","map","_","index","React","createElement","key","className","idx","structure","type","width","height"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,iBAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAmDC,CAAAA,MAAU;AACxE,QAAM;AAAA,IAAEC,UAAAA,IAAW;AAAA,IAAGC,aAAAA,IAAc;AAAA,IAAGC,SAAAA,IAAU,CAAC,GAAG,GAAG,CAAC;AAAA,EAAA,IAAMH;AAE/D,SAAO,CAAC,GAAGI,MAAMH,CAAQ,CAAC,EAAEI,IAAI,CAACC,GAAGC,MAClCC,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIC,KAAK,MAAMH,CAAK;AAAA,IAAII,WAAU;AAAA,EAAA,GAC/B,CAAC,GAAGP,MAAMF,CAAW,CAAC,EAAEG,IAAI,CAACC,GAAGM,MAC/BJ,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIN,SAASA,EAAQS,CAAG;AAAA,IAAGF,KAAK,MAAME,CAAG;AAAA,EAAA,GACvCJ,gBAAAA,EAAAC,cAACX,GAAa;AAAA,IACZe,WAAW,CAAC;AAAA,MAAEC,MAAM;AAAA,MAAQC,OAAO;AAAA,MAAOC,QAAQ;AAAA,IAAA,CAAI;AAAA,EAAA,CACvD,CACC,CACL,CACC,CACL;AACH;"}

package/dist/index28.js

@@ -1,147 +1,110 @@
-import r, { useState as A, useMemo as _, useRef as F, useEffect as j } from "react";
-import { Icon as O } from "./index5.js";
-import { Popover as B } from "./index18.js";
-import { MenuList as z } from "./index17.js";
-import { useStableId as H } from "./index192.js";
-import { getA11yNameAttributes as U } from "./index71.js";
-import { useTabsA11y as V, getPanelId as q } from "./index69.js";
+import i, { useMemo as D, useRef as j, useEffect as m } from "react";
+import { Icon as M } from "./index6.js";
+import { getA11yNameAttributes as $ } from "./index78.js";
+import { useFocusTrap as k } from "./index72.js";
+import { useDismissOnEscape as z } from "./index206.js";
+import { useFocusSentinel as T } from "./index207.js";
 /* empty css         */
-function i() {
-  return i = Object.assign ? Object.assign.bind() : function(s) {
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(s) {
     for (var o = 1; o < arguments.length; o++) {
-      var c = arguments[o];
-      for (var d in c) ({}).hasOwnProperty.call(c, d) && (s[d] = c[d]);
+      var n = arguments[o];
+      for (var r in n) ({}).hasOwnProperty.call(n, r) && (s[r] = n[r]);
     }
     return s;
-  }, i.apply(null, arguments);
+  }, u.apply(null, arguments);
 }
-const re = ({
-  defaultActiveTab: s,
-  tabs: o,
-  onTabChange: c,
-  primaryTabCount: d,
-  headingLevel: g,
-  id: $,
-  ariaLabel: L = "Tabs",
-  ariaLabelledBy: K,
-  panelId: p
-}) => {
-  const M = s || (o[0] ? o[0].id : ""), [m, w] = A(M), [y, h] = A(!1), T = d ?? o?.length, f = o.slice(0, T), u = o.slice(T), b = u.find((e) => e.id === m), E = o.some((e) => e.renderTabContent), k = H($, "tabs"), R = _(() => {
-    const e = f.filter((l) => !l.disabled), t = u.filter((l) => !l.disabled), n = e.map((l) => l.id);
-    return t.length > 0 ? [...n, "overflow"] : n;
-  }, [f, u]), {
-    getTabProps: I,
-    getPanelProps: S,
-    handleKeyDown: x,
-    setFocusedTabId: C
-  } = V({
-    itemIds: R,
-    activeItem: m,
-    orientation: "horizontal",
-    idBase: k,
-    includePanelLinks: E || !!p,
-    externalPanelId: p
-  }), N = F(null), v = F(!1);
-  j(() => {
-    w(s || "");
-  }, [s]);
-  const P = (e) => {
-    w(e?.id), c?.(e?.id);
-  }, D = (e, t) => e.id === t;
-  if (g && o.length === 1) {
-    const e = o[0];
-    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(g, {
-      className: "se-design-tabs se-design-tabs-heading"
-    }, e.label), /* @__PURE__ */ r.createElement("div", {
-      className: "se-design-tabs-content"
-    }, /* @__PURE__ */ r.createElement("div", {
-      className: "tab-content block"
-    }, e?.renderTabContent && e?.renderTabContent(e))));
-  }
-  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", i({
-    className: "se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit",
-    role: "tablist",
-    "data-automation-id": "tabs-container"
-  }, U({
-    ariaLabel: L,
-    ariaLabelledBy: K
-  })), f.map((e) => {
-    const t = m === e.id, n = !!e.disabled, l = I(e.id);
-    return /* @__PURE__ */ r.createElement("button", i({
-      type: "button",
-      key: e.id
-    }, l, {
-      disabled: n,
-      "aria-label": e.ariaLabel,
-      onFocus: () => !n && C(e.id),
-      onKeyDown: x,
-      onClick: () => P(e),
-      className: `se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${n ? "" : "focus-outline"} ${n ? "text-[var(--color-gray-400)] cursor-not-allowed" : t ? "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out"}`,
-      "data-automation-id": `tab-item-${e.automationId || e.id || ""}`
-    }), e.label);
-  }), u.length > 0 && /* @__PURE__ */ r.createElement(B, {
-    className: "se-design-overflow-tabs",
-    position: "bottom-left",
-    noBorder: !0,
-    disableClickToggle: !0,
-    onPopoverToggle: (e) => {
-      e || (v.current && N.current?.focus(), v.current = !1);
-    },
-    renderPopoverSrcElement: ({
-      displayPopover: e,
-      togglePopover: t
-    }) => {
-      const n = I("overflow"), l = b ? q(b.id, k) : void 0;
-      return /* @__PURE__ */ r.createElement("div", i({}, n, {
-        ref: (a) => {
-          N.current = a, n.ref(a);
-        },
-        "aria-controls": l,
-        "aria-haspopup": "true",
-        "aria-expanded": e,
-        onClick: () => {
-          v.current = !1, t(!0);
-        },
-        onFocus: () => C("overflow"),
-        "data-automation-id": "tabs-kebab-menu",
-        onKeyDown: (a) => {
-          a.key === "Enter" || a.key === " " || a.key === "ArrowDown" ? (a.preventDefault(), v.current = !0, t(!0)) : a.key === "ArrowUp" ? (a.preventDefault(), v.current = !0, t("last")) : x(a);
-        },
-        className: `overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${e ? "bg-[var(--color-blue-100)]" : ""} ${b?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
-        onMouseEnter: () => h(!0),
-        onMouseLeave: () => h(!1)
-      }), b?.label ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("span", {
-        className: "text-[var(--color-white)]"
-      }, b?.label), /* @__PURE__ */ r.createElement(O, {
-        name: "chevron",
-        rotation: e ? "180" : "0",
-        stroke: y ? "var(--color-gray-100)" : "var(--color-white)"
-      })) : /* @__PURE__ */ r.createElement(O, {
-        name: "kebab-menu",
-        fill: y ? "var(--color-gray-900)" : "var(--color-gray-700)"
-      }));
-    },
-    renderPopoverContents: ({
-      closePopoverCb: e
-    }) => /* @__PURE__ */ r.createElement(z, {
-      items: u.map((t) => ({
-        id: t?.id,
-        label: t?.label,
-        automationId: t?.automationId || t?.id,
-        onClick: () => {
-          P(t), e();
-        }
-      }))
-    })
-  })), E && /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-tabs-content"
-  }, o.map((e) => /* @__PURE__ */ r.createElement("div", i({
-    key: e.id
-  }, S(e.id), {
-    className: `tab-content ${D(e, m) ? "block" : "hidden"}`
-  }), D(e, m) && e.renderTabContent?.(e)))));
+const V = (s) => {
+  const {
+    content: o,
+    className: n = "",
+    alignment: r,
+    noShadow: R,
+    position: f = "fixed",
+    isOpen: e,
+    displayCloseSidebar: C,
+    onClose: d,
+    onSidebarUnmount: b,
+    onPathChange: p,
+    style: c,
+    automationId: E,
+    id: N,
+    currentPath: y = "",
+    closeSidebarIcon: O = "close",
+    closeAriaLabel: P = "Close sidebar",
+    animateSidebar: x = !0,
+    a11yRole: F,
+    ariaLabel: g,
+    ariaLabelledBy: v,
+    ariaDescribedBy: h,
+    returnFocusRef: S
+  } = s, w = F ?? "complementary", t = w === "dialog", I = D(() => $({
+    ariaLabel: g,
+    ariaLabelledBy: v,
+    ariaDescribedBy: h
+  }), [g, v, h]), l = j(null);
+  m(() => () => {
+    b && b();
+  }, []), m(() => {
+    if (t)
+      return document.body.style.overflow = e ? "hidden" : "", () => {
+        document.body.style.overflow = "";
+      };
+  }, [e, t]), m(() => {
+    p && p(y);
+  }, [y]), z({
+    containerRef: l,
+    onDismiss: d,
+    enabled: e
+  }), k({
+    enabled: !!(t && e && d),
+    containerRef: l,
+    restoreFocus: !0,
+    initialFocus: "first",
+    returnFocusRef: S
+  });
+  const {
+    startSentinelProps: _,
+    endSentinelProps: A
+  } = T({
+    isOpen: e,
+    isModal: t,
+    containerRef: l,
+    returnFocusRef: S
+  }), L = () => {
+    let a = "se-design-sidebar-overlay-container z-[1000]";
+    return a += n.length > 0 ? ` ${n}` : "", a += r === "left" ? " left-aligned" : " right-aligned", a += R ? " no-shadow" : "", a += f.length > 0 ? ` ${f}` : "", a += e ? " open-sidebar" : " closed-sidebar", x || (a += e ? "" : " hidden"), a;
+  }, B = () => ({
+    ...c,
+    ...e && c?.width ? {
+      width: c?.width
+    } : {
+      width: "0px"
+    }
+  });
+  return /* @__PURE__ */ i.createElement("div", u({
+    ref: l,
+    id: N,
+    className: L(),
+    style: B(),
+    "data-automation-id": E,
+    tabIndex: -1,
+    role: w,
+    "aria-modal": t ? "true" : void 0,
+    "aria-hidden": e ? void 0 : "true"
+  }, I, {
+    inert: !e || void 0
+  }), /* @__PURE__ */ i.createElement("div", {
+    className: "overlay-content"
+  }, C && /* @__PURE__ */ i.createElement(M, {
+    name: O,
+    onClick: d,
+    className: "overlay-close",
+    ariaLabel: P,
+    automationId: "sidebar_overlay_close"
+  }), !t && /* @__PURE__ */ i.createElement("div", _), o, !t && /* @__PURE__ */ i.createElement("div", A)));
 };
 export {
-  re as Tabs
+  V as SidebarOverlay
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect, useMemo, useRef } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\nimport { useStableId } from '../../utils/useStableId';\nimport { useTabsA11y, getPanelId, getA11yNameAttributes } from '../../utils/a11y';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n  ariaLabel?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'; // heading tag to render single tab as a heading element when only one tab is present\n  automationId?: string;\n  id?: string; // custom ID for baseId (passed to useStableId)\n  ariaLabel?: string; // Accessible name when no visible label exists\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel)\n  panelId?: string; // When consumer manages a single external panel, pass its id here\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount,\n  headingLevel: HeadingTag,\n  id,\n  ariaLabel = 'Tabs',\n  ariaLabelledBy,\n  panelId\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ?? tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Only render internal panels if at least one tab provides content via renderTabContent\n  const hasPanelContent = tabs.some(t => t.renderTabContent);\n\n  // A11y setup\n  const baseId = useStableId(id, 'tabs');\n  const itemIds = useMemo(() => {\n    const enabledVisibleTabs = visibleTabs.filter(t => !t.disabled);\n    const enabledOverflowTabs = overflowTabs.filter(t => !t.disabled);\n    const visibleIds = enabledVisibleTabs.map(t => t.id);\n    return enabledOverflowTabs.length > 0 ? [...visibleIds, 'overflow'] : visibleIds;\n  }, [visibleTabs, overflowTabs]);\n\n  const { getTabProps, getPanelProps, handleKeyDown, setFocusedTabId } = useTabsA11y({\n    itemIds,\n    activeItem: activeTab,\n    orientation: 'horizontal',\n    idBase: baseId,\n    includePanelLinks: hasPanelContent || !!panelId,\n    externalPanelId: panelId\n  });\n\n  // Ref for the overflow button div — needed to return focus after menu closes\n  const overflowDivRef = useRef<HTMLDivElement>(null);\n  // Track whether the overflow popover was opened via keyboard — only return focus\n  // programmatically in that case (mouse-opened popovers should not trigger :focus-visible on close)\n  const wasKeyboardOpenedRef = useRef(false);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  if (HeadingTag && tabs.length === 1) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <HeadingTag className=\"se-design-tabs se-design-tabs-heading\">\n          {singleTab.label}\n        </HeadingTag>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        role=\"tablist\"\n        data-automation-id=\"tabs-container\"\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = !!tab.disabled;\n          const tabProps = getTabProps(tab.id);\n          return (\n            <button\n              type=\"button\"\n              key={tab.id}\n              {...tabProps}\n              disabled={isDisabled}\n              aria-label={tab.ariaLabel}\n              onFocus={() => !isDisabled && setFocusedTabId(tab.id)}\n              onKeyDown={handleKeyDown}\n              onClick={() => handleTabClick(tab)}\n              className={`se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${!isDisabled ? 'focus-outline' : ''} ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            noBorder\n            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              if (!isOpen) {\n                // Only return focus programmatically when the popover was opened via keyboard.\n                // Mouse-opened popovers must not call .focus() — programmatic focus after a\n                // pointer interaction triggers :focus-visible intermittently across browsers.\n                if (wasKeyboardOpenedRef.current) overflowDivRef.current?.focus();\n                wasKeyboardOpenedRef.current = false;\n              }\n            }}\n            renderPopoverSrcElement={({ displayPopover, togglePopover }) => {\n              const overflowTabProps = getTabProps('overflow');\n              const overflowAriaControls = activeOverflowTab\n                ? getPanelId(activeOverflowTab.id, baseId)\n                : undefined;\n\n              return (\n                <div\n                  {...overflowTabProps}\n                  ref={(el) => { overflowDivRef.current = el; overflowTabProps.ref(el); }}\n                  aria-controls={overflowAriaControls}\n                  aria-haspopup=\"true\"\n                  aria-expanded={displayPopover}\n                  onClick={() => { wasKeyboardOpenedRef.current = false; togglePopover(true); }}\n                  onFocus={() => setFocusedTabId('overflow')}\n                  data-automation-id=\"tabs-kebab-menu\"\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                      e.preventDefault();\n                      wasKeyboardOpenedRef.current = true;\n                      togglePopover(true);\n                    } else if (e.key === 'ArrowUp') {\n                      e.preventDefault();\n                      wasKeyboardOpenedRef.current = true;\n                      togglePopover('last');\n                    } else {\n                      handleKeyDown(e);\n                    }\n                  }}\n                  className={`overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-500)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-white)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-100)' : 'var(--color-white)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      {hasPanelContent && (\n        <div className=\"se-design-tabs-content\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.id}\n              {...getPanelProps(tab.id)}\n              className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n            >\n              {isTabActive(tab, activeTab) && tab.renderTabContent?.(tab)}\n            </div>\n          ))}\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","headingLevel","HeadingTag","id","ariaLabel","ariaLabelledBy","panelId","defaultTabId","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","hasPanelContent","some","t","renderTabContent","baseId","useStableId","itemIds","useMemo","enabledVisibleTabs","filter","disabled","enabledOverflowTabs","visibleIds","map","getTabProps","getPanelProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","wasKeyboardOpenedRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","role","getA11yNameAttributes","isActive","isDisabled","tabProps","type","key","onFocus","onKeyDown","onClick","automationId","Popover","position","noBorder","disableClickToggle","onPopoverToggle","isOpen","current","focus","renderPopoverSrcElement","displayPopover","togglePopover","overflowTabProps","overflowAriaControls","getPanelId","undefined","ref","el","e","preventDefault","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
+{"version":3,"file":"index28.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useRef } from 'react';\nimport { Icon } from 'components/Icon';\nimport { getA11yNameAttributes, useFocusTrap, useDismissOnEscape } from '../../utils/a11y';\nimport { useFocusSentinel } from '../../utils/a11y/useFocusSentinel';\n\nimport './style.scss';\n\ntype SidebarOverlayA11yRole = 'dialog' | 'complementary';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  id?: string;\n  position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  /**\n   * Accessible label for the close button. Defaults to 'Close sidebar'.\n   */\n  closeAriaLabel?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n  animateSidebar?: boolean;\n  /**\n   * Accessibility role that determines the full behavior bundle.\n   * - 'dialog': modal drawer (focus trap, scroll lock, aria-modal, Escape closes)\n   * - 'complementary': persistent side panel (no trap, no forced focus, no scroll lock)\n   * If not provided, derives from position: fixed|absolute → 'dialog', static|relative|'' → 'complementary'\n   */\n  a11yRole?: SidebarOverlayA11yRole;\n  /**\n   * Accessible name when no visible label exists.\n   * Prefer ariaLabelledBy when a visible title exists inside the sidebar.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this sidebar.\n   * Preferred over ariaLabel when a visible title exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this sidebar (additional context).\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Explicit element to restore focus to when the sidebar closes.\n   * Overrides automatic trigger capture from document.activeElement.\n   * Use when the opener element is known (e.g. a ref on the toggle button).\n   * In complementary mode: seeds the trigger ref directly.\n   * In dialog mode: passed through to useFocusTrap.\n   */\n  returnFocusRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const {\n    content,\n    className = '',\n    alignment,\n    noShadow,\n    position = 'fixed',\n    isOpen,\n    displayCloseSidebar,\n    onClose,\n    onSidebarUnmount,\n    onPathChange,\n    style,\n    automationId,\n    id,\n    currentPath = '',\n    closeSidebarIcon = 'close',\n    closeAriaLabel = 'Close sidebar',\n    animateSidebar = true,\n    a11yRole,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    returnFocusRef,\n  } = props;\n\n  // Default to complementary — consumers opt into dialog (focus trap + scroll lock)\n  // by passing a11yRole=\"dialog\" explicitly.\n  const effectiveA11yRole: SidebarOverlayA11yRole = a11yRole ?? 'complementary';\n\n  const isModal = effectiveA11yRole === 'dialog';\n\n  // Get accessible name attributes\n  const accessibleNameProps = useMemo(\n    () => getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy }),\n    [ariaLabel, ariaLabelledBy, ariaDescribedBy]\n  );\n\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // Scroll lock — modal only.\n  useEffect(() => {\n    if (!isModal) return;\n    document.body.style.overflow = isOpen ? 'hidden' : '';\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen, isModal]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n  useDismissOnEscape({\n    containerRef: sidebarRef,\n    onDismiss: onClose,\n    enabled: isOpen\n  });\n\n  // Focus trap: modal mode only, guarded by onClose as a WCAG safety net —\n  // trapping focus without a dismiss path is a keyboard trap (WCAG 2.1.2).\n  useFocusTrap({\n    enabled: Boolean(isModal && isOpen && !!onClose),\n    containerRef: sidebarRef,\n    restoreFocus: true,\n    initialFocus: 'first',\n    returnFocusRef,\n  });\n\n  // Complementary (non-modal) focus management: move focus in on open,\n  // restore to trigger on close, wrap Tab/Shift+Tab at panel boundaries.\n  const { startSentinelProps, endSentinelProps } = useFocusSentinel({\n    isOpen,\n    isModal,\n    containerRef: sidebarRef,\n    returnFocusRef,\n  });\n\n  const getSidebarClassName = () => {\n    let defaultClass = `se-design-sidebar-overlay-container z-[1000]`;\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    if(!animateSidebar) {\n      defaultClass += isOpen ? '' : ' hidden';\n    }\n    return defaultClass;\n  };\n\n  const getSidebarStyle = () => {\n    return {\n      ...style,\n      ...(isOpen && style?.width ? { width: style?.width } : { width: '0px' })\n    };\n  };\n\n  return (\n    <div\n      ref={sidebarRef}\n      id={id}\n      className={getSidebarClassName()}\n      style={getSidebarStyle()}\n      data-automation-id={automationId}\n      tabIndex={-1}\n      role={effectiveA11yRole}\n      aria-modal={isModal ? 'true' : undefined}\n      aria-hidden={!isOpen ? 'true' : undefined}\n      {...accessibleNameProps}\n      inert={!isOpen || undefined}\n    >\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <Icon\n            name={closeSidebarIcon}\n            onClick={onClose}\n            className=\"overlay-close\"\n            ariaLabel={closeAriaLabel}\n            automationId=\"sidebar_overlay_close\"\n          />\n        )}\n        {!isModal && <div {...startSentinelProps} />}\n        {content}\n        {!isModal && <div {...endSentinelProps} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","id","currentPath","closeSidebarIcon","closeAriaLabel","animateSidebar","a11yRole","ariaLabel","ariaLabelledBy","ariaDescribedBy","returnFocusRef","effectiveA11yRole","isModal","accessibleNameProps","useMemo","getA11yNameAttributes","sidebarRef","useRef","useEffect","document","body","overflow","useDismissOnEscape","containerRef","onDismiss","enabled","useFocusTrap","Boolean","restoreFocus","initialFocus","startSentinelProps","endSentinelProps","useFocusSentinel","getSidebarClassName","defaultClass","length","getSidebarStyle","width","React","createElement","_extends","ref","tabIndex","role","undefined","inert","Icon","name","onClick"],"mappings":"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"}