diff --git a/docs/reference/generated/toolbar-separator.json b/docs/reference/generated/toolbar-separator.json new file mode 100644 index 0000000000..5a906ca048 --- /dev/null +++ b/docs/reference/generated/toolbar-separator.json @@ -0,0 +1,16 @@ +{ + "name": "ToolbarSeparator", + "description": "A separator element accessible to screen readers.\nRenders a `
` element.", + "props": { + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." + } + }, + "dataAttributes": {}, + "cssVariables": {} +} diff --git a/packages/react/src/separator/Separator.tsx b/packages/react/src/separator/Separator.tsx index bfc9e39c20..f3192938f1 100644 --- a/packages/react/src/separator/Separator.tsx +++ b/packages/react/src/separator/Separator.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import type { BaseUIComponentProps } from '../utils/types'; +import type { BaseUIComponentProps, Orientation } from '../utils/types'; import { mergeReactProps } from '../utils/mergeReactProps'; import { useComponentRenderer } from '../utils/useComponentRenderer'; @@ -39,8 +39,6 @@ const Separator = React.forwardRef(function SeparatorComponent( return renderElement(); }); -type Orientation = 'horizontal' | 'vertical'; - namespace Separator { export interface Props extends BaseUIComponentProps<'div', State> { /** diff --git a/packages/react/src/toolbar/index.parts.ts b/packages/react/src/toolbar/index.parts.ts index eddb03ce49..f8ce57ae4c 100644 --- a/packages/react/src/toolbar/index.parts.ts +++ b/packages/react/src/toolbar/index.parts.ts @@ -1,4 +1,4 @@ -export { Separator } from '../separator/Separator'; +export { ToolbarSeparator as Separator } from './separator/ToolbarSeparator'; export { ToolbarRoot as Root } from './root/ToolbarRoot'; export { ToolbarGroup as Group } from './group/ToolbarGroup'; export { ToolbarButton as Button } from './button/ToolbarButton'; diff --git a/packages/react/src/toolbar/link/ToolbarLink.tsx b/packages/react/src/toolbar/link/ToolbarLink.tsx index 4da6649e09..d440940d82 100644 --- a/packages/react/src/toolbar/link/ToolbarLink.tsx +++ b/packages/react/src/toolbar/link/ToolbarLink.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { BaseUIComponentProps } from '../../utils/types'; +import { BaseUIComponentProps, Orientation } from '../../utils/types'; import { useButton } from '../../use-button'; import { CompositeItem } from '../../composite/item/CompositeItem'; -import type { ToolbarOrientation, ToolbarItemMetadata } from '../root/ToolbarRoot'; +import type { ToolbarItemMetadata } from '../root/ToolbarRoot'; import { useToolbarRootContext } from '../root/ToolbarRootContext'; const TOOLBAR_LINK_METADATA = { @@ -52,7 +52,7 @@ const ToolbarLink = React.forwardRef(function ToolbarLink( export namespace ToolbarLink { export interface State { - orientation: ToolbarOrientation; + orientation: Orientation; } export interface Props extends BaseUIComponentProps<'a', State> {} diff --git a/packages/react/src/toolbar/root/ToolbarRoot.tsx b/packages/react/src/toolbar/root/ToolbarRoot.tsx index 088715382d..0778dd7689 100644 --- a/packages/react/src/toolbar/root/ToolbarRoot.tsx +++ b/packages/react/src/toolbar/root/ToolbarRoot.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { BaseUIComponentProps } from '../../utils/types'; +import { BaseUIComponentProps, Orientation } from '../../utils/types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { CompositeRoot } from '../../composite/root/CompositeRoot'; import { ToolbarRootContext } from './ToolbarRootContext'; @@ -32,7 +32,7 @@ const ToolbarRoot = React.forwardRef(function ToolbarRoot( orientation, }); - const toolbarRootContext = React.useMemo( + const toolbarRootContext: ToolbarRootContext = React.useMemo( () => ({ disabled, orientation, @@ -65,8 +65,6 @@ const ToolbarRoot = React.forwardRef(function ToolbarRoot( ); }); -export type ToolbarOrientation = 'horizontal' | 'vertical'; - export interface ToolbarItemMetadata { focusableWhenDisabled: boolean; } @@ -74,7 +72,7 @@ export interface ToolbarItemMetadata { namespace ToolbarRoot { export type State = { disabled: boolean; - orientation: ToolbarOrientation; + orientation: Orientation; }; export interface Props extends BaseUIComponentProps<'div', State> { @@ -89,7 +87,7 @@ namespace ToolbarRoot { * The orientation of the toolbar. * @default 'horizontal' */ - orientation?: ToolbarOrientation; + orientation?: Orientation; /** * If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached. * diff --git a/packages/react/src/toolbar/root/ToolbarRootContext.tsx b/packages/react/src/toolbar/root/ToolbarRootContext.tsx index 4f3c892f45..228093e19e 100644 --- a/packages/react/src/toolbar/root/ToolbarRootContext.tsx +++ b/packages/react/src/toolbar/root/ToolbarRootContext.tsx @@ -1,11 +1,12 @@ 'use client'; import * as React from 'react'; +import type { Orientation } from '../../utils/types'; import type { CompositeMetadata } from '../../composite/list/CompositeList'; -import type { ToolbarOrientation, ToolbarItemMetadata } from './ToolbarRoot'; +import type { ToolbarItemMetadata } from './ToolbarRoot'; export interface ToolbarRootContext { disabled: boolean; - orientation: ToolbarOrientation; + orientation: Orientation; setItemMap: React.Dispatch< React.SetStateAction | null>> >; diff --git a/packages/react/src/toolbar/separator/ToolbarSeparator.tsx b/packages/react/src/toolbar/separator/ToolbarSeparator.tsx new file mode 100644 index 0000000000..75fbb32c41 --- /dev/null +++ b/packages/react/src/toolbar/separator/ToolbarSeparator.tsx @@ -0,0 +1,56 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import type { BaseUIComponentProps, Orientation } from '../../utils/types'; +import { Separator } from '../../separator'; +import { useToolbarRootContext } from '../root/ToolbarRootContext'; +/** + * A separator element accessible to screen readers. + * Renders a `
` element. + * + * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar) + */ +const ToolbarSeparator = React.forwardRef(function ToolbarSeparator( + props: ToolbarSeparator.Props, + forwardedRef: React.ForwardedRef, +) { + const context = useToolbarRootContext(); + + const orientation = ( + { + vertical: 'horizontal', + horizontal: 'vertical', + } as Record + )[context.orientation]; + + return ; +}); + +ToolbarSeparator.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), +} as any; + +namespace ToolbarSeparator { + export interface Props extends BaseUIComponentProps<'div', Separator.State>, Separator.Props {} +} + +export { ToolbarSeparator }; diff --git a/packages/react/src/utils/types.ts b/packages/react/src/utils/types.ts index c51f81d698..352c62a330 100644 --- a/packages/react/src/utils/types.ts +++ b/packages/react/src/utils/types.ts @@ -64,3 +64,5 @@ export type BaseUIComponentProps< export type Simplify = T extends Function ? T : { [K in keyof T]: T[K] }; export type RequiredExcept = Required> & Pick; + +export type Orientation = 'horizontal' | 'vertical';