Skip to content

Commit deeed5e

Browse files
committed
Update dir structure
1 parent df8a8e0 commit deeed5e

File tree

8 files changed

+79
-50
lines changed

8 files changed

+79
-50
lines changed

docs/data/api/toggle-button-root.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"props": {
3+
"aria-label": { "type": { "name": "string" } },
4+
"aria-labelledby": { "type": { "name": "string" } },
5+
"className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
6+
"defaultPressed": { "type": { "name": "bool" }, "default": "false" },
7+
"disabled": { "type": { "name": "bool" }, "default": "false" },
8+
"onPressedChange": {
9+
"type": { "name": "func" },
10+
"signature": {
11+
"type": "function(pressed: boolean, event: Event) => void",
12+
"describedArgs": ["pressed", "event"]
13+
}
14+
},
15+
"pressed": { "type": { "name": "bool" }, "default": "undefined" },
16+
"render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
17+
},
18+
"name": "ToggleButtonRoot",
19+
"imports": [
20+
"import { ToggleButton } from '@base_ui/react/ToggleButton';\nconst ToggleButtonRoot = ToggleButton.Root;"
21+
],
22+
"classes": [],
23+
"spread": true,
24+
"themeDefaultProps": true,
25+
"muiName": "ToggleButtonRoot",
26+
"forwardsRefTo": "HTMLButtonElement",
27+
"filename": "/packages/mui-base/src/ToggleButton/Root/ToggleButtonRoot.tsx",
28+
"inheritance": null,
29+
"demos": "<ul><li><a href=\"/components/react-toggle-button/\">ToggleButton</a></li></ul>",
30+
"cssComponent": false
31+
}

docs/data/components/toggle-button/toggle-button.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
productId: base-ui
33
title: React ToggleButton component
44
description: Toggle Buttons are a two-state button that can either be off (not pressed) or on (pressed).
5-
components: ToggleButton
6-
hooks: useToggleButton
5+
components: ToggleButtonRoot
76
githubLabel: 'component: toggle button'
87
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
98
packageName: '@base_ui/react'
File renamed without changes.
File renamed without changes.

packages/mui-base/src/ToggleButton/ToggleButton.tsx renamed to packages/mui-base/src/ToggleButton/Root/ToggleButtonRoot.tsx

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
'use client';
22
import * as React from 'react';
33
import PropTypes from 'prop-types';
4-
import { useComponentRenderer } from '../utils/useComponentRenderer';
5-
import type { BaseUIComponentProps } from '../utils/types';
6-
import { useToggleButton } from './useToggleButton';
4+
import { useComponentRenderer } from '../../utils/useComponentRenderer';
5+
import type { BaseUIComponentProps } from '../../utils/types';
6+
import { useToggleButtonRoot } from './useToggleButtonRoot';
77

