@radix-ui/react-password-toggle-field 0.1.0-rc.1745439717073

package/src/password-toggle-field.tsx

@@ -0,0 +1,479 @@
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import { composeEventHandlers } from '@radix-ui/primitive';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Primitive } from '@radix-ui/react-primitive';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useId } from '@radix-ui/react-id';
+import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';
+import { useEffectEvent } from '@radix-ui/react-use-effect-event';
+import type { Scope } from '@radix-ui/react-context';
+import { createContextScope } from '@radix-ui/react-context';
+
+const PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';
+
+/* -------------------------------------------------------------------------------------------------
+ * PasswordToggleFieldProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+type InternalFocusState = {
+  clickTriggered: boolean;
+  selectionStart: number | null;
+  selectionEnd: number | null;
+};
+
+interface PasswordToggleFieldContextValue {
+  inputId: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  syncInputId: (providedId: string | number | undefined) => void;
+  focusState: React.RefObject<InternalFocusState>;
+}
+
+const [createPasswordToggleFieldContext] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);
+const [PasswordToggleFieldProvider, usePasswordToggleFieldContext] =
+  createPasswordToggleFieldContext<PasswordToggleFieldContextValue>(PASSWORD_TOGGLE_FIELD_NAME);
+
+/* -------------------------------------------------------------------------------------------------
+ * PasswordToggleField
+ * -----------------------------------------------------------------------------------------------*/
+
+type ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };
+
+interface PasswordToggleFieldProps {
+  id?: string;
+  visible?: boolean;
+  defaultVisible?: boolean;
+  onVisiblityChange?: (visible: boolean) => void;
+  children?: React.ReactNode;
+}
+
+const INITIAL_FOCUS_STATE: InternalFocusState = {
+  clickTriggered: false,
+  selectionStart: null,
+  selectionEnd: null,
+};
+
+const PasswordToggleField: React.FC<PasswordToggleFieldProps> = ({
+  __scopePasswordToggleField,
+  ...props
+}: ScopedProps<PasswordToggleFieldProps>) => {
+  const baseId = useId(props.id);
+  const defaultInputId = `${baseId}-input`;
+  const [inputIdState, setInputIdState] = React.useState<null | string>(defaultInputId);
+  const inputId = inputIdState ?? defaultInputId;
+  const syncInputId = React.useCallback(
+    (providedId: string | number | undefined) =>
+      setInputIdState(providedId != null ? String(providedId) : null),
+    []
+  );
+
+  const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;
+  const [visible = false, setVisible] = useControllableState({
+    caller: PASSWORD_TOGGLE_FIELD_NAME,
+    prop: visibleProp,
+    defaultProp: defaultVisible ?? false,
+    onChange: onVisiblityChange,
+  });
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const focusState = React.useRef<InternalFocusState>(INITIAL_FOCUS_STATE);
+
+  return (
+    <PasswordToggleFieldProvider
+      scope={__scopePasswordToggleField}
+      inputId={inputId}
+      inputRef={inputRef}
+      setVisible={setVisible}
+      syncInputId={syncInputId}
+      visible={visible}
+      focusState={focusState}
+    >
+      {children}
+    </PasswordToggleFieldProvider>
+  );
+};
+PasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * PasswordToggleFieldInput
+ * -----------------------------------------------------------------------------------------------*/
+
+const PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Input';
+
+type PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;
+
+interface PasswordToggleFieldOwnProps {
+  autoComplete?: 'current-password' | 'new-password';
+}
+
+interface PasswordToggleFieldInputProps
+  extends PasswordToggleFieldOwnProps,
+    Omit<PrimitiveInputProps, keyof PasswordToggleFieldOwnProps | 'type'> {
+  autoComplete?: 'current-password' | 'new-password';
+}
+
+const PasswordToggleFieldInput = React.forwardRef<HTMLInputElement, PasswordToggleFieldInputProps>(
+  (
+    {
+      __scopePasswordToggleField,
+      autoComplete = 'current-password',
+      autoCapitalize = 'off',
+      spellCheck = false,
+      id: idProp,
+      ...props
+    }: ScopedProps<PasswordToggleFieldInputProps>,
+    forwardedRef
+  ) => {
+    const { visible, inputRef, inputId, syncInputId, setVisible, focusState } =
+      usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);
+
+    React.useEffect(() => {
+      syncInputId(idProp);
+    }, [idProp, syncInputId]);
+
+    // We want to reset the visibility to `false` to revert the input to
+    // `type="password"` when:
+    // - The form is reset (for consistency with other form controls)
+    // - The form is submitted (to prevent the browser from remembering the
+    //   input's value.
+    //
+    // See "Keeping things secure":
+    //   https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/)
+    const _setVisible = useEffectEvent(setVisible);
+    React.useEffect(() => {
+      const inputElement = inputRef.current;
+      const form = inputElement?.form;
+      if (!form) {
+        return;
+      }
+
+      const controller = new AbortController();
+      form.addEventListener(
+        'reset',
+        (event) => {
+          if (!event.defaultPrevented) {
+            _setVisible(false);
+          }
+        },
+        { signal: controller.signal }
+      );
+      form.addEventListener(
+        'submit',
+        () => {
+          // always reset the visibility on submit regardless of whether the
+          // default action is prevented
+          _setVisible(false);
+        },
+        { signal: controller.signal }
+      );
+      return () => {
+        controller.abort();
+      };
+    }, [inputRef, _setVisible]);
+
+    return (
+      <Primitive.input
+        {...props}
+        id={idProp ?? inputId}
+        autoCapitalize={autoCapitalize}
+        autoComplete={autoComplete}
+        ref={useComposedRefs(forwardedRef, inputRef)}
+        spellCheck={spellCheck}
+        type={visible ? 'text' : 'password'}
+        onBlur={composeEventHandlers(props.onBlur, (event) => {
+          // get the cursor position
+          const { selectionStart, selectionEnd } = event.currentTarget;
+          focusState.current.selectionStart = selectionStart;
+          focusState.current.selectionEnd = selectionEnd;
+        })}
+      />
+    );
+  }
+);
+PasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * PasswordToggleFieldToggle
+ * -----------------------------------------------------------------------------------------------*/
+
+const PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Toggle';
+
+type PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+interface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonProps, 'type'> {}
+
+const PasswordToggleFieldToggle = React.forwardRef<
+  HTMLButtonElement,
+  PasswordToggleFieldToggleProps
+>(
+  (
+    {
+      __scopePasswordToggleField,
+      onClick,
+      onPointerDown,
+      onPointerCancel,
+      onPointerUp,
+      onFocus,
+      children,
+      'aria-label': ariaLabelProp,
+      'aria-controls': ariaControls,
+      'aria-hidden': ariaHidden,
+      tabIndex,
+      ...props
+    }: ScopedProps<PasswordToggleFieldToggleProps>,
+    forwardedRef
+  ) => {
+    const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(
+      PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
+      __scopePasswordToggleField
+    );
+    const [internalAriaLabel, setInternalAriaLabel] = React.useState<string | undefined>(undefined);
+    const elementRef = React.useRef<HTMLButtonElement>(null);
+    const ref = useComposedRefs(forwardedRef, elementRef);
+    const isHydrated = useIsHydrated();
+
+    React.useEffect(() => {
+      const element = elementRef.current;
+      if (!element || ariaLabelProp) {
+        setInternalAriaLabel(undefined);
+        return;
+      }
+
+      const DEFAULT_ARIA_LABEL = visible ? 'Hide password' : 'Show password';
+
+      function checkForInnerTextLabel(textContent: string | undefined | null) {
+        const text = textContent ? textContent : undefined;
+        // If the element has inner text, no need to force an aria-label.
+        setInternalAriaLabel(text ? undefined : DEFAULT_ARIA_LABEL);
+      }
+
+      checkForInnerTextLabel(element.textContent);
+
+      const observer = new MutationObserver((entries) => {
+        let textContent: string | undefined;
+        for (const entry of entries) {
+          if (entry.type === 'characterData') {
+            if (element.textContent) {
+              textContent = element.textContent;
+            }
+          }
+        }
+        checkForInnerTextLabel(textContent);
+      });
+      observer.observe(element, { characterData: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    }, [visible, ariaLabelProp]);
+
+    const ariaLabel = ariaLabelProp || internalAriaLabel;
+
+    // Before hydration the button will not work, but we want to render it
+    // regardless to prevent potential layout shift. Hide it from assistive tech
+    // by default. Post-hydration it will be visible, focusable and associated
+    // with the input via aria-controls.
+    if (!isHydrated) {
+      ariaHidden ??= true;
+      tabIndex ??= -1;
+    } else {
+      ariaControls ??= inputId;
+    }
+
+    React.useEffect(() => {
+      let cleanup = () => {};
+      const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;
+      const reset = () => (focusState.current.clickTriggered = false);
+      const handlePointerUp = () => (cleanup = requestIdleCallback(ownerWindow, reset));
+      ownerWindow.addEventListener('pointerup', handlePointerUp);
+      return () => {
+        cleanup();
+        ownerWindow.removeEventListener('pointerup', handlePointerUp);
+      };
+    }, [focusState]);
+
+    return (
+      <Primitive.button
+        aria-controls={ariaControls}
+        aria-hidden={ariaHidden}
+        aria-label={ariaLabel}
+        ref={ref}
+        id={inputId}
+        {...props}
+        onPointerDown={composeEventHandlers(onPointerDown, () => {
+          focusState.current.clickTriggered = true;
+        })}
+        onPointerCancel={(event) => {
+          // do not use `composeEventHandlers` here because we always want to
+          // reset the ref on cancellation, regardless of whether the user has
+          // called preventDefault on the event
+          onPointerCancel?.(event);
+          focusState.current = INITIAL_FOCUS_STATE;
+        }}
+        // do not use `composeEventHandlers` here because we always want to
+        // reset the ref after click, regardless of whether the user has
+        // called preventDefault on the event
+        onClick={(event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) {
+            focusState.current = INITIAL_FOCUS_STATE;
+            return;
+          }
+
+          flushSync(() => {
+            setVisible((s) => !s);
+          });
+          if (focusState.current.clickTriggered) {
+            const input = inputRef.current;
+            if (input) {
+              const { selectionStart, selectionEnd } = focusState.current;
+              input.focus();
+              if (selectionStart !== null || selectionEnd !== null) {
+                // wait a tick so that focus has settled, then restore select position
+                requestAnimationFrame(() => {
+                  // make sure the input still has focus (developer may have
+                  // programatically moved focus elsewhere)
+                  if (input.ownerDocument.activeElement === input) {
+                    input.selectionStart = selectionStart;
+                    input.selectionEnd = selectionEnd;
+                  }
+                });
+              }
+            }
+          }
+          focusState.current = INITIAL_FOCUS_STATE;
+        }}
+        onPointerUp={(event) => {
+          onPointerUp?.(event);
+          // if click handler hasn't been called at this point, it may have been
+          // intercepted, in which case we still want to reset our internal
+          // state
+          setTimeout(() => {
+            focusState.current = INITIAL_FOCUS_STATE;
+          }, 50);
+        }}
+        type="button"
+      >
+        {children}
+      </Primitive.button>
+    );
+  }
+);
+PasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * PasswordToggleFieldSlot
+ * -----------------------------------------------------------------------------------------------*/
+
+const PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Slot';
+
+interface PasswordToggleFieldSlotDeclarativeProps {
+  visible: React.ReactNode;
+  hidden: React.ReactNode;
+}
+
+interface PasswordToggleFieldSlotRenderProps {
+  render: (args: { visible: boolean }) => React.ReactElement;
+}
+
+type PasswordToggleFieldSlotProps =
+  | PasswordToggleFieldSlotDeclarativeProps
+  | PasswordToggleFieldSlotRenderProps;
+
+const PasswordToggleFieldSlot: React.FC<PasswordToggleFieldSlotProps> = ({
+  __scopePasswordToggleField,
+  ...props
+}: ScopedProps<PasswordToggleFieldSlotProps>) => {
+  const { visible } = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_SLOT_NAME,
+    __scopePasswordToggleField
+  );
+
+  return 'render' in props
+    ? //
+      props.render({ visible })
+    : visible
+      ? props.visible
+      : props.hidden;
+};
+PasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * PasswordToggleFieldIcon
+ * -----------------------------------------------------------------------------------------------*/
+
+const PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Icon';
+
+type PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;
+
+interface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, 'children'> {
+  visible: React.ReactElement;
+  hidden: React.ReactElement;
+}
+
+const PasswordToggleFieldIcon = React.forwardRef<SVGSVGElement, PasswordToggleFieldIconProps>(
+  (
+    {
+      __scopePasswordToggleField,
+      // @ts-expect-error
+      children,
+      ...props
+    }: ScopedProps<PasswordToggleFieldIconProps>,
+    forwardedRef
+  ) => {
+    const { visible } = usePasswordToggleFieldContext(
+      PASSWORD_TOGGLE_FIELD_ICON_NAME,
+      __scopePasswordToggleField
+    );
+    const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;
+    return (
+      <Primitive.svg {...domProps} ref={forwardedRef} aria-hidden asChild>
+        {visible ? visibleIcon : hiddenIcon}
+      </Primitive.svg>
+    );
+  }
+);
+PasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;
+
+export {
+  PasswordToggleField,
+  PasswordToggleFieldInput,
+  PasswordToggleFieldToggle,
+  PasswordToggleFieldSlot,
+  PasswordToggleFieldIcon,
+  //
+  PasswordToggleField as Root,
+  PasswordToggleFieldInput as Input,
+  PasswordToggleFieldToggle as Toggle,
+  PasswordToggleFieldSlot as Slot,
+  PasswordToggleFieldIcon as Icon,
+};
+export type {
+  PasswordToggleFieldProps,
+  PasswordToggleFieldInputProps,
+  PasswordToggleFieldToggleProps,
+  PasswordToggleFieldIconProps,
+  PasswordToggleFieldSlotProps,
+};
+
+function requestIdleCallback(
+  window: Window,
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions
+): () => void {
+  if ((window as any).requestIdleCallback) {
+    const id = window.requestIdleCallback(callback, options);
+    return () => {
+      window.cancelIdleCallback(id);
+    };
+  }
+  const start = Date.now();
+  const id = window.setTimeout(() => {
+    const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));
+    callback({ didTimeout: false, timeRemaining });
+  }, 1);
+  return () => {
+    window.clearTimeout(id);
+  };
+}