uikit-react-public 0.48.0 → 0.48.1

package/lib/components/ConfidentialInput/ConfidentialInput.stories.tsx

@@ -43,3 +43,9 @@ export const FunctionMask: Story = {
     showable: true,
   },
 };
+
+export const MaskedWhenFocused: Story = {
+  args: {
+    visibleWhenFocused: false,
+  },
+};

package/lib/components/ConfidentialInput/ConfidentialInput.tsx

@@ -25,6 +25,7 @@ export interface ConfidentialInputProps extends Omit<
 > {
   maskFormat: string | ((value: string) => string);
   showable?: boolean;
+  visibleWhenFocused?: boolean;
 }
 
 export type Ref = HTMLInputElement;
@@ -65,6 +66,7 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
     {
       maskFormat,
       showable = false,
+      visibleWhenFocused = true,
       value,
       defaultValue,
       disabled,
@@ -97,7 +99,9 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
       getStringValue(defaultValue)
     );
     const resolvedDisabled = disabled ?? contextDisabled;
-    const valueIsShown = showable && isShown;
+    const valueIsPersistentlyShown = showable && isShown;
+    const valueIsVisible =
+      (visibleWhenFocused && isFocused) || valueIsPersistentlyShown;
 
     const setInputRef = useCallback(
       (element: HTMLInputElement | null) => {
@@ -142,8 +146,9 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
       typeof maskFormat === 'function'
         ? maskFormat(stringValue)
         : applyMaskTemplate(stringValue, maskFormat);
-    const visuallyHidden =
-      !valueIsShown && !isFocused && stringValue.length > 0;
+    const displayedMaskedValue = maskedValue.split('*').join('•');
+    const configuredMaskIsVisible =
+      !valueIsPersistentlyShown && !isFocused && stringValue.length > 0;
 
     const wrapperStyle = cx(
       NAME,
@@ -215,13 +220,15 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
         type='button'
         disabled={resolvedDisabled}
         aria-label={
-          valueIsShown ? 'Hide confidential value' : 'Show confidential value'
+          valueIsPersistentlyShown
+            ? 'Hide confidential value'
+            : 'Show confidential value'
         }
-        aria-pressed={valueIsShown}
+        aria-pressed={valueIsPersistentlyShown}
         testId={`${testId}-visibility-toggle`}
         onClick={() => setIsShown((shown) => !shown)}
       >
-        {valueIsShown ? (
+        {valueIsPersistentlyShown ? (
           <Icon.EyeOff
             aria-hidden='true'
             testId={`${testId}-hide-icon`}
@@ -247,22 +254,22 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
           iconPosition={iconPosition}
           iconButton={visibilityButton}
           inputClassName={cx(
-            visuallyHidden && hiddenInputStyle,
+            configuredMaskIsVisible && hiddenInputStyle,
             inputClassName
           )}
           testId={testId}
-          type={valueIsShown ? 'text' : 'password'}
+          type={valueIsVisible ? 'text' : 'password'}
           onChange={handleChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
         />
-        {visuallyHidden && (
+        {configuredMaskIsVisible && (
           <span
             className={maskStyle}
             data-testid={`${testId}-mask`}
             aria-hidden='true'
           >
-            {maskedValue}
+            {displayedMaskedValue}
           </span>
         )}
       </span>

package/lib/components/ConfidentialInput/Documentation.mdx

@@ -20,10 +20,14 @@ change events, and form submission while displaying a masked value.
 ## Usage
 
 The string mask is a simple template. `1` reveals the corresponding value
-character, `*` masks it, and all other characters are displayed as separators.
-The configured mask is displayed while the input is unfocused. While editing,
-the native password mask is used so the caret and selection remain aligned with
-the underlying value.
+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
+control lets users keep the original value visible while the input is
+unfocused. Set `visibleWhenFocused` to `false` to use the browser's native
+password mask while editing; this keeps the caret aligned with the underlying
+value. The configured mask returns on blur.
 
 <Source
   code={`<ConfidentialInput
@@ -51,6 +55,9 @@ A function can be supplied when the template syntax is not sufficient:
   or formatter.
 - `showable`: **boolean** - Adds a button that toggles the original value.
   Defaults to `false`.
+- `visibleWhenFocused`: **boolean** - Reveals the original value while focused.
+  When `false`, the native password mask is shown while editing. Defaults to
+  `true`.
 - All `Input` props except `type` and `iconButton` are supported.
 
 <ArgTypes />
@@ -60,3 +67,4 @@ A function can be supplied when the template syntax is not sufficient:
 <Canvas of={ConfidentialInputStories.Showable} />
 <Canvas of={ConfidentialInputStories.WithSeparators} />
 <Canvas of={ConfidentialInputStories.FunctionMask} />
+<Canvas of={ConfidentialInputStories.MaskedWhenFocused} />

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,19 +39,19 @@ describe('ConfidentialInput', () => {
 
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('**-**-72*');
+    ).toHaveTextContent('••-••-72•');
   });
 
   test('applies a function mask', () => {
     renderInput({
-      maskFormat: (value) => `ending in ${value.slice(-2)}`,
+      maskFormat: (value) => `**** ending in ${value.slice(-2)}`,
       value: '12345678',
       onChange: () => {},
     });
 
     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', () => {
@@ -73,7 +73,9 @@ describe('ConfidentialInput', () => {
       showable: true,
     });
 
-    const input = screen.getByTestId('ucl-uikit-confidential-input');
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
     const showButton = screen.getByRole('button', {
       name: 'Show confidential value',
     });
@@ -109,6 +111,7 @@ describe('ConfidentialInput', () => {
     await user.type(input, '1234');
 
     expect(input).toHaveValue('1234');
+    expect(input).toHaveAttribute('type', 'text');
     expect(
       screen.queryByTestId('ucl-uikit-confidential-input-mask')
     ).not.toBeInTheDocument();
@@ -117,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');
   });
@@ -174,11 +177,41 @@ describe('ConfidentialInput', () => {
     });
   });
 
-  test('uses native password rendering while editing formatted values', async () => {
+  test('shows the raw value while editing a non-showable value', async () => {
+    const user = userEvent.setup();
+    renderInput({
+      maskFormat: '**-**-11',
+      defaultValue: '123472',
+    });
+
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+
+    await user.click(input);
+
+    expect(input).toHaveAttribute('type', 'text');
+    expect(input).toHaveValue('123472');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+  });
+
+  test('uses native password masking when visibleWhenFocused is false', async () => {
     const user = userEvent.setup();
     renderInput({
       maskFormat: '**-**-11',
       defaultValue: '123472',
+      visibleWhenFocused: false,
     });
 
     const input = screen.getByTestId(
@@ -186,7 +219,7 @@ describe('ConfidentialInput', () => {
     ) as HTMLInputElement;
     expect(
       screen.getByTestId('ucl-uikit-confidential-input-mask')
-    ).toHaveTextContent('**-**-72');
+    ).toHaveTextContent('••-••-72');
 
     await user.click(input);
 
@@ -201,7 +234,41 @@ 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 () => {
+    const user = userEvent.setup();
+    renderInput({
+      maskFormat: '**-**-11',
+      defaultValue: '123472',
+      showable: true,
+    });
+
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+
+    await user.click(input);
+
+    expect(input).toHaveAttribute('type', 'text');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Show confidential value' })
+    ).toHaveAttribute('aria-pressed', 'false');
+    input.setSelectionRange(4, 4);
+    expect(input.selectionStart).toBe(4);
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
   });
 
   test('supports a right icon alongside the visibility control', () => {

package/package.json

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