@octanejs/radix 0.1.2

package/src/Toggle.ts

@@ -0,0 +1,31 @@
+// Ported from @radix-ui/react-toggle. A two-state button: `aria-pressed` +
+// `data-state="on"/"off"` over a controllable `pressed`.
+import { createElement } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+import { useControllableState } from './useControllableState';
+
+export function Toggle(props: any): any {
+	const slot = S('Toggle');
+	const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props ?? {};
+	const [pressed, setPressed] = useControllableState<boolean>(
+		{ prop: pressedProp, onChange: onPressedChange, defaultProp: defaultPressed ?? false },
+		subSlot(slot, 'pressed'),
+	);
+	return createElement(Primitive.button, {
+		type: 'button',
+		'aria-pressed': pressed,
+		'data-state': pressed ? 'on' : 'off',
+		'data-disabled': props?.disabled ? '' : undefined,
+		...buttonProps,
+		onClick: composeEventHandlers(props?.onClick, () => {
+			if (!props?.disabled) {
+				setPressed(!pressed);
+			}
+		}),
+	});
+}
+
+export { Toggle as Root };

package/src/ToggleGroup.ts

@@ -0,0 +1,157 @@
+// Ported from @radix-ui/react-toggle-group. A set of Toggles where `type="single"` keeps
+// at most one pressed (role=radiogroup semantics per item) and `type="multiple"` allows
+// any combination. Items participate in a RovingFocusGroup (single tab stop + arrow-key
+// navigation) unless `rovingFocus={false}`.
+import { createElement, useCallback, useMemo } from 'octane';
+
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+import * as RovingFocusGroup from './RovingFocusGroup';
+import { createRovingFocusGroupScope } from './RovingFocusGroup';
+import { Toggle } from './Toggle';
+import { useControllableState } from './useControllableState';
+
+const [createToggleGroupContext, createToggleGroupScope] = createContextScope('ToggleGroup', [
+	createRovingFocusGroupScope,
+]);
+export { createToggleGroupScope };
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+
+interface ValueContext {
+	type: 'single' | 'multiple';
+	value: string[];
+	onItemActivate: (value: string) => void;
+	onItemDeactivate: (value: string) => void;
+}
+const [ToggleGroupValueProvider, useToggleGroupValueContext] =
+	createToggleGroupContext<ValueContext>('ToggleGroup');
+const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext<{
+	rovingFocus: boolean;
+	disabled: boolean;
+}>('ToggleGroup');
+
+export function Root(props: any): any {
+	const { type, ...toggleGroupProps } = props ?? {};
+	if (type === 'single') {
+		return createElement(ImplSingle, { role: 'radiogroup', ...toggleGroupProps });
+	}
+	if (type === 'multiple') {
+		return createElement(ImplMultiple, { role: 'toolbar', ...toggleGroupProps });
+	}
+	throw new Error('Missing prop `type` expected on `ToggleGroup`');
+}
+
+function ImplSingle(props: any): any {
+	const slot = S('ToggleGroup.Single');
+	const { value: valueProp, defaultValue, onValueChange = () => {}, ...rest } = props;
+	const [value, setValue] = useControllableState<string>(
+		{ prop: valueProp, defaultProp: defaultValue ?? '', onChange: onValueChange },
+		subSlot(slot, 'value'),
+	);
+	return createElement(ToggleGroupValueProvider, {
+		scope: props.__scopeToggleGroup,
+		type: 'single',
+		value: useMemo(() => (value ? [value] : []), [value], subSlot(slot, 'arr')),
+		onItemActivate: setValue,
+		onItemDeactivate: useCallback(() => setValue(''), [setValue], subSlot(slot, 'off')),
+		children: createElement(Impl, rest),
+	});
+}
+
+function ImplMultiple(props: any): any {
+	const slot = S('ToggleGroup.Multiple');
+	const { value: valueProp, defaultValue, onValueChange = () => {}, ...rest } = props;
+	const [value, setValue] = useControllableState<string[]>(
+		{ prop: valueProp, defaultProp: defaultValue ?? [], onChange: onValueChange },
+		subSlot(slot, 'value'),
+	);
+	const handleButtonActivate = useCallback(
+		(itemValue: string) => setValue((prev: string[] = []) => [...prev, itemValue]),
+		[setValue],
+		subSlot(slot, 'on'),
+	);
+	const handleButtonDeactivate = useCallback(
+		(itemValue: string) => setValue((prev: string[] = []) => prev.filter((v) => v !== itemValue)),
+		[setValue],
+		subSlot(slot, 'off'),
+	);
+	return createElement(ToggleGroupValueProvider, {
+		scope: props.__scopeToggleGroup,
+		type: 'multiple',
+		value,
+		onItemActivate: handleButtonActivate,
+		onItemDeactivate: handleButtonDeactivate,
+		children: createElement(Impl, rest),
+	});
+}
+
+function Impl(props: any): any {
+	const slot = S('ToggleGroup.Impl');
+	const {
+		__scopeToggleGroup,
+		disabled = false,
+		rovingFocus = true,
+		orientation,
+		dir,
+		loop = true,
+		...toggleGroupProps
+	} = props;
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup, subSlot(slot, 'rfs'));
+	const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+	const commonProps = { dir: direction, ...toggleGroupProps };
+	return createElement(ToggleGroupContext, {
+		scope: __scopeToggleGroup,
+		rovingFocus,
+		disabled,
+		children: rovingFocus
+			? createElement(RovingFocusGroup.Root, {
+					asChild: true,
+					...rovingFocusGroupScope,
+					orientation,
+					dir: direction,
+					loop,
+					children: createElement(Primitive.div, commonProps),
+				})
+			: createElement(Primitive.div, commonProps),
+	});
+}
+
+export function Item(props: any): any {
+	const slot = S('ToggleGroup.Item');
+	const valueContext = useToggleGroupValueContext('ToggleGroupItem', props?.__scopeToggleGroup);
+	const context = useToggleGroupContext('ToggleGroupItem', props?.__scopeToggleGroup);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(
+		props?.__scopeToggleGroup,
+		subSlot(slot, 'rfs'),
+	);
+	const pressed = valueContext.value.includes(props.value);
+	const disabled = context.disabled || props.disabled;
+	const commonProps = { ...props, pressed, disabled };
+	return context.rovingFocus
+		? createElement(RovingFocusGroup.Item, {
+				asChild: true,
+				...rovingFocusGroupScope,
+				focusable: !disabled,
+				active: pressed,
+				children: createElement(ItemImpl, commonProps),
+			})
+		: createElement(ItemImpl, commonProps);
+}
+
+function ItemImpl(props: any): any {
+	const { __scopeToggleGroup, value, ...itemProps } = props;
+	const valueContext = useToggleGroupValueContext('ToggleGroupItem', __scopeToggleGroup);
+	const singleProps = { role: 'radio', 'aria-checked': props.pressed, 'aria-pressed': undefined };
+	const typeProps = valueContext.type === 'single' ? singleProps : undefined;
+	return createElement(Toggle, {
+		...typeProps,
+		...itemProps,
+		onPressedChange: (pressed: boolean) => {
+			if (pressed) valueContext.onItemActivate(value);
+			else valueContext.onItemDeactivate(value);
+		},
+	});
+}
+
+export { Root as ToggleGroup, Item as ToggleGroupItem };

