@lax-wp/design-system 0.13.73 → 0.13.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/navigation/tabs/TabSwitch.cjs.js +1 -1
- package/dist/components/navigation/tabs/TabSwitch.cjs.js.map +1 -1
- package/dist/components/navigation/tabs/TabSwitch.es.js +60 -57
- package/dist/components/navigation/tabs/TabSwitch.es.js.map +1 -1
- package/dist/components/navigation/tabs/Tabs.cjs.js +1 -1
- package/dist/components/navigation/tabs/Tabs.cjs.js.map +1 -1
- package/dist/components/navigation/tabs/Tabs.es.js +402 -381
- package/dist/components/navigation/tabs/Tabs.es.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs.js +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.es.js +17 -17
- package/dist/components/user-avatar/UserAvatar.es.js.map +1 -1
- package/dist/hooks/useTextWidth.cjs.js +1 -1
- package/dist/hooks/useTextWidth.cjs.js.map +1 -1
- package/dist/hooks/useTextWidth.es.js +11 -14
- package/dist/hooks/useTextWidth.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../_virtual/index.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../_virtual/index.cjs.js"),x=require("./Children.cjs.js"),P=require("react-i18next"),S=require("../../tooltip/Tooltip.cjs.js"),M=({showCounts:v=!0,title:e,icon:h,suffixRecord:m,classValue:N,isSelected:n,selectedClassValue:f,textClassValue:w,selectedId:C,iconsOnly:s,draggingTab:y,disableAnimation:q,tabOptions:j,color:d="light",href:i,onClick:l,role:T,ariaSelected:$,tabIndex:I,onKeyDown:K})=>{const{t:o}=P.useTranslation(),u={selectedId:C,isSelected:n,selectedClassValue:f,textClassValue:w,disableAnimation:q},b={role:T,"aria-selected":$,tabIndex:I,onKeyDown:K,...s&&e?{"aria-label":o(e)}:{}},k=r.jsxs("div",{className:a("flex items-center text-center","opacity-100",s?"":"gap-1.5"),children:[h?r.jsx("div",{className:n?"opacity-100":`opacity-40 ${d==="dark"?"dark:opacity-100 dark:text-black-100":""}`,children:h}):null,r.jsx("div",{className:n?"opacity-100":"opacity-80",children:s?null:o(e||"")}),e!=="More..."&&m?.[e||""]!==void 0&&v?r.jsx("span",{className:a("ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1",n?a("text-primary-700 border-primary-200 dark:!border-primary-600 border-1",d==="dark"?"text-white bg-primary-700":"bg-neutral-100 dark:bg-primary-700 dark:text-white"):a("text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1",d==="dark"?"bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800":"bg-neutral-100 dark:bg-transparent")),children:String(m?.[e||""]??"0")}):null]}),c=s&&e?r.jsx(S,{title:o(e),delayShow:!0,children:k}):k,p=a(N,y?"opacity-0 cursor-grabbing":"","focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none"),g=t=>{t.metaKey||t.ctrlKey||t.shiftKey||t.button!==0||(t.preventDefault(),l?.())};return j?r.jsx("div",{id:`btn-tabs-tabswitch-${e}`,className:p,...b,children:r.jsx(x.Children,{...u,children:r.jsxs("div",{className:"flex items-center gap-1",children:[i?r.jsx("a",{href:i,onClick:g,className:"contents uppercase",tabIndex:-1,children:c}):r.jsx("button",{type:"button",onClick:l,className:"contents uppercase",tabIndex:-1,children:c}),j]})})}):i?r.jsx("a",{id:`btn-tabs-tabswitch-${e}`,href:i,className:p,onClick:g,...b,children:r.jsx(x.Children,{...u,children:c})}):r.jsx("button",{id:`btn-tabs-tabswitch-${e}`,className:p,type:"button",onClick:l,...b,children:r.jsx(x.Children,{...u,children:c})})};exports.TabSwitch=M;
|
|
2
2
|
//# sourceMappingURL=TabSwitch.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabSwitch.cjs.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n showCounts = true,\n title,\n icon,\n suffixRecord,\n classValue,\n isSelected,\n selectedClassValue,\n textClassValue,\n selectedId,\n iconsOnly,\n draggingTab,\n disableAnimation,\n tabOptions,\n color = 'light',\n href,\n onClick,\n role,\n ariaSelected,\n tabIndex,\n onKeyDown,\n}: TabSwitchProps) => {\n const { t } = useTranslation();\n const childrenProps = {\n selectedId,\n isSelected,\n selectedClassValue,\n textClassValue,\n disableAnimation,\n };\n\n const ariaProps = {\n role,\n 'aria-selected': ariaSelected,\n tabIndex,\n onKeyDown,\n };\n\n const text = (\n <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n {icon ? (\n <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n {icon}\n </div>\n ) : null}\n <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n {iconsOnly ? null : t(title || '')}\n </div>\n {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n <span\n className={classNames(\n 'ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1',\n isSelected\n ? classNames(\n 'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n color === 'dark'\n ? 'text-white bg-primary-700'\n : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n )\n : classNames(\n 'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n color === 'dark'\n ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n : 'bg-neutral-100 dark:bg-transparent',\n ),\n )}\n >\n {String(suffixRecord?.[title || ''] ?? '0')}\n </span>\n ) : null}\n </div>\n );\n\n const sharedClassName = classNames(\n classValue,\n draggingTab ? 'opacity-0 cursor-grabbing' : '',\n 'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n );\n\n const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n e.preventDefault();\n onClick?.();\n };\n\n if (tabOptions) {\n return (\n <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n <Children {...childrenProps}>\n <div className=\"flex items-center gap-1\">\n {href ? (\n <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n {
|
|
1
|
+
{"version":3,"file":"TabSwitch.cjs.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport Tooltip from '../../tooltip/Tooltip';\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n showCounts = true,\n title,\n icon,\n suffixRecord,\n classValue,\n isSelected,\n selectedClassValue,\n textClassValue,\n selectedId,\n iconsOnly,\n draggingTab,\n disableAnimation,\n tabOptions,\n color = 'light',\n href,\n onClick,\n role,\n ariaSelected,\n tabIndex,\n onKeyDown,\n}: TabSwitchProps) => {\n const { t } = useTranslation();\n const childrenProps = {\n selectedId,\n isSelected,\n selectedClassValue,\n textClassValue,\n disableAnimation,\n };\n\n const ariaProps = {\n role,\n 'aria-selected': ariaSelected,\n tabIndex,\n onKeyDown,\n // Icon-only tabs have no visible label — expose the name to assistive tech\n ...(iconsOnly && title ? { 'aria-label': t(title) } : {}),\n };\n\n const text = (\n <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n {icon ? (\n <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n {icon}\n </div>\n ) : null}\n <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n {iconsOnly ? null : t(title || '')}\n </div>\n {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n <span\n className={classNames(\n 'ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1',\n isSelected\n ? classNames(\n 'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n color === 'dark'\n ? 'text-white bg-primary-700'\n : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n )\n : classNames(\n 'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n color === 'dark'\n ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n : 'bg-neutral-100 dark:bg-transparent',\n ),\n )}\n >\n {String(suffixRecord?.[title || ''] ?? '0')}\n </span>\n ) : null}\n </div>\n );\n\n // Icon-only tabs have no visible label — show the tab name on hover\n const content =\n iconsOnly && title ? <Tooltip title={t(title)} delayShow>{text}</Tooltip> : text;\n\n const sharedClassName = classNames(\n classValue,\n draggingTab ? 'opacity-0 cursor-grabbing' : '',\n 'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n );\n\n const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n e.preventDefault();\n onClick?.();\n };\n\n if (tabOptions) {\n return (\n <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n <Children {...childrenProps}>\n <div className=\"flex items-center gap-1\">\n {href ? (\n <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n {content}\n </a>\n ) : (\n <button type=\"button\" onClick={onClick} className=\"contents uppercase\" tabIndex={-1}>\n {content}\n </button>\n )}\n {tabOptions}\n </div>\n </Children>\n </div>\n );\n }\n\n if (href) {\n return (\n <a\n id={`btn-tabs-tabswitch-${title}`}\n href={href}\n className={sharedClassName}\n onClick={handleLinkClick}\n {...ariaProps}\n >\n <Children {...childrenProps}>{content}</Children>\n </a>\n );\n }\n\n return (\n <button\n id={`btn-tabs-tabswitch-${title}`}\n className={sharedClassName}\n type='button'\n onClick={onClick}\n {...ariaProps}\n >\n <Children {...childrenProps}>{content}</Children>\n </button>\n );\n};\n"],"names":["TabSwitch","showCounts","title","icon","suffixRecord","classValue","isSelected","selectedClassValue","textClassValue","selectedId","iconsOnly","draggingTab","disableAnimation","tabOptions","color","href","onClick","role","ariaSelected","tabIndex","onKeyDown","t","useTranslation","childrenProps","ariaProps","text","jsxs","classNames","jsx","content","Tooltip","sharedClassName","handleLinkClick","e","Children"],"mappings":"qQAOaA,EAAY,CAAC,CACxB,WAAAC,EAAa,GACb,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EACA,QAAAC,EACA,KAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAsB,CACpB,KAAM,CAAE,EAAAC,CAAA,EAAMC,iBAAA,EACRC,EAAgB,CACpB,WAAAd,EACA,WAAAH,EACA,mBAAAC,EACA,eAAAC,EACA,iBAAAI,CAAA,EAGIY,EAAY,CAChB,KAAAP,EACA,gBAAiBC,EACjB,SAAAC,EACA,UAAAC,EAEA,GAAIV,GAAaR,EAAQ,CAAE,aAAcmB,EAAEnB,CAAK,GAAM,CAAA,CAAC,EAGnDuB,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAW,gCAA+C,cAAgCjB,EAAwB,GAAZ,SAAc,EACjI,SAAA,CAAAP,EACCyB,EAAAA,IAAC,MAAA,CAAI,UAAWtB,EAAa,cAAgB,cAAcQ,IAAU,OAAS,uCAAyC,EAAE,GACtH,SAAAX,CAAA,CACH,EACE,KACJyB,EAAAA,IAAC,MAAA,CAAI,UAAWtB,EAAa,cAAgB,aAC1C,SAAAI,EAAY,KAAOW,EAAEnB,GAAS,EAAE,CAAA,CACnC,EACCA,IAAU,WAAaE,IAAeF,GAAS,EAAE,IAAM,QAAaD,EACnE2B,EAAAA,IAAC,OAAA,CACC,UAAWD,EACT,4EACArB,EACIqB,EACA,wEACAb,IAAU,OACN,4BACA,oDAAA,EAEJa,EACA,6FACAb,IAAU,OACN,6DACA,oCAAA,CACN,EAGH,SAAA,OAAOV,IAAeF,GAAS,EAAE,GAAK,GAAG,CAAA,CAAA,EAE1C,IAAA,EACN,EAII2B,EACJnB,GAAaR,EAAQ0B,EAAAA,IAACE,EAAA,CAAQ,MAAOT,EAAEnB,CAAK,EAAG,UAAS,GAAE,SAAAuB,CAAA,CAAK,EAAaA,EAExEM,EAAkBJ,EACtBtB,EACAM,EAAc,4BAA8B,GAC5C,gFAAA,EAGIqB,EAAmBC,GAAqC,CACxDA,EAAE,SAAWA,EAAE,SAAWA,EAAE,UAAYA,EAAE,SAAW,IACzDA,EAAE,eAAA,EACFjB,IAAA,EACF,EAEA,OAAIH,QAEC,MAAA,CAAI,GAAI,sBAAsBX,CAAK,GAAI,UAAW6B,EAAkB,GAAGP,EACtE,eAACU,EAAAA,SAAA,CAAU,GAAGX,EACZ,SAAAG,OAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAX,EACCa,EAAAA,IAAC,KAAE,KAAAb,EAAY,QAASiB,EAAiB,UAAU,qBAAqB,SAAU,GAC/E,SAAAH,CAAA,CACH,EAEAD,EAAAA,IAAC,SAAA,CAAO,KAAK,SAAS,QAAAZ,EAAkB,UAAU,qBAAqB,SAAU,GAC9E,SAAAa,CAAA,CACH,EAEDhB,CAAA,CAAA,CACH,EACF,EACF,EAIAE,EAEAa,EAAAA,IAAC,IAAA,CACC,GAAI,sBAAsB1B,CAAK,GAC/B,KAAAa,EACA,UAAWgB,EACX,QAASC,EACR,GAAGR,EAEJ,SAAAI,EAAAA,IAACM,EAAAA,SAAA,CAAU,GAAGX,EAAgB,SAAAM,CAAA,CAAQ,CAAA,CAAA,EAM1CD,EAAAA,IAAC,SAAA,CACC,GAAI,sBAAsB1B,CAAK,GAC/B,UAAW6B,EACX,KAAK,SACL,QAAAf,EACC,GAAGQ,EAEJ,SAAAI,EAAAA,IAACM,EAAAA,SAAA,CAAU,GAAGX,EAAgB,SAAAM,CAAA,CAAQ,CAAA,CAAA,CAG5C"}
|
|
@@ -1,92 +1,95 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as N, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import e from "../../../_virtual/index.es.js";
|
|
3
|
-
import { Children as
|
|
3
|
+
import { Children as m } from "./Children.es.js";
|
|
4
4
|
import { useTranslation as L } from "react-i18next";
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
import M from "../../tooltip/Tooltip.es.js";
|
|
6
|
+
const F = ({
|
|
7
|
+
showCounts: v = !0,
|
|
7
8
|
title: a,
|
|
8
|
-
icon:
|
|
9
|
-
suffixRecord:
|
|
10
|
-
classValue:
|
|
9
|
+
icon: h,
|
|
10
|
+
suffixRecord: y,
|
|
11
|
+
classValue: w,
|
|
11
12
|
isSelected: n,
|
|
12
|
-
selectedClassValue:
|
|
13
|
-
textClassValue:
|
|
14
|
-
selectedId:
|
|
15
|
-
iconsOnly:
|
|
16
|
-
draggingTab:
|
|
17
|
-
disableAnimation:
|
|
18
|
-
tabOptions:
|
|
19
|
-
color:
|
|
20
|
-
href:
|
|
21
|
-
onClick:
|
|
22
|
-
role:
|
|
23
|
-
ariaSelected:
|
|
24
|
-
tabIndex:
|
|
25
|
-
onKeyDown:
|
|
13
|
+
selectedClassValue: $,
|
|
14
|
+
textClassValue: C,
|
|
15
|
+
selectedId: K,
|
|
16
|
+
iconsOnly: i,
|
|
17
|
+
draggingTab: k,
|
|
18
|
+
disableAnimation: j,
|
|
19
|
+
tabOptions: x,
|
|
20
|
+
color: d = "light",
|
|
21
|
+
href: s,
|
|
22
|
+
onClick: o,
|
|
23
|
+
role: I,
|
|
24
|
+
ariaSelected: P,
|
|
25
|
+
tabIndex: T,
|
|
26
|
+
onKeyDown: D
|
|
26
27
|
}) => {
|
|
27
|
-
const { t:
|
|
28
|
-
selectedId:
|
|
28
|
+
const { t: l } = L(), b = {
|
|
29
|
+
selectedId: K,
|
|
29
30
|
isSelected: n,
|
|
30
|
-
selectedClassValue:
|
|
31
|
-
textClassValue:
|
|
32
|
-
disableAnimation:
|
|
33
|
-
},
|
|
34
|
-
role:
|
|
35
|
-
"aria-selected":
|
|
36
|
-
tabIndex:
|
|
37
|
-
onKeyDown:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
selectedClassValue: $,
|
|
32
|
+
textClassValue: C,
|
|
33
|
+
disableAnimation: j
|
|
34
|
+
}, p = {
|
|
35
|
+
role: I,
|
|
36
|
+
"aria-selected": P,
|
|
37
|
+
tabIndex: T,
|
|
38
|
+
onKeyDown: D,
|
|
39
|
+
// Icon-only tabs have no visible label — expose the name to assistive tech
|
|
40
|
+
...i && a ? { "aria-label": l(a) } : {}
|
|
41
|
+
}, g = /* @__PURE__ */ N("div", { className: e("flex items-center text-center", "opacity-100", i ? "" : "gap-1.5"), children: [
|
|
42
|
+
h ? /* @__PURE__ */ r("div", { className: n ? "opacity-100" : `opacity-40 ${d === "dark" ? "dark:opacity-100 dark:text-black-100" : ""}`, children: h }) : null,
|
|
43
|
+
/* @__PURE__ */ r("div", { className: n ? "opacity-100" : "opacity-80", children: i ? null : l(a || "") }),
|
|
44
|
+
a !== "More..." && y?.[a || ""] !== void 0 && v ? /* @__PURE__ */ r(
|
|
42
45
|
"span",
|
|
43
46
|
{
|
|
44
47
|
className: e(
|
|
45
48
|
"ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1",
|
|
46
49
|
n ? e(
|
|
47
50
|
"text-primary-700 border-primary-200 dark:!border-primary-600 border-1",
|
|
48
|
-
|
|
51
|
+
d === "dark" ? "text-white bg-primary-700" : "bg-neutral-100 dark:bg-primary-700 dark:text-white"
|
|
49
52
|
) : e(
|
|
50
53
|
"text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1",
|
|
51
|
-
|
|
54
|
+
d === "dark" ? "bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800" : "bg-neutral-100 dark:bg-transparent"
|
|
52
55
|
)
|
|
53
56
|
),
|
|
54
|
-
children: String(
|
|
57
|
+
children: String(y?.[a || ""] ?? "0")
|
|
55
58
|
}
|
|
56
59
|
) : null
|
|
57
|
-
] }),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
+
] }), c = i && a ? /* @__PURE__ */ r(M, { title: l(a), delayShow: !0, children: g }) : g, u = e(
|
|
61
|
+
w,
|
|
62
|
+
k ? "opacity-0 cursor-grabbing" : "",
|
|
60
63
|
"focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none"
|
|
61
|
-
),
|
|
62
|
-
t.metaKey || t.ctrlKey || t.shiftKey || t.button !== 0 || (t.preventDefault(),
|
|
64
|
+
), f = (t) => {
|
|
65
|
+
t.metaKey || t.ctrlKey || t.shiftKey || t.button !== 0 || (t.preventDefault(), o?.());
|
|
63
66
|
};
|
|
64
|
-
return
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
] }) }) }) :
|
|
67
|
+
return x ? /* @__PURE__ */ r("div", { id: `btn-tabs-tabswitch-${a}`, className: u, ...p, children: /* @__PURE__ */ r(m, { ...b, children: /* @__PURE__ */ N("div", { className: "flex items-center gap-1", children: [
|
|
68
|
+
s ? /* @__PURE__ */ r("a", { href: s, onClick: f, className: "contents uppercase", tabIndex: -1, children: c }) : /* @__PURE__ */ r("button", { type: "button", onClick: o, className: "contents uppercase", tabIndex: -1, children: c }),
|
|
69
|
+
x
|
|
70
|
+
] }) }) }) : s ? /* @__PURE__ */ r(
|
|
68
71
|
"a",
|
|
69
72
|
{
|
|
70
73
|
id: `btn-tabs-tabswitch-${a}`,
|
|
71
|
-
href:
|
|
72
|
-
className:
|
|
73
|
-
onClick:
|
|
74
|
-
...
|
|
75
|
-
children: /* @__PURE__ */ r(
|
|
74
|
+
href: s,
|
|
75
|
+
className: u,
|
|
76
|
+
onClick: f,
|
|
77
|
+
...p,
|
|
78
|
+
children: /* @__PURE__ */ r(m, { ...b, children: c })
|
|
76
79
|
}
|
|
77
80
|
) : /* @__PURE__ */ r(
|
|
78
81
|
"button",
|
|
79
82
|
{
|
|
80
83
|
id: `btn-tabs-tabswitch-${a}`,
|
|
81
|
-
className:
|
|
84
|
+
className: u,
|
|
82
85
|
type: "button",
|
|
83
|
-
onClick:
|
|
84
|
-
...
|
|
85
|
-
children: /* @__PURE__ */ r(
|
|
86
|
+
onClick: o,
|
|
87
|
+
...p,
|
|
88
|
+
children: /* @__PURE__ */ r(m, { ...b, children: c })
|
|
86
89
|
}
|
|
87
90
|
);
|
|
88
91
|
};
|
|
89
92
|
export {
|
|
90
|
-
|
|
93
|
+
F as TabSwitch
|
|
91
94
|
};
|
|
92
95
|
//# sourceMappingURL=TabSwitch.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabSwitch.es.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n showCounts = true,\n title,\n icon,\n suffixRecord,\n classValue,\n isSelected,\n selectedClassValue,\n textClassValue,\n selectedId,\n iconsOnly,\n draggingTab,\n disableAnimation,\n tabOptions,\n color = 'light',\n href,\n onClick,\n role,\n ariaSelected,\n tabIndex,\n onKeyDown,\n}: TabSwitchProps) => {\n const { t } = useTranslation();\n const childrenProps = {\n selectedId,\n isSelected,\n selectedClassValue,\n textClassValue,\n disableAnimation,\n };\n\n const ariaProps = {\n role,\n 'aria-selected': ariaSelected,\n tabIndex,\n onKeyDown,\n };\n\n const text = (\n <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n {icon ? (\n <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n {icon}\n </div>\n ) : null}\n <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n {iconsOnly ? null : t(title || '')}\n </div>\n {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n <span\n className={classNames(\n 'ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1',\n isSelected\n ? classNames(\n 'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n color === 'dark'\n ? 'text-white bg-primary-700'\n : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n )\n : classNames(\n 'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n color === 'dark'\n ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n : 'bg-neutral-100 dark:bg-transparent',\n ),\n )}\n >\n {String(suffixRecord?.[title || ''] ?? '0')}\n </span>\n ) : null}\n </div>\n );\n\n const sharedClassName = classNames(\n classValue,\n draggingTab ? 'opacity-0 cursor-grabbing' : '',\n 'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n );\n\n const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n e.preventDefault();\n onClick?.();\n };\n\n if (tabOptions) {\n return (\n <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n <Children {...childrenProps}>\n <div className=\"flex items-center gap-1\">\n {href ? (\n <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n {
|
|
1
|
+
{"version":3,"file":"TabSwitch.es.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport Tooltip from '../../tooltip/Tooltip';\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n showCounts = true,\n title,\n icon,\n suffixRecord,\n classValue,\n isSelected,\n selectedClassValue,\n textClassValue,\n selectedId,\n iconsOnly,\n draggingTab,\n disableAnimation,\n tabOptions,\n color = 'light',\n href,\n onClick,\n role,\n ariaSelected,\n tabIndex,\n onKeyDown,\n}: TabSwitchProps) => {\n const { t } = useTranslation();\n const childrenProps = {\n selectedId,\n isSelected,\n selectedClassValue,\n textClassValue,\n disableAnimation,\n };\n\n const ariaProps = {\n role,\n 'aria-selected': ariaSelected,\n tabIndex,\n onKeyDown,\n // Icon-only tabs have no visible label — expose the name to assistive tech\n ...(iconsOnly && title ? { 'aria-label': t(title) } : {}),\n };\n\n const text = (\n <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n {icon ? (\n <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n {icon}\n </div>\n ) : null}\n <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n {iconsOnly ? null : t(title || '')}\n </div>\n {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n <span\n className={classNames(\n 'ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1',\n isSelected\n ? classNames(\n 'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n color === 'dark'\n ? 'text-white bg-primary-700'\n : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n )\n : classNames(\n 'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n color === 'dark'\n ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n : 'bg-neutral-100 dark:bg-transparent',\n ),\n )}\n >\n {String(suffixRecord?.[title || ''] ?? '0')}\n </span>\n ) : null}\n </div>\n );\n\n // Icon-only tabs have no visible label — show the tab name on hover\n const content =\n iconsOnly && title ? <Tooltip title={t(title)} delayShow>{text}</Tooltip> : text;\n\n const sharedClassName = classNames(\n classValue,\n draggingTab ? 'opacity-0 cursor-grabbing' : '',\n 'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n );\n\n const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n e.preventDefault();\n onClick?.();\n };\n\n if (tabOptions) {\n return (\n <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n <Children {...childrenProps}>\n <div className=\"flex items-center gap-1\">\n {href ? (\n <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n {content}\n </a>\n ) : (\n <button type=\"button\" onClick={onClick} className=\"contents uppercase\" tabIndex={-1}>\n {content}\n </button>\n )}\n {tabOptions}\n </div>\n </Children>\n </div>\n );\n }\n\n if (href) {\n return (\n <a\n id={`btn-tabs-tabswitch-${title}`}\n href={href}\n className={sharedClassName}\n onClick={handleLinkClick}\n {...ariaProps}\n >\n <Children {...childrenProps}>{content}</Children>\n </a>\n );\n }\n\n return (\n <button\n id={`btn-tabs-tabswitch-${title}`}\n className={sharedClassName}\n type='button'\n onClick={onClick}\n {...ariaProps}\n >\n <Children {...childrenProps}>{content}</Children>\n </button>\n );\n};\n"],"names":["TabSwitch","showCounts","title","icon","suffixRecord","classValue","isSelected","selectedClassValue","textClassValue","selectedId","iconsOnly","draggingTab","disableAnimation","tabOptions","color","href","onClick","role","ariaSelected","tabIndex","onKeyDown","t","useTranslation","childrenProps","ariaProps","text","jsxs","classNames","jsx","content","Tooltip","sharedClassName","handleLinkClick","e","Children"],"mappings":";;;;;AAOO,MAAMA,IAAY,CAAC;AAAA,EACxB,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAAsB;AACpB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAgB;AAAA,IACpB,YAAAd;AAAA,IACA,YAAAH;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAI;AAAA,EAAA,GAGIY,IAAY;AAAA,IAChB,MAAAP;AAAA,IACA,iBAAiBC;AAAA,IACjB,UAAAC;AAAA,IACA,WAAAC;AAAA;AAAA,IAEA,GAAIV,KAAaR,IAAQ,EAAE,cAAcmB,EAAEnB,CAAK,MAAM,CAAA;AAAA,EAAC,GAGnDuB,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAW,iCAA+C,eAAgCjB,IAAwB,KAAZ,SAAc,GACjI,UAAA;AAAA,IAAAP,IACC,gBAAAyB,EAAC,OAAA,EAAI,WAAWtB,IAAa,gBAAgB,cAAcQ,MAAU,SAAS,yCAAyC,EAAE,IACtH,UAAAX,EAAA,CACH,IACE;AAAA,IACJ,gBAAAyB,EAAC,OAAA,EAAI,WAAWtB,IAAa,gBAAgB,cAC1C,UAAAI,IAAY,OAAOW,EAAEnB,KAAS,EAAE,EAAA,CACnC;AAAA,IACCA,MAAU,aAAaE,IAAeF,KAAS,EAAE,MAAM,UAAaD,IACnE,gBAAA2B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAAA,UACT;AAAA,UACArB,IACIqB;AAAAA,YACA;AAAA,YACAb,MAAU,SACN,8BACA;AAAA,UAAA,IAEJa;AAAAA,YACA;AAAA,YACAb,MAAU,SACN,+DACA;AAAA,UAAA;AAAA,QACN;AAAA,QAGH,UAAA,OAAOV,IAAeF,KAAS,EAAE,KAAK,GAAG;AAAA,MAAA;AAAA,IAAA,IAE1C;AAAA,EAAA,GACN,GAII2B,IACJnB,KAAaR,IAAQ,gBAAA0B,EAACE,GAAA,EAAQ,OAAOT,EAAEnB,CAAK,GAAG,WAAS,IAAE,UAAAuB,EAAA,CAAK,IAAaA,GAExEM,IAAkBJ;AAAAA,IACtBtB;AAAA,IACAM,IAAc,8BAA8B;AAAA,IAC5C;AAAA,EAAA,GAGIqB,IAAkB,CAACC,MAAqC;AAC5D,IAAIA,EAAE,WAAWA,EAAE,WAAWA,EAAE,YAAYA,EAAE,WAAW,MACzDA,EAAE,eAAA,GACFjB,IAAA;AAAA,EACF;AAEA,SAAIH,sBAEC,OAAA,EAAI,IAAI,sBAAsBX,CAAK,IAAI,WAAW6B,GAAkB,GAAGP,GACtE,4BAACU,GAAA,EAAU,GAAGX,GACZ,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAAX,IACC,gBAAAa,EAAC,OAAE,MAAAb,GAAY,SAASiB,GAAiB,WAAU,sBAAqB,UAAU,IAC/E,UAAAH,EAAA,CACH,IAEA,gBAAAD,EAAC,UAAA,EAAO,MAAK,UAAS,SAAAZ,GAAkB,WAAU,sBAAqB,UAAU,IAC9E,UAAAa,EAAA,CACH;AAAA,IAEDhB;AAAA,EAAA,EAAA,CACH,GACF,GACF,IAIAE,IAEA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,sBAAsB1B,CAAK;AAAA,MAC/B,MAAAa;AAAA,MACA,WAAWgB;AAAA,MACX,SAASC;AAAA,MACR,GAAGR;AAAA,MAEJ,UAAA,gBAAAI,EAACM,GAAA,EAAU,GAAGX,GAAgB,UAAAM,EAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,IAM1C,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,sBAAsB1B,CAAK;AAAA,MAC/B,WAAW6B;AAAA,MACX,MAAK;AAAA,MACL,SAAAf;AAAA,MACC,GAAGQ;AAAA,MAEJ,UAAA,gBAAAI,EAACM,GAAA,EAAU,GAAGX,GAAgB,UAAAM,EAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAG5C;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("@dnd-kit/core"),ne=require("@dnd-kit/sortable"),we=require("antd"),c=require("../../../_virtual/index.cjs.js"),a=require("react"),Dt=require("react-i18next"),Je=require("@mui/icons-material/MoreHorizOutlined"),Vt=require("./types.cjs.js"),Mt=require("../../../utils/formatters.cjs.js"),Lt=require("../../../providers/design-system-provider/hooks.cjs.js"),qt=require("../../../hooks/useTextWidth.cjs.js"),Rt=require("../../button/IconButton.cjs.js"),S=require("../../buttons/option-button/OptionButton.cjs.js"),Bt=require("../../forms/search-bar/SearchBar.cjs.js"),ke=require("../../tooltip/Tooltip.cjs.js"),Ht=require("../../icons/EditIcon.cjs.js"),Ut=require("react-toastify"),ye=require("./TabSwitch.cjs.js"),k=require("../../icon/icons.generated.cjs.js"),Qe=require("./SortableTab.cjs.js"),Wt=require("./DropableWrapper.cjs.js"),zt=require("./MoreButton.cjs.js"),Pt=require("./TabOptions.cjs.js"),Ft=require("./TabDragOverlay.cjs.js"),$t=()=>Math.random().toString(16).slice(2,13),se=["[&_.ant-dropdown-menu-item]:!outline-none","[&_.ant-dropdown-menu-submenu-title]:!outline-none","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:dark:bg-black-600","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"].join(" ");let Se=null;const Te=T=>{T?(Se=document.activeElement,setTimeout(()=>{document.querySelector(".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title")?.focus()},50)):setTimeout(()=>{Se?.focus(),Se=null},0)},d={SELECT:"Select",MOVE_LEFT:"MoveLeft",MOVE_RIGHT:"MoveRight",HIDE:"Hide",UNHIDE:"Unhide",COPY_LINK:"CopyLink",DELETE:"Delete",PIN:"Pin",UNPIN:"Unpin",EDIT:"Edit"},At=({variant:T="default",tabs:O=[],activeTab:i,onTabClick:Xe,suffixRecord:P,isLoading:Ze,size:_="md",className:Ce,draggable:E=!1,showAllItems:F=!1,copyLink:Ke=!1,isDisabled:et=!1,color:ae="light",iconsOnly:tt=!1,tabIcons:oe={},height:nt="h-6",fullWidth:re=!1,fitContentWidth:st=!1,disableAnimation:at=!1,onEdit:je,onDelete:Ie,onCopyLink:Ne,allowPin:C=!1,isFullWidth:$=!1,rightSection:L,initialTabs:ot,tabConfig:rt,onTabConfigChange:ve,onTabsChange:Oe,parentContainer:it=document.body,tabKey:j,linkConfig:x,showTabOptions:lt=!0})=>{const g=Lt.useTabConfig(),_e=j?g?.getTabSettings(j):void 0,ie=ot??_e?.tab_items,A=rt??_e?.tab_options,[le,ct]=a.useState(""),[N,G]=a.useState(!1),[q,dt]=a.useState(0),[u,ce]=a.useState([]),[Y,ut]=a.useState([]),[pt,J]=a.useState(null),[D,Q]=a.useState(null),[xt,Ee]=a.useState(!1),[De,Ve]=a.useState(A??Vt.INITIAL_TAB_OPTION_CONFIG),[de,bt]=a.useState(""),[Me,mt]=a.useState("contains"),{showCounts:y,lockOrder:R,sortOrder:ue}=De,{t:p}=Dt.useTranslation(),X=a.useRef(null),ft=a.useRef(null),Le=a.useRef(q),{measureText:B}=qt.useTextWidth(),H=a.useMemo(()=>$t(),[]),ht=v.useSensors(v.useSensor(v.MouseSensor,{activationConstraint:{distance:5}}),v.useSensor(v.TouchSensor,{activationConstraint:{delay:300,tolerance:5}})),b=a.useMemo(()=>P&&Object.fromEntries(Object.entries(P).map(([e,t])=>[e,Mt.formatCount(t)])),[P]),qe=a.useMemo(()=>Y.filter(({is_hidden:e})=>!e),[Y]),V=a.useMemo(()=>Y.filter(({is_hidden:e})=>e),[Y]),Re=a.useMemo(()=>qe.filter(({name:e})=>{if(!de)return!0;const t=(e??"").toLowerCase(),s=de.toLowerCase();return Me==="contains"?t.includes(s):!t.includes(s)}),[qe,de,Me]),r=a.useMemo(()=>[...Re].sort((e,t)=>e.is_pinned&&!t.is_pinned?-1:!e.is_pinned&&t.is_pinned?1:0),[Re]),gt=q<r.length,Z=F?r.length:gt?q:r.length,Be=r.findIndex(e=>e.name===i)>=Z,He=u.length-Z-(Be?1:0);Le.current=q;const U=a.useCallback(e=>{ce(e),Oe?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_items:e})},[Oe,j,g]),wt=a.useCallback(e=>{Ve(e),ve?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_options:e})},[ve,j,g]),Ue=e=>e.is_pinned?32:0,pe=a.useCallback(e=>{if(!e)return;const t=E?30:0,s=y?190:84,l=_==="sm"?4:8,o=32;let m=0,ee=0,w=0;const f=e-(L?.width||0)-t,Fe=Le.current,$e=Fe<r.length,Ae=V.length>0;for(let h=0;h<r.length;h++){const I=r[h],te=b?.[I.name]?String(b?.[I.name]):"",fe=y&&te?B(te,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,he=B(I?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),ge=C?Ue(I):0,Ye=he+fe+o+l+ge;if(I.name===i&&(ee=Ye),m+=Ye,f>m+($e||Ae?s:0)+h*25)w=h+1;else break}const Ge=r.length-w;if(Ge+V.length===1&&V.length===0&&Ge===1&&w<r.length){const h=r[w];if(h){const I=b?.[h.name]?String(b?.[h.name]):"",te=y&&I?B(I,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,fe=B(h?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),he=C?Ue(h):0,ge=fe+te+o+l+he;f>=m+ge&&(w+=1)}}const Et=F?r.length:w;r.findIndex(h=>h.name===i)>=Et&&(m+=ee,f<m+($e||Ae?s:0)&&(w=Math.max(w-1,0))),w!==Fe&&dt(w)},[r,y,F,C,b,L?.width,i,_,E,V.length,B]),xe=a.useCallback(()=>{if(typeof window<"u")return new URLSearchParams(window.location.search);if(x&&g?.getSearchParam){const e=new URLSearchParams,t=g.getSearchParam(x.key);return t&&e.set(x.key,t),e}return new URLSearchParams},[x,g]),be=a.useCallback((e,t)=>(x&&(t===x.defaultLink?e.delete(x.key):e.set(x.key,t),x.onResolve?.(e)),e),[x]),W=a.useCallback(e=>x?`?${be(xe(),e).toString()}`:void 0,[be,xe,x]),kt=Ke||!!x,yt=a.useCallback(async e=>{const t=W(e),s=typeof window<"u"?window.location.origin:"",l=typeof window<"u"?window.location.pathname:"",o=t?`${s}${l}${t}`:`${s}${l}`;await navigator.clipboard.writeText(o),Ut.toast.success(p("Link copied to clipboard"),{toastId:"Link copied to clipboard"}),Ne?.(e,o)},[W,p,Ne]),z=e=>{if(G(!1),Xe?.(e),x&&g?.navigate){const t=be(xe(),e);g.navigate(`?${t.toString()}`)}},We=e=>{if(r.length<=1)return;const t=u.map(o=>o.name===e?{...o,is_hidden:!0}:o),s=r.findIndex(o=>o.name===e),l=s===0?1:s-1;z(r[l].name),U(t)},St=e=>{const t=u.map(s=>s.name===e?{...s,is_hidden:!1}:s);G(!1),U(t)},K=e=>{if(!C)return;const t=u.map(s=>s.name===e?{...s,is_pinned:!s.is_pinned}:s);U(t)},ze=(e,t)=>{const s=u.findIndex(({name:o})=>o===e),l=t==="left"?s-(u[s-1]?.name===i?2:1):s+1;U(ne.arrayMove(u,s,l))},Pe=()=>G(!N),Tt=e=>Q(e.active.id),Ct=e=>{const{active:t,over:s}=e;if(s?.id==="more-tabs"){We(t.id),Q(null),J(null);return}const l=u.findIndex(({name:m})=>m===t.id),o=u.findIndex(({name:m})=>m===s?.id);U(ne.arrayMove(u,l,o)),Q(null),J(null)},jt=()=>{Q(null),J(null)},It=e=>{J(e.over?.id==="more-tabs"?"more-tabs":null)},Nt=()=>{},vt=(e,t)=>{bt(e),mt(t)},me=(e,t=!1,s=!1)=>{const o=u.find(f=>f.name===e)?.is_pinned,m=[{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowOutwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Select Tab"),className:"text-black-900 dark:text-white"}),key:d.SELECT,onClick:()=>z(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowUpwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Up"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_LEFT,disabled:R,onClick:()=>ze(e,"left")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowDownwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Down"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_RIGHT,disabled:R,onClick:()=>ze(e,"right")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ContentCopyIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Copy Link"),className:"text-black-900 dark:text-white"}),key:d.COPY_LINK,onClick:()=>yt(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityOffIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Hide"),className:"text-black-900 dark:text-white"}),key:d.HIDE,onClick:()=>We(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Unhide"),className:"text-black-900 dark:text-white"}),key:d.UNHIDE,onClick:()=>St(e)},{label:n.jsx(S.OptionButton,{icon:o?n.jsx(k.UnpinFilledIcon,{size:20,className:"rotate-12 text-inherit dark:text-inherit"}):n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"}),text:p(o?"Unpin":"Pin"),className:"text-black-900 dark:text-white",notVisible:!C}),key:o?d.UNPIN:d.PIN,onClick:()=>K(e)},{label:n.jsx(S.OptionButton,{className:"text-black-900 dark:text-white",icon:n.jsx(Ht.EditIcon,{}),text:p("Edit"),notVisible:!je}),key:d.EDIT,onClick:()=>je?.(e)},{label:n.jsx(S.OptionButton,{className:"text-error-600 dark:text-error-600",icon:n.jsx(k.DeleteIcon,{size:18,className:"text-error-600 dark:text-error-600"}),text:p("Delete"),notVisible:!Ie}),key:d.DELETE,onClick:()=>Ie?.(e)}],ee=[d.HIDE,d.UNHIDE],w=[d.SELECT,d.MOVE_LEFT,d.MOVE_RIGHT,d.UNHIDE];return m.filter(f=>t?f.key===d.UNHIDE:s?!ee.includes(f.key):!w.includes(f.key)).filter(f=>kt?!0:f.key!==d.COPY_LINK).filter(f=>r.length===1?f.key!==d.HIDE:!0)},M=(e,t)=>({classValue:{default:c("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),secondary:c("flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",_==="sm"?"py-1 px-3 text-sm":"py-2 px-4 text-base")},selectedClassValue:{default:c("absolute left-0 bottom-0 w-full h-[3px] bg-primary-600"),secondary:c("absolute inset-0 bg-primary-50 dark:bg-primary-975 rounded-lg")},textClassValue:{default:c("relative uppercase font-sans font-semibold text-sm whitespace-nowrap",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 hover:text-neutral-500 dark:text-neutral-100 dark:hover:text-white"),secondary:c("relative whitespace-nowrap text-sm",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 dark:text-neutral-400")}})[e][T];a.useEffect(()=>{if(!X.current||T==="switch")return;const e=new ResizeObserver(t=>{const s=t[0].contentRect.width;pe(s)});return e.observe(X.current),pe(X.current.clientWidth),()=>e.disconnect()},[pe,T]);const Ot=JSON.stringify(O),_t=JSON.stringify(ie?.map(({name:e})=>e));return a.useEffect(()=>{if(ie?.length){let e=[...ie];O.forEach(t=>{e.find(s=>s.name===t)||e.push({name:t,is_default:!1,is_hidden:!1,is_pinned:!1})}),e=e.filter((t,s,l)=>O.includes(t.name)&&s===l.findIndex(o=>o.name===t.name)),ce(e)}else ce(O.map(e=>({name:e,is_default:!1,is_hidden:!1,is_pinned:!1})).filter((e,t,s)=>t===s.findIndex(l=>l.name===e.name)))},[Ot,_t]),a.useEffect(()=>{A&&Ve(A)},[A]),a.useEffect(()=>{if(!u.length)return;const e=[...u];ue==="asc"?e.sort((t,s)=>t.name.localeCompare(s.name)):ue==="desc"&&e.sort((t,s)=>s.name.localeCompare(t.name)),ut(e)},[u,ue]),a.useEffect(()=>{Te(N)},[N]),T==="switch"?n.jsx("div",{className:c("inline",Ce),children:n.jsx("ul",{role:"tablist","aria-orientation":"horizontal",className:c("inline-flex grow-0 p-1 rounded-lg",ae==="dark"?"border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800":"bg-neutral-100 dark:bg-black-700",re?"w-full":"w-auto"),children:O.map(e=>{const t=i===e,s=oe?.[e],l=u.find(m=>m.name===e),o=C&&l?.is_pinned;return n.jsx("li",{role:"presentation",className:c("inline-flex",re?"w-full":"w-auto"),children:n.jsx(ye.TabSwitch,{title:e,showCounts:y,role:"tab",ariaSelected:t,tabIndex:0,icon:o?n.jsx(ke,{title:"Unpin",children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{className:"rotate-45 w-icon h-icon text-inherit dark:text-inherit"})})}):s,iconsOnly:tt,classValue:c("relative py-0.5 border-gray-200",nt,re?"w-full flex items-center justify-center":"px-2"),selectedClassValue:c("absolute inset-0 rounded-md z-0",ae==="dark"?"bg-neutral-900":"bg-white dark:bg-black-800"),textClassValue:c("relative text-xs font-semibold font-sans whitespace-nowrap",t?"text-neutral-900 dark:text-neutral-100":"text-neutral-700 dark:text-neutral-100"),isSelected:t,href:W(e),onClick:et?void 0:()=>z(e),suffixRecord:b,selectedId:H,color:ae,disableAnimation:at})},e)})})}):n.jsx("div",{ref:X,className:c(st?"w-fit":"w-full"),onMouseEnter:()=>Ee(!0),onMouseLeave:()=>Ee(!1),children:n.jsxs(v.DndContext,{sensors:ht,onDragEnd:Ct,onDragStart:Tt,onDragCancel:jt,collisionDetection:v.closestCenter,onDragOver:It,children:[n.jsxs("ul",{role:"tablist","aria-orientation":"horizontal",className:c("flex items-center w-full",Ce,$?"gap-0":_==="sm"?"gap-1":"gap-2"),ref:ft,children:[Ze?n.jsx("div",{className:"skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded"}):n.jsxs(ne.SortableContext,{items:r.map(({name:e})=>e),strategy:ne.horizontalListSortingStrategy,id:"sortable",disabled:!E||R,children:[r.slice(0,Z).map(({name:e,is_pinned:t})=>{const s=i===e&&!N,l=C&&t;return n.jsx(Qe.SortableTab,{title:e,isDragging:D===e,className:$?"flex-1 flex justify-center":"",children:n.jsx("li",{role:"presentation",className:c($?"w-full flex":"sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:e,role:"tab",ariaSelected:s,tabIndex:0,classValue:c(M("classValue",s),$?"w-full justify-center":""),selectedClassValue:M("selectedClassValue",s),textClassValue:M("textClassValue",s),isSelected:s,tabOptions:s&&E?n.jsx(we.Dropdown,{menu:{items:me(e),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Rt,{tooltip:p("More"),variant:"ghost",className:"!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",children:n.jsx(Je,{sx:{fontSize:20}})})}):null,draggingTab:D===e,href:W(e),onClick:()=>z(e),suffixRecord:b,selectedId:H,icon:l?n.jsx(ke,{title:p("Unpin"),children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[e]??null})},e)},e)}),i&&Be?n.jsx(Qe.SortableTab,{title:i,isDragging:D===i,children:n.jsx("li",{role:"presentation",className:c("sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:i,role:"tab",ariaSelected:!0,tabIndex:0,classValue:M("classValue",!0),selectedClassValue:M("selectedClassValue",!0),textClassValue:M("textClassValue",!0),isSelected:!0,tabOptions:E?n.jsx(we.Dropdown,{menu:{items:me(i),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Je,{sx:{fontSize:20},className:"text-primary-600"})}):null,draggingTab:D===i,href:W(i),suffixRecord:b,selectedId:H,icon:C&&u.find(e=>e.name===i)?.is_pinned?n.jsx(ke,{title:p("Pinned"),children:n.jsx("span",{onClick:()=>K(i),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[i]??null})},i)},i):null,(q<r.length&&!F||V.length>0)&&He>0?n.jsx(Wt.DropableWrapper,{id:"more-tabs",children:n.jsx(we.Dropdown,{overlayStyle:{maxHeight:"calc(100vh - 350px)",overflow:"auto",marginTop:"8px",scrollbarWidth:"none",borderRadius:8,boxShadow:"0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"},onOpenChange:()=>Pe(),open:N,menu:{items:[{key:"Search",disabled:!0,style:{minWidth:"190px",marginBottom:"8px"},label:n.jsx("div",{className:"px-2 bg-white dark:bg-black-800",children:n.jsx(Bt.SearchBar,{id:"search-bar-more-tabs",value:le,classValues:"!rounded-lg",onChange:e=>ct(e)})})},...r.slice(Z).filter(e=>e.name!==i).concat(V).filter(({name:e})=>typeof e=="string"&&(e??"").toLowerCase().includes(le.toLowerCase())).map(({name:e,is_hidden:t})=>({key:e,label:n.jsx(S.OptionButton,{className:c("uppercase",t?"text-neutral-400 dark:text-neutral-500":"text-black-900 dark:text-black-200"),text:e,suffixRecord:y?b:{},highlight:le,truncateText:!0,isDisabled:t,onClick:t?void 0:()=>{z(e),G(!1)}}),popupClassName:se,children:N?me(e,t,!0):null}))],className:se},openClassName:"max-h-[350px] overflow-y-auto",trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",getPopupContainer:e=>e.parentElement,children:n.jsx(zt.MoreButton,{title:`${y?He:""} MORE...`,variant:T,size:_,draggingOver:pt,suffixRecord:b,handleShowMoreDropdown:Pe,selectedId:H,showMoreDropdown:N})})}):null]}),L?n.jsx("div",{className:c(L?.className),children:n.jsx("li",{children:L.component})}):null,E&<&&n.jsx("li",{className:c(xt?"opacity-100":"opacity-0","transition-opacity duration-300"),children:n.jsx(Pt.TabOptions,{hasSuffixRecord:!!(b&&Object.keys(b).length>0),savedConfig:De,onApplyFilter:e=>wt(e),setUnsavedChanges:()=>{},handleTabSort:Nt,onSearchChange:vt})})]}),D?n.jsx(Ft.TabDragOverlay,{draggingTab:D,suffixRecord:b,size:_,variant:T,selectedId:H,parentContainer:it}):null]})})};exports.Tabs=At;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),L=require("@dnd-kit/core"),oe=require("@dnd-kit/sortable"),Ie=require("antd"),c=require("../../../_virtual/index.cjs.js"),a=require("react"),Wt=require("react-i18next"),at=require("@mui/icons-material/MoreHorizOutlined"),zt=require("./types.cjs.js"),$t=require("../../../utils/formatters.cjs.js"),Gt=require("../../../providers/design-system-provider/hooks.cjs.js"),Yt=require("../../../hooks/useTextWidth.cjs.js"),Jt=require("../../button/IconButton.cjs.js"),y=require("../../buttons/option-button/OptionButton.cjs.js"),Xt=require("../../forms/search-bar/SearchBar.cjs.js"),je=require("../../tooltip/Tooltip.cjs.js"),Qt=require("../../icons/EditIcon.cjs.js"),Kt=require("react-toastify"),Ee=require("./TabSwitch.cjs.js"),h=require("../../icon/icons.generated.cjs.js"),ot=require("./SortableTab.cjs.js"),Zt=require("./DropableWrapper.cjs.js"),en=require("./MoreButton.cjs.js"),tn=require("./TabOptions.cjs.js"),nn=require("./TabDragOverlay.cjs.js"),sn=()=>Math.random().toString(16).slice(2,13),re=["[&_.ant-dropdown-menu-item]:!outline-none","[&_.ant-dropdown-menu-submenu-title]:!outline-none","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:dark:bg-black-600","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"].join(" "),an=26,rt=6,on=20,rn=32,ln=24,cn=37,dn="(min-width: 640px)",un=2,pn='ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif';let ve=null;const Oe=g=>{g?(ve=document.activeElement,setTimeout(()=>{document.querySelector(".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title")?.focus()},50)):setTimeout(()=>{ve?.focus(),ve=null},0)},d={SELECT:"Select",MOVE_LEFT:"MoveLeft",MOVE_RIGHT:"MoveRight",HIDE:"Hide",UNHIDE:"Unhide",COPY_LINK:"CopyLink",DELETE:"Delete",PIN:"Pin",UNPIN:"Unpin",EDIT:"Edit"},xn=({variant:g="default",tabs:S=[],activeTab:l,onTabClick:it,suffixRecord:z,isLoading:lt,size:T="md",className:De,draggable:I=!1,showAllItems:$=!1,copyLink:ct=!1,isDisabled:dt=!1,color:ie="light",iconsOnly:j=!1,tabIcons:G={},height:ut="h-6",fullWidth:le=!1,fitContentWidth:ce=!1,disableAnimation:pt=!1,onEdit:Me,onDelete:Ve,onCopyLink:Le,allowPin:E=!1,isFullWidth:v=!1,rightSection:q,initialTabs:xt,tabConfig:mt,onTabConfigChange:Re,onTabsChange:Be,parentContainer:ft=document.body,tabKey:C,linkConfig:m,showTabOptions:de=!0})=>{const b=Gt.useTabConfig(),Ue=C?b?.getTabSettings(C):void 0,ue=xt??Ue?.tab_items,Y=mt??Ue?.tab_options,[pe,bt]=a.useState(""),[O,J]=a.useState(!1),[xe,qe]=a.useState(0),[x,me]=a.useState([]),[X,ht]=a.useState([]),[gt,Q]=a.useState(null),[R,K]=a.useState(null),[wt,He]=a.useState(!1),[Pe,Ae]=a.useState(Y??zt.INITIAL_TAB_OPTION_CONFIG),[fe,kt]=a.useState(""),[Fe,yt]=a.useState("contains"),{showCounts:N,lockOrder:H,sortOrder:be}=Pe,{t:p}=Wt.useTranslation(),he=a.useRef(null),St=a.useRef(null),ge=a.useRef(!1),we=a.useRef(""),{measureText:Z,clearCache:We}=Yt.useTextWidth(),P=a.useMemo(()=>sn(),[]),Tt=L.useSensors(L.useSensor(L.MouseSensor,{activationConstraint:{distance:5}}),L.useSensor(L.TouchSensor,{activationConstraint:{delay:300,tolerance:5}})),k=a.useMemo(()=>z&&Object.fromEntries(Object.entries(z).map(([e,t])=>[e,$t.formatCount(t)])),[z]),ze=a.useMemo(()=>X.filter(({is_hidden:e})=>!e),[X]),B=a.useMemo(()=>X.filter(({is_hidden:e})=>e),[X]),$e=a.useMemo(()=>ze.filter(({name:e})=>{if(!fe)return!0;const t=(e??"").toLowerCase(),s=fe.toLowerCase();return Fe==="contains"?t.includes(s):!t.includes(s)}),[ze,fe,Fe]),u=a.useMemo(()=>[...$e].sort((e,t)=>e.is_pinned&&!t.is_pinned?-1:!e.is_pinned&&t.is_pinned?1:0),[$e]),Ge=JSON.stringify(Object.entries(G??{}).filter(([,e])=>e!=null).map(([e])=>e).sort()),Ye=a.useMemo(()=>new Set(JSON.parse(Ge)),[Ge]),Ct=xe<u.length,ee=$?u.length:Ct?xe:u.length,Je=u.findIndex(e=>e.name===l)>=ee,Xe=Math.max(0,u.length-ee-(Je?1:0))+B.length,A=a.useCallback(e=>{me(e),Be?.(e),C&&b?.persistTabSettings&&b.persistTabSettings({tab_type:C,tab_items:e})},[Be,C,b]),Nt=a.useCallback(e=>{Ae(e),Re?.(e),C&&b?.persistTabSettings&&b.persistTabSettings({tab_type:C,tab_options:e})},[Re,C,b]),Qe=a.useCallback(()=>{if(we.current)return we.current;const e=he.current?.querySelector('[id^="btn-tabs-tabswitch-"] span'),t=e?getComputedStyle(e).fontFamily:"";return t&&(we.current=t),t||pn},[]),te=a.useCallback(e=>{if(!e)return;const t=u.length;if($){qe(t);return}const s=typeof window>"u"||window.matchMedia(dn).matches,r=Qe(),o={fontSize:"14px",fontWeight:"600",fontFamily:r},f={fontSize:"12px",fontWeight:"400",fontFamily:r},D=(i,M=!1)=>{const V=j?0:Z(p(i.name).toUpperCase(),o),_=k?.[i.name],ae=N&&_!==void 0?Z(String(_),f)+an+(j?0:rt):0,Ht=E&&i.is_pinned||Ye.has(i.name)?on+(j?0:rt):0,Pt=I&&i.name===l?M?ln:rn:0,At=g==="secondary"?T==="sm"?24:32:s?16:20,Ft=s&&(M||!v)?8:0;return V+ae+Ht+Pt+At+Ft},se=e-un,w=v?0:T==="sm"?4:8,Te=[0];u.forEach((i,M)=>{Te.push(Te[M]+D(i))});const Ce=u.findIndex(i=>i.name===l),Bt=Ce>=0?D(u[Ce],!0):0,Ut=g==="secondary"?T==="sm"?24:32:s?32:48,qt=i=>Z(N?`${i} MORE...`:"MORE...",o)+Ut+(s?8:0),tt=I&&de&&S.length>0?cn:0,nt=q?.width||0,st=(i,M)=>{let V=Te[i],_=i;const ae=M&&Ce>=i;if(ae&&(V+=Bt,_+=1),M){const _e=Math.max(0,t-i-(ae?1:0))+B.length;_e>0&&(V+=qt(_e),_+=1)}return tt&&(V+=tt,_+=1),nt&&(V+=nt,_+=1),V+w*Math.max(_-1,0)};let Ne=0;if(B.length===0&&st(t,!1)<=se)Ne=t;else for(let i=t;i>=0;i--)if(st(i,!0)<=se){Ne=i;break}qe(Ne)},[u,B.length,S.length,$,l,g,T,j,v,N,k,E,Ye,I,de,q?.width,Z,Qe,p]),ke=a.useCallback(()=>{if(typeof window<"u")return new URLSearchParams(window.location.search);if(m&&b?.getSearchParam){const e=new URLSearchParams,t=b.getSearchParam(m.key);return t&&e.set(m.key,t),e}return new URLSearchParams},[m,b]),ye=a.useCallback((e,t)=>(m&&(t===m.defaultLink?e.delete(m.key):e.set(m.key,t),m.onResolve?.(e)),e),[m]),F=a.useCallback(e=>m?`?${ye(ke(),e).toString()}`:void 0,[ye,ke,m]),_t=ct||!!m,It=a.useCallback(async e=>{const t=F(e),s=typeof window<"u"?window.location.origin:"",r=typeof window<"u"?window.location.pathname:"",o=t?`${s}${r}${t}`:`${s}${r}`;await navigator.clipboard.writeText(o),Kt.toast.success(p("Link copied to clipboard"),{toastId:"Link copied to clipboard"}),Le?.(e,o)},[F,p,Le]),W=e=>{if(J(!1),it?.(e),m&&b?.navigate){const t=ye(ke(),e);b.navigate(`?${t.toString()}`)}},Ke=e=>{if(u.length<=1)return;const t=x.map(o=>o.name===e?{...o,is_hidden:!0}:o),s=u.findIndex(o=>o.name===e),r=s===0?1:s-1;W(u[r].name),A(t)},jt=e=>{const t=x.map(s=>s.name===e?{...s,is_hidden:!1}:s);J(!1),A(t)},ne=e=>{if(!E)return;const t=x.map(s=>s.name===e?{...s,is_pinned:!s.is_pinned}:s);A(t)},Ze=(e,t)=>{const s=x.findIndex(({name:o})=>o===e),r=t==="left"?s-(x[s-1]?.name===l?2:1):s+1;A(oe.arrayMove(x,s,r))},et=()=>J(!O),Et=e=>K(e.active.id),vt=e=>{const{active:t,over:s}=e;if(s?.id==="more-tabs"){Ke(t.id),K(null),Q(null);return}const r=x.findIndex(({name:f})=>f===t.id),o=x.findIndex(({name:f})=>f===s?.id);A(oe.arrayMove(x,r,o)),K(null),Q(null)},Ot=()=>{K(null),Q(null)},Dt=e=>{Q(e.over?.id==="more-tabs"?"more-tabs":null)},Mt=()=>{},Vt=(e,t)=>{kt(e),yt(t)},Se=(e,t=!1,s=!1)=>{const o=x.find(w=>w.name===e)?.is_pinned,f=[{label:n.jsx(y.OptionButton,{icon:n.jsx(h.ArrowOutwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Select Tab"),className:"text-black-900 dark:text-white"}),key:d.SELECT,onClick:()=>W(e)},{label:n.jsx(y.OptionButton,{icon:n.jsx(h.ArrowUpwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Up"),isDisabled:H,className:"text-black-900 dark:text-white"}),key:d.MOVE_LEFT,disabled:H,onClick:()=>Ze(e,"left")},{label:n.jsx(y.OptionButton,{icon:n.jsx(h.ArrowDownwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Down"),isDisabled:H,className:"text-black-900 dark:text-white"}),key:d.MOVE_RIGHT,disabled:H,onClick:()=>Ze(e,"right")},{label:n.jsx(y.OptionButton,{icon:n.jsx(h.ContentCopyIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Copy Link"),className:"text-black-900 dark:text-white"}),key:d.COPY_LINK,onClick:()=>It(e)},{label:n.jsx(y.OptionButton,{icon:n.jsx(h.VisibilityOffIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Hide"),className:"text-black-900 dark:text-white"}),key:d.HIDE,onClick:()=>Ke(e)},{label:n.jsx(y.OptionButton,{icon:n.jsx(h.VisibilityIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Unhide"),className:"text-black-900 dark:text-white"}),key:d.UNHIDE,onClick:()=>jt(e)},{label:n.jsx(y.OptionButton,{icon:o?n.jsx(h.UnpinFilledIcon,{size:20,className:"rotate-12 text-inherit dark:text-inherit"}):n.jsx(h.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"}),text:p(o?"Unpin":"Pin"),className:"text-black-900 dark:text-white",notVisible:!E}),key:o?d.UNPIN:d.PIN,onClick:()=>ne(e)},{label:n.jsx(y.OptionButton,{className:"text-black-900 dark:text-white",icon:n.jsx(Qt.EditIcon,{}),text:p("Edit"),notVisible:!Me}),key:d.EDIT,onClick:()=>Me?.(e)},{label:n.jsx(y.OptionButton,{className:"text-error-600 dark:text-error-600",icon:n.jsx(h.DeleteIcon,{size:18,className:"text-error-600 dark:text-error-600"}),text:p("Delete"),notVisible:!Ve}),key:d.DELETE,onClick:()=>Ve?.(e)}],D=[d.HIDE,d.UNHIDE],se=[d.SELECT,d.MOVE_LEFT,d.MOVE_RIGHT,d.UNHIDE];return f.filter(w=>t?w.key===d.UNHIDE:s?!D.includes(w.key):!se.includes(w.key)).filter(w=>_t?!0:w.key!==d.COPY_LINK).filter(w=>u.length===1?w.key!==d.HIDE:!0)},U=(e,t)=>({classValue:{default:c("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),secondary:c("flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",T==="sm"?"py-1 px-3 text-sm":"py-2 px-4 text-base")},selectedClassValue:{default:c("absolute left-0 bottom-0 w-full h-[3px] bg-primary-600"),secondary:c("absolute inset-0 bg-primary-50 dark:bg-primary-975 rounded-lg")},textClassValue:{default:c("relative uppercase font-sans font-semibold text-sm whitespace-nowrap",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 hover:text-neutral-500 dark:text-neutral-100 dark:hover:text-white"),secondary:c("relative whitespace-nowrap text-sm",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 dark:text-neutral-400")}})[e][g];a.useLayoutEffect(()=>{const e=he.current;if(!e||g==="switch")return;const t=(ce?e.parentElement:e)??e,s=f=>{const D=getComputedStyle(f);return f.clientWidth-(parseFloat(D.paddingLeft)||0)-(parseFloat(D.paddingRight)||0)};let r=!1;const o=new ResizeObserver(f=>{te(f[0].contentRect.width)});return o.observe(t),te(s(t)),!ge.current&&typeof document<"u"&&document.fonts&&document.fonts.ready.then(()=>{r||ge.current||(ge.current=!0,We(),te(s(t)))}),()=>{r=!0,o.disconnect()}},[te,g,ce,We]);const Lt=JSON.stringify(S),Rt=JSON.stringify(ue?.map(({name:e})=>e));return a.useEffect(()=>{if(ue?.length){let e=[...ue];S.forEach(t=>{e.find(s=>s.name===t)||e.push({name:t,is_default:!1,is_hidden:!1,is_pinned:!1})}),e=e.filter((t,s,r)=>S.includes(t.name)&&s===r.findIndex(o=>o.name===t.name)),me(e)}else me(S.map(e=>({name:e,is_default:!1,is_hidden:!1,is_pinned:!1})).filter((e,t,s)=>t===s.findIndex(r=>r.name===e.name)))},[Lt,Rt]),a.useEffect(()=>{Y&&Ae(Y)},[Y]),a.useEffect(()=>{if(!x.length)return;const e=[...x];be==="asc"?e.sort((t,s)=>t.name.localeCompare(s.name)):be==="desc"&&e.sort((t,s)=>s.name.localeCompare(t.name)),ht(e)},[x,be]),a.useEffect(()=>{Oe(O)},[O]),g==="switch"?n.jsx("div",{className:c("inline",De),children:n.jsx("ul",{role:"tablist","aria-orientation":"horizontal",className:c("inline-flex grow-0 p-1 rounded-lg",ie==="dark"?"border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800":"bg-neutral-100 dark:bg-black-700",le?"w-full":"w-auto"),children:S.map(e=>{const t=l===e,s=G?.[e],r=x.find(f=>f.name===e),o=E&&r?.is_pinned;return n.jsx("li",{role:"presentation",className:c("inline-flex",le?"w-full":"w-auto"),children:n.jsx(Ee.TabSwitch,{title:e,showCounts:N,role:"tab",ariaSelected:t,tabIndex:0,icon:o?n.jsx(je,{title:"Unpin",children:n.jsx("span",{onClick:()=>ne(e),children:n.jsx(h.PinIcon,{className:"rotate-45 w-icon h-icon text-inherit dark:text-inherit"})})}):s,iconsOnly:j,classValue:c("relative py-0.5 border-gray-200",ut,le?"w-full flex items-center justify-center":"px-2"),selectedClassValue:c("absolute inset-0 rounded-md z-0",ie==="dark"?"bg-neutral-900":"bg-white dark:bg-black-800"),textClassValue:c("relative text-xs font-semibold font-sans whitespace-nowrap",t?"text-neutral-900 dark:text-neutral-100":"text-neutral-700 dark:text-neutral-100"),isSelected:t,href:F(e),onClick:dt?void 0:()=>W(e),suffixRecord:k,selectedId:P,color:ie,disableAnimation:pt})},e)})})}):n.jsx("div",{ref:he,className:c(ce?"w-fit":"w-full"),onMouseEnter:()=>He(!0),onMouseLeave:()=>He(!1),children:n.jsxs(L.DndContext,{sensors:Tt,onDragEnd:vt,onDragStart:Et,onDragCancel:Ot,collisionDetection:L.closestCenter,onDragOver:Dt,children:[n.jsxs("ul",{role:"tablist","aria-orientation":"horizontal",className:c("flex items-center w-full",De,v?"gap-0":T==="sm"?"gap-1":"gap-2"),ref:St,children:[lt?n.jsx("div",{className:"skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded"}):n.jsxs(oe.SortableContext,{items:u.map(({name:e})=>e),strategy:oe.horizontalListSortingStrategy,id:"sortable",disabled:!I||H,children:[u.slice(0,ee).map(({name:e,is_pinned:t})=>{const s=l===e&&!O,r=E&&t;return n.jsx(ot.SortableTab,{title:e,isDragging:R===e,className:v?"flex-1 flex justify-center":"",children:n.jsx("li",{role:"presentation",className:c(v?"w-full flex":"sm:mr-2"),children:n.jsx(Ee.TabSwitch,{showCounts:N,title:e,iconsOnly:j,role:"tab",ariaSelected:s,tabIndex:0,classValue:c(U("classValue",s),v?"w-full justify-center":""),selectedClassValue:U("selectedClassValue",s),textClassValue:U("textClassValue",s),isSelected:s,tabOptions:s&&I?n.jsx(Ie.Dropdown,{menu:{items:Se(e),className:re},trigger:["click"],onOpenChange:Oe,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Jt,{tooltip:p("More"),variant:"ghost",className:"!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",children:n.jsx(at,{sx:{fontSize:20}})})}):null,draggingTab:R===e,href:F(e),onClick:()=>W(e),suffixRecord:k,selectedId:P,icon:r?n.jsx(je,{title:p("Unpin"),children:n.jsx("span",{onClick:()=>ne(e),children:n.jsx(h.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):G?.[e]??null})},e)},e)}),l&&Je?n.jsx(ot.SortableTab,{title:l,isDragging:R===l,children:n.jsx("li",{role:"presentation",className:c("sm:mr-2"),children:n.jsx(Ee.TabSwitch,{showCounts:N,title:l,iconsOnly:j,role:"tab",ariaSelected:!0,tabIndex:0,classValue:U("classValue",!0),selectedClassValue:U("selectedClassValue",!0),textClassValue:U("textClassValue",!0),isSelected:!0,tabOptions:I?n.jsx(Ie.Dropdown,{menu:{items:Se(l),className:re},trigger:["click"],onOpenChange:Oe,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(at,{sx:{fontSize:20},className:"text-primary-600"})}):null,draggingTab:R===l,href:F(l),suffixRecord:k,selectedId:P,icon:E&&x.find(e=>e.name===l)?.is_pinned?n.jsx(je,{title:p("Pinned"),children:n.jsx("span",{onClick:()=>ne(l),children:n.jsx(h.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):G?.[l]??null})},l)},l):null,(xe<u.length&&!$||B.length>0)&&Xe>0?n.jsx(Zt.DropableWrapper,{id:"more-tabs",children:n.jsx(Ie.Dropdown,{overlayStyle:{maxHeight:"calc(100vh - 350px)",overflow:"auto",marginTop:"8px",scrollbarWidth:"none",borderRadius:8,boxShadow:"0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"},onOpenChange:()=>et(),open:O,menu:{items:[{key:"Search",disabled:!0,style:{minWidth:"190px",marginBottom:"8px"},label:n.jsx("div",{className:"px-2 bg-white dark:bg-black-800",children:n.jsx(Xt.SearchBar,{id:"search-bar-more-tabs",value:pe,classValues:"!rounded-lg",onChange:e=>bt(e)})})},...u.slice(ee).filter(e=>e.name!==l).concat(B).filter(({name:e})=>typeof e=="string"&&(e??"").toLowerCase().includes(pe.toLowerCase())).map(({name:e,is_hidden:t})=>({key:e,label:n.jsx(y.OptionButton,{className:c("uppercase",t?"text-neutral-400 dark:text-neutral-500":"text-black-900 dark:text-black-200"),text:e,suffixRecord:N?k:{},highlight:pe,truncateText:!0,isDisabled:t,onClick:t?void 0:()=>{W(e),J(!1)}}),popupClassName:re,children:O?Se(e,t,!0):null}))],className:re},openClassName:"max-h-[350px] overflow-y-auto",trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",getPopupContainer:e=>e.parentElement,children:n.jsx(en.MoreButton,{title:`${N?`${Xe} `:""}MORE...`,variant:g,size:T,draggingOver:gt,suffixRecord:k,handleShowMoreDropdown:et,selectedId:P,showMoreDropdown:O})})}):null]}),q?n.jsx("div",{className:c(q?.className),children:n.jsx("li",{children:q.component})}):null,I&&de&&S.length>0?n.jsx("li",{className:c(wt?"opacity-100":"opacity-0","transition-opacity duration-300"),children:n.jsx(tn.TabOptions,{hasSuffixRecord:!!(k&&Object.keys(k).length>0),savedConfig:Pe,onApplyFilter:e=>Nt(e),setUnsavedChanges:()=>{},handleTabSort:Mt,onSearchChange:Vt})}):null]}),R?n.jsx(nn.TabDragOverlay,{draggingTab:R,suffixRecord:k,size:T,variant:g,selectedId:P,parentContainer:ft}):null]})})};exports.Tabs=xn;
|
|
2
2
|
//# sourceMappingURL=Tabs.cjs.js.map
|