Use namespace for types

mj12albert · Aug 20, 2024 · 8a6f204 · 8a6f204
1 parent a0db2b9
commit 8a6f204
Show file tree

Hide file tree

Showing 15 changed files with 151 additions and 204 deletions.
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
@@ -3,9 +3,8 @@ import { createRenderer } from '@mui/internal-test-utils';
 import * as Collapsible from '@base_ui/react/Collapsible';
 import { CollapsibleContext } from '@base_ui/react/Collapsible';
 import { describeConformance } from '../../../test/describeConformance';
-import type { CollapsibleContextValue } from '../Root/CollapsibleRoot.types';
 
-const contextValue: CollapsibleContextValue = {
+const contextValue: Collapsible.Root.Context = {
   animated: false,
   contentId: 'ContentId',
   disabled: false,

diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
@@ -1,14 +1,15 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useCollapsibleContext } from '../Root/CollapsibleContext';
+import type { CollapsibleRoot } from '../Root/CollapsibleRoot';
 import { collapsibleStyleHookMapping } from '../Root/styleHooks';
 import { useCollapsibleContent } from './useCollapsibleContent';
-import { CollapsibleContentProps } from './CollapsibleContent.types';
 
-const CollapsibleContent = React.forwardRef(function CollapsibleContent(
-  props: CollapsibleContentProps,
+export const CollapsibleContent = React.forwardRef(function CollapsibleContent(
+  props: CollapsibleContent.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const { className, htmlHidden, render, ...otherProps } = props;
@@ -45,6 +46,12 @@ const CollapsibleContent = React.forwardRef(function CollapsibleContent(
   return renderElement();
 });
 
+export namespace CollapsibleContent {
+  export interface Props
+    extends BaseUIComponentProps<'div', CollapsibleRoot.OwnerState>,
+      Pick<useCollapsibleContent.Parameters, 'htmlHidden'> {}
+}
+
 CollapsibleContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -68,5 +75,3 @@ CollapsibleContent.propTypes /* remove-proptypes */ = {
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
-
-export { CollapsibleContent };
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
diff --git a/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
@@ -8,10 +8,6 @@ import { useEventCallback } from '../../utils/useEventCallback';
 import { useAnimationsFinished } from '../../utils/useAnimationsFinished';
 import { useForkRef } from '../../utils/useForkRef';
 import { useId } from '../../utils/useId';
-import {
-  UseCollapsibleContentParameters,
-  UseCollapsibleContentReturnValue,
-} from './CollapsibleContent.types';
 
 function getComputedStyles(element: HTMLElement) {
   const containerWindow = ownerWindow(element);
@@ -46,9 +42,9 @@ function supportsHiddenUntilFound(element: HTMLElement) {
  *
  * - [useCollapsibleContent API](https://mui.com/base-ui/react-collapsible/hooks-api/#use-collapsible-content)
  */
-function useCollapsibleContent(
-  parameters: UseCollapsibleContentParameters,
-): UseCollapsibleContentReturnValue {
+export function useCollapsibleContent(
+  parameters: useCollapsibleContent.Parameters,
+): useCollapsibleContent.ReturnValue {
   const {
     animated = false,
     htmlHidden = 'hidden',
@@ -261,7 +257,7 @@ function useCollapsibleContent(
     }
   }, [htmlHidden, isOpen]);
 
-  const getRootProps: UseCollapsibleContentReturnValue['getRootProps'] = React.useCallback(
+  const getRootProps: useCollapsibleContent.ReturnValue['getRootProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps(externalProps, {
         id,
@@ -280,4 +276,34 @@ function useCollapsibleContent(
   );
 }
 
-export { useCollapsibleContent };
+export namespace useCollapsibleContent {
+  export interface Parameters {
+    /**
+     * If `true`, the component supports CSS/JS-based animations and transitions.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * The hidden state when closed
+     * @default 'hidden'
+     */
+    htmlHidden?: 'hidden' | 'until-found';
+    id?: React.HTMLAttributes<Element>['id'];
+    mounted: boolean;
+    /**
+     * The open state of the Collapsible
+     */
+    open: boolean;
+    ref: React.Ref<HTMLElement>;
+    setContentId: (id: string | undefined) => void;
+    setOpen: (nextOpen: boolean) => void;
+    setMounted: (nextMounted: boolean) => void;
+  }
+
+  export interface ReturnValue {
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'button'>,
+    ) => React.ComponentPropsWithRef<'button'>;
+    height: number;
+  }
+}
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx
@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
-import { CollapsibleContextValue } from './CollapsibleRoot.types';
+import type { CollapsibleRoot } from './CollapsibleRoot';
 
 /**
  * @ignore - internal component.
  */
-export const CollapsibleContext = React.createContext<CollapsibleContextValue | undefined>(
+export const CollapsibleContext = React.createContext<CollapsibleRoot.Context | undefined>(
   undefined,
 );
 

diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
@@ -3,9 +3,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useCollapsibleRoot } from './useCollapsibleRoot';
 import { CollapsibleContext } from './CollapsibleContext';
-import { CollapsibleContextValue, CollapsibleRootProps } from './CollapsibleRoot.types';
 
-function CollapsibleRoot(props: CollapsibleRootProps) {
+export function CollapsibleRoot(props: CollapsibleRoot.Props) {
   const { animated, open, defaultOpen, onOpenChange, disabled, children } = props;
 
   const collapsible = useCollapsibleRoot({
@@ -16,7 +15,7 @@ function CollapsibleRoot(props: CollapsibleRootProps) {
     disabled,
   });
 
-  const contextValue: CollapsibleContextValue = React.useMemo(
+  const contextValue: CollapsibleRoot.Context = React.useMemo(
     () => ({
       ...collapsible,
       ownerState: {
@@ -31,6 +30,19 @@ function CollapsibleRoot(props: CollapsibleRootProps) {
   return <CollapsibleContext.Provider value={contextValue}>{children}</CollapsibleContext.Provider>;
 }
 
+export namespace CollapsibleRoot {
+  export interface Context extends useCollapsibleRoot.ReturnValue {
+    ownerState: OwnerState;
+  }
+
+  export interface OwnerState
+    extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled' | 'transitionStatus'> {}
+
+  export interface Props extends useCollapsibleRoot.Parameters {
+    children: React.ReactNode;
+  }
+}
+
 CollapsibleRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -66,5 +78,3 @@ CollapsibleRoot.propTypes /* remove-proptypes */ = {
    */
   open: PropTypes.bool,
 } as any;
-
-export { CollapsibleRoot };
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
diff --git a/packages/mui-base/src/Collapsible/Root/styleHooks.ts b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
@@ -1,7 +1,7 @@
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import type { CollapsibleRootOwnerState } from './CollapsibleRoot.types';
+import { CollapsibleRoot } from './CollapsibleRoot';
 
-export const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRootOwnerState> = {
+export const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRoot.OwnerState> = {
   open: (value) => {
     return value ? { 'data-state': 'open' } : { 'data-state': 'closed' };
   },

diff --git a/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts b/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
@@ -2,12 +2,8 @@
 import * as React from 'react';
 import { useControlled } from '../../utils/useControlled';
 import { useEventCallback } from '../../utils/useEventCallback';
-import { useTransitionStatus } from '../../utils/useTransitionStatus';
+import { useTransitionStatus, TransitionStatus } from '../../utils/useTransitionStatus';
 import { useId } from '../../utils/useId';
-import {
-  UseCollapsibleRootParameters,
-  UseCollapsibleRootReturnValue,
-} from './CollapsibleRoot.types';
 /**
  *
  * Demos:
@@ -18,9 +14,9 @@ import {
  *
  * - [useCollapsibleRoot API](https://mui.com/base-ui/react-collapsible/hooks-api/#use-collapsible-root)
  */
-function useCollapsibleRoot(
-  parameters: UseCollapsibleRootParameters,
-): UseCollapsibleRootReturnValue {
+export function useCollapsibleRoot(
+  parameters: useCollapsibleRoot.Parameters,
+): useCollapsibleRoot.ReturnValue {
   const {
     animated = true,
     open: openParam,
@@ -71,4 +67,50 @@ function useCollapsibleRoot(
   );
 }
 
-export { useCollapsibleRoot };
+export namespace useCollapsibleRoot {
+  export interface Parameters {
+    /**
+     * If `true`, the component supports CSS/JS-based animations and transitions.
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * If `true`, the Collapsible is initially open.
+     * This is the controlled counterpart of `defaultOpen`.
+     */
+    open?: boolean;
+    /**
+     * If `true`, the Collapsible is initially open.
+     * This is the uncontrolled counterpart of `open`.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the Collapsible is opened or closed.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+  }
+
+  export interface ReturnValue {
+    animated: boolean;
+    contentId: React.HTMLAttributes<Element>['id'];
+    /**
+     * The disabled state of the Collapsible
+     */
+    disabled: boolean;
+    mounted: boolean;
+    /**
+     * The open state of the Collapsible
+     */
+    open: boolean;
+    setContentId: (id: string | undefined) => void;
+    setMounted: (open: boolean) => void;
+    setOpen: (open: boolean) => void;
+    transitionStatus: TransitionStatus;
+  }
+}
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -3,9 +3,8 @@ import { createRenderer } from '@mui/internal-test-utils';
 import * as Collapsible from '@base_ui/react/Collapsible';
 import { CollapsibleContext } from '@base_ui/react/Collapsible';
 import { describeConformance } from '../../../test/describeConformance';
-import type { CollapsibleContextValue } from '../Root/CollapsibleRoot.types';
 
-const contextValue: CollapsibleContextValue = {
+const contextValue: Collapsible.Root.Context = {
   animated: false,
   contentId: 'ContentId',
   disabled: false,