@connectid-tools/idp-selector-react 6.10.0-alpha.0 → 6.10.0-alpha.1

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 (9) hide show
  1. package/CidButton.d.ts +2 -2
  2. package/CidButton.js +3 -3
  3. package/README.md +7 -4
  4. package/compability.test.js +5 -5
  5. package/compatibility.d.ts +3 -0
  6. package/{compability.js → compatibility.js} +1 -1
  7. package/package.json +1 -1
  8. package/types.d.ts +2 -2
  9. package/compability.d.ts +0 -3
package/CidButton.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import './CidButton.css';
2
2
  import './global.css';
3
- import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompabilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
3
+ import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
4
4
  type CidButtonProps = {
5
- onProceed: (authorisationServerId: string, compabilityWarnings: CompabilityWarnings) => void;
5
+ onProceed: (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => void;
6
6
  claims: Claim[];
7
7
  requiredClaims?: Claim[];
8
8
  rpLogoUrl?: string;
package/CidButton.js CHANGED
@@ -29,7 +29,7 @@ import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
29
29
  import detectIncognito from './incognito';
30
30
  import { getDeviceType, isAndroid, isChromeBrowser, isIos, isSamsungBrowser } from './userAgent';
31
31
  import { hasCertification } from './certification';
32
- import { getCompability } from './compability';
32
+ import { getCompatibility } from './compatibility';
33
33
  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 = () => { }, forceMobile = false, // only for testing purposes
34
34
  forceIos = false, // only for testing purposes
35
35
  forceAndroid = false, // only for testing purposes
@@ -124,7 +124,7 @@ forceIncognito = false, // only for testing purposes
124
124
  setShowPopup(false);
125
125
  const isMobile = forceMobile || getDeviceType() === 'mobile';
126
126
  const idpHasAppCertification = hasCertification(authorisationServerCertifications, 'Channel', 'app');
127
- const compability = getCompability({
127
+ const compatibility = getCompatibility({
128
128
  idpHasAppCertification,
129
129
  isMobile,
130
130
  isIncognito: forceIncognito || !!isIncognito,
@@ -133,7 +133,7 @@ forceIncognito = false, // only for testing purposes
133
133
  isSamsungBrowser: isSamsungBrowser(),
134
134
  isChromeBrowser: isChromeBrowser(),
135
135
  });
136
- onProceed(authorisationServerId, compability);
136
+ onProceed(authorisationServerId, compatibility);
137
137
  };
138
138
  const handleButtonClick = () => {
139
139
  setShowPopup(true);
package/README.md CHANGED
@@ -14,7 +14,7 @@ Place the `<CidButton>` component where you want to render the ConnectID button
14
14
  import { CidButton } from '@connectid-tools/idp-selector-react'
15
15
 
16
16
  <CidButton
17
- onProceed={(authorisationServerClicked: string, compabilityWarnings: CompabilityWarnings) => {
17
+ onProceed={(authorisationServerClicked: string, compatibilityWarnings: CompatibilityWarnings) => {
18
18
  /* do something here */
19
19
  }}
20
20
  claims={['email']}
@@ -31,7 +31,7 @@ Your page should render a widget similar to this 👇 And when the button is cli
31
31
 
32
32
  | key | description | type | required | default |
33
33
  | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
34
- | onProceed | Callback to be called when IDP Selector `Proceed` button is clicked | (authorisationServerId: string, compabilityWarnings: CompabilityWarnings) => void | yes | - |
34
+ | onProceed | Callback to be called when IDP Selector `Proceed` button is clicked | (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => void | yes | - |
35
35
  | claims | List of claims to be displayed to the user and will be requested from IDP to be shared. If `requiredClaims` not supplied then only IDPs that support all listed `claims` will be displayed to the user. | Claim[] | yes | - |
36
36
  | requiredClaims | List of claims to be supported by IDPs. Must be a subset of `claims`. Where an RP can successfully complete their use case without all claims specified in `claims`, they can specify `requiredClaims` with the minimum list of claims needed, which will then be used for filtering and may result in additional IDP options being displayed to the customer. | Claim[] | no (`claims` will be used if no `requiredClaims`) | - |
37
37
  | label | The button label. Do not use 'Sign Up'. It is deprecated. | 'Verify' \| 'Login' \| 'Sign Up' \| 'Age check' \| 'Sign up' \| 'Authenticate' \| 'Checkout' | no | 'Verify' |
@@ -51,10 +51,10 @@ Your page should render a widget similar to this 👇 And when the button is cli
51
51
  | showInfoContent | The text that goes below the ConnectID button [More details here](#infoContent) | boolean | false | false |
52
52
  | onError | Callback to be called when there is an error fetching participants or invalid options. | () => void | no | () => {} // do nothing |
53
53
 
54
- #### CompabilityWarnings type
54
+ #### CompatibilityWarnings type
55
55
 
56
56
  ```typescript
57
- export type CompabilityWarnings = {
57
+ export type CompatibilityWarnings = {
58
58
  mightFail: boolean
59
59
  isMobile: boolean
60
60
  isIncognito: boolean
@@ -241,6 +241,9 @@ The SVG image below the ConnectID button has either option dark or light mode. B
241
241
 
242
242
  ## 🚀 Release Notes
243
243
 
244
+ ### 6.10.0-alpha.1 (Jun 12, 2025)
245
+ - Rename `compabilityWarnings` to `compatibilityWarnings`.
246
+
244
247
  ### 6.10.0-alpha.0 (Jun 10, 2025)
245
248
  - Add `compabilityWarnings` to `onProceed` callback.
246
249
 
package/compability.test.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { describe, it } from 'node:test';
2
2
  import assert from 'node:assert';
3
- import { getCompability, getMightFail } from './compability';
4
- describe('getCompability', () => {
5
- it('should return compability warnings', () => {
6
- const compability = getCompability({
3
+ import { getCompatibility, getMightFail } from './compatibility';
4
+ describe('getCompatibility', () => {
5
+ it('should return compatibility warnings', () => {
6
+ const compatibility = getCompatibility({
7
7
  idpHasAppCertification: true,
8
8
  isMobile: true,
9
9
  isIncognito: false,
@@ -12,7 +12,7 @@ describe('getCompability', () => {
12
12
  isSamsungBrowser: false,
13
13
  isChromeBrowser: false,
14
14
  });
15
- assert.deepStrictEqual(compability, {
15
+ assert.deepStrictEqual(compatibility, {
16
16
  isMobile: true,
17
17
  isIncognito: false,
18
18
  mobileOs: 'other',
package/compatibility.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { CompatibilityEnvironment, CompatibilityWarnings } from './types';
2
+ export declare const getCompatibility: (env: CompatibilityEnvironment) => CompatibilityWarnings;
3
+ export declare const getMightFail: (env: Pick<CompatibilityEnvironment, "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "isSamsungBrowser" | "isChromeBrowser">) => boolean;
package/{compability.js → compatibility.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { getBrowserName } from './userAgent';
2
- export const getCompability = (env) => {
2
+ export const getCompatibility = (env) => {
3
3
  const { idpHasAppCertification, isAndroid, isChromeBrowser, isIncognito, isMobile, isSamsungBrowser, isIos } = env;
4
4
  const mightFail = getMightFail({
5
5
  idpHasAppCertification,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@connectid-tools/idp-selector-react",
3
- "version": "6.10.0-alpha.0",
3
+ "version": "6.10.0-alpha.1",
4
4
  "description": "React component for IDP Selector.",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/types.d.ts CHANGED
@@ -38,7 +38,7 @@ export type CidButtonTypeConfig = {
38
38
  hasHowItWorks: boolean;
39
39
  hasLearnMore: boolean;
40
40
  };
41
- export type CompabilityEnvironment = {
41
+ export type CompatibilityEnvironment = {
42
42
  isMobile: boolean;
43
43
  isIncognito: boolean;
44
44
  idpHasAppCertification: boolean;
@@ -47,7 +47,7 @@ export type CompabilityEnvironment = {
47
47
  isSamsungBrowser: boolean;
48
48
  isChromeBrowser: boolean;
49
49
  };
50
- export type CompabilityWarnings = {
50
+ export type CompatibilityWarnings = {
51
51
  mightFail: boolean;
52
52
  isMobile: boolean;
53
53
  isIncognito: boolean;
package/compability.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { CompabilityEnvironment, CompabilityWarnings } from './types';
2
- export declare const getCompability: (env: CompabilityEnvironment) => CompabilityWarnings;
3
- export declare const getMightFail: (env: Pick<CompabilityEnvironment, "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "isSamsungBrowser" | "isChromeBrowser">) => boolean;