uikit-react-public 0.49.2 → 0.49.4

package/lib/components/ConfidentialDisplayField/ConfidentialDisplayField.tsx

@@ -24,6 +24,7 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
       value,
       numeric,
       maskFormat,
+      format,
       showable = false,
       testId = NAME,
       className,
@@ -45,7 +46,9 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
     const valueIsShown = showable && isShown;
     const displayedValue = valueIsShown
       ? stringValue
-      : formatConfidentialValue(stringValue, maskFormat);
+      : formatConfidentialValue(stringValue, maskFormat, {
+          includeTemplateLiterals: !format,
+        });
 
     useEffect(() => {
       if (!showable) setIsShown(false);
@@ -68,6 +71,7 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
           {...props}
           ref={ref}
           value={displayedValue}
+          format={format}
           numeric={numeric ?? typeof value === 'number'}
           testId={testId}
           noMargins

package/lib/components/ConfidentialDisplayField/Documentation.mdx

@@ -14,7 +14,7 @@ import {
 
 `ConfidentialDisplayField` extends `DisplayField` with the same simple mask
 format used by `ConfidentialInput`. `#` reveals a value character, `*` masks it
-with a `•`, and other characters are displayed as separators.
+with a `●`, and other characters are displayed as separators.
 
 <Source
   code={`<ConfidentialDisplayField

package/lib/components/ConfidentialDisplayField/__tests__/ConfidentialDisplayField.test.tsx

@@ -23,7 +23,7 @@ describe('ConfidentialDisplayField', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-display-field')
-    ).toHaveTextContent('••••••78');
+    ).toHaveTextContent('●●●●●●78');
   });
 
   test('applies a function mask', () => {
@@ -34,7 +34,7 @@ describe('ConfidentialDisplayField', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-display-field')
-    ).toHaveTextContent('•••• ending in 78');
+    ).toHaveTextContent('●●●● ending in 78');
   });
 
   test('does not add a visibility control by default', () => {
@@ -69,20 +69,20 @@ describe('ConfidentialDisplayField', () => {
     await user.click(
       screen.getByRole('button', { name: 'Hide confidential value' })
     );
-    expect(output).toHaveTextContent('••••••78');
+    expect(output).toHaveTextContent('●●●●●●78');
   });
 
   test('formats both masked and visible values', async () => {
     const user = userEvent.setup();
     renderDisplayField({
       value: '123472',
-      maskFormat: '****##',
+      maskFormat: '**-**-##',
       format: '##-##-##',
       showable: true,
     });
 
     const output = screen.getByTestId('ucl-uikit-confidential-display-field');
-    expect(output).toHaveTextContent('••-••-72');
+    expect(output).toHaveTextContent('●●-●●-72');
 
     await user.click(
       screen.getByRole('button', { name: 'Show confidential value' })
@@ -139,6 +139,6 @@ describe('ConfidentialDisplayField', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-display-field')
-    ).toHaveTextContent('••••••78');
+    ).toHaveTextContent('●●●●●●78');
   });
 });

package/lib/components/ConfidentialInput/ConfidentialInput.tsx

@@ -125,7 +125,8 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
       value === undefined ? uncontrolledValue : getStringValue(value);
     const displayedMaskedValue = formatConfidentialValue(
       stringValue,
-      maskFormat
+      maskFormat,
+      { includeTemplateLiterals: !format }
     );
     const configuredValueIsVisible =
       !isFocused &&

package/lib/components/ConfidentialInput/Documentation.mdx

@@ -20,7 +20,7 @@ change events, and form submission while displaying a masked value.
 ## Usage
 
 The string mask is a simple template. `#` reveals the corresponding value
-character, `*` masks it with a `•`, and all other characters are displayed as
+character, `*` masks it with a `●`, and all other characters are displayed as
 separators. Asterisks returned by a formatter function are also displayed as
 bullets. Focusing the input temporarily reveals the original value for editing,
 and blurring restores the configured mask. When `showable` is `true`, the Eye

package/lib/components/ConfidentialInput/__tests__/ConfidentialInput.test.tsx

@@ -27,7 +27,7 @@ describe('ConfidentialInput', () => {
     );
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('1234••••');
+    ).toHaveTextContent('1234●●●●');
   });
 
   test('supports separators and masks characters beyond the template', () => {
@@ -39,7 +39,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72•');
+    ).toHaveTextContent('●●-●●-72●');
   });
 
   test('applies a function mask', () => {
@@ -51,7 +51,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('•••• ending in 78');
+    ).toHaveTextContent('●●●● ending in 78');
   });
 
   test('does not add a visibility control by default', () => {
@@ -120,7 +120,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••••');
+    ).toHaveTextContent('●●●●');
     expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({}));
     expect(onChange.mock.lastCall?.[0].target.value).toBe('1234');
   });
