se-design 1.0.1 → 1.0.21

package/dist/components/Checkbox/index.d.ts

@@ -9,5 +9,6 @@ export interface CheckboxProps {
     label?: string;
     disabledLabel?: string;
     containerAutomationId?: string;
+    ariaLabel?: string;
 }
 export declare const Checkbox: FC<CheckboxProps>;

package/dist/index21.js

@@ -1,46 +1,77 @@
-import o, { useState as g, useEffect as E } from "react";
+import s, { useState as C, useEffect as N } from "react";
 /* empty css         */
+function b() {
+  return b = Object.assign ? Object.assign.bind() : function(i) {
+    for (var a = 1; a < arguments.length; a++) {
+      var c = arguments[a];
+      for (var e in c) ({}).hasOwnProperty.call(c, e) && (i[e] = c[e]);
+    }
+    return i;
+  }, b.apply(null, arguments);
+}
 const I = ({
-  className: l = "",
-  automationId: m = "",
-  defaultChecked: s = !1,
-  disabled: t = !1,
-  onChange: b,
-  checkMarkType: c = "",
-  label: x = "",
-  disabledLabel: a = "",
-  containerAutomationId: d = ""
+  className: i = "",
+  automationId: a = "",
+  defaultChecked: c = !1,
+  disabled: e = !1,
+  onChange: m,
+  checkMarkType: o = "",
+  label: k = "",
+  disabledLabel: h = "",
+  containerAutomationId: g = "",
+  ariaLabel: f = "Checkbox"
 }) => {
-  const [e, i] = g(s);
-  E(() => {
-    i(s);
-  }, [s]);
-  const h = (n) => {
-    t || (i((u) => !u), b?.(!e, n));
-  }, f = () => {
-    const n = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded";
-    return t ? e && c === "tick" ? "disabled-tick" : e && c === "minus-checkbox" ? "disabled-minus-checkbox" : e && !c ? "disabled-tick" : "disabled-default" : c === "minus-checkbox" && e ? `minus-checkbox ${n}` : e ? `checked ${n}` : `unchecked ${n}`;
-  }, k = () => t ? "checkbox-label-disabled" : "checkbox-label", C = () => t && a ? a : x, r = crypto.randomUUID();
-  return /* @__PURE__ */ o.createElement("div", {
+  const [n, l] = C(c);
+  N(() => {
+    l(c);
+  }, [c]);
+  const p = (t) => {
+    e || (l((r) => !r), m?.(!n, t));
+  }, E = (t) => {
+    if (!e && (t.key === "Enter" || t.key === " ")) {
+      t.preventDefault(), t.stopPropagation();
+      const r = !n;
+      l(r);
+      const u = t.currentTarget.closest("label")?.querySelector("input");
+      u && m?.(r, {
+        target: u,
+        currentTarget: u
+      });
+    }
+  }, v = () => {
+    const t = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded";
+    return e ? n && o === "tick" ? "disabled-tick" : n && o === "minus-checkbox" ? "disabled-minus-checkbox" : n && !o ? "disabled-tick" : "disabled-default" : o === "minus-checkbox" && n ? `minus-checkbox ${t}` : n ? `checked ${t}` : `unchecked ${t}`;
+  }, y = () => e ? "checkbox-label-disabled" : "checkbox-label", d = () => e && h ? h : k, x = crypto.randomUUID();
+  return /* @__PURE__ */ s.createElement("div", {
     className: "se-design-checkbox-ctn"
-  }, /* @__PURE__ */ o.createElement("label", {
-    htmlFor: r,
-    className: `se-design-checkbox ${l} ${f()}`,
-    "data-automation-id": d || "checkbox-container",
-    tabIndex: t ? -1 : 0
-  }, /* @__PURE__ */ o.createElement("input", {
-    id: r,
+  }, /* @__PURE__ */ s.createElement("label", b({
+    role: "checkbox",
+    htmlFor: x,
+    className: `se-design-checkbox ${i} ${v()}`,
+    "data-automation-id": g || "checkbox-container",
+    tabIndex: e ? -1 : 0,
+    "aria-checked": n,
+    "aria-disabled": e
+  }, f ? {
+    "aria-label": f
+  } : {
+    "aria-labelledby": `${a}-label`
+  }, {
+    onKeyDown: E
+  }), /* @__PURE__ */ s.createElement("input", {
+    id: x,
     type: "checkbox",
-    checked: e,
-    onChange: h,
-    disabled: t
-  }), /* @__PURE__ */ o.createElement("span", {
+    checked: n,
+    onChange: p,
+    disabled: e,
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ s.createElement("span", {
     className: "checkbox-item",
-    "data-automation-id": m
-  }), /* @__PURE__ */ o.createElement("span", {
-    className: k(),
+    "data-automation-id": a
+  }), d()?.length > 0 && /* @__PURE__ */ s.createElement("span", {
+    className: y(),
     "data-automation-id": "checkbox-label"
-  }, C())));
+  }, d())));
 };
 export {
   I as Checkbox

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = ''\n}) => {\n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === 'minus-checkbox' ? !prev : !prev));\n    onChange?.(!isChecked, e);\n  };\n\n  const getCheckBoxClassName = () => {\n    const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return `minus-checkbox ${focusClass}`;\n    return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n  const uniqueId = crypto.randomUUID();\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        htmlFor={uniqueId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={disabled ? -1 : 0}\n      >\n        <input\n          id={uniqueId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        <span className={getLabelClassName()} data-automation-id=\"checkbox-label\">{getLabelText()}</span>\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","getCheckBoxClassName","focusClass","getLabelClassName","getLabelText","uniqueId","crypto","randomUUID","React","createElement","htmlFor","tabIndex","id","type","checked"],"mappings":";;AAeO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AAAA,EACRC,eAAAA,IAAgB;AAAA,EAChBC,uBAAAA,IAAwB;AAC1B,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAST,CAAc;AAEzDU,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaR,CAAc;AAAA,EAC7B,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAMW,IAAcA,CAACC,MAA2C;AAC9D,IAAIX,MACJO,EAAcK,OAA+C,CAACA,CAAa,GAC3EX,IAAW,CAACK,GAAWK,CAAC;AAAA,EAC1B,GAEME,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AAGnB,WAAId,IACEM,KAAaJ,MAAkB,SAAe,kBAC9CI,KAAaJ,MAAkB,mBAAyB,4BACxDI,KAAa,CAACJ,IAAsB,kBACjC,qBAILA,MAAkB,oBAAoBI,IAAkB,kBAAkBQ,CAAU,KACjFR,IAAY,WAAWQ,CAAU,KAAK,aAAaA,CAAU;AAAA,EACtE,GAEMC,IAAoBA,MACjBf,IAAW,4BAA4B,kBAG1CgB,IAAeA,MACfhB,KAAYI,IACPA,IAEFD,GAEHc,IAAWC,OAAOC,WAAAA;AAExB,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKxB,WAAU;AAAA,EAAA,GACbuB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEC,SAASL;AAAAA,IACTpB,WAAW,sBAAsBA,CAAS,IAAIgB,GAAsB;AAAA,IACpE,sBAAoBR,KAAyB;AAAA,IAC7CkB,UAAUvB,IAAW,KAAK;AAAA,EAAA,GAE1BoB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEG,IAAIP;AAAAA,IACJQ,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTL,UAAUS;AAAAA,IACVV,UAAAA;AAAAA,EAAAA,CACD,GACDoB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMxB,WAAU;AAAA,IAAgB,sBAAoBC;AAAAA,EAAAA,CAAoB,GACxEsB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMxB,WAAWkB,EAAAA;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GAAkBC,EAAAA,CAAqB,CAC3F,CACJ;AAET;"}
+{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  ariaLabel?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel = 'Checkbox'\n}) => {\n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === 'minus-checkbox' ? !prev : !prev));\n    onChange?.(!isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = !isChecked;\n      setIsChecked(newChecked);\n      \n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement,\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return `minus-checkbox ${focusClass}`;\n    return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n  const uniqueId = crypto.randomUUID();\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        role=\"checkbox\"\n        htmlFor={uniqueId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={disabled ? -1 : 0}\n        aria-checked={isChecked}\n        aria-disabled={disabled}\n        {...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-labelledby': `${automationId}-label` })}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={uniqueId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && <span className={getLabelClassName()} data-automation-id=\"checkbox-label\">{getLabelText()}</span>}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","focusClass","getLabelClassName","getLabelText","uniqueId","crypto","randomUUID","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","checked","length"],"mappings":";;;;;;;;;;;AAgBO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AAAA,EACRC,eAAAA,IAAgB;AAAA,EAChBC,uBAAAA,IAAwB;AAAA,EACxBC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASV,CAAc;AAEzDW,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaT,CAAc;AAAA,EAC7B,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAMY,IAAcA,CAACC,MAA2C;AAC9D,IAAIZ,MACJQ,EAAcK,OAA+C,CAACA,CAAa,GAC3EZ,IAAW,CAACM,GAAWK,CAAC;AAAA,EAC1B,GAEME,IAAgBA,CAACF,MAA+D;AACpF,QAAIZ,CAAAA,MACAY,EAAEG,QAAQ,WAAWH,EAAEG,QAAQ,MAAK;AACtCH,MAAAA,EAAEI,eAAAA,GACFJ,EAAEK,gBAAAA;AACF,YAAMC,IAAa,CAACX;AACpBC,MAAAA,EAAaU,CAAU;AAGvB,YAAMC,IAAeP,EAAEQ,cAAcC,QAAQ,OAAO,GAAGC,cAAc,OAAO;AAC5E,MAAIH,KAKFlB,IAAWiB,GAJY;AAAA,QACrBK,QAAQJ;AAAAA,QACRC,eAAeD;AAAAA,MAAAA,CAEoB;AAAA,IAEzC;AAAA,EACF,GAEMK,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AAGnB,WAAIzB,IACEO,KAAaL,MAAkB,SAAe,kBAC9CK,KAAaL,MAAkB,mBAAyB,4BACxDK,KAAa,CAACL,IAAsB,kBACjC,qBAILA,MAAkB,oBAAoBK,IAAkB,kBAAkBkB,CAAU,KACjFlB,IAAY,WAAWkB,CAAU,KAAK,aAAaA,CAAU;AAAA,EACtE,GAEMC,IAAoBA,MACjB1B,IAAW,4BAA4B,kBAG1C2B,IAAeA,MACf3B,KAAYI,IACPA,IAEFD,GAEHyB,IAAWC,OAAOC,WAAAA;AAExB,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnC,WAAU;AAAA,EAAA,GACbkC,gBAAAA,EAAAC,cAAA,SAAAC,EAAA;AAAA,IACEC,MAAK;AAAA,IACLC,SAASP;AAAAA,IACT/B,WAAW,sBAAsBA,CAAS,IAAI2B,GAAsB;AAAA,IACpE,sBAAoBnB,KAAyB;AAAA,IAC7C+B,UAAUpC,IAAW,KAAK;AAAA,IAC1B,gBAAcO;AAAAA,IACd,iBAAeP;AAAAA,EAAAA,GACVM,IAAY;AAAA,IAAE,cAAcA;AAAAA,EAAAA,IAAc;AAAA,IAAE,mBAAmB,GAAGR,CAAY;AAAA,EAAA,GAAU;AAAA,IAC7FuC,WAAWvB;AAAAA,EAAAA,CAAc,GAEzBiB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEM,IAAIV;AAAAA,IACJW,MAAK;AAAA,IACLC,SAASjC;AAAAA,IACTN,UAAUU;AAAAA,IACVX,UAAAA;AAAAA,IACA,eAAY;AAAA,EAAA,CACb,GACD+B,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMnC,WAAU;AAAA,IAAgB,sBAAoBC;AAAAA,EAAAA,CAAoB,GACvE6B,EAAAA,GAAgBc,SAAS,KAAKV,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMnC,WAAW6B,EAAAA;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GAAkBC,EAAAA,CAAqB,CAC1H,CACJ;AAET;"}

