@microsoft/omnichannel-chat-components 1.1.14 → 1.1.15

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 (28) hide show
  1. package/lib/cjs/components/citationpane/CitationPane.js +32 -10
  2. package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js +13 -1
  3. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.js +11 -0
  4. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.js +11 -0
  5. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js +13 -4
  6. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js +1 -1
  7. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js +8 -4
  8. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.js +37 -0
  9. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.js +11 -0
  10. package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.js +11 -0
  11. package/lib/esm/components/citationpane/CitationPane.js +28 -10
  12. package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js +9 -1
  13. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.js +4 -0
  14. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.js +4 -0
  15. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js +13 -4
  16. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js +1 -1
  17. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js +8 -4
  18. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.js +20 -0
  19. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.js +4 -0
  20. package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.js +4 -0
  21. package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.d.ts +2 -0
  22. package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.d.ts +2 -0
  23. package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.d.ts +2 -0
  24. package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.d.ts +2 -0
  25. package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.d.ts +2 -0
  26. package/lib/types/components/citationpane/interfaces/ICitationPaneComponentOverrides.d.ts +0 -1
  27. package/lib/types/components/citationpane/interfaces/ICitationPaneStyleProps.d.ts +4 -0
  28. package/package.json +1 -1
package/lib/cjs/components/citationpane/CitationPane.js CHANGED
@@ -15,6 +15,10 @@ var _BroadcastService = require("../../services/BroadcastService");
15
15
 
16
16
  var _decodeComponentString = require("../../common/decodeComponentString");
17
17
 
18
+ var _defaultCitationPaneCloseButtonFocusedStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles");
19
+
20
+ var _defaultCitationPaneCloseButtonHoveredStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles");
21
+
18
22
  var _defaultCitationPaneCloseButtonStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonStyles");
19
23
 
20
24
  var _defaultCitationPaneContentStyles = require("./common/defaultStyles/defaultCitationPaneContentStyles");
@@ -25,6 +29,10 @@ var _defaultCitationPaneGeneralStyles = require("./common/defaultStyles/defaultC
25
29
 
26
30
  var _defaultCitationPaneTitleStyles = require("./common/defaultStyles/defaultCitationPaneTitleStyles");
27
31
 
32
+ var _defaultCitationPaneTopCloseButtonFocusedStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles");
33
+
34
+ var _defaultCitationPaneTopCloseButtonHoveredStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles");
35
+
28
36
  var _defaultCitationPaneTopCloseButtonStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles");
29
37
 
30
38
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -32,7 +40,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
32
40
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
33
41
 
34
42
  function CitationPane(props) {
35
- var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps4, _props$styleProps5, _props$controlProps5, _props$styleProps6, _props$styleProps6$cl, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps7, _props$styleProps7$cl, _props$controlProps8, _props$componentOverr2, _props$styleProps8, _props$styleProps8$cl, _props$controlProps9, _props$styleProps9, _props$styleProps9$cl, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps10, _props$styleProps10$c;
43
+ var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps4, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$controlProps5, _props$styleProps12, _props$styleProps12$c, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps13, _props$styleProps13$c, _props$controlProps8, _props$componentOverr2, _props$styleProps14, _props$styleProps14$c, _props$controlProps9, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps16, _props$styleProps16$c;
36
44
 
37
45
  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultCitationPaneControlProps.defaultCitationPaneControlProps.id;
38
46
  const handleClose = (0, _react2.useCallback)(() => {
@@ -64,7 +72,13 @@ function CitationPane(props) {
64
72
 
65
73
  handleClose();
66
74
  }
67
- }, [props.controlProps, elementId]);
75
+ }, [props.controlProps, elementId]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
76
+
77
+ const handleEscKeyDown = (0, _react2.useCallback)(e => {
78
+ if (e.key === "Escape") {
79
+ handleClose();
80
+ }
81
+ }, [handleClose]);
68
82
  const containerStyles = {
69
83
  root: Object.assign({}, _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
70
84
  position: "relative" // Ensure container is positioned for absolute positioning of top close button
@@ -78,17 +92,23 @@ function CitationPane(props) {
78
92
  ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
79
93
  };
80
94
  const closeButtonStyles = {
81
- root: Object.assign({}, _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps)
95
+ root: Object.assign({}, _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps),
96
+ rootHovered: Object.assign({}, _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.closeButtonHoveredStyleProps),
97
+ rootFocused: Object.assign({}, _defaultCitationPaneCloseButtonFocusedStyles.defaultCitationPaneCloseButtonFocusedStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonFocusedStyleProps),
98
+ rootPressed: Object.assign({}, _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps)
82
99
  };
83
100
  const topCloseButtonPosition = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.topCloseButtonPosition) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.topCloseButtonPosition;
84
101
  const topCloseButtonStyles = {
85
- root: Object.assign({}, _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
102
+ root: Object.assign({}, _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
86
103
  left: "0.5em",
87
104
  right: "auto"
88
105
  } : {
89
106
  right: "0.5em",
90
107
  left: "auto"
91
- })
108
+ }),
109
+ rootHovered: Object.assign({}, _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.topCloseButtonHoveredStyleProps),
110
+ rootFocused: Object.assign({}, _defaultCitationPaneTopCloseButtonFocusedStyles.defaultCitationPaneTopCloseButtonFocusedStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.topCloseButtonFocusedStyleProps),
111
+ rootPressed: Object.assign({}, _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.topCloseButtonHoveredStyleProps)
92
112
  };
