@getyoti/react-face-capture 2.8.1 → 2.9.1

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # CHANGELOG
 
+## v2.9.1
+
+### New features
+
+- Implemented theming capabilities for customizing the border radius of different elements.
+
+  - Buttons
+    - `--fcm-button-border-radius-bottom-left`
+    - `--fcm-button-border-radius-bottom-right`
+    - `--fcm-button-border-radius-top-right`
+    - `--fcm-button-border-radius-top-left`
+  - Help dialogue
+    - `--fcm-help-panel-border-radius-bottom-left`
+    - `--fcm-help-panel-border-radius-bottom-right`
+    - `--fcm-help-panel-border-radius-top-right`
+    - `--fcm-help-panel-border-radius-top-left`
+  - User feedback
+    - `--fcm-feedback-border-radius-bottom-left`
+    - `--fcm-feedback-border-radius-bottom-right`
+    - `--fcm-feedback-border-radius-top-right`
+    - `--fcm-feedback-border-radius-top-left`
+
+- Add new localisation:
+  - `az-AZ`: Azerbaijani (Azerbaijan)
+  - `zh-TW`: Traditional Chinese (Taiwan)
+
+- Added a new theming capability to control the vertical offset of the user feedback (prompt) from the top edge on portrait devices (default: 0; percentage recommended):
+  - `--fcm-prompt-portrait-top`
+
+## v2.9.0
+
+### New features
+
+- Improved and updated security features.
+
+- Enhanced UI.
+
+- Added automatic state reports to improve debugging.
+
+  - The FCM will periodically call the `/state` endpoint, sending performance metrics and the state.
+
+### Fixes
+
+- Corrected a layout issue on the loading and error screens in Safari.
+
+- Fixed a minor misalignment of the loading page layout in Safari under specific circumstances.
+
+- Improved CSS isolation of text in the FCM. Text will no longer inherit the text-align property.
+
+- Improved accessibility
+
+  - Removed unnecessary element announced as “group” in some screen readers.
+
+- Fixed a runtime console warning.
+
+- Localisation has been revised. The following languages have been updated:
+  - `cs-CZ`
+  - `es-ES`
+  - `fr-FR`
+  - `hu-HU`
+  - `ms-MY` which is now alias of `ms-SG`
+  - `ms-SG`
+  - `sk-SK`
+  - `ta-TG`
+
+#### Peer dependencies updates
+
+- Updated `react` dependency version to be at least `16.14.0` and a maximum of `18.3.1`.
+
+- Updated `react-dom` dependency version to be at least `16.14.0` and a maximum of `18.3.1`.
+
 ## v2.8.1
 
 ### New features
@@ -12,10 +83,11 @@
 - Update UI component library to enhance theming stability.
 - Improve usability for keyboard only users.
 - Improve screen readers compatibility.
+- Fixed LICENCE.md text formatting
 
 ### Fixes
 
-- Fix visual bug when taking a picture in manual mode. The feedback prompt is now highlighted correctly.
+- Fix visual bug when taking a picture in manual mode. The user feedback prompt is now highlighted correctly.
 
 ## v2.8.0
 
@@ -58,12 +130,12 @@ Multiframe is a new layer of protection added on top of the curren security feat
 
 - Adds a new prop `sessionDuration` which specifies the maximum duration of the session before it times out, regardless of number of retry attempts.
   - The value must be within 30s and 5m (in milliseconds), and invalid values will trigger an exception.
-- The icon for the multiple faces feedback was changed.
+- The icon for the multiple faces user feedback was changed.
 - `a11yLiveRegionMode` is now deprecated and will be removed in the next major release. Accessibility features like `aria-live` are now handled internally.
 
 ### Fixes
 
-- The feedback message is centred so the possibility of overlap with the face layout has been reduced.
+- The user feedback message is centred so the possibility of overlap with the face layout has been reduced.
 - Localisation has been revised. The following languages have been updated:
   - `bs-BA`: Bosnian
   - `sr-RS`: Serbian (Latin script)
@@ -294,7 +366,7 @@ Fixed an issue introduced in v2.3.0 causing the `numStableFrames` property to be
 
 - Improve security checks.
 - UI improvements on help dialogue.
