@bikdotai/bik-component-library 0.0.836-beta.2 → 0.0.836-beta.3

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 (128) hide show
  1. package/dist/cjs/components/agent-builder/AgentBuilder.js +1 -1
  2. package/dist/cjs/components/agent-builder/AgentBuilder.js.map +1 -1
  3. package/dist/cjs/components/agent-builder/AgentBuilder.styled.js +41 -23
  4. package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map +1 -1
  5. package/dist/cjs/components/agent-builder/components/AgentBuilderFooter.js +1 -1
  6. package/dist/cjs/components/agent-builder/components/AgentBuilderFooter.js.map +1 -1
  7. package/dist/cjs/components/agent-builder/components/AgentBuilderTopBar.js +1 -1
  8. package/dist/cjs/components/agent-builder/components/AgentBuilderTopBar.js.map +1 -1
  9. package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js +1 -1
  10. package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
  11. package/dist/cjs/components/agent-builder/components/DiscardModal.js +1 -1
  12. package/dist/cjs/components/agent-builder/components/DiscardModal.js.map +1 -1
  13. package/dist/cjs/components/agent-builder/components/GoLiveModal.js +1 -1
  14. package/dist/cjs/components/agent-builder/components/GoLiveModal.js.map +1 -1
  15. package/dist/cjs/components/agent-builder/components/MentionPicker.js +2 -2
  16. package/dist/cjs/components/agent-builder/components/MentionPicker.js.map +1 -1
  17. package/dist/cjs/components/agent-builder/components/RestApiToolPanel.js +1 -1
  18. package/dist/cjs/components/agent-builder/components/RestApiToolPanel.js.map +1 -1
  19. package/dist/cjs/components/agent-builder/components/SelectableListSection.js +6 -6
  20. package/dist/cjs/components/agent-builder/components/SelectableListSection.js.map +1 -1
  21. package/dist/cjs/components/agent-builder/components/StepSectionHeader.js +1 -1
  22. package/dist/cjs/components/agent-builder/components/StepSectionHeader.js.map +1 -1
  23. package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js +1 -1
  24. package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
  25. package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js +3 -1
  26. package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
  27. package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js +1 -1
  28. package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
  29. package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js +1 -1
  30. package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
  31. package/dist/cjs/components/agent-listing/AgentListing.js +1 -1
  32. package/dist/cjs/components/agent-listing/AgentListing.js.map +1 -1
  33. package/dist/cjs/components/agent-listing/AgentTable.js +1 -1
  34. package/dist/cjs/components/agent-listing/AgentTable.js.map +1 -1
  35. package/dist/cjs/components/agent-listing/AgentTableRow.js +1 -1
  36. package/dist/cjs/components/agent-listing/AgentTableRow.js.map +1 -1
  37. package/dist/cjs/components/agent-listing/AgentTableShimmer.js +2 -0
  38. package/dist/cjs/components/agent-listing/AgentTableShimmer.js.map +1 -0
  39. package/dist/cjs/components/button/Button.styled.js +3 -7
  40. package/dist/cjs/components/button/Button.styled.js.map +1 -1
  41. package/dist/cjs/components/button/themes.js +3 -3
  42. package/dist/cjs/components/button/themes.js.map +1 -1
  43. package/dist/cjs/components/checkBox/CheckBox.js +1 -1
  44. package/dist/cjs/components/checkBox/CheckBox.js.map +1 -1
  45. package/dist/cjs/components/checkBox/CheckBox.styled.js +10 -7
  46. package/dist/cjs/components/checkBox/CheckBox.styled.js.map +1 -1
  47. package/dist/cjs/components/dropdown/Dropdown.js +1 -1
  48. package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
  49. package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
  50. package/dist/cjs/components/whats-new/WhatsNew.js.map +1 -1
  51. package/dist/cjs/components/whats-new/WhatsNewButton.js +2 -2
  52. package/dist/cjs/components/whats-new/WhatsNewButton.js.map +1 -1
  53. package/dist/cjs/editor/BikEditor.js +1 -1
  54. package/dist/cjs/editor/BikEditor.js.map +1 -1
  55. package/dist/cjs/editor/BikEditor.styles.js +74 -42
  56. package/dist/cjs/editor/BikEditor.styles.js.map +1 -1
  57. package/dist/esm/components/agent-builder/AgentBuilder.js +80 -77
  58. package/dist/esm/components/agent-builder/AgentBuilder.js.map +1 -1
  59. package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts +3 -0
  60. package/dist/esm/components/agent-builder/AgentBuilder.styled.js +106 -84
  61. package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map +1 -1
  62. package/dist/esm/components/agent-builder/__fixtures__/agentValue.d.ts +11 -0
  63. package/dist/esm/components/agent-builder/components/AgentBuilderFooter.js +29 -21
  64. package/dist/esm/components/agent-builder/components/AgentBuilderFooter.js.map +1 -1
  65. package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js +21 -21
  66. package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js.map +1 -1
  67. package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js +24 -23
  68. package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
  69. package/dist/esm/components/agent-builder/components/DiscardModal.js +15 -8
  70. package/dist/esm/components/agent-builder/components/DiscardModal.js.map +1 -1
  71. package/dist/esm/components/agent-builder/components/GoLiveModal.js +11 -11
  72. package/dist/esm/components/agent-builder/components/GoLiveModal.js.map +1 -1
  73. package/dist/esm/components/agent-builder/components/MentionPicker.js +41 -40
  74. package/dist/esm/components/agent-builder/components/MentionPicker.js.map +1 -1
  75. package/dist/esm/components/agent-builder/components/RestApiToolPanel.js +22 -21
  76. package/dist/esm/components/agent-builder/components/RestApiToolPanel.js.map +1 -1
  77. package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts +13 -4
  78. package/dist/esm/components/agent-builder/components/SelectableListSection.js +167 -144
  79. package/dist/esm/components/agent-builder/components/SelectableListSection.js.map +1 -1
  80. package/dist/esm/components/agent-builder/components/StepSectionHeader.js +7 -7
  81. package/dist/esm/components/agent-builder/components/StepSectionHeader.js.map +1 -1
  82. package/dist/esm/components/agent-builder/context/AgentBuilderContext.js +104 -103
  83. package/dist/esm/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
  84. package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js +84 -82
  85. package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
  86. package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js +20 -19
  87. package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
  88. package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js +23 -79
  89. package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
  90. package/dist/esm/components/agent-listing/AgentListing.js +70 -65
  91. package/dist/esm/components/agent-listing/AgentListing.js.map +1 -1
  92. package/dist/esm/components/agent-listing/AgentTable.d.ts +2 -0
  93. package/dist/esm/components/agent-listing/AgentTable.js +16 -15
  94. package/dist/esm/components/agent-listing/AgentTable.js.map +1 -1
  95. package/dist/esm/components/agent-listing/AgentTableRow.js +7 -7
  96. package/dist/esm/components/agent-listing/AgentTableRow.js.map +1 -1
  97. package/dist/esm/components/agent-listing/AgentTableShimmer.d.ts +12 -0
  98. package/dist/esm/components/agent-listing/AgentTableShimmer.js +20 -0
  99. package/dist/esm/components/agent-listing/AgentTableShimmer.js.map +1 -0
  100. package/dist/esm/components/agent-listing/__fixtures__/agents.d.ts +3 -0
  101. package/dist/esm/components/button/Button.styled.js +25 -24
  102. package/dist/esm/components/button/Button.styled.js.map +1 -1
  103. package/dist/esm/components/button/themes.d.ts +1 -1
  104. package/dist/esm/components/button/themes.js +1 -1
  105. package/dist/esm/components/button/themes.js.map +1 -1
  106. package/dist/esm/components/checkBox/CheckBox.js +16 -17
  107. package/dist/esm/components/checkBox/CheckBox.js.map +1 -1
  108. package/dist/esm/components/checkBox/CheckBox.styled.d.ts +0 -1
  109. package/dist/esm/components/checkBox/CheckBox.styled.js +11 -9
  110. package/dist/esm/components/checkBox/CheckBox.styled.js.map +1 -1
  111. package/dist/esm/components/dropdown/Dropdown.js +18 -13
  112. package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
  113. package/dist/esm/components/whats-new/WhatsNew.d.ts +0 -1
  114. package/dist/esm/components/whats-new/WhatsNew.js +17 -19
  115. package/dist/esm/components/whats-new/WhatsNew.js.map +1 -1
  116. package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -1
  117. package/dist/esm/components/whats-new/WhatsNewButton.js +32 -37
  118. package/dist/esm/components/whats-new/WhatsNewButton.js.map +1 -1
  119. package/dist/esm/editor/BikEditor.js +173 -160
  120. package/dist/esm/editor/BikEditor.js.map +1 -1
  121. package/dist/esm/editor/BikEditor.styles.d.ts +20 -3
  122. package/dist/esm/editor/BikEditor.styles.js +78 -44
  123. package/dist/esm/editor/BikEditor.styles.js.map +1 -1
  124. package/package.json +1 -1
  125. package/dist/cjs/utils/rgba.js +0 -2
  126. package/dist/cjs/utils/rgba.js.map +0 -1
  127. package/dist/esm/utils/rgba.js +0 -10
  128. package/dist/esm/utils/rgba.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from '@src/utils/rgba';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? rgba(props.activeColor, 0.24)\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon","rgba"],"mappings":";;;AAIO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UASzB,CAACC,MACTA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA,WAClD,CAACA,MACVA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1D,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,GAEC;AAAA,GACA,CAACD,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLA,EAAM,cACLI,EAAKJ,EAAM,aAAa,IAAI,IAC5BE,EAAO,OAAO,SAAS,WACxBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}