93
113
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_react.Stack, {
94
114
  id: elementId,
@@ -97,7 +117,9 @@ function CitationPane(props) {
97
117
  "aria-describedby": elementId + "-content",
98
118
  dir: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.dir,
99
119
  styles: containerStyles,
100
- className: (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : (_props$styleProps6$cl = _props$styleProps6.classNames) === null || _props$styleProps6$cl === void 0 ? void 0 : _props$styleProps6$cl.containerClassName
120
+ className: (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : (_props$styleProps12$c = _props$styleProps12.classNames) === null || _props$styleProps12$c === void 0 ? void 0 : _props$styleProps12$c.containerClassName,
121
+ onKeyDown: handleEscKeyDown,
122
+ tabIndex: -1
101
123
  }, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideTopCloseButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
102
124
  onClick: handleTopClose,
103
125
  id: elementId + "-top-close",
@@ -106,15 +128,15 @@ function CitationPane(props) {
106
128
  },
107
129
  ariaLabel: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.topCloseButtonAriaLabel) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.topCloseButtonAriaLabel,
108
130
  styles: topCloseButtonStyles,
109
- className: (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : (_props$styleProps7$cl = _props$styleProps7.classNames) === null || _props$styleProps7$cl === void 0 ? void 0 : _props$styleProps7$cl.topCloseButtonClassName
131
+ className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.topCloseButtonClassName
110
132
  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
111
133
  id: elementId + "-title",
112
134
  styles: titleStyles,
113
- className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.titleClassName
135
+ className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.titleClassName
114
136
  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.titleText)), /*#__PURE__*/_react2.default.createElement("div", {
115
137
  id: elementId + "-content",
116
138
  style: contentStyles,
117
- className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.contentClassName,
139
+ className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.contentClassName,
118
140
  dangerouslySetInnerHTML: {
119
141
  __html: ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.contentHtml) ?? ""
120
142
  }
@@ -124,7 +146,7 @@ function CitationPane(props) {
124
146
  text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.closeButtonText,
125
147
  ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.closeButtonAriaLabel,
126
148
  styles: closeButtonStyles,
127
- className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.closeButtonClassName
149
+ className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.closeButtonClassName
128
150
  }))));
129
151
  }
130
152
 
package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js CHANGED
@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.defaultCitationPaneStyleProps = void 0;
7
7
 
8
+ var _defaultCitationPaneCloseButtonFocusedStyles = require("../defaultStyles/defaultCitationPaneCloseButtonFocusedStyles");
9
+
10
+ var _defaultCitationPaneCloseButtonHoveredStyles = require("../defaultStyles/defaultCitationPaneCloseButtonHoveredStyles");
11
+
8
12
  var _defaultCitationPaneCloseButtonStyles = require("../defaultStyles/defaultCitationPaneCloseButtonStyles");
