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.
Files changed (86) hide show
  1. package/dist/assets/style.css +1 -1
  2. package/dist/components/Banner/index.d.ts +0 -1
  3. package/dist/components/CustomModal/index.d.ts +29 -0
  4. package/dist/index12.js +36 -34
  5. package/dist/index12.js.map +1 -1
  6. package/dist/index13.js +11 -11
  7. package/dist/index13.js.map +1 -1
  8. package/dist/index19.js +154 -154
  9. package/dist/index19.js.map +1 -1
  10. package/dist/index197.js +5 -5
  11. package/dist/index201.js +1 -1
  12. package/dist/{index206.js → index208.js} +1 -1
  13. package/dist/{index206.js.map → index208.js.map} +1 -1
  14. package/dist/{index207.js → index209.js} +1 -1
  15. package/dist/{index207.js.map → index209.js.map} +1 -1
  16. package/dist/{index215.js → index217.js} +1 -1
  17. package/dist/{index215.js.map → index217.js.map} +1 -1
  18. package/dist/{index223.js → index225.js} +1 -1
  19. package/dist/{index223.js.map → index225.js.map} +1 -1
  20. package/dist/{index226.js → index228.js} +1 -1
  21. package/dist/{index226.js.map → index228.js.map} +1 -1
  22. package/dist/{index235.js → index237.js} +1 -1
  23. package/dist/{index235.js.map → index237.js.map} +1 -1
  24. package/dist/index238.js +3 -18
  25. package/dist/index238.js.map +1 -1
  26. package/dist/index240.js +18 -9
  27. package/dist/index240.js.map +1 -1
  28. package/dist/index241.js +9 -4
  29. package/dist/index241.js.map +1 -1
  30. package/dist/index242.js +10 -170
  31. package/dist/index242.js.map +1 -1
  32. package/dist/index243.js +5 -11
  33. package/dist/index243.js.map +1 -1
  34. package/dist/index244.js +170 -6
  35. package/dist/index244.js.map +1 -1
  36. package/dist/index245.js +11 -6
  37. package/dist/index245.js.map +1 -1
  38. package/dist/index246.js +5 -37
  39. package/dist/index246.js.map +1 -1
  40. package/dist/index247.js +6 -2
  41. package/dist/index247.js.map +1 -1
  42. package/dist/index248.js +37 -7
  43. package/dist/index248.js.map +1 -1
  44. package/dist/index249.js +2 -327
  45. package/dist/index249.js.map +1 -1
  46. package/dist/index250.js +7 -49
  47. package/dist/index250.js.map +1 -1
  48. package/dist/index251.js +327 -2
  49. package/dist/index251.js.map +1 -1
  50. package/dist/index252.js +45 -71
  51. package/dist/index252.js.map +1 -1
  52. package/dist/index253.js +2 -93
  53. package/dist/index253.js.map +1 -1
  54. package/dist/index254.js +72 -48
  55. package/dist/index254.js.map +1 -1
  56. package/dist/index255.js +92 -7
  57. package/dist/index255.js.map +1 -1
  58. package/dist/index256.js +51 -4
  59. package/dist/index256.js.map +1 -1
  60. package/dist/index257.js +7 -51
  61. package/dist/index257.js.map +1 -1
  62. package/dist/index258.js +5 -2
  63. package/dist/index258.js.map +1 -1
  64. package/dist/index259.js +52 -2
  65. package/dist/index259.js.map +1 -1
  66. package/dist/index260.js +5 -0
  67. package/dist/index260.js.map +1 -0
  68. package/dist/index261.js +5 -0
  69. package/dist/index261.js.map +1 -0
  70. package/dist/index28.js +2 -2
  71. package/dist/index30.js +74 -75
  72. package/dist/index30.js.map +1 -1
  73. package/dist/index40.js +1 -1
  74. package/dist/index46.js +1 -1
  75. package/dist/index49.js +16 -14
  76. package/dist/index49.js.map +1 -1
  77. package/dist/index51.js +17 -17
  78. package/dist/index51.js.map +1 -1
  79. package/dist/index53.js +1 -1
  80. package/dist/index63.js +1 -1
  81. package/dist/index76.js +1 -1
  82. package/package.json +1 -1
  83. package/dist/index236.js +0 -7
  84. package/dist/index236.js.map +0 -1
  85. package/dist/index239.js +0 -13
  86. package/dist/index239.js.map +0 -1
package/dist/index259.js CHANGED
@@ -1,5 +1,55 @@
1
- var e = {};
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
- e as __exports
53
+ P as __require
4
54
  };
5
55
  //# sourceMappingURL=index259.js.map
