Repository: supabase/supabase
File: packages/ui-patterns/src/DataInputs/Input.tsx (TypeScript)

Code before:
    function _onCopy(value: any) {
      copyToClipboard(value, () => {
        /* clipboard successfully set */
        setCopyLabel('Copied')
        setTimeout(function () {
          setCopyLabel('Copy')
        }, 3000)
        onCopy?.()
      })
    }

    function onReveal() {
      setHidden(false)
    }

    let inputClasses: string[] = []
    if (icon) inputClasses.push(__styles.with_icon)

    return (
      <div className={cn('relative group', containerClassName)}>
        <Input_Shadcn_
          ref={ref}
          {...props}
          onCopy={onCopy}
          value={reveal && hidden ? HIDDEN_PLACEHOLDER : props.value}
          disabled={reveal && hidden ? true : props.disabled}
          className={cn(...inputClasses, props.className)}
        />
        {icon && <InputIconContainer icon={icon} className={iconContainerClassName} />}
        {copy || actions ? (
          <div className={__styles.actions_container}>
            {/* {error && <InputErrorIcon size={size} />} */}
            {copy && !(reveal && hidden) ? (
              <Button
                size="tiny"
                type="default"
                className={cn(showCopyOnHover && 'opacity-0 group-hover:opacity-100 transition')}
                icon={<Copy size={16} className="text-foreground-muted" />}
                onClick={() => _onCopy(props.value)}
              >
                {copyLabel}
              </Button>
            ) : null}
            {reveal && hidden ? (
              <Button size="tiny" type="default" onClick={onReveal}>
                Reveal
              </Button>
            ) : null}
            {actions && actions}
          </div>
        ) : null}

Review comment (suggestion):
This prop change means that _before_ reveal the inputs contents are disabled, and _after_ reveal they are not.

Code after:
    function _onCopy(value: any) {
      copyToClipboard(value, () => {
        /* clipboard successfully set */
        setCopyLabel('Copied')
        setTimeout(function () {
          setCopyLabel('Copy')
        }, 3000)
        onCopy?.()
      })
    }

    function onReveal() {
      setHidden(false)
    }

    let inputClasses: string[] = []
    if (icon) inputClasses.push(__styles.with_icon)

    return (
      <div className={cn('relative group', containerClassName)}>
        <Input_Shadcn_
          ref={ref}
          {...props}
          onCopy={onCopy}
          value={reveal && hidden ? HIDDEN_PLACEHOLDER : props.value}
          disabled={reveal && hidden ? true : props.disabled}
          className={cn(...inputClasses, props.className)}
        />
        {icon && <InputIconContainer icon={icon} className={iconContainerClassName} />}
        {copy || actions ? (
          <div className={__styles.actions_container}>
            {copy && !(reveal && hidden) ? (
              <Button
                size="tiny"
                type="default"
                className={cn(showCopyOnHover && 'opacity-0 group-hover:opacity-100 transition')}
                icon={<Copy size={16} className="text-foreground-muted" />}
                onClick={() => _onCopy(props.value)}
              >
                {copyLabel}
              </Button>
            ) : null}
            {reveal && hidden ? (
              <Button size="tiny" type="default" onClick={onReveal}>
                Reveal
              </Button>
            ) : null}
            {actions && actions}
          </div>
        ) : null}
      </div>