package/dist/index27.js

@@ -1,5 +1,5 @@
 import t, { useState as T, useEffect as h } from "react";
-import { Icon as u } from "./index5.js";
+import { Icon as v } from "./index5.js";
 import { Popover as N } from "./index17.js";
 import { MenuList as k } from "./index16.js";
 /* empty css         */
@@ -31,11 +31,11 @@ const F = ({
     className: "se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-200)] w-fit",
     "data-automation-id": "tabs-container"
   }, E.map((e) => {
-    const o = n === e.id, v = e.disabled;
+    const o = n === e.id, u = e.disabled;
     return /* @__PURE__ */ t.createElement("div", {
       key: e.label,
-      onClick: () => !v && d(e),
-      className: `text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${v ? "text-[var(--color-gray-400)] cursor-not-allowed" : o ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`,
+      onClick: () => !u && d(e),
+      className: `text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${u ? "text-[var(--color-gray-400)] cursor-not-allowed" : o ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`,
       "data-automation-id": `tab-item-${e.automationId || e.id || ""}`
     }, e.label);
   }), l.length > 0 && /* @__PURE__ */ t.createElement(N, {
@@ -49,10 +49,10 @@ const F = ({
       className: `overflow-tabs-src-element border-l px-3 py-0.5 font-medium hover:cursor-pointer ${e ? "bg-[var(--color-blue-100)]" : ""}`
     }, m?.label ? /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", {
       className: "text-[var(--color-blue-500)]"
-    }, m?.label), /* @__PURE__ */ t.createElement(u, {
+    }, m?.label), /* @__PURE__ */ t.createElement(v, {
       name: "chevron",
       rotation: e ? "180" : "0"
-    })) : /* @__PURE__ */ t.createElement(u, {
+    })) : /* @__PURE__ */ t.createElement(v, {
       name: "kebab-menu"
     })),
     renderPopoverContents: ({
@@ -60,6 +60,7 @@ const F = ({
     }) => /* @__PURE__ */ t.createElement(k, {
       items: l.map((o) => ({
         label: o?.label,
+        automationId: o?.automationId || o?.id,
         onClick: () => {
           d(o), e();
         }

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\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}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  singleTabAsHeading?: boolean; // prop for rendering single tab as heading\n  automationId?: string;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount = 0,\n  singleTabAsHeading = false,\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n\n  const visibleTabCount = primaryTabCount ? 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  // Check if we should render as heading (single tab and singleTabAsHeading is true)\n  const shouldRenderAsHeading = singleTabAsHeading && tabs.length === 1;\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 single tab and should render as heading, render just the heading\n  if (shouldRenderAsHeading) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <div className=\"se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4\">\n          {singleTab.label}\n        </div>\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 className=\"se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-200)] w-fit\" data-automation-id=\"tabs-container\">\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => {\n              return (\n                <div\n                  className={`overflow-tabs-src-element border-l px-3 py-0.5 font-medium hover:cursor-pointer ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  }`}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-blue-500)]\">{activeOverflowTab?.label}</span>\n                      <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  label: tab?.label,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div key={tab.id} className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}>\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","singleTabAsHeading","defaultTabId","id","activeTab","setActiveTab","useState","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","shouldRenderAsHeading","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","renderTabContent","map","isActive","isDisabled","disabled","key","onClick","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
+{"version":3,"file":"index27.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\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}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  singleTabAsHeading?: boolean; // prop for rendering single tab as heading\n  automationId?: string;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount = 0,\n  singleTabAsHeading = false,\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n\n  const visibleTabCount = primaryTabCount ? 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  // Check if we should render as heading (single tab and singleTabAsHeading is true)\n  const shouldRenderAsHeading = singleTabAsHeading && tabs.length === 1;\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 single tab and should render as heading, render just the heading\n  if (shouldRenderAsHeading) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <div className=\"se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4\">\n          {singleTab.label}\n        </div>\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 className=\"se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-200)] w-fit\" data-automation-id=\"tabs-container\">\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => {\n              return (\n                <div\n                  className={`overflow-tabs-src-element border-l px-3 py-0.5 font-medium hover:cursor-pointer ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  }`}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-blue-500)]\">{activeOverflowTab?.label}</span>\n                      <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\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      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div key={tab.id} className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}>\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","singleTabAsHeading","defaultTabId","id","activeTab","setActiveTab","useState","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","shouldRenderAsHeading","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","renderTabContent","map","isActive","isDisabled","disabled","key","onClick","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.0.1",
+  "version": "1.0.21",
   "type": "module",
   "module": "dist/index.js",
   "exports": {