se-design 1.0.88-dev → 1.0.90-dev.0

package/dist/index29.js

@@ -1,10 +1,10 @@
-import r, { useState as $, useMemo as j, useRef as L, useEffect as B } from "react";
-import { Icon as O } from "./index6.js";
-import { Popover as z } from "./index19.js";
-import { MenuList as H } from "./index18.js";
-import { useStableId as U } from "./index205.js";
+import t, { useState as L, useMemo as z, useRef as O, useEffect as H } from "react";
+import { Icon as A } from "./index6.js";
+import { Popover as U } from "./index19.js";
+import { MenuList as V } from "./index18.js";
+import { useStableId as q } from "./index206.js";
 import "./index72.js";
-import { useTabsA11y as V, getPanelId as q } from "./index73.js";
+import { useTabsA11y as G, getPanelId as J } from "./index73.js";
 /* empty css         */
 function d() {
   return d = Object.assign ? Object.assign.bind() : function(i) {
@@ -15,86 +15,87 @@ function d() {
     return i;
   }, d.apply(null, arguments);
 }
-const re = ({
+const oe = ({
   defaultActiveTab: i,
   tabs: o,
   onTabChange: m,
   primaryTabCount: u,
   headingLevel: g,
-  id: A,
-  ariaLabel: F = "Tabs",
-  ariaLabelledBy: M,
-  panelId: p
+  id: F,
+  ariaLabel: M = "Tabs",
+  ariaLabelledBy: K,
+  panelId: p,
+  appearance: h = "solid"
 }) => {
-  const K = i || (o[0] ? o[0].id : ""), [b, h] = $(K), [w, y] = $(!1), T = u ?? o?.length, f = o.slice(0, T), c = o.slice(T), l = c.find((e) => e.id === b), E = o.some((e) => e.renderTabContent), k = U(A, "tabs"), R = j(() => {
-    const e = f.filter((s) => !s.disabled), t = c.filter((s) => !s.disabled), n = e.map((s) => s.id);
-    return t.length > 0 ? [...n, "overflow"] : n;
+  const R = i || (o[0] ? o[0].id : ""), S = h === "outline" ? "se-design-tab-item-active font-medium hover:cursor-pointer" : "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer", [b, w] = L(R), [T, y] = L(!1), E = u ?? o?.length, f = o.slice(0, E), c = o.slice(E), l = c.find((e) => e.id === b), k = o.some((e) => e.renderTabContent), x = q(F, "tabs"), _ = z(() => {
+    const e = f.filter((s) => !s.disabled), r = c.filter((s) => !s.disabled), n = e.map((s) => s.id);
+    return r.length > 0 ? [...n, "overflow"] : n;
   }, [f, c]), {
-    getTabProps: x,
-    getPanelProps: S,
-    getTabListProps: _,
-    handleKeyDown: I,
-    setFocusedTabId: C
-  } = V({
-    itemIds: R,
+    getTabProps: I,
+    getPanelProps: j,
+    getTabListProps: B,
+    handleKeyDown: C,
+    setFocusedTabId: N
+  } = G({
+    itemIds: _,
     activeItem: b,
     orientation: "horizontal",
-    idBase: k,
-    includePanelLinks: E || !!p,
+    idBase: x,
+    includePanelLinks: k || !!p,
     externalPanelId: p
-  }), N = L(null), v = L(!1);
-  B(() => {
-    h(i || "");
+  }), P = O(null), v = O(!1);
+  H(() => {
+    w(i || "");
   }, [i]);
-  const P = (e) => {
-    h(e?.id), m?.(e?.id);
-  }, D = (e, t) => e.id === t;
+  const D = (e) => {
+    w(e?.id), m?.(e?.id);
+  }, $ = (e, r) => e.id === r;
   if (g && o.length === 1) {
     const e = o[0];
-    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(g, {
+    return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(g, {
       className: "se-design-tabs se-design-tabs-heading"
-    }, e.label), /* @__PURE__ */ r.createElement("div", {
+    }, e.label), /* @__PURE__ */ t.createElement("div", {
       className: "se-design-tabs-content"
-    }, /* @__PURE__ */ r.createElement("div", {
+    }, /* @__PURE__ */ t.createElement("div", {
       className: "tab-content block"
     }, e?.renderTabContent && e?.renderTabContent(e))));
   }
-  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", d({
-    className: "se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit",
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", d({
+    className: `se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit ${h === "outline" ? "se-design-tabs--outline" : ""}`,
     "data-automation-id": "tabs-container"
-  }, _({
-    ariaLabel: F,
-    ariaLabelledBy: M
+  }, B({
+    ariaLabel: M,
+    ariaLabelledBy: K
   })), f.map((e) => {
-    const t = b === e.id, n = !!e.disabled, s = x(e.id);
-    return /* @__PURE__ */ r.createElement("button", d({
+    const r = b === e.id, n = !!e.disabled, s = I(e.id);
+    return /* @__PURE__ */ t.createElement("button", d({
       type: "button",
       key: e.id
     }, s, {
       disabled: n,
       "aria-label": e.ariaLabel,
-      onFocus: () => !n && C(e.id),
-      onKeyDown: I,
-      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"}`,
+      onFocus: () => !n && N(e.id),
+      onKeyDown: C,
+      onClick: () => D(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" : r ? S : "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);
-  }), c.length > 0 && /* @__PURE__ */ r.createElement(z, {
+  }), c.length > 0 && /* @__PURE__ */ t.createElement(U, {
     className: "se-design-overflow-tabs",
     position: "bottom-left",
     noBorder: !0,
     disableClickToggle: !0,
     onPopoverToggle: (e) => {
-      e || (v.current && N.current?.focus(), v.current = !1);
+      e || (v.current && P.current?.focus(), v.current = !1);
     },
     renderPopoverSrcElement: ({
       displayPopover: e,
-      togglePopover: t
+      togglePopover: r
     }) => {
-      const n = x("overflow"), s = l ? q(l.id, k) : void 0;
-      return /* @__PURE__ */ r.createElement("div", d({}, n, {
+      const n = I("overflow"), s = l ? J(l.id, x) : void 0;
+      return /* @__PURE__ */ t.createElement("div", d({}, n, {
         ref: (a) => {
-          N.current = a, n.ref(a);
+          P.current = a, n.ref(a);
         },
         "aria-selected": !!l,
         "aria-label": l?.label ? void 0 : `More tabs (${c.length})`,
@@ -102,52 +103,52 @@ const re = ({
         "aria-haspopup": "true",
         "aria-expanded": e,
         onClick: () => {
-          v.current = !1, t(!0);
+          v.current = !1, r(!0);
         },
-        onFocus: () => C("overflow"),
+        onFocus: () => N("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")) : I(a);
+          a.key === "Enter" || a.key === " " || a.key === "ArrowDown" ? (a.preventDefault(), v.current = !0, r(!0)) : a.key === "ArrowUp" ? (a.preventDefault(), v.current = !0, r("last")) : C(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)]" : ""} ${l?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
         onMouseEnter: () => y(!0),
         onMouseLeave: () => y(!1)
-      }), l?.label ? /* @__PURE__ */ r.createElement("span", {
+      }), l?.label ? /* @__PURE__ */ t.createElement("span", {
         className: "pointer-events-none flex items-center gap-1"
-      }, /* @__PURE__ */ r.createElement("span", {
+      }, /* @__PURE__ */ t.createElement("span", {
         className: "text-[var(--color-white)]"
-      }, l?.label), /* @__PURE__ */ r.createElement(O, {
+      }, l?.label), /* @__PURE__ */ t.createElement(A, {
         name: "chevron",
         rotation: e ? "180" : "0",
-        stroke: w ? "var(--color-gray-100)" : "var(--color-white)"
-      })) : /* @__PURE__ */ r.createElement("span", {
+        stroke: T ? "var(--color-gray-100)" : "var(--color-white)"
+      })) : /* @__PURE__ */ t.createElement("span", {
         className: "pointer-events-none"
-      }, /* @__PURE__ */ r.createElement(O, {
+      }, /* @__PURE__ */ t.createElement(A, {
         name: "kebab-menu",
-        fill: w ? "var(--color-gray-900)" : "var(--color-gray-700)"
+        fill: T ? "var(--color-gray-900)" : "var(--color-gray-700)"
       })));
     },
     renderPopoverContents: ({
       closePopoverCb: e
-    }) => /* @__PURE__ */ r.createElement(H, {
-      items: c.map((t) => ({
-        id: t?.id,
-        label: t?.label,
-        automationId: t?.automationId || t?.id,
+    }) => /* @__PURE__ */ t.createElement(V, {
+      items: c.map((r) => ({
+        id: r?.id,
+        label: r?.label,
+        automationId: r?.automationId || r?.id,
         onClick: () => {
-          P(t), e();
+          D(r), e();
         }
       }))
     })
-  })), E && /* @__PURE__ */ r.createElement("div", {
+  })), k && /* @__PURE__ */ t.createElement("div", {
     className: "se-design-tabs-content"
-  }, o.map((e) => /* @__PURE__ */ r.createElement("div", d({
+  }, o.map((e) => /* @__PURE__ */ t.createElement("div", d({
     key: e.id
-  }, S(e.id), {
-    className: `tab-content ${D(e, b) ? "block" : "hidden"}`
-  }), D(e, b) && e.renderTabContent?.(e)))));
+  }, j(e.id), {
+    className: `tab-content ${$(e, b) ? "block" : "hidden"}`
+  }), $(e, b) && e.renderTabContent?.(e)))));
 };
 export {
-  re as Tabs
+  oe as Tabs
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.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 } 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, getTabListProps, 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        data-automation-id=\"tabs-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\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                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-selected={!!activeOverflowTab}\n                  aria-label={activeOverflowTab?.label ? undefined : `More tabs (${overflowTabs.length})`}\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                    <span className=\"pointer-events-none flex items-center gap-1\">\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                    </span>\n                  ) : (\n                    <span className=\"pointer-events-none\">\n                      <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                    </span>\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","getTabListProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","wasKeyboardOpenedRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","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":"index29.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 } 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  // Active-tab treatment: 'solid' (default) fills with brand blue; 'outline' keeps it white with a blue ring + label.\n  appearance?: 'solid' | 'outline';\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  appearance = 'solid'\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  // 'outline' active styling comes from .se-design-tabs--outline in style.scss, so the active button omits the solid fill/text utilities.\n  const activeTabClassName =\n    appearance === 'outline'\n      ? 'se-design-tab-item-active font-medium hover:cursor-pointer'\n      : 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer';\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, getTabListProps, 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          appearance === 'outline' ? 'se-design-tabs--outline' : ''\n        }`}\n        data-automation-id=\"tabs-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\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                  ? activeTabClassName\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                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-selected={!!activeOverflowTab}\n                  aria-label={activeOverflowTab?.label ? undefined : `More tabs (${overflowTabs.length})`}\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                    <span className=\"pointer-events-none flex items-center gap-1\">\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                    </span>\n                  ) : (\n                    <span className=\"pointer-events-none\">\n                      <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                    </span>\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","appearance","defaultTabId","activeTabClassName","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","getTabListProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","wasKeyboardOpenedRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","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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"}

package/dist/index30.js

@@ -1,7 +1,7 @@
 import e, { forwardRef as K } from "react";
 import { Icon as M } from "./index6.js";
 import { Button as d } from "./index4.js";
-import { useStableId as B } from "./index205.js";
+import { useStableId as B } from "./index206.js";
 import { getRegionAttributes as Q } from "./index66.js";
 import { useAccessiblePress as U } from "./index67.js";
 import "./index72.js";

package/dist/index33.js

@@ -1,5 +1,5 @@
 import e, { useRef as y } from "react";
-import { useStableId as N } from "./index205.js";
+import { useStableId as N } from "./index206.js";
 function I(a) {
   const {
     label: s,

package/dist/index35.js

@@ -1,6 +1,6 @@
 import e, { useState as h, useEffect as E } from "react";
 import { Icon as N } from "./index6.js";
-import { useStableId as $ } from "./index205.js";
+import { useStableId as $ } from "./index206.js";
 import { getRegionAttributes as I } from "./index66.js";
 import { useAccessiblePress as _ } from "./index67.js";
 import "./index72.js";

package/dist/index36.js

@@ -1,6 +1,6 @@
 import e, { useState as k, useEffect as w } from "react";
 import { Icon as x } from "./index6.js";
-import { useStableId as F } from "./index205.js";
+import { useStableId as F } from "./index206.js";
 import { getA11yNameAttributes as P } from "./index81.js";
 import { getRegionAttributes as V } from "./index66.js";
 import { useAccessiblePress as q } from "./index67.js";

package/dist/index37.js

@@ -1,58 +1,82 @@
-import a, { useState as p, useRef as N } from "react";
+import a, { useState as w, useRef as $ } from "react";
 /* empty css         */
-import { Icon as k } from "./index6.js";
-function D({
-  value: g,
-  onChange: s,
-  placeholder: f,
-  className: d,
-  error: o,
-  errorMessage: h,
-  label: c,
-  automationId: w = ""
+import { Icon as A } from "./index6.js";
+import { getA11yNameAttributes as B } from "./index81.js";
+import "./index72.js";
+import { useStableId as D } from "./index206.js";
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(r) {
+    for (var n = 1; n < arguments.length; n++) {
+      var i = arguments[n];
+      for (var s in i) ({}).hasOwnProperty.call(i, s) && (r[s] = i[s]);
+    }
+    return r;
+  }, c.apply(null, arguments);
+}
+function V({
+  value: r,
+  onChange: n,
+  placeholder: i,
+  className: s,
+  error: m,
+  errorMessage: y,
+  label: u,
+  ariaLabel: b,
+  ariaLabelledBy: E,
+  automationId: N = "",
+  commitOnBlur: I = !1
 }) {
-  const [n, l] = p([...g]), [i, r] = p(""), u = N(null), m = (t) => {
-    const e = n.filter((y, E) => E !== t);
-    l(e), s?.(e);
-  }, v = (t) => {
-    if (t.key === "Enter" && i.trim()) {
-      t.preventDefault();
-      const e = [...n, i.trim()];
-      l(e), r(""), s?.(e);
-    } else t.key === "Backspace" && i === "" && n.length > 0 && m(n.length - 1);
+  const [o, p] = w([...r]), [l, g] = w(""), d = $(null), f = D(void 0, "input-with-tags-label"), k = B({
+    ariaLabel: b,
+    ariaLabelledBy: E,
+    internalLabelId: u ? f : void 0
+  }), h = (t) => {
+    const e = o.filter((O, _) => _ !== t);
+    p(e), n?.(e);
+  }, v = () => {
+    const t = l.trim();
+    if (!t) return;
+    const e = [...o, t];
+    p(e), g(""), n?.(e);
+  }, T = (t) => {
+    t.key === "Enter" && l.trim() ? (t.preventDefault(), v()) : t.key === "Backspace" && l === "" && o.length > 0 && h(o.length - 1);
+  }, R = () => {
+    I && v();
   };
   return /* @__PURE__ */ a.createElement("div", {
     className: "input-with-tags-main-container",
-    "data-automation-id": w
-  }, c && /* @__PURE__ */ a.createElement("div", {
+    "data-automation-id": N
+  }, u && /* @__PURE__ */ a.createElement("div", {
+    id: f,
     className: "label-container"
-  }, c), /* @__PURE__ */ a.createElement("div", {
-    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${d}`,
-    onClick: () => u.current?.focus()
-  }, n.map((t, e) => /* @__PURE__ */ a.createElement("span", {
+  }, u), /* @__PURE__ */ a.createElement("div", {
+    className: `input-with-tags-container ${m ? "input-with-tags-error" : ""} ${s}`,
+    onClick: () => d.current?.focus()
+  }, o.map((t, e) => /* @__PURE__ */ a.createElement("span", {
     key: e,
     className: "tag-in-inputwithtags",
     "data-automation-id": `input-tag-${e}`
-  }, t, /* @__PURE__ */ a.createElement(k, {
+  }, t, /* @__PURE__ */ a.createElement(A, {
     name: "close",
     className: "close-icon-in-inputwithtags",
     ariaLabel: `Remove tag ${t}`,
-    onClick: () => m(e),
+    onClick: () => h(e),
     shouldStopPropagation: !0
-  }))), /* @__PURE__ */ a.createElement("input", {
+  }))), /* @__PURE__ */ a.createElement("input", c({
     className: "input-with-tags-input",
-    ref: u,
+    ref: d,
     type: "text",
-    value: i,
-    onChange: (t) => r(t.target.value),
-    onKeyDown: v,
-    placeholder: f,
+    value: l,
+    onChange: (t) => g(t.target.value),
+    onKeyDown: T,
+    onBlur: R,
+    placeholder: i,
     "data-automation-id": "input-with-tags-input-field"
-  })), o && /* @__PURE__ */ a.createElement("div", {
+  }, k))), m && /* @__PURE__ */ a.createElement("div", {
     className: "error-message"
-  }, h));
+  }, y));
 }
 export {
-  D as InputWithTags
+  V as InputWithTags
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,MAAM;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACnEX,EAAUL,EAAKgB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAAA;AAAAA,EAAM,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
+{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    ariaLabel?: string;\n    ariaLabelledBy?: string;\n    automationId?: string;\n    commitOnBlur?: boolean;\n}\n\nexport function InputWithTags({\n    value,\n    onChange,\n    placeholder,\n    className,\n    error,\n    errorMessage,\n    label,\n    ariaLabel,\n    ariaLabelledBy,\n    automationId = '',\n    commitOnBlur = false\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelId = useStableId(undefined, 'input-with-tags-label');\n    const inputA11yProps = getA11yNameAttributes({\n      ariaLabel,\n      ariaLabelledBy,\n      internalLabelId: label ? labelId : undefined\n    });\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const commitInput = () => {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags, trimmed];\n        setTags(newTags);\n        setInputValue(\"\");\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            commitInput();\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    // When enabled, commit a half-typed tag when focus leaves the input so users\n    // don't lose the value by tabbing/clicking away without pressing Enter.\n    const handleBlur = () => {\n        if (commitOnBlur) commitInput();\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div id={labelId} className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    onBlur={handleBlur}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                    {...inputA11yProps}\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","ariaLabel","ariaLabelledBy","automationId","commitOnBlur","tags","setTags","useState","inputValue","setInputValue","inputRef","useRef","labelId","useStableId","undefined","inputA11yProps","getA11yNameAttributes","internalLabelId","removeTag","indexToRemove","newTags","filter","_","i","commitInput","trimmed","trim","handleKeyDown","e","key","preventDefault","length","handleBlur","React","createElement","id","onClick","current","focus","map","tag","index","Icon","name","shouldStopPropagation","_extends","ref","type","target","onKeyDown","onBlur"],"mappings":"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"}