Skip to content

Commit

Permalink
[Field] Move types to namespaces (#710)
Browse files Browse the repository at this point in the history
  • Loading branch information
michaldudak authored Oct 7, 2024
1 parent 37783b0 commit eda8eaa
Show file tree
Hide file tree
Showing 26 changed files with 189 additions and 203 deletions.
4 changes: 2 additions & 2 deletions packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useCheckboxGroupRootContext } from '../../CheckboxGroup/Root/CheckboxGr
import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { useCustomStyleHookMapping } from '../utils/useCustomStyleHookMapping';
import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
import type { FieldRoot } from '../../Field/Root/FieldRoot';
import type { BaseUIComponentProps } from '../../utils/types';
import { type UseCheckboxRoot, useCheckboxRoot } from './useCheckboxRoot';
import { CheckboxRootContext } from './CheckboxRootContext';
Expand Down Expand Up @@ -111,7 +111,7 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot(
});

namespace CheckboxRoot {
export interface OwnerState extends FieldRootOwnerState {
export interface OwnerState extends FieldRoot.OwnerState {
checked: boolean;
disabled: boolean;
readOnly: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { useCheckboxGroupRoot } from './useCheckboxGroupRoot';
import { CheckboxGroupRootContext } from './CheckboxGroupRootContext';
import type { FieldRoot } from '../../Field/Root/FieldRoot';
import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
import type { BaseUIComponentProps } from '../../utils/types';
import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';

/**
* The foundation for building custom-styled checkbox groups.
Expand Down Expand Up @@ -82,7 +82,7 @@ const CheckboxGroupRoot = React.forwardRef(function CheckboxGroupRoot(
});

namespace CheckboxGroupRoot {
export interface OwnerState extends FieldRootOwnerState {
export interface OwnerState extends FieldRoot.OwnerState {
disabled: boolean;
}
export interface Props extends BaseUIComponentProps<'div', OwnerState> {
Expand Down
20 changes: 17 additions & 3 deletions packages/mui-base/src/Field/Control/FieldControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import type { FieldControlElement, FieldControlProps } from './FieldControl.types';
import { useFieldControl } from './useFieldControl';
import { FieldRoot } from '../Root/FieldRoot';
import { useFieldRootContext } from '../Root/FieldRootContext';
import { STYLE_HOOK_MAPPING } from '../utils/constants';
import { BaseUIComponentProps } from '../../utils/types';

export type FieldControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;

/**
* The field's control element. This is not necessary to use when using a native Base UI input
Expand All @@ -20,7 +23,7 @@ import { STYLE_HOOK_MAPPING } from '../utils/constants';
* - [FieldControl API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldControl)
*/
const FieldControl = React.forwardRef(function FieldControl(
props: FieldControlProps,
props: FieldControl.Props,
forwardedRef: React.ForwardedRef<FieldControlElement>,
) {
const {
Expand All @@ -44,7 +47,7 @@ const FieldControl = React.forwardRef(function FieldControl(
const disabled = fieldDisabled || disabledProp;
const name = fieldName ?? nameProp;

const ownerState = React.useMemo(
const ownerState: FieldControl.OwnerState = React.useMemo(
() => ({ ...fieldOwnerState, disabled }),
[fieldOwnerState, disabled],
);
Expand All @@ -71,6 +74,17 @@ const FieldControl = React.forwardRef(function FieldControl(
return renderElement();
});

namespace FieldControl {
export type OwnerState = FieldRoot.OwnerState;

export interface Props extends BaseUIComponentProps<'input', OwnerState> {
/**
* Callback fired when the `value` changes. Use when controlled.
*/
onValueChange?: (value: string | number | readonly string[] | undefined, event: Event) => void;
}
}

FieldControl.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
13 changes: 0 additions & 13 deletions packages/mui-base/src/Field/Control/FieldControl.types.ts

This file was deleted.

22 changes: 12 additions & 10 deletions packages/mui-base/src/Field/Control/useFieldControl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,7 @@ import { useField } from '../useField';
import { useControlled } from '../../utils/useControlled';
import { useEventCallback } from '../../utils/useEventCallback';

interface UseFieldControlParameters {
id?: string;
name?: string;
value?: string | number | readonly string[];
defaultValue?: string | number | readonly string[];
onValueChange?: (value: string | number | readonly string[], event: Event) => void;
disabled?: boolean;
}

export function useFieldControl(params: UseFieldControlParameters) {
export function useFieldControl(params: useFieldControl.Parameters) {
const { id: idProp, name, value: valueProp, defaultValue, onValueChange, disabled } = params;

const { setControlId, labelId, setTouched, setDirty, validityData } = useFieldRootContext();
Expand Down Expand Up @@ -117,3 +108,14 @@ export function useFieldControl(params: UseFieldControlParameters) {
[getControlProps],
);
}

export namespace useFieldControl {
export interface Parameters {
id?: string;
name?: string;
value?: string | number | readonly string[];
defaultValue?: string | number | readonly string[];
onValueChange?: (value: string | number | readonly string[], event: Event) => void;
disabled?: boolean;
}
}
11 changes: 9 additions & 2 deletions packages/mui-base/src/Field/Description/FieldDescription.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import type { FieldDescriptionProps } from './FieldDescription.types';
import { FieldRoot } from '../Root/FieldRoot';
import { useFieldRootContext } from '../Root/FieldRootContext';
import { useFieldDescription } from './useFieldDescription';
import { STYLE_HOOK_MAPPING } from '../utils/constants';
import type { BaseUIComponentProps } from '../../utils/types';

/**
* A description message for the field's control.
Expand All @@ -19,7 +20,7 @@ import { STYLE_HOOK_MAPPING } from '../utils/constants';
* - [FieldDescription API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldDescription)
*/
const FieldDescription = React.forwardRef(function FieldDescription(
props: FieldDescriptionProps,
props: FieldDescription.Props,
forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
) {
const { render, id, className, ...otherProps } = props;
Expand All @@ -41,6 +42,12 @@ const FieldDescription = React.forwardRef(function FieldDescription(
return renderElement();
});

namespace FieldDescription {
export type OwnerState = FieldRoot.OwnerState;

export interface Props extends BaseUIComponentProps<'p', OwnerState> {}
}

FieldDescription.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down

This file was deleted.

12 changes: 7 additions & 5 deletions packages/mui-base/src/Field/Description/useFieldDescription.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ import { useId } from '../../utils/useId';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
import { useFieldRootContext } from '../Root/FieldRootContext';

interface UseFieldDescriptionParameters {
id: string | undefined;
}

export function useFieldDescription(params: UseFieldDescriptionParameters) {
export function useFieldDescription(params: useFieldDescription.Parameters) {
const { id: idProp } = params;

const { setMessageIds } = useFieldRootContext();
Expand Down Expand Up @@ -43,3 +39,9 @@ export function useFieldDescription(params: UseFieldDescriptionParameters) {
[getDescriptionProps],
);
}

export namespace useFieldDescription {
export interface Parameters {
id: string | undefined;
}
}
21 changes: 19 additions & 2 deletions packages/mui-base/src/Field/Error/FieldError.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import type { FieldErrorProps } from './FieldError.types';
import { FieldRoot } from '../Root/FieldRoot';
import { useFieldRootContext } from '../Root/FieldRootContext';
import { useFieldError } from './useFieldError';
import { STYLE_HOOK_MAPPING } from '../utils/constants';
import { useFormRootContext } from '../../Form/Root/FormRootContext';
import type { BaseUIComponentProps } from '../../utils/types';

/**
* Displays error messages for the field's control.
Expand All @@ -20,7 +21,7 @@ import { useFormRootContext } from '../../Form/Root/FormRootContext';
* - [FieldError API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldError)
*/
const FieldError = React.forwardRef(function FieldError(
props: FieldErrorProps,
props: FieldError.Props,
forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
const { render, id, className, show, forceShow, ...otherProps } = props;
Expand Down Expand Up @@ -59,6 +60,22 @@ const FieldError = React.forwardRef(function FieldError(
return renderElement();
});

namespace FieldError {
export type OwnerState = FieldRoot.OwnerState;

export interface Props extends BaseUIComponentProps<'div', OwnerState> {
/**
* Determines whether the error message should be shown when it matches a given property of the
* field's `ValidityState`.
*/
show?: keyof ValidityState;
/**
* Determines whether the error message should be shown regardless of the field's client validity.
*/
forceShow?: boolean;
}
}

FieldError.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
16 changes: 0 additions & 16 deletions packages/mui-base/src/Field/Error/FieldError.types.tsx

This file was deleted.

16 changes: 9 additions & 7 deletions packages/mui-base/src/Field/Error/useFieldError.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import { useId } from '../../utils/useId';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
import { useFieldRootContext } from '../Root/FieldRootContext';

interface UseFieldErrorParameters {
id: string | undefined;
rendered: boolean;
formError: string | string[] | null;
}

export function useFieldError(params: UseFieldErrorParameters) {
export function useFieldError(params: useFieldError.Parameters) {
const { id: idProp, rendered, formError } = params;

const { setMessageIds, validityData } = useFieldRootContext();
Expand Down Expand Up @@ -56,3 +50,11 @@ export function useFieldError(params: UseFieldErrorParameters) {
[getErrorProps],
);
}

export namespace useFieldError {
export interface Parameters {
id: string | undefined;
rendered: boolean;
formError: string | string[] | null;
}
}
11 changes: 9 additions & 2 deletions packages/mui-base/src/Field/Label/FieldLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import type { FieldLabelProps } from './FieldLabel.types';
import { FieldRoot } from '../Root/FieldRoot';
import { useFieldRootContext } from '../Root/FieldRootContext';
import { useFieldLabel } from './useFieldLabel';
import { STYLE_HOOK_MAPPING } from '../utils/constants';
import { useId } from '../../utils/useId';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
import type { BaseUIComponentProps } from '../../utils/types';

/**
* A label for the field's control.
Expand All @@ -21,7 +22,7 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
* - [FieldLabel API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldLabel)
*/
const FieldLabel = React.forwardRef(function FieldLabel(
props: FieldLabelProps,
props: FieldLabel.Props,
forwardedRef: React.ForwardedRef<any>,
) {
const { render, className, id: idProp, ...otherProps } = props;
Expand Down Expand Up @@ -52,6 +53,12 @@ const FieldLabel = React.forwardRef(function FieldLabel(
return renderElement();
});

namespace FieldLabel {
export type OwnerState = FieldRoot.OwnerState;

export interface Props extends BaseUIComponentProps<'div', OwnerState> {}
}

FieldLabel.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
6 changes: 0 additions & 6 deletions packages/mui-base/src/Field/Label/FieldLabel.types.ts

This file was deleted.

12 changes: 7 additions & 5 deletions packages/mui-base/src/Field/Label/useFieldLabel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@ import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps';
import { useFieldRootContext } from '../Root/FieldRootContext';

interface UseFieldLabelParameters {
customTag: boolean;
}

export function useFieldLabel(params: UseFieldLabelParameters) {
export function useFieldLabel(params: useFieldLabel.Parameters) {
const { customTag } = params;

const { controlId, labelId } = useFieldRootContext();
Expand Down Expand Up @@ -39,3 +35,9 @@ export function useFieldLabel(params: UseFieldLabelParameters) {
[getLabelProps],
);
}

export namespace useFieldLabel {
export interface Parameters {
customTag: boolean;
}
}
Loading

0 comments on commit eda8eaa

Please sign in to comment.