1
+ {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\theight: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\t/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */\n\tbox-sizing: ${(props) => (props.size === 'XS' ? 'border-box' : 'content-box')};\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t\twidth: ${props.size === 'XS' ? 12 : 18}px;\n\t\t\theight: ${props.size === 'XS' ? 12 : 18}px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UAQzB,CAACC,MAAWA,EAAM,SAAS,YAAY,KAAK,EAAG;AAAA,WAC9C,CAACA,MAAWA,EAAM,SAAS,YAAY,KAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO3C,CAACA,MAAWA,EAAM,SAAS,OAAO,eAAe,aAAc;AAAA,GAC3E,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,YAEUD,EAAM,SAAS,OAAO,KAAK,EAAE;AAAA,aAC5BA,EAAM,SAAS,OAAO,KAAK,EAAE;AAAA,GACvC;AAAA,GACA,CAACA,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLE,EAAO,OAAO,SAAS,WACvBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}
@@ -26,28 +26,28 @@ const H = ({
26
26
  showTrailingIconPlaceholder: V = !1,
27
27
  showLabelsOnMoreHover: j = !1,
28
28
  value: l,
29
- showSelected: h = !1,
29
+ showSelected: f = !1,
30
30
  onDropdownVisbilityChange: z,
31
31
  ...t
32
32
  }) => {
33
- const [f, F] = g(!1), [y, I] = g(!1), i = E ?? "default", B = G(), [s, c] = g(
33
+ const [c, F] = g(!1), [y, I] = g(!1), i = E ?? "default", B = G(), [s, d] = g(
34
34
  o ?? []
35
35
  );
36
36
  function N(e) {
37
- Array.isArray(e) ? c([...e]) : c([e]), M?.(e);
37
+ Array.isArray(e) ? d([...e]) : d([e]), M?.(e);
38
38
  }
39
39
  p(() => {
40
40
  const e = [];
41
- t?.options?.forEach((d) => {
42
- d.options ? d.options.forEach((u) => {
41
+ t?.options?.forEach((h) => {
42
+ h.options ? h.options.forEach((u) => {
43
43
  u.selected && e.push({
44
44
  ...u,
45
45
  label: u.label
46
46
  });
47
- }) : d.selected && e.push(d);
48
- }), c([...e]);
47
+ }) : h.selected && e.push(h);
48
+ }), d([...e]);
49
49
  }, [t.options]), p(() => {
50
- o && c([...o]);
50
+ o && d([...o]);
51
51
  }, [o]);
52
52
  const U = Z(s), _ = w ? a : U ?? a ?? "Select an option", m = t.buttonWidth, C = m ?? t.width ?? "100%", q = t.dropdownWidth ?? C;
53
53
  return /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(
@@ -61,14 +61,19 @@ const H = ({
61
61
  zIndex: 1,
62
62
  cursor: "pointer",
63
63
  padding: i === "x-small" ? "4px 8px" : "6px 8px",
64
- backgroundColor: t.version === "3.0" ? f || y ? r.surface.hovered : r.surface.standard : h && l !== void 0 ? J.positive[100] : y ? r.background.inactive : r.surface.standard,
64
+ backgroundColor: t.version === "3.0" ? c || y ? r.surface.hovered : r.surface.standard : f && l !== void 0 ? J.positive[100] : (
65
+ // The hover wrapper also contains the popover, so while the
66
+ // dropdown is open, hovering an option would grey the input
67
+ // — only show hover feedback while closed.
68
+ y && !c ? r.background.inactive : r.surface.standard
69
+ ),
65
70
  transition: "background-color 0.3s ease",
66
71
  ...A
67
72
  },
68
73
  input: {
69
74
  minHeight: "100%",
70
75
  maxWidth: "100%",
71
- color: h && l !== void 0 ? r.content.positive : "inherit"
76
+ color: f && l !== void 0 ? r.content.positive : "inherit"
72
77
  }
73
78
  },
74
79
  children: /* @__PURE__ */ n(
@@ -117,12 +122,12 @@ const H = ({
117
122
  K,
118
123
  {
119
124
  style: {
120
- transform: f ? "rotate(180deg)" : "rotate(0deg)"
125
+ transform: c ? "rotate(180deg)" : "rotate(0deg)"
121
126
  },
122
127
  onClick: O,
123
128
  width: i === "x-small" ? 16 : i === "small" ? 20 : 24,
124
129
  height: i === "x-small" ? 16 : i === "small" ? 20 : 24,
125
- color: h ? r.content.positive : r.content.primary
130
+ color: f ? r.content.positive : r.content.primary
126
131
  }
127
132
  )
128
133
  ]
@@ -141,7 +146,7 @@ const H = ({
141
146
  R?.(e);
142
147
  },
143
148
  errorMessage: t.error,
144
- isDropdownOpened: f,
149
+ isDropdownOpened: c,
145
150
  sizeToUse: i,
146
151
  containerStyle: {
147
152
  width: t.width ?? "100%",
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/** Fired when the dropdown opens/closes. Runs alongside internal open state. */\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\topenDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened || isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","BASE_COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/** Fired when the dropdown opens/closes. Runs alongside internal open state. */\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\topenDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened || isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: // The hover wrapper also contains the popover, so while the\n\t\t\t\t\t\t\t\t// dropdown is open, hovering an option would grey the input\n\t\t\t\t\t\t\t\t// — only show hover feedback while closed.\n\t\t\t\t\t\t\t\tisHovering && !isDropdownOpened\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","BASE_COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}
@@ -15,7 +15,6 @@ interface WhatsNewProps {
15
15
  iconHeight?: number;
16
16
  iconColor?: string;
17
17
  iconPadding?: number;
18
- buttonSize?: number;
19
18
  customIcon?: React.ComponentType<{
20
19
  width?: number;
21
20
  height?: number;
@@ -1,9 +1,9 @@
1
- import { jsxs as g, Fragment as S, jsx as s } from "react/jsx-runtime";
2
- import { useState as b } from "react";
3
- import { WhatsNewButton as j } from "./WhatsNewButton.js";
4
- import { WhatsNewPanel as I } from "./WhatsNewPanel.js";
5
- import { useWhatsNewContext as y } from "./WhatsNewProvider.js";
6
- const A = ({
1
+ import { jsxs as O, Fragment as g, jsx as s } from "react/jsx-runtime";
2
+ import { useState as S } from "react";
3
+ import { WhatsNewButton as b } from "./WhatsNewButton.js";
4
+ import { WhatsNewPanel as j } from "./WhatsNewPanel.js";
5
+ import { useWhatsNewContext as I } from "./WhatsNewProvider.js";
6
+ const z = ({
7
7
  title: a = "What's new",
8
8
  tooltip: r = "What's new",
9
9
  searchPlaceholder: h = "Search posts",
@@ -18,16 +18,15 @@ const A = ({
18
18
  iconHeight: d = 24,
19
19
  iconColor: u,
20
20
  iconPadding: f,
21
- buttonSize: N,
22
- customIcon: W
21
+ customIcon: N
23
22
  }) => {
24
- const [t, n] = b(!1), { whatsNewContent: k, isLoading: o, newContentCount: x } = y();
25
- return /* @__PURE__ */ g(S, { children: [
23
+ const [t, n] = S(!1), { whatsNewContent: W, isLoading: o, newContentCount: k } = I();
24
+ return /* @__PURE__ */ O(g, { children: [
26
25
  /* @__PURE__ */ s(
27
- j,
26
+ b,
28
27
  {
29
28
  onClick: () => n(!0),
30
- newContentCount: x,
29
+ newContentCount: k,
31
30
  isOpen: t,
32
31
  isLoading: o,
33
32
  tooltip: r,
@@ -36,16 +35,15 @@ const A = ({
36
35
  iconHeight: d,
37
36
  iconColor: u,
38
37
  iconPadding: f,
39
- buttonSize: N,
40
- customIcon: W
38
+ customIcon: N
41
39
  }
42
40
  ),
43
41
  /* @__PURE__ */ s(
44
- I,
42
+ j,
45
43
  {
46
44
  isOpen: t,
47
45
  onClose: () => n(!1),
48
- content: k,
46
+ content: W,
49
47
  isLoading: o,
50
48
  title: a,
51
49
  searchPlaceholder: h,
@@ -53,8 +51,8 @@ const A = ({
53
51
  emptyStateDescription: c,
54
52
  noResultsText: i,
55
53
  width: m,
56
- onContentClick: (O) => {
57
- e && e(O);
54
+ onContentClick: (x) => {
55
+ e && e(x);
58
56
  },
59
57
  renderCustomContent: p
60
58
  }
@@ -62,6 +60,6 @@ const A = ({
62
60
  ] });
63
61
  };
64
62
  export {
65
- A as WhatsNew
63
+ z as WhatsNew
66
64
  };
67
65
  //# sourceMappingURL=WhatsNew.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\ticonColor?: string;\n\ticonPadding?: number;\n\tbuttonSize?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tbuttonSize,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\ticonColor={iconColor}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tbuttonSize={buttonSize}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel","contentItem"],"mappings":";;;;;AA6BO,MAAMA,IAAoC,CAAC;AAAA,EACjD,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC,IAAwB;AAAA,EACxB,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,EAAE,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,EAAA,IAAoBC,EAAA;AAcxD,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAfgB,MAAMT,EAAU,EAAI;AAAA,QAgBpC,iBAAAI;AAAA,QACA,QAAAL;AAAA,QACA,WAAAI;AAAA,QACA,SAAAnB;AAAA,QACA,QAAQQ;AAAA,QACR,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAAX;AAAA,QACA,SA7BiB,MAAMC,EAAU,EAAK;AAAA,QA8BtC,SAASE;AAAA,QACT,WAAAC;AAAA,QACA,OAAApB;AAAA,QACA,mBAAAE;AAAA,QACA,iBAAAC;AAAA,QACA,uBAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,gBApCwB,CAACsB,MAAiC;AAI5D,UAAIrB,KACHA,EAAeqB,CAAW;AAAA,QAE5B;AAAA,QA8BG,qBAAApB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}
1
+ {"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\ticonColor?: string;\n\ticonPadding?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\ticonColor={iconColor}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","iconColor","iconPadding","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel","contentItem"],"mappings":";;;;;AA4BO,MAAMA,IAAoC,CAAC;AAAA,EACjD,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC,IAAwB;AAAA,EACxB,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,EAAE,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,EAAA,IAAoBC,EAAA;AAcxD,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAfgB,MAAMT,EAAU,EAAI;AAAA,QAgBpC,iBAAAI;AAAA,QACA,QAAAL;AAAA,QACA,WAAAI;AAAA,QACA,SAAAlB;AAAA,QACA,QAAQQ;AAAA,QACR,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAAX;AAAA,QACA,SA5BiB,MAAMC,EAAU,EAAK;AAAA,QA6BtC,SAASE;AAAA,QACT,WAAAC;AAAA,QACA,OAAAnB;AAAA,QACA,mBAAAE;AAAA,QACA,iBAAAC;AAAA,QACA,uBAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,gBAnCwB,CAACqB,MAAiC;AAI5D,UAAIpB,KACHA,EAAeoB,CAAW;AAAA,QAE5B;AAAA,QA6BG,qBAAAnB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}
@@ -36,7 +36,6 @@ export interface WhatsNewButtonProps {
36
36
  iconHeight?: number;
37
37
  iconColor?: string;
38
38
  iconPadding?: number;
39
- buttonSize?: number;
40
39
  customIcon?: React.ComponentType<{
41
40
  width?: number;
42
41
  height?: number;
@@ -1,25 +1,24 @@
1
- import { jsxs as s, jsx as t } from "react/jsx-runtime";
2
- import { COLORS as a } from "../../constants/Theme.js";
3
- import { WhatsNewIconContainer as x } from "./WhatsNew.styles.js";
4
- import { Tooltip as y } from "../tooltips/Tooltip.js";
5
- import { IconButton as u } from "../icon-button/IconButton.js";
6
- import w from "../../icons/Legacy - Bikayi specific/Services/Marketing.js";
7
- const j = ({
8
- onClick: d,
1
+ import { jsxs as n, jsx as t } from "react/jsx-runtime";
2
+ import { COLORS as s } from "../../constants/Theme.js";
3
+ import { WhatsNewIconContainer as b } from "./WhatsNew.styles.js";
4
+ import { Tooltip as x } from "../tooltips/Tooltip.js";
5
+ import { IconButton as y } from "../icon-button/IconButton.js";
6
+ import u from "../../icons/Legacy - Bikayi specific/Services/Marketing.js";
7
+ const W = ({
8
+ onClick: a,
9
9
  newContentCount: i = 0,
10
10
  isOpen: o = !1,
11
- isLoading: c = !1,
12
- tooltip: h = "What's new",
13
- testId: l = "whats-new-button",
14
- iconWidth: m = 24,
15
- iconHeight: f = 24,
16
- iconColor: p,
17
- iconPadding: g,
18
- buttonSize: r = 24,
19
- customIcon: b
11
+ isLoading: d = !1,
12
+ tooltip: c = "What's new",
13
+ testId: h = "whats-new-button",
14
+ iconWidth: l = 24,
15
+ iconHeight: m = 24,
16
+ iconColor: f,
17
+ iconPadding: p,
18
+ customIcon: g
20
19
  }) => {
21
- if (c)
22
- return /* @__PURE__ */ s("div", { style: { margin: "0px 8px" }, children: [
20
+ if (d)
21
+ return /* @__PURE__ */ n("div", { style: { margin: "0px 8px" }, children: [
23
22
  /* @__PURE__ */ t(
24
23
  "div",
25
24
  {
@@ -40,37 +39,33 @@ const j = ({
40
39
  }
41
40
  ` })
42
41
  ] });
43
- const e = i > 99 ? "99+" : String(i), n = e.length >= 3 ? 20 : e.length === 2 ? 16 : 12;
44
- return /* @__PURE__ */ s(x, { count: i, children: [
45
- /* @__PURE__ */ t(y, { body: h, placement: "bottom", children: /* @__PURE__ */ t(
46
- u,
42
+ const e = i > 99 ? "99+" : String(i), r = e.length >= 3 ? 20 : e.length === 2 ? 16 : 12;
43
+ return /* @__PURE__ */ n(b, { count: i, children: [
44
+ /* @__PURE__ */ t(x, { body: c, placement: "bottom", children: /* @__PURE__ */ t(
45
+ y,
47
46
  {
48
- Icon: b ?? w,
49
- width: m,
50
- height: f,
51
- iconPadding: g,
47
+ Icon: g ?? u,
48
+ width: l,
49
+ height: m,
50
+ iconPadding: p,
52
51
  isSelected: o,
53
- iconColor: p ?? (o ? a.content.brand : a.content.primary),
54
- onClick: d,
55
- "data-testid": l,
56
- style: {
57
- width: r,
58
- height: r,
59
- boxSizing: "border-box"
60
- }
52
+ iconColor: f ?? (o ? s.content.brand : s.content.primary),
53
+ onClick: a,
54
+ "data-testid": h,
55
+ style: { width: 24, height: 24, boxSizing: "border-box" }
61
56
  }
62
57
  ) }),
63
58
  i > 0 && /* @__PURE__ */ t(
64
59
  "div",
65
60
  {
66
61
  className: "notification--count",
67
- style: { width: n, height: n },
62
+ style: { width: r, height: r },
68
63
  children: /* @__PURE__ */ t("div", { className: "count--text", children: e })
69
64
  }
70
65
  )
71
66
  ] });
72
67
  };
73
68
  export {
74
- j as WhatsNewButton
69
+ W as WhatsNewButton
75
70
  };
76
71
  //# sourceMappingURL=WhatsNewButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAYC;AACb,MAAM;AACL,MAAIR;AACH,6BACE,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,wBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,IAAA,GACD;AAIF,QAAMC,IAAYZ,IAAkB,KAAK,QAAQ,OAAOA,CAAe,GAEjEa,IACLD,EAAU,UAAU,IAAI,KAAKA,EAAU,WAAW,IAAI,KAAK;AAE5D,SACC,gBAAAE,EAACC,GAAA,EAAsB,OAAOf,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACK,GAAA,EAAQ,MAAMb,GAAS,WAAW,UAClC,UAAA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,MACEP,KAAcQ;AAAAA,QAIhB,OAAOb;AAAA,QACP,QAAQC;AAAA,QACR,aAAAE;AAAA,QACA,YAAYP;AAAA,QACZ,WACCM,MACCN,IAASkB,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAEjD,SAAApB;AAAA,QACA,eAAaK;AAAA,QACb,OAAO;AAAA,UACN,OAAOK;AAAA,UACP,QAAQA;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA,GAEF;AAAA,IACCT,IAAkB,KAClB,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,GAAW,QAAQA,EAAA;AAAA,QAEnC,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAC,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}
1
+ {"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{ width: 24, height: 24, boxSizing: 'border-box' }}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAYC;AACb,MAAM;AACL,MAAIP;AACH,6BACE,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,MAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,wBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,IAAA,GACD;AAIF,QAAMC,IAAYX,IAAkB,KAAK,QAAQ,OAAOA,CAAe,GAEjEY,IACLD,EAAU,UAAU,IAAI,KAAKA,EAAU,WAAW,IAAI,KAAK;AAE5D,SACC,gBAAAE,EAACC,GAAA,EAAsB,OAAOd,GAC7B,UAAA;AAAA,IAAA,gBAAAU,EAACK,GAAA,EAAQ,MAAMZ,GAAS,WAAW,UAClC,UAAA,gBAAAO;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,MACEP,KAAcQ;AAAAA,QAIhB,OAAOZ;AAAA,QACP,QAAQC;AAAA,QACR,aAAAE;AAAA,QACA,YAAYP;AAAA,QACZ,WACCM,MACCN,IAASiB,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAEjD,SAAAnB;AAAA,QACA,eAAaK;AAAA,QACb,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,WAAW,aAAA;AAAA,MAAa;AAAA,IAAA,GAE1D;AAAA,IACCJ,IAAkB,KAClB,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,GAAW,QAAQA,EAAA;AAAA,QAEnC,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAC,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}