From 43c7cff75055f72c7d59a7180ae8da2554456d8d Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 7 Nov 2022 19:29:47 -0300
Subject: un-uglyfy, fix: 7442

---
 .../src/mui/TextField.stories.tsx                        |  4 ++--
 packages/taler-wallet-webextension/src/mui/TextField.tsx |  9 +++++++--
 .../src/mui/input/FormControl.tsx                        | 14 +++++++-------
 .../src/mui/input/FormHelperText.tsx                     |  2 +-
 .../src/mui/input/FormLabel.tsx                          |  6 +++---
 .../src/mui/input/InputBase.tsx                          | 16 +++++++++++-----
 .../src/mui/input/InputFilled.tsx                        |  4 ++--
 .../src/mui/input/InputLabel.tsx                         |  6 +++---
 .../src/mui/input/InputStandard.tsx                      |  4 ++--
 9 files changed, 38 insertions(+), 27 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/mui')

diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
index a409f09f0..7db6b2964 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
@@ -56,13 +56,13 @@ const Input = (variant: Props["variant"]): VNode => {
         value="disabled"
       />
       <TextField
-        error
+        error={"Error"}
         variant={variant}
         label="Something"
         {...{ value, onChange }}
       />
       <TextField
-        error
+        error={"Error"}
         disabled
         variant={variant}
         label="Disabled and Error"
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx
index 7c6eb40a2..ba05158fa 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -30,7 +30,7 @@ export interface Props {
   autoFocus?: boolean;
   color?: Colors;
   disabled?: boolean;
-  error?: boolean;
+  error?: string;
   fullWidth?: boolean;
   helperText?: VNode | string;
   id?: string;
@@ -85,7 +85,12 @@ export function TextField({
     <FormControl {...props}>
       {label && <InputLabel>{label}</InputLabel>}
       <Input {...props}>{children}</Input>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {helperText && (
+        <FormHelperText error={props.error}>{helperText}</FormHelperText>
+      )}
+      {props.error ? (
+        <FormHelperText error="true">{props.error}</FormHelperText>
+      ) : undefined}
     </FormControl>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
index 8454b0fad..e80e7f8d8 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
@@ -22,7 +22,7 @@ import { Colors } from "../style";
 export interface Props {
   color: Colors;
   disabled: boolean;
-  error: boolean;
+  error?: string;
   focused: boolean;
   fullWidth: boolean;
   hiddenLabel: boolean;
@@ -64,7 +64,7 @@ export const FormControlContext = createContext<FCCProps | null>(null);
 export function FormControl({
   color = "primary",
   disabled = false,
-  error = false,
+  error = undefined,
   focused: visuallyFocused,
   fullWidth = false,
   hiddenLabel = false,
@@ -75,9 +75,9 @@ export function FormControl({
   children,
 }: Partial<Props>): VNode {
   const [filled, setFilled] = useState(false);
-  const [focusedState, setFocused] = useState(false);
+  const [focusedState, setFocused] = useState(visuallyFocused);
   const focused =
-    visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+    focusedState !== undefined && !disabled ? focusedState : false;
 
   const value: FCCProps = {
     color,
@@ -124,7 +124,7 @@ export interface FCCProps {
   // setAdornedStart,
   color: Colors;
   disabled: boolean;
-  error: boolean;
+  error: string | undefined;
   filled: boolean;
   focused: boolean;
   fullWidth: boolean;
@@ -142,7 +142,7 @@ export interface FCCProps {
 const defaultContextValue: FCCProps = {
   color: "primary",
   disabled: false,
-  error: false,
+  error: undefined,
   filled: false,
   focused: false,
   fullWidth: false,
@@ -159,7 +159,7 @@ const defaultContextValue: FCCProps = {
 function withoutUndefinedProperties(obj: any): any {
   return Object.keys(obj).reduce((acc, key) => {
     const _acc: any = acc;
-    if (obj[key] !== undefined) _acc[key] = obj[key];
+    if (obj[key] !== undefined && obj[key] !== false) _acc[key] = obj[key];
     return _acc;
   }, {});
 }
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
index 739b41e32..5e40ba616 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
@@ -43,7 +43,7 @@ const containedStyle = css`
 
 interface Props {
   disabled?: boolean;
-  error?: boolean;
+  error?: string;
   filled?: boolean;
   focused?: boolean;
   margin?: "dense";
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
index 1d4b5eff5..11404b5c1 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
@@ -22,7 +22,7 @@ import { useFormControl } from "./FormControl.js";
 export interface Props {
   class?: string;
   disabled?: boolean;
-  error?: boolean;
+  error?: string;
   filled?: boolean;
   focused?: boolean;
   required?: boolean;
@@ -67,9 +67,9 @@ export function FormLabel({
   });
   return (
     <label
-      data-focused={fcs.focused}
+      data-focused={!fcs.focused ? undefined : true}
       data-error={!fcs.error ? undefined : true}
-      data-disabled={fcs.disabled}
+      data-disabled={!fcs.disabled ? undefined : true}
       class={[_class, root, theme.typography.body1].join(" ")}
       {...rest}
       style={{
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index e1c6e7af1..94304f16b 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -60,8 +60,8 @@ export function InputBaseRoot({
   const fcs = useFormControl({});
   return (
     <div
-      data-disabled={disabled}
-      data-focused={focused}
+      data-disabled={!disabled ? undefined : true}
+      data-focused={!focused ? undefined : true}
       data-multiline={multiline}
       data-hasStart={!!startAdornment}
       data-hasEnd={!!endAdornment}
@@ -116,6 +116,12 @@ const componentStyle = css`
       duration: theme.transitions.duration.shorter,
     })};
   }
+  &:not(focus)::placeholder {
+    opacity: 0;
+  }
+  &:focus::placeholder {
+    opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5};
+  }
   &:focus {
     outline: 0;
   }
@@ -292,11 +298,11 @@ export function InputBase({
     <Root {...fcs} onClick={handleClick}>
       <FormControlContext.Provider value={null}>
         <Input
-          aria-invalid={fcs.error}
+          aria-invalid={fcs.error ? true : undefined}
           // aria-describedby={}
-          disabled={fcs.disabled}
+          disabled={fcs.disabled ? true : undefined}
           name={name}
-          placeholder={placeholder}
+          placeholder={!placeholder ? undefined : placeholder}
           readOnly={readOnly}
           required={fcs.required}
           rows={rows}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
index fa5144ca3..9ab91e7fd 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -27,7 +27,7 @@ export interface Props {
   defaultValue?: string;
   disabled?: boolean;
   disableUnderline?: boolean;
-  error?: boolean;
+  error?: string;
   fullWidth?: boolean;
   id?: string;
   margin?: "dense" | "normal" | "none";
@@ -176,7 +176,7 @@ function Root({
   return (
     <InputBaseRoot
       disabled={disabled}
-      focused={focused}
+      focused={focused ? true : undefined}
       fullWidth={fullWidth}
       multiline={multiline}
       error={error}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
index 469047afb..35cbd7a41 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
@@ -90,7 +90,7 @@ interface InputLabelProps {
   color: Colors;
   disableAnimation: boolean;
   disabled: boolean;
-  error: boolean;
+  error?: string;
   focused: boolean;
   margin: boolean;
   required: boolean;
@@ -104,8 +104,8 @@ export function InputLabel(props: Partial<InputLabelProps>): VNode {
     <FormLabel
       data-form-control={!!fcs}
       data-size={fcs.size}
-      data-shrink={props.shrink || fcs.filled || fcs.focused}
-      data-disable-animation={props.disableAnimation}
+      data-shrink={props.shrink || fcs.filled || fcs.focused ? true : undefined}
+      data-disable-animation={props.disableAnimation ? true : undefined}
       data-variant={fcs.variant}
       class={root}
       {...props}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
index b1152ebec..45614f618 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
@@ -28,7 +28,7 @@ export interface Props {
   disabled?: boolean;
   disableUnderline?: boolean;
   endAdornment?: VNode;
-  error?: boolean;
+  error?: string;
   fullWidth?: boolean;
   id?: string;
   margin?: "dense" | "normal" | "none";
@@ -128,7 +128,7 @@ function Root({ fullWidth, disabled, focused, error, children }: any): VNode {
   return (
     <InputBaseRoot
       disabled={disabled}
-      focused={focused}
+      focused={focused ? true : undefined}
       fullWidth={fullWidth}
       error={error}
       class={[rootStyle, formControlStyle, underlineStyle].join(" ")}
-- 
cgit v1.2.3