@connectid-tools/idp-selector-react 6.10.0 → 6.11.0-alpha.2

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.
package/Popup.js CHANGED
@@ -1,30 +1,40 @@
1
1
  var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
2
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
3
  return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
4
+ function fulfilled(value) { try {
5
+ step(generator.next(value));
6
+ }
7
+ catch (e) {
8
+ reject(e);
9
+ } }
10
+ function rejected(value) { try {
11
+ step(generator["throw"](value));
12
+ }
13
+ catch (e) {
14
+ reject(e);
15
+ } }
6
16
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
17
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
18
  });
9
19
  };
10
20
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
- import { useEffect, useRef, useState } from 'react';
12
- import ReactDOM from 'react-dom';
13
- import { useMediaQuery } from 'react-responsive';
14
- import { filterAuthorisationServers, getManualAuthorisationServer } from './certification';
15
- import './global.css';
16
- import { InfoBox } from './InfoBox';
17
- import { getCurrentUrlOrigin } from './navigator';
18
- import { NoIdpError } from './NoIdpError';
19
- import { ParticipantsLoader } from './ParticipantsLoader';
20
- import './Popup.css';
21
- import { useOverrideShiftTab, useOverrideTab } from './TabHook';
22
- import detectIncognito from './incognito';
21
+ import { useEffect, useRef, useState } from "react";
22
+ import ReactDOM from "react-dom";
23
+ import { useMediaQuery } from "react-responsive";
24
+ import { filterAuthorisationServers, getManualAuthorisationServer } from "./certification.js";
25
+ import "./global.css";
26
+ import { InfoBox } from "./InfoBox.js";
27
+ import { getCurrentUrlOrigin } from "./navigator.js";
28
+ import { NoIdpError } from "./NoIdpError.js";
29
+ import { ParticipantsLoader } from "./ParticipantsLoader.js";
30
+ import "./Popup.css";
31
+ import { useOverrideShiftTab, useOverrideTab } from "./TabHook.js";
32
+ import detectIncognito from "detectincognitojs";
23
33
  export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, showAllParticipants, certificationStatus, popupTitle, rpDataSharingDescription, enableManualVerification, requiredCertifications, rpLogoUrl, participants, error, isLoading, }) => {
24
34
  const [isIncognito, setIsIncognito] = useState();
25
35
  const [showClaims, setShowClaims] = useState(false); // mobile only
26
36
  const popupRef = useRef(null);
27
- const isMobile = useMediaQuery({ query: '(max-width: 482px)' });
37
+ const isMobile = useMediaQuery({ query: "(max-width: 482px)" });
28
38
  const infoboxLinkRef = useRef(null);
29
39
  const closeButtonRef = useRef(null);
30
40
  useOverrideTab(infoboxLinkRef, closeButtonRef);
@@ -61,30 +71,30 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
61
71
  beneficiary_account_international: 16,
62
72
  };
63
73
  const claimsDescription = {
64
- address: 'Residential address',
65
- birthdate: 'Date of birth',
66
- email: 'Email address',
67
- family_name: 'Family name',
68
- given_name: 'Given name',
69
- middle_name: 'Middle name',
70
- phone_number: 'Phone number',
71
- over16: '16+ verification',
72
- over18: '18+ verification',
73
- over21: '21+ verification',
74
- over25: '25+ verification',
75
- over65: '65+ verification',
76
- beneficiary_account_au: 'Bank account details',
77
- beneficiary_account_au_payid: 'PayID',
78
- beneficiary_account_international: 'International account',
74
+ address: "Residential address",
75
+ birthdate: "Date of birth",
76
+ email: "Email address",
77
+ family_name: "Family name",
78
+ given_name: "Given name",
79
+ middle_name: "Middle name",
80
+ phone_number: "Phone number",
81
+ over16: "16+ verification",
82
+ over18: "18+ verification",
83
+ over21: "21+ verification",
84
+ over25: "25+ verification",
85
+ over65: "65+ verification",
86
+ beneficiary_account_au: "Bank account details",
87
+ beneficiary_account_au_payid: "PayID",
88
+ beneficiary_account_international: "International account",
79
89
  };
80
90
  const sortClaims = (claims) => {
81
91
  const sortedClaims = [...claims];
82
92
  return sortedClaims.sort((claim1, claim2) => claimsOrder[claim1] - claimsOrder[claim2]);
83
93
  };
