@connectid-tools/idp-selector-react 6.11.0-alpha.1 → 6.11.0-alpha.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 (7) hide show
  1. package/CidButton.js +1 -1
  2. package/Popup.js +2 -2
  3. package/README.md +6 -0
  4. package/TabHook.js +1 -1
  5. package/package.json +3 -2
  6. package/incognito.d.ts +0 -41
  7. package/incognito.js +0 -239
package/CidButton.js CHANGED
@@ -36,10 +36,10 @@ import { initialiseAnalytics } from "./analytics.js";
36
36
  import "./global.css";
37
37
  import { getCurrentUrlOrigin } from "./navigator.js";
38
38
  import { isIntroTextTypeValid, isRequiredClaimsValid } from "./validator.js";
39
- import detectIncognito from "./incognito.js";
40
39
  import { getBrowserName, getDeviceType, isAndroid, isIos } from "./userAgent.js";
41
40
  import { hasCertification } from "./certification.js";
42
41
  import { getCompatibility } from "./compatibility.js";
42
+ import detectIncognito from "detectincognitojs";
43
43
  export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = "Verify", size = "regular", type, introTextType, fullProcessCollapsible = false, participantsUri = "https://data.directory.connectid.com.au/participants", certificationStatus = "Active", rpDataSharingDescription = "Your details will be shared with the current website.", enableManualVerification = false, showAllParticipants = false, theme = "dark", logoLockupStyle = "light", showInfoContent = false, onError = () => { }, showCompatibilityWarnings = false, supportIncognito = false, disableAnalytics = false, forceMobile = false, // only for testing purposes
44
44
  forceIos = false, // only for testing purposes
45
45
  forceAndroid = false, // only for testing purposes
package/Popup.js CHANGED
@@ -29,7 +29,7 @@ import { NoIdpError } from "./NoIdpError.js";
29
29
  import { ParticipantsLoader } from "./ParticipantsLoader.js";
30
30
  import "./Popup.css";
31
31
  import { useOverrideShiftTab, useOverrideTab } from "./TabHook.js";
32
- import detectIncognito from "./incognito.js";
32
+ import detectIncognito from "detectincognitojs";
33
33
  export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, showAllParticipants, certificationStatus, popupTitle, rpDataSharingDescription, enableManualVerification, requiredCertifications, rpLogoUrl, participants, error, isLoading, }) => {
34
34
  const [isIncognito, setIsIncognito] = useState();
35
35
  const [showClaims, setShowClaims] = useState(false); // mobile only
@@ -155,7 +155,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
155
155
  });
156
156
  const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
157
157
  const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
158
- return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications, }) => (_jsxs("li", { role: "img", "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("h4", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
158
+ return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications, }) => (_jsxs("li", { role: "button", "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("h4", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
159
159
  };
160
160
  return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h2", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", " ", _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), " ", "to find out more."] })] }) })] }), document.querySelector("body"));
161
161
  };
package/README.md CHANGED
@@ -259,6 +259,12 @@ The SVG image below the ConnectID button has either option dark or light mode. B
259
259
 
260
260
  ## 🚀 Release Notes
261
261
 
262
+ ### 6.11.0-alpha.3 (Jul 29, 2025)
263
+ - Replace participant `role="img"` with `role="button"`.
264
+ - Fix popup tabbing.
265
+
266
+ ### 6.11.0-alpha.2 (Jul 23, 2025)
267
+ - Use `detectincognitojs` npm package.
262
268
 
263
269
  ### 6.11.0-alpha.1 (Jul 22, 2025)
264
270
  - Add file extension to output js files.