-- Change feedback message for `OVERCONSTRAINED` and `NO_CAMERA` errors from
+- Change user feedback message for `OVERCONSTRAINED` and `NO_CAMERA` errors from
   `Please try again` to `Please try using a different device`.
 
 ### Fixes
@@ -322,7 +394,7 @@ See section [v2.0.0-beta.1](#v200-beta1) with previous changes for version
 
   - Improved the help dialogue UI.
 
-- Updated Tagalog localisation message for "Only one face allowed" feedback.
+- Updated Tagalog localisation message for "Only one face allowed" user feedback.
 
 ### Fixes
 
@@ -487,7 +559,7 @@ See section [v2.0.0-beta.1](#v200-beta1) with previous changes for version
 
 ### Fixes
 
-- Fix Greek localisation for "Place your face in the frame" feedback.
+- Fix Greek localisation for "Place your face in the frame" user feedback.
 
 ## v1.3.0
 
@@ -511,7 +583,7 @@ See section [v2.0.0-beta.1](#v200-beta1) with previous changes for version
 
 - Secure session initialisation request is no longer cached.
 - Added missing fields in the typing file.
-- Camera feedback messages are shown only after the camera permissions were
+- Camera user feedback messages are shown only after the camera permissions were
   giving not before.
 
 ## v1.2.0
@@ -531,7 +603,7 @@ See section [v2.0.0-beta.1](#v200-beta1) with previous changes for version
 
 - Fix the error when the FCM component is unmounted if it uses the secure mode.
 
-- Use the new Yoti colors for the button and overlay feedback.
+- Use the new Yoti colors for the button and overlay user feedback.
 
 ## v1.1.0
 
@@ -720,7 +792,7 @@ component.
 
 ### Fixes
 
-- Fix feedback message when the user is too close to the camera
+- Fix user feedback message when the user is too close to the camera
 
 - Fix state warning after component mounting
 

package/README.md

@@ -14,8 +14,8 @@ to review release changes, issues, fixes, and possible breaking changes on Major
 The package depends on the following peer dependencies
 
 ```
-"react": ">=16.14.0 <=18.2.0",
-"react-dom": ">=16.14.0 <=18.2.0"
+"react": ">=16.14.0 <=18.3.1",
+"react-dom": ">=16.14.0 <=18.3.1"
 ```
 
 ### Browser support
@@ -24,12 +24,12 @@ The package depends on the following peer dependencies
 
 | Browser | Versions            |
 | ------- | ------------------- |
-| and_chr | 145                 |
-| chrome  | 145,144,143,142     |
-| edge    | 145,144             |
-| firefox | 147,146,145,144     |
-| ios_saf | 26.3,26.2,26.1      |
-| safari  | 26.3,26.2,26.1,26.0 |
+| and_chr | 147                 |
+| chrome  | 148,147,146,145     |
+| edge    | 147,146             |
+| firefox | 150,149,148,147     |
+| ios_saf | 26.4,26.3,26.2      |
+| safari  | 26.4,26.3,26.2,26.1 |
 
 </browserSupportTable>
 
@@ -94,7 +94,20 @@ It is possible to customize the style by changing the following CSS properties:
 - `--fcm-frame-color-neutral` Sets the color of the face frame.
 - `--fcm-frame-color-success` Sets the success color of the face frame.
 - `--fcm-frame-color-warning` Sets the warning color of the face frame.
-- `--fcm-frame-color-invalid-manual` Sets the color of the face frame for manual mode invalid image feedback.
+- `--fcm-frame-color-invalid-manual` Sets the color of the face frame for manual mode invalid image user feedback.
+- `--fcm-button-border-radius-bottom-left` Sets the border radius of the buttons.
+- `--fcm-button-border-radius-bottom-right` Sets the border radius of the buttons.
+- `--fcm-button-border-radius-top-right` Sets the border radius of the buttons.
+- `--fcm-button-border-radius-top-left` Sets the border radius of the buttons.
+- `--fcm-help-panel-border-radius-bottom-left` Sets the border radius of the help dialogue.
+- `--fcm-help-panel-border-radius-bottom-right` Sets the border radius of the help dialogue.
+- `--fcm-help-panel-border-radius-top-right` Sets the border radius of the help dialogue.
+- `--fcm-help-panel-border-radius-top-left` Sets the border radius of the help dialogue.
+- `--fcm-feedback-border-radius-bottom-left` Sets the border radius of the user feedback.
+- `--fcm-feedback-border-radius-bottom-right` Sets the border radius of the user feedback.
+- `--fcm-feedback-border-radius-top-right` Sets the border radius of the user feedback.
+- `--fcm-feedback-border-radius-top-left` Sets the border radius of the user feedback.
+- `--fcm-prompt-portrait-top` Sets the user feedback (prompt) vertical offset for portrait devices using `center` faceSelectionMethod (percentage recommended). The default value is 0.
 
 The approach for the customization changed on version 2.6.0. The following variables got deprecated and will be removed in future versions:
 
@@ -159,6 +172,7 @@ Current languages supported:
 
 - `en-GB`: English
 - `ar-XN`: Arabic
+- `az-AZ`: Azerbaijani
 - `bg-BG`: Bulgarian
 - `bs-BA`: Bosnian
 - `cs-CZ`: Czech
@@ -183,7 +197,9 @@ Current languages supported:
 - `ko-KR`: Korean
 - `lt-LT`: Lithuanian
 - `lv-LV`: Latvian
-- `ms-MY`: Malay
+- `ms`: Malay (Malaysia) \*\*\*
+- `ms-MY`: Malay (Malaysia)
+- `ms-SG:` Malay (Singapore)
 - `nb-NO`: Norwegian
 - `nl-NL`: Dutch
 - `pl-PL`: Polish
@@ -203,6 +219,7 @@ Current languages supported:
 - `ur-PK`: Urdu
 - `vi-VN`: Vietnamese
 - `zh-CN`: Chinese (Simplified)
+- `zh-TW`: Traditional Chinese (Taiwan)
 
 **(\*\*\*)**
 Language codes marked with \*\*\* are listed for disambiguation purposes on the fallback. They are exactly the same as their respective regional variants.
@@ -401,3 +418,19 @@ Modifications over the original image captured by the camera, like virtual backg
 When using multiframe mode, the prediction request must include the query parameter `multiframe=true`. This is required for the service to process the request correctly. If there is a mismatch between the Face Capture's multiframe setting and the multiframe query parameter in the request, the response will always be `UNTRUSTED_SECURE_SESSION`.
 
 When enabling this mode, ensure both the Face Capture configuration and the prediction request are aligned to avoid this error.
+
+### Permission Policies
+
+When running the FCM inside an iFrame, you might need to set [Permission Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Permissions_Policy) to ensure the system works as expected.
+
+The FCM uses `camera` and `autoplay` policies, so you can set the `allow` iFrame attribute to something like.
+
+```html
+<iframe allow="autoplay *; camera *;" />
+```
+
+This enables only `camera` and `autoplay` regardless of the origin of the host document. Other attributes can be set to `none`.
+
+Please remember that you need to reflect the changes in the `<head>` of your host HTML file by setting the `<meta>` tag with the same permissions policy string as shown above. For example:
+
+`<meta http-equiv="Permissions-Policy" content="autoplay=*, camera=*">`

package/index.d.ts

@@ -108,6 +108,8 @@ declare module '@getyoti/react-face-capture' {
   export enum LANGUAGE_CODE {
     AR = 'ar',
     AR_XN = 'ar-XN',
+    AZ = 'az',
+    AZ_AZ = 'az-AZ',
     BG = 'bg',
     BG_BG = 'bg-BG',
     BS = 'bs',
@@ -159,6 +161,7 @@ declare module '@getyoti/react-face-capture' {
     LV_LV = 'lv-LV',
     MS = 'ms',
     MS_MY = 'ms-MY',
+    MS_SG = 'ms-SG',
     NB = 'nb',
     NB_NO = 'nb-NO',
     NL = 'nl',
@@ -197,6 +200,7 @@ declare module '@getyoti/react-face-capture' {
     ZH = 'zh',
     ZH_CN = 'zh-CN',
     ZH_SG = 'zh-SG',
+    ZH_TW = 'zh-TW',
   }
 
   /**