Rename owner state to state

mui · Nov 26, 2024 · 06ec557 · 06ec557
1 parent 424a7a2
commit 06ec557
Show file tree

Hide file tree

Showing 165 changed files with 597 additions and 612 deletions.
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function UnstyledSwitchIntroduction() {
 
 const Switch = React.forwardRef<HTMLButtonElement, BaseSwitch.Root.Props>(
   function Switch({ className: classNameProp = '', ...props }, ref) {
-    const className = ({ checked }: BaseSwitch.Root.OwnerState) =>
+    const className = ({ checked }: BaseSwitch.Root.State) =>
       `group relative inline-block w-[38px] h-[24px] m-2.5 p-0 transition rounded-full
     border border-solid outline-none border-gray-300 dark:border-gray-700
     focus-visible:shadow-outline-switch
@@ -48,7 +48,7 @@ const Thumb = React.forwardRef<
   HTMLSpanElement,
   React.HTMLAttributes<HTMLSpanElement>
 >(function Thumb({ className: classNameProp = '', ...props }, ref) {
-  const className = ({ checked }: BaseSwitch.Root.OwnerState) =>
+  const className = ({ checked }: BaseSwitch.Root.State) =>
     `block w-4 h-4 rounded-2xl border border-solid outline-none border-gray-300 dark:border-gray-700 transition
   shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)]
   relative transition-all

diff --git a/docs/data/guides/next-js-app-router/next-js-app-router.mdx b/docs/data/guides/next-js-app-router/next-js-app-router.mdx
@@ -167,11 +167,7 @@ export default function Page() {
   return (
     <React.Fragment>
       {/* Next.js won't render this button without 'use-client'*/}
-      <Button
-        className={(ownerState: ButtonOwnerState) =>
-          ownerState.disabled ? 'bg-gray-400' : 'bg-blue-400'
-        }
-      >
+      <Button className={(state: ButtonState) => (state.disabled ? 'bg-gray-400' : 'bg-blue-400')}>
         Submit
       </Button>
 

diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
@@ -105,7 +105,7 @@ async function transpileFile(tsxPath, project) {
       project,
       filePath: tsxPath,
       shouldResolveObject: ({ name }) => {
-        if (name === 'classes' || name === 'ownerState') {
+        if (name === 'classes' || name === 'state') {
           return false;
         }
 

diff --git a/packages/react/src/Accordion/Header/AccordionHeader.test.tsx b/packages/react/src/Accordion/Header/AccordionHeader.test.tsx
@@ -14,7 +14,7 @@ const accordionRootContextValue: AccordionRootContext = {
   handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     orientation: 'vertical',
@@ -24,7 +24,7 @@ const accordionRootContextValue: AccordionRootContext = {
 
 const accordionItemContextValue: AccordionItemContext = {
   open: true,
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     index: 0,
@@ -46,7 +46,7 @@ const collapsibleContextValue: CollapsibleRootContext = {
   setMounted: NOOP,
   setOpen: NOOP,
   transitionStatus: undefined,
-  ownerState: {
+  state: {
     open: true,
     disabled: false,
     transitionStatus: undefined,

diff --git a/packages/react/src/Accordion/Header/AccordionHeader.tsx b/packages/react/src/Accordion/Header/AccordionHeader.tsx
@@ -23,11 +23,11 @@ const AccordionHeader = React.forwardRef(function AccordionHeader(
 ) {
   const { render, className, ...other } = props;
 
-  const { ownerState } = useAccordionItemContext();
+  const { state } = useAccordionItemContext();
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'h3',
-    ownerState,
+    state,
     className,
     ref: forwardedRef,
     extraProps: other,
@@ -38,7 +38,7 @@ const AccordionHeader = React.forwardRef(function AccordionHeader(
 });
 
 export namespace AccordionHeader {
-  export interface Props extends BaseUIComponentProps<'h3', AccordionItem.OwnerState> {}
+  export interface Props extends BaseUIComponentProps<'h3', AccordionItem.State> {}
 }
 
 export { AccordionHeader };

diff --git a/packages/react/src/Accordion/Item/AccordionItem.test.tsx b/packages/react/src/Accordion/Item/AccordionItem.test.tsx
@@ -12,7 +12,7 @@ const accordionRootContextValue: AccordionRootContext = {
   handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     orientation: 'vertical',

diff --git a/packages/react/src/Accordion/Item/AccordionItem.tsx b/packages/react/src/Accordion/Item/AccordionItem.tsx
@@ -46,7 +46,7 @@ const AccordionItem = React.forwardRef(function AccordionItem(
     animated,
     disabled: contextDisabled,
     handleValueChange,
-    ownerState: rootOwnerState,
+    state: rootState,
     value: openValues,
   } = useAccordionRootContext();
 
@@ -80,7 +80,7 @@ const AccordionItem = React.forwardRef(function AccordionItem(
     disabled,
   });
 
-  const collapsibleOwnerState: CollapsibleRoot.OwnerState = React.useMemo(
+  const collapsibleState: CollapsibleRoot.State = React.useMemo(
     () => ({
       open: collapsible.open,
       disabled: collapsible.disabled,
@@ -92,38 +92,38 @@ const AccordionItem = React.forwardRef(function AccordionItem(
   const collapsibleContext: CollapsibleRootContext = React.useMemo(
     () => ({
       ...collapsible,
-      ownerState: collapsibleOwnerState,
+      state: collapsibleState,
     }),
-    [collapsible, collapsibleOwnerState],
+    [collapsible, collapsibleState],
   );
 
-  const ownerState: AccordionItem.OwnerState = React.useMemo(
+  const state: AccordionItem.State = React.useMemo(
     () => ({
-      ...rootOwnerState,
+      ...rootState,
       index,
       disabled,
       open: isOpen,
       transitionStatus: collapsible.transitionStatus,
     }),
-    [collapsible.transitionStatus, disabled, index, isOpen, rootOwnerState],
+    [collapsible.transitionStatus, disabled, index, isOpen, rootState],
   );
 
   const [triggerId, setTriggerId] = React.useState<string | undefined>(useId());
 
   const accordionItemContext: AccordionItemContext = React.useMemo(
     () => ({
       open: isOpen,
-      ownerState,
+      state,
       setTriggerId,
       triggerId,
     }),
-    [isOpen, ownerState, setTriggerId, triggerId],
+    [isOpen, state, setTriggerId, triggerId],
   );
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'div',
     className,
-    ownerState,
+    state,
     ref: mergedRef,
     extraProps: other,
     customStyleHookMapping: accordionStyleHookMapping,
@@ -141,14 +141,14 @@ const AccordionItem = React.forwardRef(function AccordionItem(
 export namespace AccordionItem {
   export type Value = number | string;
 
-  export interface OwnerState extends AccordionRoot.OwnerState {
+  export interface State extends AccordionRoot.State {
     index: number;
     open: boolean;
     transitionStatus: TransitionStatus;
   }
 
   export interface Props
-    extends BaseUIComponentProps<'div', OwnerState>,
+    extends BaseUIComponentProps<'div', State>,
       Pick<useCollapsibleRoot.Parameters, 'disabled' | 'onOpenChange'> {
     value?: Value;
   }

diff --git a/packages/react/src/Accordion/Item/AccordionItemContext.ts b/packages/react/src/Accordion/Item/AccordionItemContext.ts
@@ -4,7 +4,7 @@ import type { AccordionItem } from './AccordionItem';
 
 export interface AccordionItemContext {
   open: boolean;
-  ownerState: AccordionItem.OwnerState;
+  state: AccordionItem.State;
   setTriggerId: (id: string | undefined) => void;
   triggerId?: string;
 }

diff --git a/packages/react/src/Accordion/Item/styleHooks.ts b/packages/react/src/Accordion/Item/styleHooks.ts
@@ -2,7 +2,7 @@ import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping';
 import type { AccordionItem } from './AccordionItem';
 
-export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.OwnerState> = {
+export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.State> = {
   ...baseMapping,
   index: (value) => {
     return Number.isInteger(value) ? { 'data-index': String(value) } : null;

diff --git a/packages/react/src/Accordion/Panel/AccordionPanel.test.tsx b/packages/react/src/Accordion/Panel/AccordionPanel.test.tsx
@@ -14,7 +14,7 @@ const accordionRootContextValue: AccordionRootContext = {
   handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     orientation: 'vertical',
@@ -24,7 +24,7 @@ const accordionRootContextValue: AccordionRootContext = {
 
 const accordionItemContextValue: AccordionItemContext = {
   open: true,
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     index: 0,
@@ -46,7 +46,7 @@ const collapsibleContextValue: CollapsibleRootContext = {
   setMounted: NOOP,
   setOpen: NOOP,
   transitionStatus: undefined,
-  ownerState: {
+  state: {
     open: true,
     disabled: false,
     transitionStatus: undefined,

diff --git a/packages/react/src/Accordion/Panel/AccordionPanel.tsx b/packages/react/src/Accordion/Panel/AccordionPanel.tsx
@@ -50,12 +50,12 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
     setOpen,
   });
 
-  const { ownerState, triggerId } = useAccordionItemContext();
+  const { state, triggerId } = useAccordionItemContext();
 
   const { renderElement } = useComponentRenderer({
     propGetter: getRootProps,
     render: render ?? 'div',
-    ownerState,
+    state,
     className,
     extraProps: {
       ...otherProps,
@@ -75,7 +75,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
 
 export namespace AccordionPanel {
   export interface Props
-    extends BaseUIComponentProps<'div', AccordionItem.OwnerState>,
+    extends BaseUIComponentProps<'div', AccordionItem.State>,
       Pick<useCollapsiblePanel.Parameters, 'hiddenUntilFound'> {}
 }
 

diff --git a/packages/react/src/Accordion/Root/AccordionRoot.tsx b/packages/react/src/Accordion/Root/AccordionRoot.tsx
@@ -63,7 +63,7 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
     value,
   });
 
-  const ownerState: AccordionRoot.OwnerState = React.useMemo(
+  const state: AccordionRoot.State = React.useMemo(
     () => ({
       value: accordion.value,
       disabled: accordion.disabled,
@@ -76,16 +76,16 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
     () => ({
       ...accordion,
       hiddenUntilFound,
-      ownerState,
+      state,
     }),
-    [accordion, hiddenUntilFound, ownerState],
+    [accordion, hiddenUntilFound, state],
   );
 
   const { renderElement } = useComponentRenderer({
     propGetter: getRootProps,
     render: render ?? 'div',
     className,
-    ownerState,
+    state,
     ref: forwardedRef,
     extraProps: otherProps,
     customStyleHookMapping: rootStyleHookMapping,
@@ -99,15 +99,15 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
 });
 
 export namespace AccordionRoot {
-  export interface OwnerState {
+  export interface State {
     value: useAccordionRoot.Value;
     disabled: boolean;
     orientation: useAccordionRoot.Orientation;
   }
 
   export interface Props
     extends useAccordionRoot.Parameters,
-      Omit<BaseUIComponentProps<'div', OwnerState>, 'defaultValue'> {
+      Omit<BaseUIComponentProps<'div', State>, 'defaultValue'> {
     hiddenUntilFound?: boolean;
   }
 }

diff --git a/packages/react/src/Accordion/Root/AccordionRootContext.ts b/packages/react/src/Accordion/Root/AccordionRootContext.ts
@@ -4,7 +4,7 @@ import type { AccordionRoot } from './AccordionRoot';
 import type { useAccordionRoot } from './useAccordionRoot';
 
 export interface AccordionRootContext extends Omit<useAccordionRoot.ReturnValue, 'getRootProps'> {
-  ownerState: AccordionRoot.OwnerState;
+  state: AccordionRoot.State;
   hiddenUntilFound: boolean;
 }
 

diff --git a/packages/react/src/Accordion/Trigger/AccordionTrigger.test.tsx b/packages/react/src/Accordion/Trigger/AccordionTrigger.test.tsx
@@ -14,7 +14,7 @@ const accordionRootContextValue: AccordionRootContext = {
   handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     orientation: 'vertical',
@@ -24,7 +24,7 @@ const accordionRootContextValue: AccordionRootContext = {
 
 const accordionItemContextValue: AccordionItemContext = {
   open: true,
-  ownerState: {
+  state: {
     value: [0],
     disabled: false,
     index: 0,
@@ -46,7 +46,7 @@ const collapsibleContextValue: CollapsibleRootContext = {
   setMounted: NOOP,
   setOpen: NOOP,
   transitionStatus: undefined,
-  ownerState: {
+  state: {
     open: true,
     disabled: false,
     transitionStatus: undefined,

diff --git a/packages/react/src/Accordion/Trigger/AccordionTrigger.tsx b/packages/react/src/Accordion/Trigger/AccordionTrigger.tsx
@@ -38,7 +38,7 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
     setOpen,
   });
 
-  const { ownerState, setTriggerId, triggerId } = useAccordionItemContext();
+  const { state, setTriggerId, triggerId } = useAccordionItemContext();
 
   useEnhancedEffect(() => {
     setTriggerId(id);
@@ -50,7 +50,7 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
   const { renderElement } = useComponentRenderer({
     propGetter: getRootProps,
     render: render ?? 'button',
-    ownerState,
+    state,
     className,
     extraProps: { ...otherProps, id: triggerId },
     customStyleHookMapping: triggerOpenStateMapping,
@@ -60,7 +60,7 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
 });
 
 namespace AccordionTrigger {
-  export interface Props extends BaseUIComponentProps<'button', AccordionItem.OwnerState> {}
+  export interface Props extends BaseUIComponentProps<'button', AccordionItem.State> {}
 }
 
 export { AccordionTrigger };