9
13
 
10
14
  var _defaultCitationPaneContentStyles = require("../defaultStyles/defaultCitationPaneContentStyles");
@@ -13,6 +17,10 @@ var _defaultCitationPaneGeneralStyles = require("../defaultStyles/defaultCitatio
13
17
 
14
18
  var _defaultCitationPaneTitleStyles = require("../defaultStyles/defaultCitationPaneTitleStyles");
15
19
 
20
+ var _defaultCitationPaneTopCloseButtonFocusedStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles");
21
+
22
+ var _defaultCitationPaneTopCloseButtonHoveredStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles");
23
+
16
24
  var _defaultCitationPaneTopCloseButtonStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonStyles");
17
25
 
18
26
  const defaultCitationPaneStyleProps = {
@@ -20,6 +28,10 @@ const defaultCitationPaneStyleProps = {
20
28
  titleStyleProps: _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles,
21
29
  contentStyleProps: _defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
22
30
  closeButtonStyleProps: _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles,
23
- topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles
31
+ closeButtonHoveredStyleProps: _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles,
32
+ closeButtonFocusedStyleProps: _defaultCitationPaneCloseButtonFocusedStyles.defaultCitationPaneCloseButtonFocusedStyles,
33
+ topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles,
34
+ topCloseButtonHoveredStyleProps: _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles,
35
+ topCloseButtonFocusedStyleProps: _defaultCitationPaneTopCloseButtonFocusedStyles.defaultCitationPaneTopCloseButtonFocusedStyles
24
36
  };
25
37
  exports.defaultCitationPaneStyleProps = defaultCitationPaneStyleProps;
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultCitationPaneCloseButtonFocusedStyles = void 0;
7
+ const defaultCitationPaneCloseButtonFocusedStyles = {
8
+ border: "2px dotted #605e5c",
9
+ outline: "none"
10
+ };
11
+ exports.defaultCitationPaneCloseButtonFocusedStyles = defaultCitationPaneCloseButtonFocusedStyles;
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultCitationPaneCloseButtonHoveredStyles = void 0;
7
+ const defaultCitationPaneCloseButtonHoveredStyles = {
8
+ backgroundColor: "#f3f2f1",
9
+ color: "#323130"
10
+ };
11
+ exports.defaultCitationPaneCloseButtonHoveredStyles = defaultCitationPaneCloseButtonHoveredStyles;
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js CHANGED
@@ -18,12 +18,17 @@ const defaultCitationPaneCloseButtonStyles = {
18
18
  fontSize: "1em",
19
19
  // Use relative font size for better scaling
20
20
  fontWeight: "500",
21
- minHeight: "2em",
22
- // Scalable minimum height
23
- minWidth: "5em",
24
- // Scalable minimum width
21
+ minHeight: "2.75em",
22
+ // A11Y compliant minimum height (44px at 16px base)
23
+ minWidth: "5.5em",
24
+ // A11Y compliant minimum width (88px at 16px base)
25
25
  padding: "0.5em 1em",
26
26
  // Scalable padding
27
+ // Responsive hiding at high zoom levels for better content space
28
+ "@media (min-resolution: 2.5dppx), (min-resolution: 240dpi)": {
29
+ display: "none" // Hide at 250%+ zoom to preserve content space
30
+
31
+ },
27
32
  selectors: {
28
33
  ":hover": {
29
34
  backgroundColor: "#e1dfdd",
@@ -34,6 +39,10 @@ const defaultCitationPaneCloseButtonStyles = {
34
39
  // Scalable outline
35
40
  outlineOffset: "0.125em" // Scalable offset
36
41
 
42
+ },
43
+ ":active": {
44
+ backgroundColor: "#d2d0ce",
45
+ borderColor: "#c8c6c4"
37
46
  }
38
47
  }
39
48
  };
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js CHANGED
@@ -15,7 +15,7 @@ const defaultCitationPaneContentStyles = {
15
15
  // Allow content to grow and push close button to bottom
16
16
  overflow: "auto",
17
17
  // Enable scrolling for long content
18
- paddingRight: "0.25em" // Small padding to prevent scrollbar from touching border (scalable)
18
+ paddingRight: "0.125em" // Reduced padding to give more space for text at high zoom (scalable)
19
19
 
20
20
  };
21
21
  exports.defaultCitationPaneContentStyles = defaultCitationPaneContentStyles;
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js CHANGED
@@ -7,10 +7,14 @@ exports.defaultCitationPaneGeneralStyles = void 0;
7
7
  const defaultCitationPaneGeneralStyles = {
8
8
  position: "relative",
9
9
  // Required for absolute positioning of top close button
10
- paddingTop: "2.5em",
11
- // Space for top close button to prevent overlap (scalable)
12
- padding: "1em",
13
- // Scalable padding using em units
10
+ paddingTop: "2em",
11
+ // Reduced space for top close button (scalable)
12
+ paddingLeft: "0.75em",
13
+ // Reduced left padding (scalable)
14
+ paddingRight: "0.75em",
15
+ // Reduced right padding (scalable)
16
+ paddingBottom: "0.75em",
17
+ // Reduced bottom padding (scalable)
14
18
  backgroundColor: "#ffffff",
15
19
  border: "1px solid #d2d0ce",
16
20
  borderRadius: "0.5em",
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultCitationPaneStyles = void 0;
7
+
8
+ var _defaultCitationPaneCloseButtonFocusedStyles = require("./defaultCitationPaneCloseButtonFocusedStyles");
9
+
10
+ var _defaultCitationPaneCloseButtonHoveredStyles = require("./defaultCitationPaneCloseButtonHoveredStyles");
11
+
12
+ var _defaultCitationPaneCloseButtonStyles = require("./defaultCitationPaneCloseButtonStyles");
13
+
14
+ var _defaultCitationPaneContentStyles = require("./defaultCitationPaneContentStyles");
15
+
16
+ var _defaultCitationPaneGeneralStyles = require("./defaultCitationPaneGeneralStyles");
17
+
18
+ var _defaultCitationPaneTitleStyles = require("./defaultCitationPaneTitleStyles");
19
+
20
+ var _defaultCitationPaneTopCloseButtonFocusedStyles = require("./defaultCitationPaneTopCloseButtonFocusedStyles");
21
+
22
+ var _defaultCitationPaneTopCloseButtonHoveredStyles = require("./defaultCitationPaneTopCloseButtonHoveredStyles");
23
+
24
+ var _defaultCitationPaneTopCloseButtonStyles = require("./defaultCitationPaneTopCloseButtonStyles");
25
+
26
+ const defaultCitationPaneStyles = {
27
+ generalStyleProps: _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles,
28
+ titleStyleProps: _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles,
29
+ contentStyleProps: _defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
30
+ closeButtonStyleProps: _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles,
31
+ closeButtonHoveredStyleProps: _defaultCitationPaneCloseButtonHoveredStyles.defaultCitationPaneCloseButtonHoveredStyles,
32
+ closeButtonFocusedStyleProps: _defaultCitationPaneCloseButtonFocusedStyles.defaultCitationPaneCloseButtonFocusedStyles,
33
+ topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles,
34
+ topCloseButtonHoveredStyleProps: _defaultCitationPaneTopCloseButtonHoveredStyles.defaultCitationPaneTopCloseButtonHoveredStyles,
35
+ topCloseButtonFocusedStyleProps: _defaultCitationPaneTopCloseButtonFocusedStyles.defaultCitationPaneTopCloseButtonFocusedStyles
36
+ };
37
+ exports.defaultCitationPaneStyles = defaultCitationPaneStyles;
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultCitationPaneTopCloseButtonFocusedStyles = void 0;
7
+ const defaultCitationPaneTopCloseButtonFocusedStyles = {
8
+ border: "2px dotted #605e5c",
9
+ outline: "none"
10
+ };
11
+ exports.defaultCitationPaneTopCloseButtonFocusedStyles = defaultCitationPaneTopCloseButtonFocusedStyles;
package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultCitationPaneTopCloseButtonHoveredStyles = void 0;
7
+ const defaultCitationPaneTopCloseButtonHoveredStyles = {
8
+ backgroundColor: "#f3f2f1",
9
+ color: "#323130"
10
+ };
11
+ exports.defaultCitationPaneTopCloseButtonHoveredStyles = defaultCitationPaneTopCloseButtonHoveredStyles;
package/lib/esm/components/citationpane/CitationPane.js CHANGED
@@ -3,15 +3,19 @@ import { ElementType, EventNames } from "../../common/Constants";
3
3
  import React, { useCallback } from "react";
4
4
  import { BroadcastService } from "../../services/BroadcastService";
5
5
  import { decodeComponentString } from "../../common/decodeComponentString";
6
+ import { defaultCitationPaneCloseButtonFocusedStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles";
7
+ import { defaultCitationPaneCloseButtonHoveredStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles";
6
8
  import { defaultCitationPaneCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonStyles";
7
9
  import { defaultCitationPaneContentStyles } from "./common/defaultStyles/defaultCitationPaneContentStyles";
8
10
  import { defaultCitationPaneControlProps } from "./common/defaultProps/defaultCitationPaneControlProps";
9
11
  import { defaultCitationPaneGeneralStyles } from "./common/defaultStyles/defaultCitationPaneGeneralStyles";
10
12
  import { defaultCitationPaneTitleStyles } from "./common/defaultStyles/defaultCitationPaneTitleStyles";
13
+ import { defaultCitationPaneTopCloseButtonFocusedStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles";
14
+ import { defaultCitationPaneTopCloseButtonHoveredStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles";
11
15
  import { defaultCitationPaneTopCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles";
12
16
 
13
17
  function CitationPane(props) {
14
- var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps4, _props$styleProps5, _props$controlProps5, _props$styleProps6, _props$styleProps6$cl, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps7, _props$styleProps7$cl, _props$controlProps8, _props$componentOverr2, _props$styleProps8, _props$styleProps8$cl, _props$controlProps9, _props$styleProps9, _props$styleProps9$cl, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps10, _props$styleProps10$c;
18
+ var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps4, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$controlProps5, _props$styleProps12, _props$styleProps12$c, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps13, _props$styleProps13$c, _props$controlProps8, _props$componentOverr2, _props$styleProps14, _props$styleProps14$c, _props$controlProps9, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps16, _props$styleProps16$c;
15
19
 
16
20
  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultCitationPaneControlProps.id;
17
21
  const handleClose = useCallback(() => {
@@ -39,7 +43,13 @@ function CitationPane(props) {
39
43
  BroadcastService.postMessage(customEvent);
40
44
  handleClose();
41
45
  }
42
- }, [props.controlProps, elementId]);
46
+ }, [props.controlProps, elementId]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
47
+
48
+ const handleEscKeyDown = useCallback(e => {
49
+ if (e.key === "Escape") {
50
+ handleClose();
51
+ }
52
+ }, [handleClose]);
43
53
  const containerStyles = {
44
54
  root: Object.assign({}, defaultCitationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
45
55
  position: "relative" // Ensure container is positioned for absolute positioning of top close button
@@ -53,17 +63,23 @@ function CitationPane(props) {
53
63
  ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
54
64
  };
55
65
  const closeButtonStyles = {
56
- root: Object.assign({}, defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps)
66
+ root: Object.assign({}, defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps),
67
+ rootHovered: Object.assign({}, defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.closeButtonHoveredStyleProps),
68
+ rootFocused: Object.assign({}, defaultCitationPaneCloseButtonFocusedStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonFocusedStyleProps),
69
+ rootPressed: Object.assign({}, defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps)
57
70
  };
58
71
  const topCloseButtonPosition = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.topCloseButtonPosition) || defaultCitationPaneControlProps.topCloseButtonPosition;
59
72
  const topCloseButtonStyles = {
60
- root: Object.assign({}, defaultCitationPaneTopCloseButtonStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
73
+ root: Object.assign({}, defaultCitationPaneTopCloseButtonStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
61
74
  left: "0.5em",
62
75
  right: "auto"
63
76
  } : {
64
77
  right: "0.5em",
65
78
  left: "auto"
66
- })
79
+ }),
80
+ rootHovered: Object.assign({}, defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.topCloseButtonHoveredStyleProps),
81
+ rootFocused: Object.assign({}, defaultCitationPaneTopCloseButtonFocusedStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.topCloseButtonFocusedStyleProps),
82
+ rootPressed: Object.assign({}, defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.topCloseButtonHoveredStyleProps)
67
83
  };
68
84
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
69
85
  id: elementId,
@@ -72,7 +88,9 @@ function CitationPane(props) {
72
88
  "aria-describedby": elementId + "-content",
73
89
  dir: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) || defaultCitationPaneControlProps.dir,
74
90
  styles: containerStyles,
75
- className: (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : (_props$styleProps6$cl = _props$styleProps6.classNames) === null || _props$styleProps6$cl === void 0 ? void 0 : _props$styleProps6$cl.containerClassName
91
+ className: (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : (_props$styleProps12$c = _props$styleProps12.classNames) === null || _props$styleProps12$c === void 0 ? void 0 : _props$styleProps12$c.containerClassName,
92
+ onKeyDown: handleEscKeyDown,
93
+ tabIndex: -1
76
94
  }, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideTopCloseButton) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/React.createElement(IconButton, {
77
95
  onClick: handleTopClose,
78
96
  id: elementId + "-top-close",
@@ -81,15 +99,15 @@ function CitationPane(props) {
81
99
  },
82
100
  ariaLabel: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.topCloseButtonAriaLabel) || defaultCitationPaneControlProps.topCloseButtonAriaLabel,
83
101
  styles: topCloseButtonStyles,
84
- className: (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : (_props$styleProps7$cl = _props$styleProps7.classNames) === null || _props$styleProps7$cl === void 0 ? void 0 : _props$styleProps7$cl.topCloseButtonClassName
102
+ className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.topCloseButtonClassName
85
103
  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/React.createElement(Label, {
86
104
  id: elementId + "-title",
87
105
  styles: titleStyles,
88
- className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.titleClassName
106
+ className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.titleClassName
89
107
  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || defaultCitationPaneControlProps.titleText)), /*#__PURE__*/React.createElement("div", {
90
108
  id: elementId + "-content",
91
109
  style: contentStyles,
92
- className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.contentClassName,
110
+ className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.contentClassName,
93
111
  dangerouslySetInnerHTML: {
94
112
  __html: ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.contentHtml) ?? ""
95
113
  }
@@ -99,7 +117,7 @@ function CitationPane(props) {
99
117
  text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || defaultCitationPaneControlProps.closeButtonText,
100
118
  ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || defaultCitationPaneControlProps.closeButtonAriaLabel,
101
119
  styles: closeButtonStyles,
102
- className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.closeButtonClassName
120
+ className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.closeButtonClassName
103
121
  }))));
104
122
  }
105
123
 
package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js CHANGED
@@ -1,12 +1,20 @@
1
+ import { defaultCitationPaneCloseButtonFocusedStyles } from "../defaultStyles/defaultCitationPaneCloseButtonFocusedStyles";
2
+ import { defaultCitationPaneCloseButtonHoveredStyles } from "../defaultStyles/defaultCitationPaneCloseButtonHoveredStyles";
1
3
  import { defaultCitationPaneCloseButtonStyles } from "../defaultStyles/defaultCitationPaneCloseButtonStyles";
2
4
  import { defaultCitationPaneContentStyles } from "../defaultStyles/defaultCitationPaneContentStyles";
3
5
  import { defaultCitationPaneGeneralStyles } from "../defaultStyles/defaultCitationPaneGeneralStyles";
4
6
  import { defaultCitationPaneTitleStyles } from "../defaultStyles/defaultCitationPaneTitleStyles";
7
+ import { defaultCitationPaneTopCloseButtonFocusedStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles";
8
+ import { defaultCitationPaneTopCloseButtonHoveredStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles";
5
9
  import { defaultCitationPaneTopCloseButtonStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonStyles";
6
10
  export const defaultCitationPaneStyleProps = {
7
11
  generalStyleProps: defaultCitationPaneGeneralStyles,
8
12
  titleStyleProps: defaultCitationPaneTitleStyles,
9
13
  contentStyleProps: defaultCitationPaneContentStyles,
10
14
  closeButtonStyleProps: defaultCitationPaneCloseButtonStyles,
11
- topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles
15
+ closeButtonHoveredStyleProps: defaultCitationPaneCloseButtonHoveredStyles,
16
+ closeButtonFocusedStyleProps: defaultCitationPaneCloseButtonFocusedStyles,
17
+ topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles,
18
+ topCloseButtonHoveredStyleProps: defaultCitationPaneTopCloseButtonHoveredStyles,
19
+ topCloseButtonFocusedStyleProps: defaultCitationPaneTopCloseButtonFocusedStyles
12
20
  };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.js ADDED
@@ -0,0 +1,4 @@
1
+ export const defaultCitationPaneCloseButtonFocusedStyles = {
2
+ border: "2px dotted #605e5c",
3
+ outline: "none"
4
+ };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.js ADDED
@@ -0,0 +1,4 @@
1
+ export const defaultCitationPaneCloseButtonHoveredStyles = {
2
+ backgroundColor: "#f3f2f1",
3
+ color: "#323130"
4
+ };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js CHANGED
@@ -12,12 +12,17 @@ export const defaultCitationPaneCloseButtonStyles = {
12
12
  fontSize: "1em",
13
13
  // Use relative font size for better scaling
14
14
  fontWeight: "500",
15
- minHeight: "2em",
16
- // Scalable minimum height
17
- minWidth: "5em",
18
- // Scalable minimum width
15
+ minHeight: "2.75em",
16
+ // A11Y compliant minimum height (44px at 16px base)
17
+ minWidth: "5.5em",
18
+ // A11Y compliant minimum width (88px at 16px base)
19
19
  padding: "0.5em 1em",
20
20
  // Scalable padding
21
+ // Responsive hiding at high zoom levels for better content space
22
+ "@media (min-resolution: 2.5dppx), (min-resolution: 240dpi)": {
23
+ display: "none" // Hide at 250%+ zoom to preserve content space
24
+
25
+ },
21
26
  selectors: {
22
27
  ":hover": {
23
28
  backgroundColor: "#e1dfdd",
@@ -28,6 +33,10 @@ export const defaultCitationPaneCloseButtonStyles = {
28
33
  // Scalable outline
29
34
  outlineOffset: "0.125em" // Scalable offset
30
35
 
36
+ },
37
+ ":active": {
38
+ backgroundColor: "#d2d0ce",
39
+ borderColor: "#c8c6c4"
31
40
  }
32
41
  }
33
42
  };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js CHANGED
@@ -9,6 +9,6 @@ export const defaultCitationPaneContentStyles = {
9
9
  // Allow content to grow and push close button to bottom
10
10
  overflow: "auto",
11
11
  // Enable scrolling for long content
12
- paddingRight: "0.25em" // Small padding to prevent scrollbar from touching border (scalable)
12
+ paddingRight: "0.125em" // Reduced padding to give more space for text at high zoom (scalable)
13
13
 
14
14
  };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js CHANGED
@@ -1,10 +1,14 @@
1
1
  export const defaultCitationPaneGeneralStyles = {
2
2
  position: "relative",
3
3
  // Required for absolute positioning of top close button
4
- paddingTop: "2.5em",
5
- // Space for top close button to prevent overlap (scalable)
6
- padding: "1em",
7
- // Scalable padding using em units
4
+ paddingTop: "2em",
5
+ // Reduced space for top close button (scalable)
6
+ paddingLeft: "0.75em",
7
+ // Reduced left padding (scalable)
8
+ paddingRight: "0.75em",
9
+ // Reduced right padding (scalable)
10
+ paddingBottom: "0.75em",
11
+ // Reduced bottom padding (scalable)
8
12
  backgroundColor: "#ffffff",
9
13
  border: "1px solid #d2d0ce",
10
14
  borderRadius: "0.5em",
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.js ADDED
@@ -0,0 +1,20 @@
1
+ import { defaultCitationPaneCloseButtonFocusedStyles } from "./defaultCitationPaneCloseButtonFocusedStyles";
2
+ import { defaultCitationPaneCloseButtonHoveredStyles } from "./defaultCitationPaneCloseButtonHoveredStyles";
3
+ import { defaultCitationPaneCloseButtonStyles } from "./defaultCitationPaneCloseButtonStyles";
4
+ import { defaultCitationPaneContentStyles } from "./defaultCitationPaneContentStyles";
5
+ import { defaultCitationPaneGeneralStyles } from "./defaultCitationPaneGeneralStyles";
6
+ import { defaultCitationPaneTitleStyles } from "./defaultCitationPaneTitleStyles";
7
+ import { defaultCitationPaneTopCloseButtonFocusedStyles } from "./defaultCitationPaneTopCloseButtonFocusedStyles";
8
+ import { defaultCitationPaneTopCloseButtonHoveredStyles } from "./defaultCitationPaneTopCloseButtonHoveredStyles";
9
+ import { defaultCitationPaneTopCloseButtonStyles } from "./defaultCitationPaneTopCloseButtonStyles";
10
+ export const defaultCitationPaneStyles = {
11
+ generalStyleProps: defaultCitationPaneGeneralStyles,
12
+ titleStyleProps: defaultCitationPaneTitleStyles,
13
+ contentStyleProps: defaultCitationPaneContentStyles,
14
+ closeButtonStyleProps: defaultCitationPaneCloseButtonStyles,
15
+ closeButtonHoveredStyleProps: defaultCitationPaneCloseButtonHoveredStyles,
16
+ closeButtonFocusedStyleProps: defaultCitationPaneCloseButtonFocusedStyles,
17
+ topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles,
18
+ topCloseButtonHoveredStyleProps: defaultCitationPaneTopCloseButtonHoveredStyles,
19
+ topCloseButtonFocusedStyleProps: defaultCitationPaneTopCloseButtonFocusedStyles
20
+ };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.js ADDED
@@ -0,0 +1,4 @@
1
+ export const defaultCitationPaneTopCloseButtonFocusedStyles = {
2
+ border: "2px dotted #605e5c",
3
+ outline: "none"
4
+ };
package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.js ADDED
@@ -0,0 +1,4 @@
1
+ export const defaultCitationPaneTopCloseButtonHoveredStyles = {
2
+ backgroundColor: "#f3f2f1",
3
+ color: "#323130"
4
+ };
package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { IStyle } from "@fluentui/react";
2
+ export declare const defaultCitationPaneCloseButtonFocusedStyles: IStyle;
package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { IStyle } from "@fluentui/react";
2
+ export declare const defaultCitationPaneCloseButtonHoveredStyles: IStyle;
package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { ICitationPaneStyleProps } from "../../interfaces/ICitationPaneStyleProps";
2
+ export declare const defaultCitationPaneStyles: ICitationPaneStyleProps;
package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { IStyle } from "@fluentui/react";
2
+ export declare const defaultCitationPaneTopCloseButtonFocusedStyles: IStyle;
package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { IStyle } from "@fluentui/react";
2
+ export declare const defaultCitationPaneTopCloseButtonHoveredStyles: IStyle;
package/lib/types/components/citationpane/interfaces/ICitationPaneComponentOverrides.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { ReactNode } from "react";
2
2
  export interface ICitationPaneComponentOverrides {
3
3
  title?: ReactNode | string;
4
- subtitle?: ReactNode | string;
5
4
  closeButton?: ReactNode | string;
6
5
  topCloseButton?: ReactNode | string;
7
6
  }
package/lib/types/components/citationpane/interfaces/ICitationPaneStyleProps.d.ts CHANGED
@@ -5,6 +5,10 @@ export interface ICitationPaneStyleProps {
5
5
  titleStyleProps?: IStyle;
6
6
  contentStyleProps?: IStyle;
7
7
  closeButtonStyleProps?: IStyle;
8
+ closeButtonHoveredStyleProps?: IStyle;
9
+ closeButtonFocusedStyleProps?: IStyle;
8
10
  topCloseButtonStyleProps?: IStyle;
11
+ topCloseButtonHoveredStyleProps?: IStyle;
12
+ topCloseButtonFocusedStyleProps?: IStyle;
9
13
  classNames?: ICitationPaneClassNames;
10
14
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "1.1.14",
3
+ "version": "1.1.15",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",