se-design 1.0.77-dev-v1 → 1.0.78-dev1
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/assets/style.css +1 -1
- package/dist/components/Banner/index.d.ts +0 -1
- package/dist/components/CustomModal/index.d.ts +29 -0
- package/dist/index12.js +36 -34
- package/dist/index12.js.map +1 -1
- package/dist/index13.js +11 -11
- package/dist/index13.js.map +1 -1
- package/dist/index19.js +154 -154
- package/dist/index19.js.map +1 -1
- package/dist/index197.js +5 -5
- package/dist/index201.js +1 -1
- package/dist/{index206.js → index208.js} +1 -1
- package/dist/{index206.js.map → index208.js.map} +1 -1
- package/dist/{index207.js → index209.js} +1 -1
- package/dist/{index207.js.map → index209.js.map} +1 -1
- package/dist/{index215.js → index217.js} +1 -1
- package/dist/{index215.js.map → index217.js.map} +1 -1
- package/dist/{index223.js → index225.js} +1 -1
- package/dist/{index223.js.map → index225.js.map} +1 -1
- package/dist/{index226.js → index228.js} +1 -1
- package/dist/{index226.js.map → index228.js.map} +1 -1
- package/dist/{index235.js → index237.js} +1 -1
- package/dist/{index235.js.map → index237.js.map} +1 -1
- package/dist/index238.js +3 -18
- package/dist/index238.js.map +1 -1
- package/dist/index240.js +18 -9
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +9 -4
- package/dist/index241.js.map +1 -1
- package/dist/index242.js +10 -170
- package/dist/index242.js.map +1 -1
- package/dist/index243.js +5 -11
- package/dist/index243.js.map +1 -1
- package/dist/index244.js +170 -6
- package/dist/index244.js.map +1 -1
- package/dist/index245.js +11 -6
- package/dist/index245.js.map +1 -1
- package/dist/index246.js +5 -37
- package/dist/index246.js.map +1 -1
- package/dist/index247.js +6 -2
- package/dist/index247.js.map +1 -1
- package/dist/index248.js +37 -7
- package/dist/index248.js.map +1 -1
- package/dist/index249.js +2 -327
- package/dist/index249.js.map +1 -1
- package/dist/index250.js +7 -49
- package/dist/index250.js.map +1 -1
- package/dist/index251.js +327 -2
- package/dist/index251.js.map +1 -1
- package/dist/index252.js +45 -71
- package/dist/index252.js.map +1 -1
- package/dist/index253.js +2 -93
- package/dist/index253.js.map +1 -1
- package/dist/index254.js +72 -48
- package/dist/index254.js.map +1 -1
- package/dist/index255.js +92 -7
- package/dist/index255.js.map +1 -1
- package/dist/index256.js +51 -4
- package/dist/index256.js.map +1 -1
- package/dist/index257.js +7 -51
- package/dist/index257.js.map +1 -1
- package/dist/index258.js +5 -2
- package/dist/index258.js.map +1 -1
- package/dist/index259.js +52 -2
- package/dist/index259.js.map +1 -1
- package/dist/index260.js +5 -0
- package/dist/index260.js.map +1 -0
- package/dist/index261.js +5 -0
- package/dist/index261.js.map +1 -0
- package/dist/index28.js +2 -2
- package/dist/index30.js +74 -75
- package/dist/index30.js.map +1 -1
- package/dist/index40.js +1 -1
- package/dist/index46.js +1 -1
- package/dist/index49.js +16 -14
- package/dist/index49.js.map +1 -1
- package/dist/index51.js +17 -17
- package/dist/index51.js.map +1 -1
- package/dist/index53.js +1 -1
- package/dist/index63.js +1 -1
- package/dist/index76.js +1 -1
- package/package.json +1 -1
- package/dist/index236.js +0 -7
- package/dist/index236.js.map +0 -1
- package/dist/index239.js +0 -13
- package/dist/index239.js.map +0 -1
package/dist/index259.js
CHANGED
|
@@ -1,5 +1,55 @@
|
|
|
1
|
-
|
|
1
|
+
import { __require as E } from "./index257.js";
|
|
2
|
+
import { __require as _ } from "./index258.js";
|
|
3
|
+
var f, v;
|
|
4
|
+
function P() {
|
|
5
|
+
if (v) return f;
|
|
6
|
+
v = 1;
|
|
7
|
+
var o = function() {
|
|
8
|
+
};
|
|
9
|
+
if (process.env.NODE_ENV !== "production") {
|
|
10
|
+
var y = E(), t = {}, d = _();
|
|
11
|
+
o = function(n) {
|
|
12
|
+
var a = "Warning: " + n;
|
|
13
|
+
typeof console < "u" && console.error(a);
|
|
14
|
+
try {
|
|
15
|
+
throw new Error(a);
|
|
16
|
+
} catch {
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
function u(n, a, i, s, c) {
|
|
21
|
+
if (process.env.NODE_ENV !== "production") {
|
|
22
|
+
for (var e in n)
|
|
23
|
+
if (d(n, e)) {
|
|
24
|
+
var r;
|
|
25
|
+
try {
|
|
26
|
+
if (typeof n[e] != "function") {
|
|
27
|
+
var h = Error(
|
|
28
|
+
(s || "React class") + ": " + i + " type `" + e + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[e] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
|
|
29
|
+
);
|
|
30
|
+
throw h.name = "Invariant Violation", h;
|
|
31
|
+
}
|
|
32
|
+
r = n[e](a, e, s, i, null, y);
|
|
33
|
+
} catch (l) {
|
|
34
|
+
r = l;
|
|
35
|
+
}
|
|
36
|
+
if (r && !(r instanceof Error) && o(
|
|
37
|
+
(s || "React class") + ": type specification of " + i + " `" + e + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof r + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
|
|
38
|
+
), r instanceof Error && !(r.message in t)) {
|
|
39
|
+
t[r.message] = !0;
|
|
40
|
+
var p = c ? c() : "";
|
|
41
|
+
o(
|
|
42
|
+
"Failed " + i + " type: " + r.message + (p ?? "")
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return u.resetWarningCache = function() {
|
|
49
|
+
process.env.NODE_ENV !== "production" && (t = {});
|
|
50
|
+
}, f = u, f;
|
|
51
|
+
}
|
|
2
52
|
export {
|
|
3
|
-
|
|
53
|
+
P as __require
|
|
4
54
|
};
|
|
5
55
|
//# sourceMappingURL=index259.js.map
|
package/dist/index259.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index259.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
1
|
+
{"version":3,"file":"index259.js","sources":["../node_modules/prop-types/checkPropTypes.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar printWarning = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n var loggedTypeFailures = {};\n var has = require('./lib/has');\n\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) { /**/ }\n };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n if (process.env.NODE_ENV !== 'production') {\n for (var typeSpecName in typeSpecs) {\n if (has(typeSpecs, typeSpecName)) {\n var error;\n // Prop type validation may throw. In case they do, we don't want to\n // fail the render phase where it didn't fail before. So we log it.\n // After these have been cleaned up, we'll let them throw.\n try {\n // This is intentionally an invariant that gets caught. It's the same\n // behavior as without this statement except with a better message.\n if (typeof typeSpecs[typeSpecName] !== 'function') {\n var err = Error(\n (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n );\n err.name = 'Invariant Violation';\n throw err;\n }\n error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n } catch (ex) {\n error = ex;\n }\n if (error && !(error instanceof Error)) {\n printWarning(\n (componentName || 'React class') + ': type specification of ' +\n location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n 'You may have forgotten to pass an argument to the type checker ' +\n 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n 'shape all require an argument).'\n );\n }\n if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n // Only monitor this failure once because there tends to be a lot of the\n // same error.\n loggedTypeFailures[error.message] = true;\n\n var stack = getStack ? getStack() : '';\n\n printWarning(\n 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n );\n }\n }\n }\n }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n if (process.env.NODE_ENV !== 'production') {\n loggedTypeFailures = {};\n }\n}\n\nmodule.exports = checkPropTypes;\n"],"names":["printWarning","ReactPropTypesSecret","require$$0","loggedTypeFailures","has","require$$1","text","message","checkPropTypes","typeSpecs","values","location","componentName","getStack","typeSpecName","error","err","ex","stack","checkPropTypes_1"],"mappings":";;;;;;AASA,MAAIA,IAAe,WAAW;AAAA,EAAA;AAE9B,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAIC,IAAuBC,EAAA,GACvBC,IAAqB,CAAA,GACrBC,IAAMC,EAAA;AAEV,IAAAL,IAAe,SAASM,GAAM;AAC5B,UAAIC,IAAU,cAAcD;AAC5B,MAAI,OAAO,UAAY,OACrB,QAAQ,MAAMC,CAAO;AAEvB,UAAI;AAIF,cAAM,IAAI,MAAMA,CAAO;AAAA,MAC7B,QAAgB;AAAA,MAAA;AAAA,IAChB;AAAA,EACA;AAaA,WAASC,EAAeC,GAAWC,GAAQC,GAAUC,GAAeC,GAAU;AAC5E,QAAI,QAAQ,IAAI,aAAa;AAC3B,eAASC,KAAgBL;AACvB,YAAIL,EAAIK,GAAWK,CAAY,GAAG;AAChC,cAAIC;AAIJ,cAAI;AAGF,gBAAI,OAAON,EAAUK,CAAY,KAAM,YAAY;AACjD,kBAAIE,IAAM;AAAA,iBACPJ,KAAiB,iBAAiB,OAAOD,IAAW,YAAYG,IAAe,+FACC,OAAOL,EAAUK,CAAY,IAAI;AAAA,cAEhI;AACY,oBAAAE,EAAI,OAAO,uBACLA;AAAA,YAClB;AACU,YAAAD,IAAQN,EAAUK,CAAY,EAAEJ,GAAQI,GAAcF,GAAeD,GAAU,MAAMV,CAAoB;AAAA,UACnH,SAAiBgB,GAAI;AACX,YAAAF,IAAQE;AAAA,UAClB;AAWQ,cAVIF,KAAS,EAAEA,aAAiB,UAC9Bf;AAAA,aACGY,KAAiB,iBAAiB,6BACnCD,IAAW,OAAOG,IAAe,6FAC6B,OAAOC,IAAQ;AAAA,UAIzF,GAEYA,aAAiB,SAAS,EAAEA,EAAM,WAAWZ,IAAqB;AAGpE,YAAAA,EAAmBY,EAAM,OAAO,IAAI;AAEpC,gBAAIG,IAAQL,IAAWA,EAAQ,IAAK;AAEpC,YAAAb;AAAA,cACE,YAAYW,IAAW,YAAYI,EAAM,WAAWG,KAAwB;AAAA,YACxF;AAAA,UACA;AAAA,QACA;AAAA;AAAA,EAGA;AAOA,SAAAV,EAAe,oBAAoB,WAAW;AAC5C,IAAI,QAAQ,IAAI,aAAa,iBAC3BL,IAAqB,CAAA;AAAA,EAEzB,GAEAgB,IAAiBX;;","x_google_ignoreList":[0]}
|
package/dist/index260.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index260.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/index261.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index261.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/index28.js
CHANGED
|
@@ -2,8 +2,8 @@ import i, { useMemo as D, useRef as j, useEffect as m } from "react";
|
|
|
2
2
|
import { Icon as M } from "./index6.js";
|
|
3
3
|
import { getA11yNameAttributes as $ } from "./index78.js";
|
|
4
4
|
import { useFocusTrap as k } from "./index72.js";
|
|
5
|
-
import { useDismissOnEscape as z } from "./
|
|
6
|
-
import { useFocusSentinel as T } from "./
|
|
5
|
+
import { useDismissOnEscape as z } from "./index208.js";
|
|
6
|
+
import { useFocusSentinel as T } from "./index209.js";
|
|
7
7
|
/* empty css */
|
|
8
8
|
function u() {
|
|
9
9
|
return u = Object.assign ? Object.assign.bind() : function(s) {
|
package/dist/index30.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import e, { forwardRef as
|
|
2
|
-
import { Icon as
|
|
1
|
+
import e, { forwardRef as J } from "react";
|
|
2
|
+
import { Icon as K } from "./index6.js";
|
|
3
3
|
import { Button as m } from "./index4.js";
|
|
4
|
-
import { useStableId as
|
|
5
|
-
import { getRegionAttributes as
|
|
6
|
-
import { useAccessiblePress as
|
|
4
|
+
import { useStableId as h } from "./index199.js";
|
|
5
|
+
import { getRegionAttributes as M } from "./index66.js";
|
|
6
|
+
import { useAccessiblePress as Q } from "./index67.js";
|
|
7
7
|
import "./index72.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
function b() {
|
|
@@ -22,118 +22,117 @@ const n = {
|
|
|
22
22
|
bannerImageCtn: "flex",
|
|
23
23
|
bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center",
|
|
24
24
|
bannerButton: "self-start"
|
|
25
|
-
},
|
|
25
|
+
}, te = /* @__PURE__ */ J((a, t) => {
|
|
26
26
|
const {
|
|
27
27
|
bannerClassName: r,
|
|
28
28
|
bannerBgColor: o,
|
|
29
|
-
title:
|
|
30
|
-
titleTag:
|
|
29
|
+
title: k,
|
|
30
|
+
titleTag: v = "span",
|
|
31
31
|
description: d,
|
|
32
|
-
hasImage:
|
|
32
|
+
hasImage: N,
|
|
33
33
|
imagePosition: s = "right",
|
|
34
|
-
imageWidth:
|
|
35
|
-
imageAlt:
|
|
36
|
-
hasCloseIcon:
|
|
37
|
-
closeIconName:
|
|
38
|
-
onClose:
|
|
39
|
-
onBannerClick:
|
|
40
|
-
hasLinkCta:
|
|
34
|
+
imageWidth: B = "30%",
|
|
35
|
+
imageAlt: E = "",
|
|
36
|
+
hasCloseIcon: P,
|
|
37
|
+
closeIconName: L,
|
|
38
|
+
onClose: T,
|
|
39
|
+
onBannerClick: i,
|
|
40
|
+
hasLinkCta: $,
|
|
41
41
|
onCtaClick: p,
|
|
42
|
-
onSecondaryCtaClick:
|
|
43
|
-
hasButtonCta:
|
|
44
|
-
buttonType:
|
|
45
|
-
ctaText:
|
|
46
|
-
ctaAriaLabel:
|
|
47
|
-
hasSecondaryButtonCta:
|
|
48
|
-
secondaryButtonType:
|
|
49
|
-
secondaryCtaText:
|
|
50
|
-
secondaryCtaAriaLabel:
|
|
51
|
-
automationId:
|
|
42
|
+
onSecondaryCtaClick: j,
|
|
43
|
+
hasButtonCta: A,
|
|
44
|
+
buttonType: w = "secondary",
|
|
45
|
+
ctaText: u,
|
|
46
|
+
ctaAriaLabel: C,
|
|
47
|
+
hasSecondaryButtonCta: R = !1,
|
|
48
|
+
secondaryButtonType: S = "secondary",
|
|
49
|
+
secondaryCtaText: O,
|
|
50
|
+
secondaryCtaAriaLabel: _,
|
|
51
|
+
automationId: z = "",
|
|
52
52
|
titleId: c,
|
|
53
|
-
disabledPrimaryButton:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
descriptionId: d ? y : void 0,
|
|
53
|
+
disabledPrimaryButton: F = !1,
|
|
54
|
+
customContent: g = null
|
|
55
|
+
} = a, f = i ? "cursor-pointer" : "", y = h(c, "banner-title"), x = h(void 0, "banner-description"), l = M({
|
|
56
|
+
titleId: y,
|
|
57
|
+
descriptionId: d ? x : void 0,
|
|
59
58
|
isFocusable: !!c
|
|
60
59
|
}), {
|
|
61
|
-
pressProps:
|
|
62
|
-
role:
|
|
63
|
-
tabIndex:
|
|
64
|
-
} =
|
|
60
|
+
pressProps: W,
|
|
61
|
+
role: q,
|
|
62
|
+
tabIndex: D
|
|
63
|
+
} = Q({
|
|
65
64
|
isNative: !1,
|
|
66
|
-
onClick:
|
|
67
|
-
}),
|
|
68
|
-
...
|
|
69
|
-
role:
|
|
70
|
-
tabIndex:
|
|
71
|
-
} : {},
|
|
72
|
-
className: `${n.bannerImageCtn} ${
|
|
65
|
+
onClick: i ? () => i() : void 0
|
|
66
|
+
}), G = i ? {
|
|
67
|
+
...W,
|
|
68
|
+
role: q,
|
|
69
|
+
tabIndex: D
|
|
70
|
+
} : {}, I = () => N && /* @__PURE__ */ e.createElement("div", {
|
|
71
|
+
className: `${n.bannerImageCtn} ${f} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
|
|
73
72
|
style: {
|
|
74
|
-
width:
|
|
73
|
+
width: B
|
|
75
74
|
},
|
|
76
|
-
onClick:
|
|
75
|
+
onClick: i
|
|
77
76
|
}, /* @__PURE__ */ e.createElement("img", {
|
|
78
77
|
src: a.bannerImage,
|
|
79
|
-
alt:
|
|
78
|
+
alt: E,
|
|
80
79
|
className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
|
|
81
80
|
}));
|
|
82
81
|
return /* @__PURE__ */ e.createElement("div", {
|
|
83
82
|
ref: t,
|
|
84
|
-
className: `${n.bannerCtn} ${
|
|
83
|
+
className: `${n.bannerCtn} ${f} ${r} banner-ctn`,
|
|
85
84
|
style: {
|
|
86
85
|
backgroundColor: o
|
|
87
86
|
},
|
|
88
|
-
"data-automation-id":
|
|
89
|
-
role:
|
|
90
|
-
"aria-labelledby":
|
|
91
|
-
"aria-describedby":
|
|
92
|
-
tabIndex:
|
|
93
|
-
}, s === "left" &&
|
|
87
|
+
"data-automation-id": z,
|
|
88
|
+
role: l.role,
|
|
89
|
+
"aria-labelledby": l["aria-labelledby"],
|
|
90
|
+
"aria-describedby": l["aria-describedby"],
|
|
91
|
+
tabIndex: l.tabIndex
|
|
92
|
+
}, s === "left" && I(), /* @__PURE__ */ e.createElement("div", b({
|
|
94
93
|
className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
|
|
95
|
-
},
|
|
96
|
-
id:
|
|
94
|
+
}, G), /* @__PURE__ */ e.createElement(v, {
|
|
95
|
+
id: y,
|
|
97
96
|
className: "banner-title",
|
|
98
97
|
tabIndex: c ? -1 : void 0
|
|
99
|
-
},
|
|
100
|
-
id:
|
|
98
|
+
}, k), g ? /* @__PURE__ */ e.createElement(e.Fragment, null, g) : /* @__PURE__ */ e.createElement("span", {
|
|
99
|
+
id: x,
|
|
101
100
|
className: "banner-description"
|
|
102
101
|
}, d), /* @__PURE__ */ e.createElement("div", {
|
|
103
102
|
className: "flex gap-3",
|
|
104
|
-
onClick: (
|
|
105
|
-
},
|
|
103
|
+
onClick: (H) => H.stopPropagation()
|
|
104
|
+
}, $ && /* @__PURE__ */ e.createElement(m, {
|
|
106
105
|
type: "link",
|
|
107
106
|
className: n.bannerLinkCta,
|
|
108
107
|
onClick: p,
|
|
109
|
-
label:
|
|
110
|
-
ariaLabel:
|
|
111
|
-
}),
|
|
112
|
-
type:
|
|
108
|
+
label: u,
|
|
109
|
+
ariaLabel: C
|
|
110
|
+
}), A && /* @__PURE__ */ e.createElement(m, {
|
|
111
|
+
type: w,
|
|
113
112
|
size: "sm",
|
|
114
|
-
label:
|
|
113
|
+
label: u,
|
|
115
114
|
onClick: p,
|
|
116
115
|
className: n?.bannerButton,
|
|
117
116
|
"data-automation-id": "banner-main-cta",
|
|
118
|
-
ariaLabel:
|
|
119
|
-
disabled:
|
|
120
|
-
}),
|
|
121
|
-
type:
|
|
117
|
+
ariaLabel: C,
|
|
118
|
+
disabled: F
|
|
119
|
+
}), R && /* @__PURE__ */ e.createElement(m, {
|
|
120
|
+
type: S,
|
|
122
121
|
size: "sm",
|
|
123
|
-
label:
|
|
124
|
-
onClick:
|
|
122
|
+
label: O,
|
|
123
|
+
onClick: j,
|
|
125
124
|
className: n?.secondaryBannerButton,
|
|
126
125
|
"data-automation-id": "banner-secondary-cta",
|
|
127
|
-
ariaLabel:
|
|
128
|
-
}))), s === "right" &&
|
|
129
|
-
name:
|
|
126
|
+
ariaLabel: _
|
|
127
|
+
}))), s === "right" && I(), P && /* @__PURE__ */ e.createElement(K, {
|
|
128
|
+
name: L,
|
|
130
129
|
className: n.bannerCloseIconCtn,
|
|
131
|
-
onClick:
|
|
130
|
+
onClick: T,
|
|
132
131
|
ariaLabel: "Close banner",
|
|
133
132
|
shouldStopPropagation: !0
|
|
134
133
|
}));
|
|
135
134
|
});
|
|
136
135
|
export {
|
|
137
|
-
|
|
136
|
+
te as Banner
|
|
138
137
|
};
|
|
139
138
|
//# sourceMappingURL=index30.js.map
|
package/dist/index30.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index30.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\nimport './style.scss';\n\nexport interface BannerProps {\n bannerClassName?: string | '';\n bannerBgColor?: string | '';\n title: string | '';\n titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n description: string | '';\n hasCustomContent?: boolean | false;\n customContent?: React.ReactNode;\n hasImage?: boolean | false;\n imagePosition?: 'left' | 'right' | '';\n imageWidth?: string | '30%';\n imageAlt?: string | '';\n bannerImage: string | '';\n hasCloseIcon?: boolean | false;\n closeIconName: string | '';\n onClose: () => void | (() => {});\n onBannerClick?: () => void | (() => {});\n hasButtonCta?: boolean | false;\n hasSecondaryButtonCta?: boolean | false;\n buttonType?: 'primary' | 'secondary' | 'link';\n secondaryButtonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n hasLinkCta?: boolean | false;\n ctaText: string | '';\n secondaryCtaText: string | '';\n onCtaClick: () => void | (() => {});\n onSecondaryCtaClick: () => void | (() => {});\n /**\n * Accessible name for primary CTA button (screen reader only, if different from visible label).\n */\n ctaAriaLabel?: string;\n /**\n * Accessible name for secondary CTA button (screen reader only, if different from visible label).\n */\n secondaryCtaAriaLabel?: string;\n automationId?: string;\n // Optional title ID for external control (e.g., focus management)\n titleId?: string;\n disabledPrimaryButton?: boolean;\n}\n\nconst classNames: Map = {\n bannerCtn: `relative rounded-[12px] flex pr-3.5`,\n bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]',\n bannerImageCtn: 'flex',\n bannerCloseIconCtn:\n 'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center',\n bannerButton: 'self-start'\n};\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n const {\n bannerClassName,\n bannerBgColor,\n title,\n titleTag: TitleTag = 'span',\n description,\n hasImage,\n imagePosition = 'right',\n imageWidth = '30%',\n imageAlt = '',\n hasCloseIcon,\n closeIconName,\n onClose,\n onBannerClick,\n hasLinkCta,\n onCtaClick,\n onSecondaryCtaClick,\n hasButtonCta,\n buttonType = 'secondary',\n ctaText,\n ctaAriaLabel,\n hasSecondaryButtonCta = false,\n secondaryButtonType = 'secondary',\n secondaryCtaText,\n secondaryCtaAriaLabel,\n automationId = '',\n titleId: providedTitleId,\n disabledPrimaryButton = false,\n hasCustomContent = false,\n customContent = null\n } = props;\n\n const isClickableClass = onBannerClick ? 'cursor-pointer' : '';\n const titleId = useStableId(providedTitleId, 'banner-title');\n const descriptionId = useStableId(undefined, 'banner-description');\n\n const regionAttributes = getRegionAttributes({\n titleId,\n descriptionId: description ? descriptionId : undefined,\n isFocusable: !!providedTitleId\n });\n\n // When banner is clickable, make the content area keyboard-activatable (Enter/Space).\n // We intentionally keep this as an extra tab stop (per dashboard banner behavior).\n const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n useAccessiblePress({\n isNative: false,\n onClick: onBannerClick ? () => onBannerClick() : undefined\n });\n\n const bannerContentClickableProps = onBannerClick\n ? {\n ...bannerContentPressProps,\n role: bannerContentRole,\n tabIndex: bannerContentTabIndex\n }\n : {};\n\n const renderImage = () =>\n hasImage && (\n <div\n className={`${classNames.bannerImageCtn} ${isClickableClass} banner-image-ctn ${imagePosition === 'right' ? 'mr-5 ml-0 justify-end' : 'ml-5 mr-0 justify-start'} min-h-full`}\n style={{ width: imageWidth }}\n onClick={onBannerClick}\n >\n <img src={props.bannerImage} alt={imageAlt} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n </div>\n );\n\n return (\n <div \n ref={ref}\n className={`${classNames.bannerCtn} ${isClickableClass} ${bannerClassName} banner-ctn`} \n style={{ backgroundColor: bannerBgColor }} \n data-automation-id={automationId}\n role={regionAttributes.role}\n aria-labelledby={regionAttributes['aria-labelledby']}\n aria-describedby={regionAttributes['aria-describedby']}\n tabIndex={regionAttributes.tabIndex}\n >\n {imagePosition === 'left' && renderImage()}\n <div \n className={`${classNames.bannerContentCtn} w-[100%] banner-content-ctn`} \n {...bannerContentClickableProps}\n >\n <TitleTag id={titleId} className=\"banner-title\" tabIndex={providedTitleId ? -1 : undefined}>{title}</TitleTag>\n {hasCustomContent ? <>{customContent}</> : \n <span id={descriptionId} className=\"banner-description\">{description}</span>}\n <div className=\"flex gap-3\" onClick={(e) => e.stopPropagation()}>\n {hasLinkCta && (\n <Button \n type=\"link\" \n className={classNames.bannerLinkCta} \n onClick={onCtaClick} \n label={ctaText}\n ariaLabel={ctaAriaLabel}\n />\n )}\n {hasButtonCta && (\n <Button\n type={buttonType}\n size=\"sm\"\n label={ctaText}\n onClick={onCtaClick}\n className={classNames?.bannerButton}\n data-automation-id=\"banner-main-cta\"\n ariaLabel={ctaAriaLabel}\n disabled={disabledPrimaryButton}\n />\n )}\n {hasSecondaryButtonCta && (\n <Button\n type={secondaryButtonType}\n size=\"sm\"\n label={secondaryCtaText}\n onClick={onSecondaryCtaClick}\n className={classNames?.secondaryBannerButton}\n data-automation-id=\"banner-secondary-cta\"\n ariaLabel={secondaryCtaAriaLabel}\n />\n )}\n </div>\n </div>\n {imagePosition === 'right' && renderImage()}\n {hasCloseIcon && (\n <Icon\n name={closeIconName}\n className={classNames.bannerCloseIconCtn}\n onClick={onClose}\n ariaLabel=\"Close banner\"\n shouldStopPropagation\n />\n )}\n </div>\n );\n});\n"],"names":["classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","forwardRef","props","ref","bannerClassName","bannerBgColor","title","titleTag","TitleTag","description","hasImage","imagePosition","imageWidth","imageAlt","hasCloseIcon","closeIconName","onClose","onBannerClick","hasLinkCta","onCtaClick","onSecondaryCtaClick","hasButtonCta","buttonType","ctaText","ctaAriaLabel","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","secondaryCtaAriaLabel","automationId","titleId","providedTitleId","disabledPrimaryButton","hasCustomContent","customContent","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","pressProps","bannerContentPressProps","role","bannerContentRole","tabIndex","bannerContentTabIndex","useAccessiblePress","isNative","onClick","bannerContentClickableProps","renderImage","React","createElement","className","style","width","src","bannerImage","alt","backgroundColor","_extends","id","Fragment","e","stopPropagation","Button","type","label","ariaLabel","size","disabled","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index30.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\nimport './style.scss';\n\nexport interface BannerProps {\n bannerClassName?: string | '';\n bannerBgColor?: string | '';\n title: string | '';\n titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n description: string | '';\n customContent?: React.ReactNode;\n hasImage?: boolean | false;\n imagePosition?: 'left' | 'right' | '';\n imageWidth?: string | '30%';\n imageAlt?: string | '';\n bannerImage: string | '';\n hasCloseIcon?: boolean | false;\n closeIconName: string | '';\n onClose: () => void | (() => {});\n onBannerClick?: () => void | (() => {});\n hasButtonCta?: boolean | false;\n hasSecondaryButtonCta?: boolean | false;\n buttonType?: 'primary' | 'secondary' | 'link';\n secondaryButtonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n hasLinkCta?: boolean | false;\n ctaText: string | '';\n secondaryCtaText: string | '';\n onCtaClick: () => void | (() => {});\n onSecondaryCtaClick: () => void | (() => {});\n /**\n * Accessible name for primary CTA button (screen reader only, if different from visible label).\n */\n ctaAriaLabel?: string;\n /**\n * Accessible name for secondary CTA button (screen reader only, if different from visible label).\n */\n secondaryCtaAriaLabel?: string;\n automationId?: string;\n // Optional title ID for external control (e.g., focus management)\n titleId?: string;\n disabledPrimaryButton?: boolean;\n}\n\nconst classNames: Map = {\n bannerCtn: `relative rounded-[12px] flex pr-3.5`,\n bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]',\n bannerImageCtn: 'flex',\n bannerCloseIconCtn:\n 'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center',\n bannerButton: 'self-start'\n};\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n const {\n bannerClassName,\n bannerBgColor,\n title,\n titleTag: TitleTag = 'span',\n description,\n hasImage,\n imagePosition = 'right',\n imageWidth = '30%',\n imageAlt = '',\n hasCloseIcon,\n closeIconName,\n onClose,\n onBannerClick,\n hasLinkCta,\n onCtaClick,\n onSecondaryCtaClick,\n hasButtonCta,\n buttonType = 'secondary',\n ctaText,\n ctaAriaLabel,\n hasSecondaryButtonCta = false,\n secondaryButtonType = 'secondary',\n secondaryCtaText,\n secondaryCtaAriaLabel,\n automationId = '',\n titleId: providedTitleId,\n disabledPrimaryButton = false,\n customContent = null\n } = props;\n\n const isClickableClass = onBannerClick ? 'cursor-pointer' : '';\n const titleId = useStableId(providedTitleId, 'banner-title');\n const descriptionId = useStableId(undefined, 'banner-description');\n\n const regionAttributes = getRegionAttributes({\n titleId,\n descriptionId: description ? descriptionId : undefined,\n isFocusable: !!providedTitleId\n });\n\n // When banner is clickable, make the content area keyboard-activatable (Enter/Space).\n // We intentionally keep this as an extra tab stop (per dashboard banner behavior).\n const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n useAccessiblePress({\n isNative: false,\n onClick: onBannerClick ? () => onBannerClick() : undefined\n });\n\n const bannerContentClickableProps = onBannerClick\n ? {\n ...bannerContentPressProps,\n role: bannerContentRole,\n tabIndex: bannerContentTabIndex\n }\n : {};\n\n const renderImage = () =>\n hasImage && (\n <div\n className={`${classNames.bannerImageCtn} ${isClickableClass} banner-image-ctn ${imagePosition === 'right' ? 'mr-5 ml-0 justify-end' : 'ml-5 mr-0 justify-start'} min-h-full`}\n style={{ width: imageWidth }}\n onClick={onBannerClick}\n >\n <img src={props.bannerImage} alt={imageAlt} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n </div>\n );\n\n return (\n <div \n ref={ref}\n className={`${classNames.bannerCtn} ${isClickableClass} ${bannerClassName} banner-ctn`} \n style={{ backgroundColor: bannerBgColor }} \n data-automation-id={automationId}\n role={regionAttributes.role}\n aria-labelledby={regionAttributes['aria-labelledby']}\n aria-describedby={regionAttributes['aria-describedby']}\n tabIndex={regionAttributes.tabIndex}\n >\n {imagePosition === 'left' && renderImage()}\n <div \n className={`${classNames.bannerContentCtn} w-[100%] banner-content-ctn`} \n {...bannerContentClickableProps}\n >\n <TitleTag id={titleId} className=\"banner-title\" tabIndex={providedTitleId ? -1 : undefined}>{title}</TitleTag>\n {customContent ? <>{customContent}</> :\n <span id={descriptionId} className=\"banner-description\">{description}</span>}\n <div className=\"flex gap-3\" onClick={(e) => e.stopPropagation()}>\n {hasLinkCta && (\n <Button \n type=\"link\" \n className={classNames.bannerLinkCta} \n onClick={onCtaClick} \n label={ctaText}\n ariaLabel={ctaAriaLabel}\n />\n )}\n {hasButtonCta && (\n <Button\n type={buttonType}\n size=\"sm\"\n label={ctaText}\n onClick={onCtaClick}\n className={classNames?.bannerButton}\n data-automation-id=\"banner-main-cta\"\n ariaLabel={ctaAriaLabel}\n disabled={disabledPrimaryButton}\n />\n )}\n {hasSecondaryButtonCta && (\n <Button\n type={secondaryButtonType}\n size=\"sm\"\n label={secondaryCtaText}\n onClick={onSecondaryCtaClick}\n className={classNames?.secondaryBannerButton}\n data-automation-id=\"banner-secondary-cta\"\n ariaLabel={secondaryCtaAriaLabel}\n />\n )}\n </div>\n </div>\n {imagePosition === 'right' && renderImage()}\n {hasCloseIcon && (\n <Icon\n name={closeIconName}\n className={classNames.bannerCloseIconCtn}\n onClick={onClose}\n ariaLabel=\"Close banner\"\n shouldStopPropagation\n />\n )}\n </div>\n );\n});\n"],"names":["classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","forwardRef","props","ref","bannerClassName","bannerBgColor","title","titleTag","TitleTag","description","hasImage","imagePosition","imageWidth","imageAlt","hasCloseIcon","closeIconName","onClose","onBannerClick","hasLinkCta","onCtaClick","onSecondaryCtaClick","hasButtonCta","buttonType","ctaText","ctaAriaLabel","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","secondaryCtaAriaLabel","automationId","titleId","providedTitleId","disabledPrimaryButton","customContent","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","pressProps","bannerContentPressProps","role","bannerContentRole","tabIndex","bannerContentTabIndex","useAccessiblePress","isNative","onClick","bannerContentClickableProps","renderImage","React","createElement","className","style","width","src","bannerImage","alt","backgroundColor","_extends","id","Fragment","e","stopPropagation","Button","type","label","ariaLabel","size","disabled","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":"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"}
|
package/dist/index40.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
|
|
2
2
|
import { Icon as g } from "./index6.js";
|
|
3
3
|
import { LabelChip as F } from "./index11.js";
|
|
4
|
-
import { debounce as L } from "./
|
|
4
|
+
import { debounce as L } from "./index217.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
function z(p) {
|
|
7
7
|
const {
|
package/dist/index46.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import t, { useState as h, useRef as f, useCallback as g, useEffect as _ } from "react";
|
|
2
2
|
/* empty css */
|
|
3
|
-
import C from "./
|
|
3
|
+
import C from "./index225.js";
|
|
4
4
|
import { Icon as M } from "./index6.js";
|
|
5
5
|
import { useStableId as v } from "./index199.js";
|
|
6
6
|
import { getA11yNameAttributes as T } from "./index78.js";
|
package/dist/index49.js
CHANGED
|
@@ -8,6 +8,8 @@ import { MenuList as _ } from "./index18.js";
|
|
|
8
8
|
import "./index9.js";
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
|
+
/* empty css */
|
|
12
|
+
/* empty css */
|
|
11
13
|
import "react-dom";
|
|
12
14
|
import "./index17.js";
|
|
13
15
|
import { Popover as $ } from "./index19.js";
|
|
@@ -29,7 +31,7 @@ import { Popover as $ } from "./index19.js";
|
|
|
29
31
|
/* empty css */
|
|
30
32
|
/* empty css */
|
|
31
33
|
/* empty css */
|
|
32
|
-
import { TabButton as j } from "./
|
|
34
|
+
import { TabButton as j } from "./index228.js";
|
|
33
35
|
/* empty css */
|
|
34
36
|
/* empty css */
|
|
35
37
|
/* empty css */
|
|
@@ -40,16 +42,16 @@ import "./index60.js";
|
|
|
40
42
|
/* empty css */
|
|
41
43
|
import "./index64.js";
|
|
42
44
|
/* empty css */
|
|
43
|
-
function
|
|
44
|
-
return
|
|
45
|
+
function c() {
|
|
46
|
+
return c = Object.assign ? Object.assign.bind() : function(i) {
|
|
45
47
|
for (var o = 1; o < arguments.length; o++) {
|
|
46
48
|
var n = arguments[o];
|
|
47
49
|
for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
|
|
48
50
|
}
|
|
49
51
|
return i;
|
|
50
|
-
},
|
|
52
|
+
}, c.apply(null, arguments);
|
|
51
53
|
}
|
|
52
|
-
const
|
|
54
|
+
const Se = ({
|
|
53
55
|
defaultActiveNavigationItem: i,
|
|
54
56
|
navigationItems: o,
|
|
55
57
|
onNavigationItemChange: n,
|
|
@@ -82,7 +84,7 @@ const ke = ({
|
|
|
82
84
|
!r || r.disabled || (m(e), n?.(e));
|
|
83
85
|
}, g = f(() => o.map((e) => {
|
|
84
86
|
const r = e.id === l, a = r && e.panelHasFocusableContent === !1 ? 0 : void 0;
|
|
85
|
-
return /* @__PURE__ */ t.createElement("div",
|
|
87
|
+
return /* @__PURE__ */ t.createElement("div", c({
|
|
86
88
|
key: e.id
|
|
87
89
|
}, b(e.id), {
|
|
88
90
|
hidden: !r,
|
|
@@ -90,26 +92,26 @@ const ke = ({
|
|
|
90
92
|
className: `navigation-item-content ${r ? "block" : "hidden"}`
|
|
91
93
|
}), r && e?.renderNavigationItemContent?.(e));
|
|
92
94
|
}), [o, l, b]), B = o.find((e) => e.id === l);
|
|
93
|
-
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div",
|
|
95
|
+
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", c({
|
|
94
96
|
className: "se-design-navigation-bar flex items-center gap-4",
|
|
95
97
|
"data-automation-id": "navigation-bar-container"
|
|
96
98
|
}, F({
|
|
97
99
|
ariaLabel: E,
|
|
98
100
|
ariaLabelledBy: P
|
|
99
101
|
})), !s && o.map((e) => {
|
|
100
|
-
const r = l === e.id, a = e.disabled,
|
|
102
|
+
const r = l === e.id, a = e.disabled, p = T(e.id);
|
|
101
103
|
return /* @__PURE__ */ t.createElement(j, {
|
|
102
104
|
key: e.id,
|
|
103
|
-
ref:
|
|
104
|
-
tabIndex:
|
|
105
|
-
id:
|
|
105
|
+
ref: p.ref,
|
|
106
|
+
tabIndex: p.tabIndex,
|
|
107
|
+
id: p.id,
|
|
106
108
|
label: e.label,
|
|
107
109
|
isSelected: r,
|
|
108
110
|
isDisabled: a,
|
|
109
|
-
panelId:
|
|
111
|
+
panelId: p["aria-controls"],
|
|
110
112
|
onClick: () => u(e),
|
|
111
113
|
onFocus: () => {
|
|
112
|
-
|
|
114
|
+
p.onFocus(), x === "automatic" && !a && S(e.id);
|
|
113
115
|
},
|
|
114
116
|
onKeyDown: k,
|
|
115
117
|
className: `text-base ${a ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"} focus-outline rounded-[6px]`,
|
|
@@ -145,6 +147,6 @@ const ke = ({
|
|
|
145
147
|
}, g));
|
|
146
148
|
};
|
|
147
149
|
export {
|
|
148
|
-
|
|
150
|
+
Se as NavigationBar
|
|
149
151
|
};
|
|
150
152
|
//# sourceMappingURL=index49.js.map
|
package/dist/index49.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index49.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState,useMemo, useEffect } from 'react';\nimport { Popover, MenuList, Icon } from 'src/components';\nimport { TabButton } from './TabButton';\nimport { useTabsA11y } from '../../utils/a11y';\n\nexport interface NavigationItemProps {\n label: string;\n id: string;\n disabled?: boolean;\n panelHasFocusableContent?: boolean; // If false, the panel itself will be tabbable when active\n renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n defaultActiveNavigationItem?: string;\n navigationItems: NavigationItemProps[];\n isCompactView?: boolean;\n onNavigationItemChange?: (navigationItemId: string) => void;\n keyboardActivationMode?: 'automatic' | 'manual'; //manual: arrow keys move focus only; Enter/Space activates the focused tab\n orientation?: 'horizontal' | 'vertical'; // required for aria and arrow shortcuts\n ariaLabel?: string; // Used when ariaLabelledBy is not provided\n ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel when visible label exists)\n idBase?: string; //optional ID namespace to avoid collisions\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n defaultActiveNavigationItem,\n navigationItems,\n onNavigationItemChange,\n isCompactView = false,\n keyboardActivationMode = 'automatic',\n orientation = 'horizontal',\n ariaLabel = 'Sections',\n ariaLabelledBy,\n idBase = ''\n}) => {\n const defaultNavigationItemId = defaultActiveNavigationItem || navigationItems[0]?.id || '';\n const [activeNavigationItem, setActiveNavigationItem] = useState<string>(defaultNavigationItemId);\n\n // Exclude disabled tabs from roving focus (keeps native disabled buttons, avoids focus-on-disabled).\n const itemIds = useMemo(\n () => navigationItems.filter((item) => !item.disabled).map((item) => item.id),\n [navigationItems]\n );\n\n // Hook for managing Tabs (NavigationBar) focus and ARIA props.\n const { getTabProps, setFocusedTabId, handleKeyDown, getPanelProps, getTabListProps } = useTabsA11y({\n itemIds,\n orientation,\n activeItem: activeNavigationItem,\n idBase\n });\n\n useEffect(() => {\n if (defaultActiveNavigationItem) {\n setActiveNavigationItem(defaultActiveNavigationItem);\n setFocusedTabId(defaultActiveNavigationItem);\n }\n }, [defaultActiveNavigationItem, setFocusedTabId]);\n\n const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n if (navigationItem?.disabled) return;\n setActiveNavigationItem(navigationItem?.id);\n onNavigationItemChange?.(navigationItem?.id);\n };\n\n const activateTabById = (id: string) => {\n const item = navigationItems.find((i) => i.id === id);\n if (!item || item.disabled) return;\n setActiveNavigationItem(id);\n onNavigationItemChange?.(id);\n };\n\n const renderPanels = useMemo(() => {\n return navigationItems.map((navigationItem) => {\n const isSelected = navigationItem.id === activeNavigationItem;\n const panelTabIndex = isSelected && navigationItem.panelHasFocusableContent === false ? 0 : undefined;\n\n return (\n <div\n key={navigationItem.id}\n {...getPanelProps(navigationItem.id)}\n hidden={!isSelected}\n tabIndex={panelTabIndex}\n className={`navigation-item-content ${isSelected ? 'block' : 'hidden'}`}\n >\n {isSelected && navigationItem?.renderNavigationItemContent?.(navigationItem)}\n </div>\n );\n });\n }, [navigationItems, activeNavigationItem, getPanelProps]);\n\n const activeNavigationItemData = navigationItems.find((item) => item.id === activeNavigationItem);\n\n return (\n <>\n <div\n className=\"se-design-navigation-bar flex items-center gap-4\"\n data-automation-id=\"navigation-bar-container\"\n {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n >\n {!isCompactView && navigationItems.map((navigationItem) => {\n const isSelected = activeNavigationItem === navigationItem.id;\n const isDisabled = navigationItem.disabled;\n\n const tabProps = getTabProps(navigationItem.id);\n\n return (\n <TabButton\n key={navigationItem.id}\n ref={tabProps.ref as (el: HTMLButtonElement | null) => void}\n tabIndex={tabProps.tabIndex}\n id={tabProps.id}\n label={navigationItem.label}\n isSelected={isSelected}\n isDisabled={isDisabled}\n panelId={tabProps['aria-controls']}\n onClick={() => handleNavigationItemClick(navigationItem)}\n onFocus={() => {\n tabProps.onFocus();\n if (keyboardActivationMode === 'automatic' && !isDisabled) {\n activateTabById(navigationItem.id);\n }\n }}\n onKeyDown={handleKeyDown}\n className={`text-base ${\n isDisabled\n ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n : isSelected\n ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n } focus-outline rounded-[6px]`}\n automationId={`navigation-item-${navigationItem.id}`}\n />\n );\n })}\n {isCompactView && (\n <Popover\n className=\"navigation-bar-popover\"\n position=\"bottom-left\"\n noBorder\n renderPopoverSrcElement={({ displayPopover }) => (\n <div className=\"navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer\">\n <label className=\"font-semibold cursor-pointer\">{activeNavigationItemData?.label}</label>\n <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n </div>\n )}\n renderPopoverContents={({ closePopoverCb }) => (\n <MenuList items={navigationItems.map((item) => ({\n id: item.id,\n label: item.label,\n onClick: () => {\n handleNavigationItemClick(item);\n closePopoverCb();\n }\n }))}\n />\n )}\n />\n )}\n </div>\n\n <div className=\"se-design-navigation-bar-content\">\n {renderPanels}\n </div>\n </>\n );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","isCompactView","keyboardActivationMode","orientation","ariaLabel","ariaLabelledBy","idBase","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","itemIds","useMemo","filter","item","disabled","map","getTabProps","setFocusedTabId","handleKeyDown","getPanelProps","getTabListProps","useTabsA11y","activeItem","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","_extends","key","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","isDisabled","tabProps","TabButton","ref","label","panelId","onClick","onFocus","onKeyDown","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index49.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState,useMemo, useEffect } from 'react';\nimport { Popover, MenuList, Icon } from 'src/components';\nimport { TabButton } from './TabButton';\nimport { useTabsA11y } from '../../utils/a11y';\n\nexport interface NavigationItemProps {\n label: string;\n id: string;\n disabled?: boolean;\n panelHasFocusableContent?: boolean; // If false, the panel itself will be tabbable when active\n renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n defaultActiveNavigationItem?: string;\n navigationItems: NavigationItemProps[];\n isCompactView?: boolean;\n onNavigationItemChange?: (navigationItemId: string) => void;\n keyboardActivationMode?: 'automatic' | 'manual'; //manual: arrow keys move focus only; Enter/Space activates the focused tab\n orientation?: 'horizontal' | 'vertical'; // required for aria and arrow shortcuts\n ariaLabel?: string; // Used when ariaLabelledBy is not provided\n ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel when visible label exists)\n idBase?: string; //optional ID namespace to avoid collisions\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n defaultActiveNavigationItem,\n navigationItems,\n onNavigationItemChange,\n isCompactView = false,\n keyboardActivationMode = 'automatic',\n orientation = 'horizontal',\n ariaLabel = 'Sections',\n ariaLabelledBy,\n idBase = ''\n}) => {\n const defaultNavigationItemId = defaultActiveNavigationItem || navigationItems[0]?.id || '';\n const [activeNavigationItem, setActiveNavigationItem] = useState<string>(defaultNavigationItemId);\n\n // Exclude disabled tabs from roving focus (keeps native disabled buttons, avoids focus-on-disabled).\n const itemIds = useMemo(\n () => navigationItems.filter((item) => !item.disabled).map((item) => item.id),\n [navigationItems]\n );\n\n // Hook for managing Tabs (NavigationBar) focus and ARIA props.\n const { getTabProps, setFocusedTabId, handleKeyDown, getPanelProps, getTabListProps } = useTabsA11y({\n itemIds,\n orientation,\n activeItem: activeNavigationItem,\n idBase\n });\n\n useEffect(() => {\n if (defaultActiveNavigationItem) {\n setActiveNavigationItem(defaultActiveNavigationItem);\n setFocusedTabId(defaultActiveNavigationItem);\n }\n }, [defaultActiveNavigationItem, setFocusedTabId]);\n\n const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n if (navigationItem?.disabled) return;\n setActiveNavigationItem(navigationItem?.id);\n onNavigationItemChange?.(navigationItem?.id);\n };\n\n const activateTabById = (id: string) => {\n const item = navigationItems.find((i) => i.id === id);\n if (!item || item.disabled) return;\n setActiveNavigationItem(id);\n onNavigationItemChange?.(id);\n };\n\n const renderPanels = useMemo(() => {\n return navigationItems.map((navigationItem) => {\n const isSelected = navigationItem.id === activeNavigationItem;\n const panelTabIndex = isSelected && navigationItem.panelHasFocusableContent === false ? 0 : undefined;\n\n return (\n <div\n key={navigationItem.id}\n {...getPanelProps(navigationItem.id)}\n hidden={!isSelected}\n tabIndex={panelTabIndex}\n className={`navigation-item-content ${isSelected ? 'block' : 'hidden'}`}\n >\n {isSelected && navigationItem?.renderNavigationItemContent?.(navigationItem)}\n </div>\n );\n });\n }, [navigationItems, activeNavigationItem, getPanelProps]);\n\n const activeNavigationItemData = navigationItems.find((item) => item.id === activeNavigationItem);\n\n return (\n <>\n <div\n className=\"se-design-navigation-bar flex items-center gap-4\"\n data-automation-id=\"navigation-bar-container\"\n {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n >\n {!isCompactView && navigationItems.map((navigationItem) => {\n const isSelected = activeNavigationItem === navigationItem.id;\n const isDisabled = navigationItem.disabled;\n\n const tabProps = getTabProps(navigationItem.id);\n\n return (\n <TabButton\n key={navigationItem.id}\n ref={tabProps.ref as (el: HTMLButtonElement | null) => void}\n tabIndex={tabProps.tabIndex}\n id={tabProps.id}\n label={navigationItem.label}\n isSelected={isSelected}\n isDisabled={isDisabled}\n panelId={tabProps['aria-controls']}\n onClick={() => handleNavigationItemClick(navigationItem)}\n onFocus={() => {\n tabProps.onFocus();\n if (keyboardActivationMode === 'automatic' && !isDisabled) {\n activateTabById(navigationItem.id);\n }\n }}\n onKeyDown={handleKeyDown}\n className={`text-base ${\n isDisabled\n ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n : isSelected\n ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n } focus-outline rounded-[6px]`}\n automationId={`navigation-item-${navigationItem.id}`}\n />\n );\n })}\n {isCompactView && (\n <Popover\n className=\"navigation-bar-popover\"\n position=\"bottom-left\"\n noBorder\n renderPopoverSrcElement={({ displayPopover }) => (\n <div className=\"navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer\">\n <label className=\"font-semibold cursor-pointer\">{activeNavigationItemData?.label}</label>\n <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n </div>\n )}\n renderPopoverContents={({ closePopoverCb }) => (\n <MenuList items={navigationItems.map((item) => ({\n id: item.id,\n label: item.label,\n onClick: () => {\n handleNavigationItemClick(item);\n closePopoverCb();\n }\n }))}\n />\n )}\n />\n )}\n </div>\n\n <div className=\"se-design-navigation-bar-content\">\n {renderPanels}\n </div>\n </>\n );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","isCompactView","keyboardActivationMode","orientation","ariaLabel","ariaLabelledBy","idBase","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","itemIds","useMemo","filter","item","disabled","map","getTabProps","setFocusedTabId","handleKeyDown","getPanelProps","getTabListProps","useTabsA11y","activeItem","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","_extends","key","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","isDisabled","tabProps","TabButton","ref","label","panelId","onClick","onFocus","onKeyDown","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
|