@@ -189,7 +189,7 @@ describe('ConfidentialInput', () => {
     ) as HTMLInputElement;
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
 
     await user.click(input);
 
@@ -203,7 +203,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
   });
 
   test('uses native password masking when visibleWhenFocused is false', async () => {
@@ -219,7 +219,7 @@ describe('ConfidentialInput', () => {
     ) as HTMLInputElement;
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
 
     await user.click(input);
 
@@ -234,7 +234,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
   });
 
   test('shows the raw value while editing a showable value', async () => {
@@ -250,7 +250,7 @@ describe('ConfidentialInput', () => {
     ) as HTMLInputElement;
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
 
     await user.click(input);
 
@@ -268,7 +268,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
   });
 
   test('supports a right icon alongside the visibility control', () => {
@@ -293,7 +293,7 @@ describe('ConfidentialInput', () => {
     const user = userEvent.setup();
     renderInput({
       value: '123472',
-      maskFormat: '****##',
+      maskFormat: '**-**-##',
       format: '##-##-##',
       showable: true,
       onChange: () => {},
@@ -301,7 +301,7 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('••-••-72');
+    ).toHaveTextContent('●●-●●-72');
 
     await user.click(
       screen.getByRole('button', { name: 'Show confidential value' })

package/lib/components/common/formatConfidentialValue.ts

@@ -1,6 +1,14 @@
 export type MaskFormat = string | ((value: string) => string);
 
-const applyMaskTemplate = (value: string, template: string) => {
+interface FormatConfidentialValueOptions {
+  includeTemplateLiterals?: boolean;
+}
+
+const applyMaskTemplate = (
+  value: string,
+  template: string,
+  includeTemplateLiterals: boolean
+) => {
   const valueCharacters = Array.from(value);
   let valueIndex = 0;
   let maskedValue = '';
@@ -14,7 +22,7 @@ const applyMaskTemplate = (value: string, template: string) => {
     } else if (templateCharacter === '*') {
       maskedValue += '*';
       valueIndex += 1;
-    } else {
+    } else if (includeTemplateLiterals) {
       maskedValue += templateCharacter;
     }
   }
@@ -24,13 +32,17 @@ const applyMaskTemplate = (value: string, template: string) => {
   );
 };
 
-const formatConfidentialValue = (value: string, maskFormat: MaskFormat) => {
+const formatConfidentialValue = (
+  value: string,
+  maskFormat: MaskFormat,
+  { includeTemplateLiterals = true }: FormatConfidentialValueOptions = {}
+) => {
   const maskedValue =
     typeof maskFormat === 'function'
       ? maskFormat(value)
-      : applyMaskTemplate(value, maskFormat);
+      : applyMaskTemplate(value, maskFormat, includeTemplateLiterals);
 
-  return maskedValue.split('*').join('•');
+  return maskedValue.split('*').join('●');
 };
 
 export default formatConfidentialValue;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.49.2",
+  "version": "0.49.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",