84
94
  const handleEnterEsc = (event) => {
85
- if (event.key !== 'Enter' && event.key !== 'Escape')
95
+ if (event.key !== "Enter" && event.key !== "Escape")
86
96
  return;
87
- if (event.key === 'Escape') {
97
+ if (event.key === "Escape") {
88
98
  onCancel();
89
99
  return;
90
100
  }
@@ -93,26 +103,26 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
93
103
  return;
94
104
  // Handling 'Enter' key
95
105
  const classList = activeElement.classList;
96
- if (classList.contains('cid-idp-selector-popup-participant') ||
97
- classList.contains('cid-idp-selector-popup-manual-action')) {
106
+ if (classList.contains("cid-idp-selector-popup-participant") ||
107
+ classList.contains("cid-idp-selector-popup-manual-action")) {
98
108
  activeElement.click();
99
109
  }
100
110
  };
101
111
  const handleConnectIdLinkClicked = () => __awaiter(void 0, void 0, void 0, function* () {
102
- if (typeof analytics !== 'undefined') {
103
- analytics.track('Link to External Page Clicked', {
104
- source: 'what_is_connectid',
105
- link_url: 'https://www.connectid.com.au',
112
+ if (typeof analytics !== "undefined") {
113
+ analytics.track("Link to External Page Clicked", {
114
+ source: "what_is_connectid",
115
+ link_url: "https://www.connectid.com.au",
106
116
  rp_sub_brand: getCurrentUrlOrigin(),
107
117
  incognito: isIncognito,
108
118
  });
109
119
  }
110
120
  });
111
121
  const renderClaimList = () => {
112
- return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? 'cid-idp-selector-popup-claims--visible' : ''}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));
122
+ return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? "cid-idp-selector-popup-claims--visible" : ""}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));
113
123
  };
114
124
  const renderClaimsTitle = () => {
115
- return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Details requested" }), _jsx("svg", { className: `cid-idp-selector-popup-claims-toggle ${showClaims ? 'cid-idp-selector-popup-claims-toggle--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", children: _jsx("path", { d: "M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" }) })] }));
125
+ return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Details requested" }), _jsx("svg", { className: `cid-idp-selector-popup-claims-toggle ${showClaims ? "cid-idp-selector-popup-claims-toggle--open" : ""}`, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", children: _jsx("path", { d: "M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" }) })] }));
116
126
  };
117
127
  const renderClaims = () => {
118
128
  if (!claims)
@@ -128,7 +138,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
128
138
  }
129
139
  if (error) {
130
140
  if (onError) {
131
- onError('Unable to load participants');
141
+ onError("Unable to load participants");
132
142
  }
133
143
  return (_jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper-warn", children: _jsx(NoIdpError, { dataTestId: "participant-error", hasManualIdp: false }) }));
134
144
  }
@@ -141,11 +151,11 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
141
151
  const filteredAuthorisationServers = filterAuthorisationServers(authorisationServersWithoutManual, showAllParticipants, certificationStatus, filterByClaims, requiredCertifications);
142
152
  // Getting all auth servers that have certifications with profile type 'Redirect' and profile variant 'FAPI2 Adv. OP w/Private Key, PAR'
143
153
  const authorisationServerWithProfileRedirectFapi2 = authorisationServersWithoutManual.filter(({ AuthorisationServerCertifications }) => {
144
- return AuthorisationServerCertifications.find(({ ProfileType, ProfileVariant }) => ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR');
154
+ return AuthorisationServerCertifications.find(({ ProfileType, ProfileVariant }) => ProfileType === "Redirect" && ProfileVariant === "FAPI2 Adv. OP w/Private Key, PAR");
145
155
  });
146
156
  const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
147
157
  const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
148
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." })] }) }))] }));
149
159
  };
150
- 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'));
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"));
151
161
  };
package/Process.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useContext } from 'react';
3
- import './Process.css';
4
- import { ThemeContext } from './ThemeContext';
2
+ import { useContext } from "react";
3
+ import "./Process.css";
4
+ import { ThemeContext } from "./ThemeContext.js";
5
5
  export const Process = () => {
6
6
  const theme = useContext(ThemeContext);
7
- const dotClasses = `cid-idp-selector-process-dot ${theme === 'light' ? 'cid-idp-selector-process-dot--grey' : ''}`;
8
- const lineClasses = `cid-idp-selector-process-line ${theme === 'light' ? 'cid-idp-selector-process-line--grey' : ''}`;
9
- const lastLineClass = `cid-idp-selector-process-line-last ${theme === 'light' ? 'cid-idp-selector-process-line-last--grey' : ''}`;
10
- const stepClasses = `cid-idp-selector-process-step ${theme === 'light' ? 'cid-idp-selector-process-step--light' : ''}`;
7
+ const dotClasses = `cid-idp-selector-process-dot ${theme === "light" ? "cid-idp-selector-process-dot--grey" : ""}`;
8
+ const lineClasses = `cid-idp-selector-process-line ${theme === "light" ? "cid-idp-selector-process-line--grey" : ""}`;
9
+ const lastLineClass = `cid-idp-selector-process-line-last ${theme === "light" ? "cid-idp-selector-process-line-last--grey" : ""}`;
10
+ const stepClasses = `cid-idp-selector-process-step ${theme === "light" ? "cid-idp-selector-process-step--light" : ""}`;
11
11
  return (_jsxs("ol", { className: "cid-idp-selector-process", "data-testid": "process", children: [_jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: "cid-idp-selector-process-filler" }), _jsx("div", { className: dotClasses, "data-testid": "process-dot" }), _jsx("div", { className: lineClasses, "data-testid": "process-line" })] }), _jsx("div", { className: stepClasses, "data-testid": "process-step", children: "Select your bank" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lineClasses }), _jsx("div", { className: dotClasses }), _jsx("div", { className: lineClasses })] }), _jsx("div", { className: stepClasses, children: "Log in to your account" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lastLineClass }), _jsx("div", { className: dotClasses }), _jsx("div", { className: "cid-idp-selector-process-filler" })] }), _jsx("div", { className: stepClasses, children: "Review your details and provide consent" })] })] }));
