@microsoft/omnichannel-chat-components 1.1.17-main.f45c44b → 1.1.17-main.f8ae4f8

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 (3) hide show
  1. package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js +71 -23
  2. package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js +72 -23
  3. package/package.json +1 -1
package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js CHANGED
@@ -15,9 +15,58 @@ var _defaultPreChatSurveyPaneControlProps = require("./common/defaultProps/defau
15
15
  var _defaultPreChatSurveyPaneGeneralStyles = require("./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneGeneralStyles");
16
16
  var _defaultPreChatSurveyPaneStyles = require("./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles");
17
17
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
18
+ // Detect iOS (iPhone/iPad/iPod) including iPadOS 13+ which reports as Mac with touch support.
19
+ // Used to scope iOS-only Safari workarounds; must not match other platforms.
20
+ const isIOSDevice = () => {
21
+ if (typeof navigator === "undefined") {
22
+ return false;
23
+ }
24
+ const ua = navigator.userAgent || "";
25
+ if (/iPad|iPhone|iPod/.test(ua)) {
26
+ return true;
27
+ }
28
+ return ua.includes("Mac") && typeof document !== "undefined" && "ontouchend" in document;
29
+ };
30
+
31
+ // iOS-only: AdaptiveCards' ChoiceSetInput value getter treats `selectedIndex > 0` as "user selected"
32
+ // and returns undefined for index 0 (assuming it is always the injected placeholder).
33
+ // On iOS we remove the placeholder to avoid a blank picker row, which shifts the first real
34
+ // option to index 0 — so the original getter wrongly reports undefined and required-field
35
+ // validation fails. Patch the prototype once to accept index >= 0.
36
+ let iosChoiceSetValuePatched = false;
37
+ const patchIOSChoiceSetValueGetter = () => {
38
+ if (iosChoiceSetValuePatched) {
39
+ return;
40
+ }
41
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
42
+ const ChoiceSetInput = AdaptiveCards.ChoiceSetInput;
43
+ if (!ChoiceSetInput || !ChoiceSetInput.prototype) {
44
+ return;
45
+ }
46
+ const descriptor = Object.getOwnPropertyDescriptor(ChoiceSetInput.prototype, "value");
47
+ if (!descriptor || !descriptor.get) {
48
+ return;
49
+ }
50
+ Object.defineProperty(ChoiceSetInput.prototype, "value", {
51
+ configurable: true,
52
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
53
+ get: function () {
54
+ var _descriptor$get;
55
+ if (!this.isMultiSelect && this._selectElement) {
56
+ return this._selectElement.selectedIndex >= 0 ? this._selectElement.value : undefined;
57
+ }
58
+ return (_descriptor$get = descriptor.get) === null || _descriptor$get === void 0 ? void 0 : _descriptor$get.call(this);
59
+ }
60
+ });
61
+ iosChoiceSetValuePatched = true;
62
+ };
18
63
  function PreChatSurveyPane(props) {
19
64
  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _defaultPreChatSurvey, _props$styleProps0, _defaultPreChatSurvey2, _props$styleProps1, _defaultPreChatSurvey3, _props$styleProps10, _defaultPreChatSurvey4, _props$styleProps11, _defaultPreChatSurvey5, _props$styleProps12, _defaultPreChatSurvey6, _props$styleProps13, _defaultPreChatSurvey7, _props$styleProps14, _defaultPreChatSurvey8, _props$styleProps15, _defaultPreChatSurvey9, _props$styleProps16, _defaultPreChatSurvey0, _props$styleProps17, _defaultPreChatSurvey1, _props$styleProps18, _defaultPreChatSurvey10, _props$styleProps19, _defaultPreChatSurvey11, _props$styleProps20, _defaultPreChatSurvey12, _props$styleProps21, _defaultPreChatSurvey13, _props$controlProps6, _props$controlProps7, _props$controlProps8;
20
65
  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultPreChatSurveyPaneControlProps.defaultPreChatSurveyPaneControlProps.id;
66
+ const isIOS = isIOSDevice();
67
+ if (isIOS) {
68
+ patchIOSChoiceSetValueGetter();
69
+ }
21
70
  let adpativeCardPayload;
22
71
  let adaptiveCardHostConfig;
23
72
  const containerStyles = {
@@ -72,21 +121,30 @@ function PreChatSurveyPane(props) {
72
121
  const renderedCard = adaptiveCard.render();
73
122
  (0, _utils.addNoreferrerNoopenerTag)(renderedCard);
74
123
 
75
- // Fix iOS Safari blank space in <select> dropdowns
76
- if (renderedCard) {
77
- const selectElements = renderedCard.querySelectorAll("select.ac-choiceSetInput-compact");
124
+ // Fix iOS Safari blank space in <select> dropdowns. iOS-only; other platforms render correctly.
125
+ // The placeholder option that AdaptiveCards injects renders as a blank row in the iOS
126
+ // native picker (CSS display/hidden are ignored on <option>). Removing it from the DOM
127
+ // is the only reliable workaround. After removal, we select the first remaining option
128
+ // and notify AdaptiveCards so required-field validation reads the visible value.
129
+ const applyIOSPrechatFix = container => {
130
+ const selectElements = container.querySelectorAll("select.ac-choiceSetInput-compact");
78
131
  selectElements.forEach(select => {
79
- // Remove hidden placeholder option that causes blank space on iOS
80
132
  const firstOption = select.options[0];
81
133
  if (firstOption && firstOption.disabled && firstOption.hidden && firstOption.value === "") {
82
- select.removeChild(firstOption);
134
+ firstOption.remove();
135
+ if (select.options.length > 0) {
136
+ select.selectedIndex = 0;
137
+ select.value = select.options[0].value;
138
+ select.dispatchEvent(new Event("input", {
139
+ bubbles: true
140
+ }));
141
+ select.dispatchEvent(new Event("change", {
142
+ bubbles: true
143
+ }));
144
+ }
83
145
  }
84
- // Override iOS native select rendering
85
- select.style.webkitAppearance = "none";
86
- select.style.height = "auto";
87
- select.style.minHeight = "31px";
88
146
  });
89
- }
147
+ };
90
148
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
91
149
  .ac-textBlock {
92
150
  font-size: ${(_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 || (_props$styleProps3 = _props$styleProps3.customTextStyleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.fontSize} !important;
@@ -121,19 +179,6 @@ function PreChatSurveyPane(props) {
121
179
  padding: 3px;
122
180
  padding-top: 7px;
123
181
  padding-bottom: 7px;
124
- box-sizing: border-box;
125
- }
126
- .ac-input.ac-multichoiceInput.ac-choiceSetInput-compact {
127
- height: auto;
128
- min-height: 31px;
129
- max-height: 45px;
130
- -webkit-appearance: none;
131
- appearance: none;
132
- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
133
- background-repeat: no-repeat;
134
- background-position: right 8px center;
135
- background-size: 16px;
136
- padding-right: 30px;
137
182
  }
138
183
  .ac-input.ac-toggleInput {
139
184
  align-items: ${((_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.customToggleInputStyleProps) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.alignItems) ?? ((_defaultPreChatSurvey9 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customToggleInputStyleProps) === null || _defaultPreChatSurvey9 === void 0 ? void 0 : _defaultPreChatSurvey9.alignItems)} !important;
@@ -164,6 +209,9 @@ function PreChatSurveyPane(props) {
164
209
  // Returns React element
165
210
  renderedCard && n && n.appendChild(renderedCard);
166
211
  n && n.childElementCount > 1 && n.lastChild && n.removeChild(n.lastChild); // Removes duplicates fix
212
+ if (isIOS && n) {
213
+ applyIOSPrechatFix(n);
214
+ }
167
215
  }
168
216
  }))));
169
217
  }
package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js CHANGED
@@ -8,9 +8,59 @@ import { defaultPreChatSurveyPaneACContainerStyles } from "./common/defaultProps
8
8
  import { defaultPreChatSurveyPaneControlProps } from "./common/defaultProps/defaultPreChatSurveyPaneControlProps";
9
9
  import { defaultPreChatSurveyPaneGeneralStyles } from "./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneGeneralStyles";
10
10
  import { defaultPreChatSurveyPaneStyles } from "./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles";
11
+
12
+ // Detect iOS (iPhone/iPad/iPod) including iPadOS 13+ which reports as Mac with touch support.
13
+ // Used to scope iOS-only Safari workarounds; must not match other platforms.
14
+ const isIOSDevice = () => {
15
+ if (typeof navigator === "undefined") {
16
+ return false;
17
+ }
18
+ const ua = navigator.userAgent || "";
19
+ if (/iPad|iPhone|iPod/.test(ua)) {
20
+ return true;
21
+ }
22
+ return ua.includes("Mac") && typeof document !== "undefined" && "ontouchend" in document;
23
+ };
24
+
25
+ // iOS-only: AdaptiveCards' ChoiceSetInput value getter treats `selectedIndex > 0` as "user selected"
26
+ // and returns undefined for index 0 (assuming it is always the injected placeholder).
27
+ // On iOS we remove the placeholder to avoid a blank picker row, which shifts the first real
28
+ // option to index 0 — so the original getter wrongly reports undefined and required-field
29
+ // validation fails. Patch the prototype once to accept index >= 0.
30
+ let iosChoiceSetValuePatched = false;
31
+ const patchIOSChoiceSetValueGetter = () => {
32
+ if (iosChoiceSetValuePatched) {
33
+ return;
34
+ }
35
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
36
+ const ChoiceSetInput = AdaptiveCards.ChoiceSetInput;
37
+ if (!ChoiceSetInput || !ChoiceSetInput.prototype) {
38
+ return;
39
+ }
40
+ const descriptor = Object.getOwnPropertyDescriptor(ChoiceSetInput.prototype, "value");
41
+ if (!descriptor || !descriptor.get) {
42
+ return;
43
+ }
44
+ Object.defineProperty(ChoiceSetInput.prototype, "value", {
45
+ configurable: true,
46
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
47
+ get: function () {
48
+ var _descriptor$get;
49
+ if (!this.isMultiSelect && this._selectElement) {
50
+ return this._selectElement.selectedIndex >= 0 ? this._selectElement.value : undefined;
51
+ }
52
+ return (_descriptor$get = descriptor.get) === null || _descriptor$get === void 0 ? void 0 : _descriptor$get.call(this);
53
+ }
54
+ });
55
+ iosChoiceSetValuePatched = true;
56
+ };
11
57
  function PreChatSurveyPane(props) {
12
58
  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _defaultPreChatSurvey, _props$styleProps0, _defaultPreChatSurvey2, _props$styleProps1, _defaultPreChatSurvey3, _props$styleProps10, _defaultPreChatSurvey4, _props$styleProps11, _defaultPreChatSurvey5, _props$styleProps12, _defaultPreChatSurvey6, _props$styleProps13, _defaultPreChatSurvey7, _props$styleProps14, _defaultPreChatSurvey8, _props$styleProps15, _defaultPreChatSurvey9, _props$styleProps16, _defaultPreChatSurvey0, _props$styleProps17, _defaultPreChatSurvey1, _props$styleProps18, _defaultPreChatSurvey10, _props$styleProps19, _defaultPreChatSurvey11, _props$styleProps20, _defaultPreChatSurvey12, _props$styleProps21, _defaultPreChatSurvey13, _props$controlProps6, _props$controlProps7, _props$controlProps8;
13
59
  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultPreChatSurveyPaneControlProps.id;
60
+ const isIOS = isIOSDevice();
61
+ if (isIOS) {
62
+ patchIOSChoiceSetValueGetter();
63
+ }
14
64
  let adpativeCardPayload;
15
65
  let adaptiveCardHostConfig;
16
66
  const containerStyles = {
@@ -65,21 +115,30 @@ function PreChatSurveyPane(props) {
65
115
  const renderedCard = adaptiveCard.render();
66
116
  addNoreferrerNoopenerTag(renderedCard);
67
117
 
68
- // Fix iOS Safari blank space in <select> dropdowns
69
- if (renderedCard) {
70
- const selectElements = renderedCard.querySelectorAll("select.ac-choiceSetInput-compact");
118
+ // Fix iOS Safari blank space in <select> dropdowns. iOS-only; other platforms render correctly.
119
+ // The placeholder option that AdaptiveCards injects renders as a blank row in the iOS
120
+ // native picker (CSS display/hidden are ignored on <option>). Removing it from the DOM
121
+ // is the only reliable workaround. After removal, we select the first remaining option
122
+ // and notify AdaptiveCards so required-field validation reads the visible value.
123
+ const applyIOSPrechatFix = container => {
124
+ const selectElements = container.querySelectorAll("select.ac-choiceSetInput-compact");
71
125
  selectElements.forEach(select => {
72
- // Remove hidden placeholder option that causes blank space on iOS
73
126
  const firstOption = select.options[0];
74
127
  if (firstOption && firstOption.disabled && firstOption.hidden && firstOption.value === "") {
75
- select.removeChild(firstOption);
128
+ firstOption.remove();
129
+ if (select.options.length > 0) {
130
+ select.selectedIndex = 0;
131
+ select.value = select.options[0].value;
132
+ select.dispatchEvent(new Event("input", {
133
+ bubbles: true
134
+ }));
135
+ select.dispatchEvent(new Event("change", {
136
+ bubbles: true
137
+ }));
138
+ }
76
139
  }
77
- // Override iOS native select rendering
78
- select.style.webkitAppearance = "none";
79
- select.style.height = "auto";
80
- select.style.minHeight = "31px";
81
140
  });
82
- }
141
+ };
83
142
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
84
143
  .ac-textBlock {
85
144
  font-size: ${(_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 || (_props$styleProps3 = _props$styleProps3.customTextStyleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.fontSize} !important;
@@ -114,19 +173,6 @@ function PreChatSurveyPane(props) {
114
173
  padding: 3px;
115
174
  padding-top: 7px;
116
175
  padding-bottom: 7px;
117
- box-sizing: border-box;
118
- }
119
- .ac-input.ac-multichoiceInput.ac-choiceSetInput-compact {
120
- height: auto;
121
- min-height: 31px;
122
- max-height: 45px;
123
- -webkit-appearance: none;
124
- appearance: none;
125
- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
126
- background-repeat: no-repeat;
127
- background-position: right 8px center;
128
- background-size: 16px;
129
- padding-right: 30px;
130
176
  }
131
177
  .ac-input.ac-toggleInput {
132
178
  align-items: ${((_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.customToggleInputStyleProps) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.alignItems) ?? ((_defaultPreChatSurvey9 = defaultPreChatSurveyPaneStyles.customToggleInputStyleProps) === null || _defaultPreChatSurvey9 === void 0 ? void 0 : _defaultPreChatSurvey9.alignItems)} !important;
@@ -157,6 +203,9 @@ function PreChatSurveyPane(props) {
157
203
  // Returns React element
158
204
  renderedCard && n && n.appendChild(renderedCard);
159
205
  n && n.childElementCount > 1 && n.lastChild && n.removeChild(n.lastChild); // Removes duplicates fix
206
+ if (isIOS && n) {
207
+ applyIOSPrechatFix(n);
208
+ }
160
209
  }
161
210
  }))));
162
211
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "1.1.17-main.f45c44b",
3
+ "version": "1.1.17-main.f8ae4f8",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",