package/src/Toolbar.ts

@@ -0,0 +1,130 @@
+// Ported from @radix-ui/react-toolbar (source:
+// .radix-primitives/packages/react/toolbar/src/toolbar.tsx). A `role=toolbar` container
+// whose Buttons/Links/ToggleItems participate in one RovingFocusGroup; embeds ToggleGroup
+// (with its own roving disabled — the toolbar owns focus) and Separator (flipped
+// orientation).
+import { createElement } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+import * as RovingFocusGroup from './RovingFocusGroup';
+import { createRovingFocusGroupScope } from './RovingFocusGroup';
+import * as SeparatorPrimitive from './Separator';
+import * as ToggleGroupPrimitive from './ToggleGroup';
+import { createToggleGroupScope } from './ToggleGroup';
+
+const [createToolbarContext, createToolbarScope] = createContextScope('Toolbar', [
+	createRovingFocusGroupScope,
+	createToggleGroupScope,
+]);
+export { createToolbarScope };
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+const useToggleGroupScope = createToggleGroupScope();
+
+const [ToolbarProvider, useToolbarContext] = createToolbarContext<{
+	orientation: 'horizontal' | 'vertical';
+	dir: 'ltr' | 'rtl';
+}>('Toolbar');
+
+export function Root(props: any): any {
+	const slot = S('Toolbar.Root');
+	const {
+		__scopeToolbar,
+		orientation = 'horizontal',
+		dir,
+		loop = true,
+		...toolbarProps
+	} = props ?? {};
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar, subSlot(slot, 'rfs'));
+	const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+	return createElement(ToolbarProvider, {
+		scope: __scopeToolbar,
+		orientation,
+		dir: direction,
+		children: createElement(RovingFocusGroup.Root, {
+			asChild: true,
+			...rovingFocusGroupScope,
+			orientation,
+			dir: direction,
+			loop,
+			children: createElement(Primitive.div, {
+				role: 'toolbar',
+				'aria-orientation': orientation,
+				dir: direction,
+				...toolbarProps,
+			}),
+		}),
+	});
+}
+
+export function Separator(props: any): any {
+	const { __scopeToolbar, ...separatorProps } = props ?? {};
+	const context = useToolbarContext('ToolbarSeparator', __scopeToolbar);
+	return createElement(SeparatorPrimitive.Root, {
+		orientation: context.orientation === 'horizontal' ? 'vertical' : 'horizontal',
+		...separatorProps,
+	});
+}
+
+export function Button(props: any): any {
+	const slot = S('Toolbar.Button');
+	const { __scopeToolbar, ...buttonProps } = props ?? {};
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar, subSlot(slot, 'rfs'));
+	return createElement(RovingFocusGroup.Item, {
+		asChild: true,
+		...rovingFocusGroupScope,
+		focusable: !props?.disabled,
+		children: createElement(Primitive.button, { type: 'button', ...buttonProps }),
+	});
+}
+
+export function Link(props: any): any {
+	const slot = S('Toolbar.Link');
+	const { __scopeToolbar, ...linkProps } = props ?? {};
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar, subSlot(slot, 'rfs'));
+	return createElement(RovingFocusGroup.Item, {
+		asChild: true,
+		...rovingFocusGroupScope,
+		focusable: true,
+		children: createElement(Primitive.a, {
+			...linkProps,
+			onKeyDown: composeEventHandlers(props?.onKeyDown, (event: KeyboardEvent) => {
+				if (event.key === ' ') (event.currentTarget as HTMLElement).click();
+			}),
+		}),
+	});
+}
+
+export function ToggleGroup(props: any): any {
+	const slot = S('Toolbar.ToggleGroup');
+	const { __scopeToolbar, ...toggleGroupProps } = props ?? {};
+	const context = useToolbarContext('ToolbarToggleGroup', __scopeToolbar);
+	const toggleGroupScope = useToggleGroupScope(__scopeToolbar, subSlot(slot, 'tgs'));
+	return createElement(ToggleGroupPrimitive.Root, {
+		'data-orientation': context.orientation,
+		dir: context.dir,
+		...toggleGroupScope,
+		...toggleGroupProps,
+		// The toolbar is the roving group; the embedded toggle group must not compete.
+		rovingFocus: false,
+	});
+}
+
+export function ToggleItem(props: any): any {
+	const slot = S('Toolbar.ToggleItem');
+	const { __scopeToolbar, ...toggleItemProps } = props ?? {};
+	const toggleGroupScope = useToggleGroupScope(__scopeToolbar, subSlot(slot, 'tgs'));
+	const scope = { __scopeToolbar };
+	return createElement(Button, {
+		asChild: true,
+		...scope,
+		children: createElement(ToggleGroupPrimitive.Item, {
+			...toggleGroupScope,
+			...toggleItemProps,
+		}),
+	});
+}
+
+export { Root as Toolbar, Button as ToolbarButton, Link as ToolbarLink };