12
12
  };
package/README.md CHANGED
@@ -259,6 +259,13 @@ The SVG image below the ConnectID button has either option dark or light mode. B
259
259
 
260
260
  ## 🚀 Release Notes
261
261
 
262
+
263
+ ### 6.11.0-alpha.2 (Jul 23, 2025)
264
+ - Use `detectincognitojs` npm package.
265
+
266
+ ### 6.11.0-alpha.1 (Jul 22, 2025)
267
+ - Add file extension to output js files.
268
+
262
269
  ### 6.10.0 (Jul 22, 2025)
263
270
  - Remove `Available on` from IDP logo list image.
264
271
  - Add `role="img"` to participant list item.
package/ThemeContext.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { CidButtonTheme } from './types';
1
+ import { CidButtonTheme } from "./types.js";
2
2
  export declare const ThemeContext: import("react").Context<CidButtonTheme>;
package/analytics.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { Analytics } from "./types";
1
+ import { Analytics } from "./types.js";
2
2
  export declare const initialiseAnalytics: (onLoad: (analytics: Analytics) => void) => void;
@@ -1,4 +1,4 @@
1
- import { AuthorisationServer, AuthorisationServerCertification, CertificationProfileType, CertificationProfileVariant, CertificationStatus, Claim, Device, RequiredCertification } from './types';
1
+ import { AuthorisationServer, AuthorisationServerCertification, CertificationProfileType, CertificationProfileVariant, CertificationStatus, Claim, Device, RequiredCertification } from "./types.js";
2
2
  export declare const filterAuthorisationServers: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean, certificationStatus: CertificationStatus, claims: Claim[], requiredCertifications?: RequiredCertification[]) => AuthorisationServer[];
3
3
  export declare const getManualAuthorisationServer: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean) => AuthorisationServer | undefined;
4
4
  export declare const removeExpiredOrNotStartedCertifications: (authorisationServers: AuthorisationServer[]) => AuthorisationServer[];
package/certification.js CHANGED
@@ -1,7 +1,7 @@
1
- import { getDeviceType } from './userAgent';
1
+ import { getDeviceType } from "./userAgent.js";
2
2
  const requiredCertificationsMap = {
3
- 'TDIF.IDP': { type: 'TDIF Accreditation', variant: 'Identity Provider' },
4
- 'Redirect.FAPI2': { type: 'Redirect', variant: 'FAPI2 Adv. OP w/Private Key, PAR' },
3
+ "TDIF.IDP": { type: "TDIF Accreditation", variant: "Identity Provider" },
4
+ "Redirect.FAPI2": { type: "Redirect", variant: "FAPI2 Adv. OP w/Private Key, PAR" },
5
5
  };
