fix(FormElement): uniformize prop > context fallbacks

lumada-design · Nov 28, 2024 · 44a0176 · 44a0176
1 parent 7a376be
commit 44a0176
Show file tree

Hide file tree

Showing 32 changed files with 219 additions and 380 deletions.
diff --git a/packages/core/src/BaseInput/BaseInput.tsx b/packages/core/src/BaseInput/BaseInput.tsx
@@ -112,9 +112,9 @@ export const HvBaseInput = forwardRef<
     onChange,
     type = "text",
     placeholder,
-    multiline = false,
-    resizable = false,
-    invalid = false,
+    multiline,
+    resizable,
+    invalid,
     inputRef,
     inputProps = {},
     ...others

diff --git a/packages/core/src/BaseInput/validations.ts b/packages/core/src/BaseInput/validations.ts
@@ -37,7 +37,7 @@ export const computeValidationType = (type: React.HTMLInputTypeAttribute) => {
  * Checks whether any integrated validation, native or not, is active.
  */
 export const hasBuiltInValidations = (
-  required: boolean,
+  required: boolean | undefined,
   validationType: React.HTMLInputTypeAttribute,
   minCharQuantity: number | null | undefined,
   maxCharQuantity: number | null | undefined,
@@ -119,7 +119,7 @@ export const computeValidationMessage = (
 export const validateInput = (
   input: HTMLInputElement | HTMLTextAreaElement | null,
   value: string,
-  required: boolean,
+  required: boolean | undefined,
   minCharQuantity: any,
   maxCharQuantity: any,
   validationType: string,
@@ -188,19 +188,9 @@ export const validateInput = (
   return inputValidity;
 };
 
-export type HvInputValidity = {
-  valid?: boolean;
-  badInput?: boolean;
-  customError?: boolean;
-  patternMismatch?: boolean;
-  rangeOverflow?: boolean;
-  rangeUnderflow?: boolean;
-  stepMismatch?: boolean;
-  tooLong?: boolean;
-  tooShort?: boolean;
-  typeMismatch?: boolean;
-  valueMissing?: boolean;
-};
+type Mutable<T> = { -readonly [P in keyof T]: T[P] };
+
+export interface HvInputValidity extends Partial<Mutable<ValidityState>> {}
 
 export const DEFAULT_ERROR_MESSAGES = {
   error: "Invalid value",

diff --git a/packages/core/src/Calendar/Calendar.tsx b/packages/core/src/Calendar/Calendar.tsx
@@ -112,9 +112,9 @@ export interface HvCalendarProps {
 export const HvCalendar = (props: HvCalendarProps) => {
   const {
     classes: classesProp,
-    id,
+    id: idProp,
     locale = "en-US",
-    value,
+    value: valueProp,
     visibleMonth,
     visibleYear,
     rightVisibleMonth,
@@ -130,20 +130,20 @@ export const HvCalendar = (props: HvCalendarProps) => {
   } = useDefaultProps("HvCalendar", props);
   const { classes } = useClasses(classesProp);
 
-  const { elementId } = useContext(HvFormElementContext);
+  const context = useContext(HvFormElementContext);
   const elementValue = useContext(HvFormElementValueContext);
-  const localValue = value ?? elementValue;
-  const localId = id ?? setId(elementId, "single-calendar");
-  const rangeMode = isRange(localValue);
-  const rightCalendarId = setId(localId, "single-calendar-right");
+  const value = valueProp ?? elementValue;
+  const id = idProp ?? setId(context.id, "single-calendar");
+  const rangeMode = isRange(value);
+  const rightCalendarId = setId(id, "single-calendar-right");
   const clampedMonth =
     visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
 
   const singleCalendar = (
     <HvSingleCalendar
-      id={localId}
+      id={id}
       locale={locale}
-      value={localValue}
+      value={value}
       visibleMonth={clampedMonth}
       visibleYear={visibleYear}
       minimumDate={minimumDate}
@@ -162,9 +162,9 @@ export const HvCalendar = (props: HvCalendarProps) => {
     <div className={classes.rangeCalendarContainer}>
       <HvSingleCalendar
         className={classes.singleCalendar}
-        id={localId}
+        id={id}
         locale={locale}
-        value={localValue}
+        value={value}
         visibleMonth={clampedMonth}
         visibleYear={visibleYear}
         minimumDate={minimumDate}
@@ -184,7 +184,7 @@ export const HvCalendar = (props: HvCalendarProps) => {
         className={classes.singleCalendar}
         id={rightCalendarId}
         locale={locale}
-        value={localValue}
+        value={value}
         visibleMonth={rightVisibleMonth}
         visibleYear={rightVisibleYear}
         minimumDate={minimumDate}

diff --git a/packages/core/src/Calendar/CalendarHeader/CalendarHeader.tsx b/packages/core/src/Calendar/CalendarHeader/CalendarHeader.tsx
@@ -31,7 +31,7 @@ dayjs.extend(customParseFormat);
 
 export const HvCalendarHeader = (props: HvCalendarHeaderProps) => {
   const {
-    id,
+    id: idProp,
     value,
     locale = "en-US",
     classes: classesProp,
@@ -44,7 +44,7 @@ export const HvCalendarHeader = (props: HvCalendarHeaderProps) => {
 
   const { classes, cx } = useClasses(classesProp);
 
-  const { elementId } = useContext(HvFormElementContext);
+  const context = useContext(HvFormElementContext);
   const elementValue = useContext(HvFormElementValueContext);
   const { label } = useContext(HvFormElementDescriptorsContext);
 
@@ -61,7 +61,7 @@ export const HvCalendarHeader = (props: HvCalendarHeaderProps) => {
   const [displayValue, setDisplayValue] = useState("");
   const [weekdayDisplay, setWeekdayDisplay] = useState("");
 
-  const localId = id ?? setId(elementId, "calendarHeader");
+  const id = idProp ?? setId(context.id, "calendarHeader");
 
   const inputValue = editedValue ?? displayValue;
   const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
@@ -151,7 +151,7 @@ export const HvCalendarHeader = (props: HvCalendarHeaderProps) => {
   // In a new major there's no need for all these classes
   return (
     <div
-      id={localId}
+      id={id}
       className={cx(classes.root, {
         [classes.invalid]: isInvalid,
       })}
@@ -163,7 +163,7 @@ export const HvCalendarHeader = (props: HvCalendarHeaderProps) => {
       )}
       <HvInput
         type="text"
-        id={setId(localId, "header-input")}
+        id={setId(id, "header-input")}
         className={classes.headerDate}
         classes={{
           input: classes.input,

diff --git a/packages/core/src/CheckBox/CheckBox.tsx b/packages/core/src/CheckBox/CheckBox.tsx
@@ -79,11 +79,11 @@ export const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(
       labelProps,
       inputProps,
       value = "on",
-      required = false,
-      readOnly = false,
-      disabled = false,
-      semantic = false,
-      defaultChecked = false,
+      required,
+      readOnly,
+      disabled,
+      semantic,
+      defaultChecked,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy,

diff --git a/packages/core/src/CheckBoxGroup/CheckBoxGroup.tsx b/packages/core/src/CheckBoxGroup/CheckBoxGroup.tsx
@@ -160,10 +160,10 @@ export const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(
       statusMessage,
       defaultValue,
       value: valueProp,
-      required = false,
-      readOnly = false,
-      disabled = false,
-      showSelectAll = false,
+      required,
+      readOnly,
+      disabled,
+      showSelectAll,
       orientation = "vertical",
       selectAllLabel = "All",
       selectAllConjunctionLabel = "/",

diff --git a/packages/core/src/ColorPicker/ColorPicker.tsx b/packages/core/src/ColorPicker/ColorPicker.tsx
@@ -107,8 +107,8 @@ export const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(
     const {
       id,
       name,
-      required = false,
-      disabled = false,
+      required,
+      disabled,
       label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
@@ -156,10 +156,7 @@ export const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(
 
     const labels = useLabels(DEFAULT_LABELS, labelsProp);
 
-    const [isOpen, setIsOpen] = useControlled(
-      expanded,
-      Boolean(defaultExpanded),
-    );
+    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);
     const [color, setColor] = useControlled(value, defaultValue);
     const [savedColors, setSavedColors] = useControlled(
       savedColorsValue,

diff --git a/packages/core/src/DatePicker/DatePicker.tsx b/packages/core/src/DatePicker/DatePicker.tsx
@@ -149,8 +149,8 @@ export const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(
       id,
       name,
 
-      required = false,
-      disabled = false,
+      required,
+      disabled,
       readOnly,
 
       label,
@@ -181,8 +181,8 @@ export const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(
       startAdornment,
       horizontalPlacement = "right",
       locale: localeProp,
-      showActions = false,
-      showClear = false,
+      showActions,
+      showClear,
       disablePortal = true,
       escapeWithReference = true,
       dropdownProps = {},

diff --git a/packages/core/src/Dropdown/Dropdown.tsx b/packages/core/src/Dropdown/Dropdown.tsx
@@ -196,9 +196,9 @@ export const HvDropdown = fixedForwardRef(function HvDropdown<
     id,
     name,
 
-    required = false,
-    disabled = false,
-    readOnly = false,
+    required,
+    disabled,
+    readOnly,
 
     label,
     "aria-label": ariaLabel,

diff --git a/packages/core/src/FilterGroup/FilterGroup.tsx b/packages/core/src/FilterGroup/FilterGroup.tsx
@@ -126,8 +126,8 @@ export const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(
       className,
       id,
       name,
-      required = false,
-      disabled = false,
+      required,
+      disabled,
       label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,

diff --git a/packages/core/src/FormElement/Adornment/Adornment.tsx b/packages/core/src/FormElement/Adornment/Adornment.tsx
@@ -56,19 +56,17 @@ export const HvAdornment = forwardRef<
     classes: classesProp,
     className,
     icon,
-    showWhen = undefined,
+    showWhen,
     onClick,
-    isVisible = undefined,
+    isVisible,
     ...others
   } = useDefaultProps("HvAdornment", props);
   const { classes, cx } = useClasses(classesProp);
 
-  const { elementStatus = "", elementDisabled } =
-    useContext(HvFormElementContext);
+  const { status, disabled } = useContext(HvFormElementContext);
   const { input } = useContext(HvFormElementDescriptorsContext);
 
-  const displayIcon =
-    isVisible ?? (showWhen === undefined || elementStatus === showWhen);
+  const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
 
   const isClickable = !!onClick;
 
@@ -86,14 +84,14 @@ export const HvAdornment = forwardRef<
         classes.adornmentButton,
         {
           [classes.hideIcon]: !displayIcon,
-          [classes.disabled]: elementDisabled,
+          [classes.disabled]: disabled,
         },
         className,
       )}
       onClick={onClick}
       onMouseDown={(event) => event.preventDefault()}
       onKeyDown={noop}
-      disabled={elementDisabled}
+      disabled={disabled}
       {...others}
     >
       <div className={classes.icon}>{icon}</div>
@@ -108,7 +106,7 @@ export const HvAdornment = forwardRef<
         classes.adornmentIcon,
         {
           [classes.hideIcon]: !displayIcon,
-          [classes.disabled]: elementDisabled,
+          [classes.disabled]: disabled,
         },
         className,
       )}

diff --git a/packages/core/src/FormElement/CharCounter/CharCounter.tsx b/packages/core/src/FormElement/CharCounter/CharCounter.tsx
@@ -42,41 +42,41 @@ export const HvCharCounter = (props: HvCharCounterProps) => {
     currentCharQuantity = 0,
     classes: classesProp,
     className,
-    id,
-    disabled,
+    id: idProp,
+    disabled: disabledProp,
     disableGutter = false,
     ...others
   } = useDefaultProps("HvCharCounter", props);
 
   const { classes, cx } = useClasses(classesProp);
 
-  const { elementId, elementDisabled } = useContext(HvFormElementContext);
-  const localDisabled = disabled || elementDisabled;
-  const localId = id ?? setId(elementId, "counter");
-  const currentId = setId(localId, "currentQuantity");
-  const maxQuantityId = setId(localId, "maxQuantity");
+  const context = useContext(HvFormElementContext);
+  const disabled = disabledProp ?? context.disabled;
+  const id = idProp ?? setId(context.id, "counter");
+  const currentId = setId(id, "currentQuantity");
+  const maxQuantityId = setId(id, "maxQuantity");
   const isOverloaded = currentCharQuantity > maxCharQuantity;
 
   return (
     <div
-      id={localId}
+      id={id}
       className={cx(
         classes.root,
         {
-          [classes.counterDisabled]: !!localDisabled,
+          [classes.counterDisabled]: disabled,
           [classes.gutter]: !disableGutter,
         },
         className,
       )}
       aria-live="polite"
-      aria-disabled={localDisabled}
+      aria-disabled={disabled}
       {...others}
     >
       <HvTypography
         id={currentId}
         className={cx({
-          [classes.overloaded]: isOverloaded && !localDisabled,
-          [classes.counterDisabled]: !!localDisabled,
+          [classes.overloaded]: isOverloaded && !disabled,
+          [classes.counterDisabled]: disabled,
         })}
         variant="label"
         component="label"
@@ -86,8 +86,8 @@ export const HvCharCounter = (props: HvCharCounterProps) => {
       <HvTypography
         id={maxQuantityId}
         className={cx({
-          [classes.overloaded]: isOverloaded && !localDisabled,
-          [classes.counterDisabled]: !!localDisabled,
+          [classes.overloaded]: isOverloaded && !disabled,
+          [classes.counterDisabled]: disabled,
         })}
         variant="body"
         component="label"