@@ -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]}
@@ -0,0 +1,5 @@
1
+ var r = {};
2
+ export {
3
+ r as __exports
4
+ };
5
+ //# sourceMappingURL=index260.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index260.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,5 @@
1
+ var e = {};
2
+ export {
3
+ e as __exports
4
+ };
5
+ //# sourceMappingURL=index261.js.map
@@ -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 "./index206.js";
6
- import { useFocusSentinel as T } from "./index207.js";
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 K } from "react";
2
- import { Icon as M } from "./index6.js";
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 I } from "./index199.js";
5
- import { getRegionAttributes as Q } from "./index66.js";
6
- import { useAccessiblePress as U } from "./index67.js";
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
- }, re = /* @__PURE__ */ K((a, t) => {
25
+ }, te = /* @__PURE__ */ J((a, t) => {
26
26
  const {
27
27
  bannerClassName: r,
28
28
  bannerBgColor: o,
29
- title: h,
30
- titleTag: k = "span",
29
+ title: k,
30
+ titleTag: v = "span",
31
31
  description: d,
32
- hasImage: v,
32
+ hasImage: N,
33
33
  imagePosition: s = "right",
34
- imageWidth: N = "30%",
35
- imageAlt: B = "",
36
- hasCloseIcon: E,
37
- closeIconName: P,
38
- onClose: L,
39
- onBannerClick: l,
40
- hasLinkCta: T,
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: j,
44
- buttonType: A = "secondary",
45
- ctaText: C,
46
- ctaAriaLabel: u,
47
- hasSecondaryButtonCta: w = !1,
48
- secondaryButtonType: R = "secondary",
49
- secondaryCtaText: S,
50
- secondaryCtaAriaLabel: O,
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: z = !1,
54
- hasCustomContent: F = !1,
55
- customContent: W = null
56
- } = a, g = l ? "cursor-pointer" : "", f = I(c, "banner-title"), y = I(void 0, "banner-description"), i = Q({
57
- titleId: f,
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: q,
62
- role: D,
63
- tabIndex: G
64
- } = U({
60
+ pressProps: W,
61
+ role: q,
62
+ tabIndex: D
63
+ } = Q({
65
64
  isNative: !1,
66
- onClick: l ? () => l() : void 0
67
- }), H = l ? {
68
- ...q,
69
- role: D,
70
- tabIndex: G
71
- } : {}, x = () => v && /* @__PURE__ */ e.createElement("div", {
72
- className: `${n.bannerImageCtn} ${g} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
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: N
73
+ width: B
75
74
  },
76
- onClick: l
75
+ onClick: i
77
76
  }, /* @__PURE__ */ e.createElement("img", {
78
77
  src: a.bannerImage,
79
- alt: B,
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} ${g} ${r} banner-ctn`,
83
+ className: `${n.bannerCtn} ${f} ${r} banner-ctn`,
85
84
  style: {
86
85
  backgroundColor: o
87
86
  },
88
- "data-automation-id": _,
89
- role: i.role,
90
- "aria-labelledby": i["aria-labelledby"],
91
- "aria-describedby": i["aria-describedby"],
92
- tabIndex: i.tabIndex
93
- }, s === "left" && x(), /* @__PURE__ */ e.createElement("div", b({
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
- }, H), /* @__PURE__ */ e.createElement(k, {
96
- id: f,
94
+ }, G), /* @__PURE__ */ e.createElement(v, {
95
+ id: y,
97
96
  className: "banner-title",
98
97
  tabIndex: c ? -1 : void 0
99
- }, h), F ? /* @__PURE__ */ e.createElement(e.Fragment, null, W) : /* @__PURE__ */ e.createElement("span", {
100
- id: y,
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: (J) => J.stopPropagation()
105
- }, T && /* @__PURE__ */ e.createElement(m, {
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: C,
110
- ariaLabel: u
111
- }), j && /* @__PURE__ */ e.createElement(m, {
112
- type: A,
108
+ label: u,
109
+ ariaLabel: C
110
+ }), A && /* @__PURE__ */ e.createElement(m, {
111
+ type: w,
113
112
  size: "sm",
114
- label: C,
113
+ label: u,
115
114
  onClick: p,
116
115
  className: n?.bannerButton,
117
116
  "data-automation-id": "banner-main-cta",
118
- ariaLabel: u,
119
- disabled: z
120
- }), w && /* @__PURE__ */ e.createElement(m, {
121
- type: R,
117
+ ariaLabel: C,
118
+ disabled: F
119
+ }), R && /* @__PURE__ */ e.createElement(m, {
120
+ type: S,
122
121
  size: "sm",
123
- label: S,
124
- onClick: $,
122
+ label: O,
123
+ onClick: j,
125
124
  className: n?.secondaryBannerButton,
126
125
  "data-automation-id": "banner-secondary-cta",
127
- ariaLabel: O
128
- }))), s === "right" && x(), E && /* @__PURE__ */ e.createElement(M, {
129
- name: P,
126
+ ariaLabel: _
127
+ }))), s === "right" && I(), P && /* @__PURE__ */ e.createElement(K, {
128
+ name: L,
130
129
  className: n.bannerCloseIconCtn,
131
- onClick: L,
130
+ onClick: T,
132
131
  ariaLabel: "Close banner",
133
132
  shouldStopPropagation: !0
134
133
  }));
135
134
  });
136
135
  export {
137
- re as Banner
136
+ te as Banner
138
137
  };
139
138
  //# sourceMappingURL=index30.js.map
@@ -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 "./index215.js";
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 "./index223.js";
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 "./index226.js";
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 p() {
44
- return p = Object.assign ? Object.assign.bind() : function(i) {
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
- }, p.apply(null, arguments);
52
+ }, c.apply(null, arguments);
51
53
  }
52
- const ke = ({
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", p({
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", p({
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, c = T(e.id);
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: c.ref,
104
- tabIndex: c.tabIndex,
105
- id: c.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: c["aria-controls"],
111
+ panelId: p["aria-controls"],
110
112
  onClick: () => u(e),
111
113
  onFocus: () => {
112
- c.onFocus(), x === "automatic" && !a && S(e.id);
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
- ke as NavigationBar
150
+ Se as NavigationBar
149
151
  };
150
152
  //# sourceMappingURL=index49.js.map
@@ -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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"}