6
6
  export const filterAuthorisationServers = (authorisationServers, showAllParticipants, certificationStatus, claims, requiredCertifications) => {
7
7
  if (showAllParticipants)
@@ -17,26 +17,26 @@ export const getManualAuthorisationServer = (authorisationServers, showAllPartic
17
17
  const filtered = showAllParticipants
18
18
  ? authorisationServers
19
19
  : removeExpiredOrNotStartedCertifications(authorisationServers);
20
- return filtered.find(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications === null || AuthorisationServerCertifications === void 0 ? void 0 : AuthorisationServerCertifications.find(({ ProfileVariant }) => ProfileVariant === 'Fallback Identity Service Provider'));
20
+ return filtered.find(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications === null || AuthorisationServerCertifications === void 0 ? void 0 : AuthorisationServerCertifications.find(({ ProfileVariant }) => ProfileVariant === "Fallback Identity Service Provider"));
21
21
  };
22
22
  export const removeExpiredOrNotStartedCertifications = (authorisationServers) => {
23
23
  const certifiedAuthorisationServers = [...authorisationServers];
24
24
  certifiedAuthorisationServers.forEach((authorisationServer) => {
25
25
  authorisationServer.AuthorisationServerCertifications =
26
- authorisationServer.AuthorisationServerCertifications.filter(({ Status, CertificationStartDate, CertificationExpirationDate }) => Status === 'Certified' && !isExpired(CertificationExpirationDate) && hasStarted(CertificationStartDate));
26
+ authorisationServer.AuthorisationServerCertifications.filter(({ Status, CertificationStartDate, CertificationExpirationDate }) => Status === "Certified" && !isExpired(CertificationExpirationDate) && hasStarted(CertificationStartDate));
27
27
  });
28
28
  return certifiedAuthorisationServers;
29
29
  };
30
30
  export const filterAuthorisationServerByClaims = (authorisationServers, claims) => {
31
- const nameClaims = ['given_name', 'middle_name', 'family_name'];
31
+ const nameClaims = ["given_name", "middle_name", "family_name"];
32
32
  const hasNameClaims = claims.find((claim) => nameClaims.includes(claim));
33
33
  // All name claims (given_name, middle_name, family_name) are mapped to `name` in the authorisation server
34
34
  // So if an authorisation server has any name claim, remove all name claims and leave only `name`
35
35
  const profileVariants = hasNameClaims
36
- ? ['name', ...claims.filter((claim) => !nameClaims.includes(claim))]
36
+ ? ["name", ...claims.filter((claim) => !nameClaims.includes(claim))]
37
37
  : claims;
38
38
  return authorisationServers.filter((authorisationServer) => {
39
- const authorisationServerProfileVariants = authorisationServer.AuthorisationServerCertifications.filter(({ ProfileType }) => ProfileType === 'ConnectID Claims').map((cert) => cert.ProfileVariant);
39
+ const authorisationServerProfileVariants = authorisationServer.AuthorisationServerCertifications.filter(({ ProfileType }) => ProfileType === "ConnectID Claims").map((cert) => cert.ProfileVariant);
40
40
  return profileVariants.every((profileVariant) => authorisationServerProfileVariants.includes(profileVariant));
41
41
  });
42
42
  };
@@ -46,10 +46,10 @@ export const filterAuthorisationServerByCertification = (authorisationServers, s
46
46
  return filteredByStatusAndRequiredCertifications;
47
47
  };
48
48
  const filterByStatus = (authorisationServers, status) => {
49
- if (status === 'All')
49
+ if (status === "All")
50
50
  return authorisationServers;
51
- if (status === 'Active') {
52
- return authorisationServers.filter(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications.find(({ ProfileVariant, ProfileType }) => ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR'));
51
+ if (status === "Active") {
52
+ return authorisationServers.filter(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications.find(({ ProfileVariant, ProfileType }) => ProfileType === "Redirect" && ProfileVariant === "FAPI2 Adv. OP w/Private Key, PAR"));
53
53
  }
54
54
  throw Error(`Status ${status} not supported`);
55
55
  };
@@ -73,11 +73,11 @@ const filterByRequiredCertifications = (authorisationServers, requiredCertificat
73
73
  // mobile return all authorisation servers
74
74
  // tablet and desktop return all authorisation servers but those ones with only one certification and that certification is app
75
75
  export const filterAuthorisationServerByDevice = (authorisationServers, deviceType) => {
76
- if (deviceType === 'mobile')
76
+ if (deviceType === "mobile")
77
77
  return authorisationServers;
78
78
  const onlyAppAuthorisationServers = authorisationServers.filter((authorisationServer) => {
79
- const channelCertifications = authorisationServer.AuthorisationServerCertifications.filter((cert) => cert.ProfileType === 'Channel');
80
- return channelCertifications.length === 1 && channelCertifications[0].ProfileVariant === 'app';
79
+ const channelCertifications = authorisationServer.AuthorisationServerCertifications.filter((cert) => cert.ProfileType === "Channel");
80
+ return channelCertifications.length === 1 && channelCertifications[0].ProfileVariant === "app";
81
81
  });
82
82
  const onlyAppAuthorisationServersIds = onlyAppAuthorisationServers.map((authorisationServer) => authorisationServer.AuthorisationServerId);
83
83
  return authorisationServers.filter((authorisationServer) => !onlyAppAuthorisationServersIds.includes(authorisationServer.AuthorisationServerId));
@@ -102,6 +102,6 @@ export const hasStarted = (startDateStr) => {
102
102
  return startDate.getTime() <= today.getTime();
103
103
  };
104
104
  const parseCertificationDate = (dateStr) => {
105
- const dateArr = dateStr.split('/');
105
+ const dateArr = dateStr.split("/");
106
106
  return new Date(`${dateArr[2]}-${dateArr[1]}-${dateArr[0]}`);
107
107
  };