package/TabHook.js CHANGED
@@ -4,7 +4,7 @@ export function useOverrideTab(element, nextElement) {
4
4
  if (!(element === null || element === void 0 ? void 0 : element.current) || !(nextElement === null || nextElement === void 0 ? void 0 : nextElement.current))
5
5
  return;
6
6
  const handleKeyDown = (event) => {
7
- if (event.code === 'Tab' && element.current === document.activeElement) {
7
+ if (!event.shiftKey && event.code === 'Tab' && element.current === document.activeElement) {
8
8
  nextElement.current.focus();
9
9
  event.preventDefault();
10
10
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@connectid-tools/idp-selector-react",
3
- "version": "6.11.0-alpha.1",
3
+ "version": "6.11.0-alpha.3",
4
4
  "description": "React component for IDP Selector.",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -29,7 +29,7 @@
29
29
  "@types/node": "^22.16.5",
30
30
  "@types/react": "^18.3.23",
31
31
  "@types/react-dom": "^18.3.7",
32
- "cypress": "^14.5.2",
32
+ "cypress": "^14.5.3",
33
33
  "jest-environment-jsdom": "^29.7.0",
34
34
  "prettier": "^3.6.2",
35
35
  "react": "^18.3.1",
@@ -40,6 +40,7 @@
40
40
  "typescript": "^5.8.3"
41
41
  },
42
42
  "dependencies": {
43
+ "detectincognitojs": "^1.6.0",
43
44
  "react-responsive": "^10.0.1",
44
45
  "swr": "^2.3.4",
45
46
  "vite": "^6.3.5"
package/incognito.d.ts DELETED
@@ -1,41 +0,0 @@
1
- /*!
2
- *
3
- * detectIncognito v1.4.1
4
- *
5
- * https://github.com/Joe12387/detectIncognito
6
- *
7
- * MIT License
8
- *
9
- * Copyright (c) 2021 - 2024 Joe Rutkowski <Joe@dreggle.com>
10
- *
11
- * Permission is hereby granted, free of charge, to any person obtaining a copy
12
- * of this software and associated documentation files (the "Software"), to deal
13
- * in the Software without restriction, including without limitation the rights
14
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
- * copies of the Software, and to permit persons to whom the Software is
16
- * furnished to do so, subject to the following conditions:
17
- *
18
- * The above copyright notice and this permission notice shall be included in all
19
- * copies or substantial portions of the Software.
20
- *
21
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
- * SOFTWARE.
28
- *
29
- * Please keep this comment intact in order to properly abide by the MIT License.
30
- *
31
- **/
32
- declare global {
33
- interface Window {
34
- detectIncognito: typeof detectIncognito;
35
- }
36
- }
37
- export declare function detectIncognito(): Promise<{
38
- isPrivate: boolean;
39
- browserName: string;
40
- }>;
41
- export default detectIncognito;
package/incognito.js DELETED
@@ -1,239 +0,0 @@
1
- /* eslint-disable */
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- export function detectIncognito() {
12
- return __awaiter(this, void 0, void 0, function* () {
13
- return yield new Promise(function (resolve, reject) {
14
- let browserName = 'Unknown';
15
- function __callback(isPrivate) {
16
- resolve({
17
- isPrivate,
18
- browserName
19
- });
20
- }
21
- function identifyChromium() {
22
- const ua = navigator.userAgent;
23
- if (ua.match(/Chrome/)) {
24
- if (navigator.brave !== undefined) {
25
- return 'Brave';
26
- }
27
- else if (ua.match(/Edg/)) {
28
- return 'Edge';
29
- }
30
- else if (ua.match(/OPR/)) {
31
- return 'Opera';
32
- }
33
- return 'Chrome';
34
- }
35
- else {
36
- return 'Chromium';
37
- }
38
- }
39
- function assertEvalToString(value) {
40
- return value === eval.toString().length;
41
- }
42
- function feid() {
43
- let toFixedEngineID = 0;
44
- let neg = parseInt("-1");
45
- try {
46
- neg.toFixed(neg);
47
- }
48
- catch (e) {
49
- toFixedEngineID = e.message.length;
50
- }
51
- return toFixedEngineID;
52
- }
53
- function isSafari() {
54
- return feid() === 44;
55
- }
56
- function isChrome() {
57
- return feid() === 51;
58
- }
59
- function isFirefox() {
60
- return feid() === 25;
61
- }
62
- function isMSIE() {
63
- return (navigator.msSaveBlob !== undefined && assertEvalToString(39));
64
- }
65
- /**
66
- * Safari (Safari for iOS & macOS)
67
- **/
68
- function newSafariTestByStorageFallback() {
69
- var _a;
70
- if (!((_a = navigator.storage) === null || _a === void 0 ? void 0 : _a.estimate)) {
71
- __callback(false);
72
- return;
73
- }
74
- navigator.storage
75
- .estimate()
76
- .then(({ usage, quota }) => {
77
- // iOS 18.x/macOS Safari 18.x (normal): ~41GB
78
- // iOS 18.x/macOS Safari 18.x (private): ~1GB
79
- // If reported quota < 2 GB => likely private
80
- if (quota && quota < 2000000000) {
81
- __callback(true);
82
- }
83
- else {
84
- __callback(false);
85
- }
86
- })
87
- .catch(() => {
88
- __callback(false);
89
- });
90
- }
91
- function newSafariTest() {
92
- const tmp_name = String(Math.random());
93
- try {
94
- const db = window.indexedDB.open(tmp_name, 1);
95
- db.onupgradeneeded = function (i) {
96
- var _a, _b;
97
- const res = (_a = i.target) === null || _a === void 0 ? void 0 : _a.result;
98
- try {
99
- res.createObjectStore('test', {
100
- autoIncrement: true
101
- }).put(new Blob());
102
- }
103
- catch (e) {
104
- let message = e;
105
- if (e instanceof Error) {
106
- message = (_b = e.message) !== null && _b !== void 0 ? _b : e;
107
- }
108
- if (typeof message !== 'string') {
109
- __callback(false);
110
- return;
111
- }
112
- const matchesExpectedError = message.includes('BlobURLs are not yet supported');
113
- if (matchesExpectedError) {
114
- __callback(true);
115
- }
116
- }
117
- finally {
118
- res.close();
119
- window.indexedDB.deleteDatabase(tmp_name);
120
- // indexdb works on newer versions of safari so we need to check via storage fallback
121
- newSafariTestByStorageFallback();
122
- }
123
- };
124
- }
125
- catch (e) {
126
- __callback(false);
127
- }
128
- }
129
- function oldSafariTest() {
130
- const openDB = window.openDatabase;
131
- const storage = window.localStorage;
132
- try {
133
- openDB(null, null, null, null);
134
- }
135
- catch (e) {
136
- __callback(true);
137
- return;
138
- }
139
- try {
140
- storage.setItem('test', '1');
141
- storage.removeItem('test');
142
- }
143
- catch (e) {
144
- __callback(true);
145
- return;
146
- }
147
- __callback(false);
148
- }
149
- function safariPrivateTest() {
150
- if (navigator.maxTouchPoints !== undefined) {
151
- newSafariTest();
152
- }
153
- else {
154
- oldSafariTest();
155
- }
156
- }
157
- /**
158
- * Chrome
159
- **/
160
- function getQuotaLimit() {
161
- const w = window;
162
- if (w.performance !== undefined &&
163
- w.performance.memory !== undefined &&
164
- w.performance.memory.jsHeapSizeLimit !== undefined) {
165
- return performance.memory.jsHeapSizeLimit;
166
- }
167
- return 1073741824;
168
- }
169
- // >= 76
170
- function storageQuotaChromePrivateTest() {
171
- navigator.webkitTemporaryStorage.queryUsageAndQuota(function (_, quota) {
172
- const quotaInMib = Math.round(quota / (1024 * 1024));
173
- const quotaLimitInMib = Math.round(getQuotaLimit() / (1024 * 1024)) * 2;
174
- __callback(quotaInMib < quotaLimitInMib);
175
- }, function (e) {
176
- reject(new Error('detectIncognito somehow failed to query storage quota: ' +
177
- e.message));
178
- });
179
- }
180
- // 50 to 75
181
- function oldChromePrivateTest() {
182
- const fs = window.webkitRequestFileSystem;
183
- const success = function () {
184
- __callback(false);
185
- };
186
- const error = function () {
187
- __callback(true);
188
- };
189
- fs(0, 1, success, error);
190
- }
191
- function chromePrivateTest() {
192
- if (self.Promise !== undefined && self.Promise.allSettled !== undefined) {
193
- storageQuotaChromePrivateTest();
194
- }
195
- else {
196
- oldChromePrivateTest();
197
- }
198
- }
199
- /**
200
- * Firefox
201
- **/
202
- function firefoxPrivateTest() {
203
- __callback(navigator.serviceWorker === undefined);
204
- }
205
- /**
206
- * MSIE
207
- **/
208
- function msiePrivateTest() {
209
- __callback(window.indexedDB === undefined);
210
- }
211
- function main() {
212
- if (isSafari()) {
213
- browserName = 'Safari';
214
- safariPrivateTest();
215
- }
216
- else if (isChrome()) {
217
- browserName = identifyChromium();
218
- chromePrivateTest();
219
- }
220
- else if (isFirefox()) {
221
- browserName = 'Firefox';
222
- firefoxPrivateTest();
223
- }
224
- else if (isMSIE()) {
225
- browserName = 'Internet Explorer';
226
- msiePrivateTest();
227
- }
228
- else {
229
- reject(new Error('detectIncognito cannot determine the browser'));
230
- }
231
- }
232
- main();
233
- });
234
- });
235
- }
236
- if (typeof window !== 'undefined') {
237
- window.detectIncognito = detectIncognito;
238
- }
239
- export default detectIncognito;