88
const customStyleHookMapping = {
99
disabled: () => null,
@@ -17,10 +17,10 @@ const customStyleHookMapping = {
1717
*
1818
* API:
1919
*
20-
* - [ToggleButton API](https://base-ui.netlify.app/components/react-toggle-button/#api-reference-ToggleButton)
20+
* - [ToggleButtonRoot API](https://base-ui.netlify.app/components/react-toggle-button/#api-reference-ToggleButtonRoot)
2121
*/
22-
const ToggleButton = React.forwardRef(function ToggleButton(
23-
props: ToggleButton.Props,
22+
const ToggleButtonRoot = React.forwardRef(function ToggleButtonRoot(
23+
props: ToggleButtonRoot.Props,
2424
forwardedRef: React.ForwardedRef<HTMLButtonElement>,
2525
) {
2626
const {
@@ -33,15 +33,15 @@ const ToggleButton = React.forwardRef(function ToggleButton(
3333
...otherProps
3434
} = props;
3535

36-
const { disabled, pressed, getRootProps } = useToggleButton({
36+
const { disabled, pressed, getRootProps } = useToggleButtonRoot({
3737
pressed: pressedProp,
3838
defaultPressed: defaultPressedProp,
3939
disabled: disabledProp,
4040
onPressedChange,
4141
buttonRef: forwardedRef,
4242
});
4343

44-
const ownerState: ToggleButton.OwnerState = React.useMemo(
44+
const ownerState: ToggleButtonRoot.OwnerState = React.useMemo(
4545
() => ({
4646
disabled,
4747
pressed,
@@ -56,15 +56,38 @@ const ToggleButton = React.forwardRef(function ToggleButton(
5656
ownerState,
5757
className,
5858
customStyleHookMapping,
59-
extraProps: {
60-
...otherProps,
61-
},
59+
extraProps: otherProps,
6260
});
6361

6462
return renderElement();
6563
});
6664

67-
ToggleButton.propTypes /* remove-proptypes */ = {
65+
export { ToggleButtonRoot };
66+
67+
export namespace ToggleButtonRoot {
68+
export interface OwnerState {
69+
pressed: boolean;
70+
disabled: boolean;
71+
}
72+
73+
export interface Props
74+
extends Pick<
75+
useToggleButtonRoot.Parameters,
76+
'pressed' | 'defaultPressed' | 'disabled' | 'onPressedChange'
77+
>,
78+
BaseUIComponentProps<'button', OwnerState> {
79+
/**
80+
* The label for the ToggleButton.
81+
*/
82+
'aria-label'?: React.AriaAttributes['aria-label'];
83+
/**
84+
* An id or space-separated list of ids of elements that label the ToggleButton.
85+
*/
86+
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
87+
}
88+
}
89+
90+
ToggleButtonRoot.propTypes /* remove-proptypes */ = {
6891
// ┌────────────────────────────── Warning ──────────────────────────────┐
6992
// │ These PropTypes are generated from the TypeScript type definitions. │
7093
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -115,28 +138,3 @@ ToggleButton.propTypes /* remove-proptypes */ = {
115138
*/
116139
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
117140
} as any;
118-
119-
export { ToggleButton };
120-
121-
export namespace ToggleButton {
122-
export interface OwnerState {
123-
pressed: boolean;
124-
disabled: boolean;
125-
}
126-
127-
export interface Props
128-
extends Pick<
129-
useToggleButton.Parameters,
130-
'pressed' | 'defaultPressed' | 'disabled' | 'onPressedChange'
131-
>,
132-
BaseUIComponentProps<'button', OwnerState> {
133-
/**
134-
* The label for the ToggleButton.
135-
*/
136-
'aria-label'?: React.AriaAttributes['aria-label'];
137-
/**
138-
* An id or space-separated list of ids of elements that label the ToggleButton.
139-
*/
140-
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
141-
}
142-
}

packages/mui-base/src/ToggleButton/useToggleButton.ts renamed to packages/mui-base/src/ToggleButton/Root/useToggleButtonRoot.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
'use client';
22
import * as React from 'react';
3-
import { mergeReactProps } from '../utils/mergeReactProps';
4-
import { NOOP } from '../utils/noop';
5-
import { GenericHTMLProps } from '../utils/types';
6-
import { useControlled } from '../utils/useControlled';
7-
import { useEventCallback } from '../utils/useEventCallback';
8-
import { useButton } from '../useButton/useButton';
3+
import { mergeReactProps } from '../../utils/mergeReactProps';
4+
import { NOOP } from '../../utils/noop';
5+
import { GenericHTMLProps } from '../../utils/types';
6+
import { useControlled } from '../../utils/useControlled';
7+
import { useEventCallback } from '../../utils/useEventCallback';
8+
import { useButton } from '../../useButton/useButton';
99

10-
export function useToggleButton(
11-
parameters: useToggleButton.Parameters,
12-
): useToggleButton.ReturnValue {
10+
export function useToggleButtonRoot(
11+
parameters: useToggleButtonRoot.Parameters,
12+
): useToggleButtonRoot.ReturnValue {
1313
const {
1414
pressed: pressedProp,
1515
onPressedChange: onPressedChangeProp = NOOP,
@@ -62,7 +62,7 @@ export function useToggleButton(
6262
);
6363
}
6464

65-
export namespace useToggleButton {
65+
export namespace useToggleButtonRoot {
6666
export interface Parameters {
6767
buttonRef?: React.Ref<HTMLElement>;
6868
/**
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ToggleButtonRoot as Root } from './Root/ToggleButtonRoot';
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { ToggleButton } from './ToggleButton';
1+
export { Root as ToggleButton } from './index.parts';

0 commit comments

Comments
 (0)