@radix-ng/primitives 0.11.0 → 0.12.0

package/dialog/src/dialog.providers.ts

@@ -0,0 +1,27 @@
+import { DialogModule } from '@angular/cdk/dialog';
+import { EnvironmentProviders, importProvidersFrom, makeEnvironmentProviders, Provider } from '@angular/core';
+import { RdxDialogService } from './dialog.service';
+
+/**
+ * Configures the RdxDialog module by providing necessary dependencies.
+ *
+ * This function sets up the environment providers required for the RdxDialog to function,
+ * specifically importing the Angular CDK's DialogModule.
+ *
+ * @returns {EnvironmentProviders} An EnvironmentProviders instance containing the DialogModule.
+ */
+export function configureRdxDialog(): EnvironmentProviders {
+    return makeEnvironmentProviders([importProvidersFrom(DialogModule)]);
+}
+
+/**
+ * Provides the RdxDialogService for dependency injection.
+ *
+ * This function is used to make the RdxDialogService available for injection
+ * in components, directives, or other services that require dialog functionality.
+ *
+ * @returns {Provider} A provider for the RdxDialogService.
+ */
+export function provideRdxDialog(): Provider {
+    return RdxDialogService;
+}

package/dialog/src/dialog.service.ts

@@ -0,0 +1,94 @@
+import { Dialog } from '@angular/cdk/dialog';
+import { inject, Injectable, Injector, Renderer2 } from '@angular/core';
+import { filter, isObservable, merge, of, switchMap, take, takeUntil } from 'rxjs';
+import { DISMISSED_VALUE, RdxDialogRef } from './dialog-ref';
+import type { RdxDialogConfig, RdxDialogResult } from './dialog.config';
+
+/**
+ * Modality control: When `isModal` is set to `true`, the dialog will:
+ *
+ * - Have a backdrop that blocks interaction with the rest of the page
+ * - Disable closing by clicking outside or pressing Escape
+ * - Set `aria-modal="true"` for screen readers
+ * - Automatically focus the first tabbable element in the dialog
+ * - Restore focus to the element that opened the dialog when it's closed
+ *
+ *
+ * When `isModal` is `false`, the dialog will:
+ *
+ * - Not have a backdrop, allowing interaction with the rest of the page
+ * - Allow closing by clicking outside or pressing Escape
+ * - Not set `aria-modal` attribute
+ * - Not automatically manage focus
+ */
+@Injectable()
+export class RdxDialogService {
+    #cdkDialog = inject(Dialog);
+    #injector = inject(Injector);
+
+    open<C>(config: RdxDialogConfig<C>): RdxDialogRef<C> {
+        let dialogRef: RdxDialogRef<C>;
+        let modeClasses: string[] = [];
+
+        switch (config.mode) {
+            case 'drawer':
+                modeClasses = ['mod-drawer'];
+                break;
+            case 'drawer-bottom':
+                modeClasses = ['mod-drawer', 'mod-bottom'];
+                break;
+        }
+
+        const cdkRef = this.#cdkDialog.open<RdxDialogResult<C> | typeof DISMISSED_VALUE, unknown, C>(config.content, {
+            ariaModal: config.modal ?? true,
+            hasBackdrop: config.modal ?? true,
+            data: 'data' in config ? config.data : null,
+            restoreFocus: true,
+            role: 'dialog',
+            disableClose: true,
+            closeOnDestroy: true,
+            injector: this.#injector,
+            backdropClass: config.backdropClass ? config.backdropClass : 'cdk-overlay-dark-backdrop',
+            panelClass: ['dialog', ...modeClasses, ...(config.panelClasses || [])],
+            autoFocus: config.autoFocus === 'first-input' ? 'dialog' : (config.autoFocus ?? 'first-tabbable'),
+            ariaLabel: config.ariaLabel,
+            templateContext: () => ({ dialogRef: dialogRef }),
+            providers: (ref) => {
+                dialogRef = new RdxDialogRef(ref, config);
+                return [
+                    {
+                        provide: RdxDialogRef,
+                        useValue: dialogRef
+                    }
+                ];
+            },
+            // @FIXME
+            ...(config.cdkConfigOverride || ({} as any))
+        });
+
+        if (cdkRef.componentRef) {
+            cdkRef.componentRef.injector
+                .get(Renderer2)
+                .setStyle(cdkRef.componentRef.location.nativeElement, 'display', 'contents');
+        }
+
+        merge(cdkRef.backdropClick, cdkRef.keydownEvents.pipe(filter((e) => e.key === 'Escape' && !e.defaultPrevented)))
+            .pipe(
+                filter(() => config.canCloseWithBackdrop ?? true),
+                switchMap(() => {
+                    const canClose = (cdkRef.componentInstance && config.canClose?.(cdkRef.componentInstance)) ?? true;
+                    const canClose$ = isObservable(canClose) ? canClose : of(canClose);
+                    return canClose$.pipe(take(1));
+                }),
+
+                takeUntil(dialogRef!.closed$)
+            )
+            .subscribe((canClose) => {
+                if (canClose) {
+                    cdkRef.close(DISMISSED_VALUE);
+                }
+            });
+
+        return dialogRef!;
+    }
+}

package/dialog/stories/dialog.docs.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as DialogStories from './dialog.stories';
+
+<Meta title="Primitives/Dialog" />
+
+# Dialog
+
+<Canvas sourceState="hidden" of={DialogStories.Default} />
+
+## Features
+- ✅ Supports modal and non-modal modes.
+- ✅ Focus is automatically trapped when modal.
+- ✅ Can be controlled or uncontrolled.
+- ✅ Esc closes the component automatically.
+
+### Anatomy
+Import all parts and piece them together.
+
+```html
+
+<button [rdxDialogTrigger]="dialog">Open Dialog</button>
+
+<ng-template #dialog>
+    <div rdxDialogContent>
+        <h2 rdxDialogTitle></h2>
+        <p rdxDialogDescription></p>
+        <button rdxDialogClose></button>
+        <button rdxDialogDismiss>X</button>
+    </div>
+</ng-template>
+
+```

package/dialog/stories/dialog.stories.ts

@@ -0,0 +1,233 @@
+import { applicationConfig, componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxDialogCloseDirective } from '../src/dialog-close.directive';
+import { RdxDialogContentDirective } from '../src/dialog-content.directive';
+import { RdxDialogDescriptionDirective } from '../src/dialog-description.directive';
+import { RdxDialogTitleDirective } from '../src/dialog-title.directive';
+import { RdxDialogTriggerDirective } from '../src/dialog-trigger.directive';
+import { configureRdxDialog } from '../src/dialog.providers';
+
+const html = String.raw;
+
+export default {
+    title: 'Primitives/Dialog',
+    decorators: [
+        applicationConfig({
+            providers: [configureRdxDialog()]
+        }),
+        moduleMetadata({
+            imports: [
+                RdxDialogTriggerDirective,
+                RdxDialogContentDirective,
+                RdxDialogTitleDirective,
+                RdxDialogCloseDirective,
+                RdxDialogDescriptionDirective
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) => `
+                <div class="radix-themes light light-theme radix-themes-default-fonts rt-Flex rt-r-ai-start rt-r-jc-center rt-r-position-relative"
+                    data-accent-color="indigo"
+                    data-radius="medium"
+                    data-scaling="100%"
+                >
+                    ${story}
+                </div>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    argTypes: {
+        mode: {
+            options: ['default', 'drawer', 'drawer-bottom'],
+            control: {
+                type: 'select'
+            }
+        }
+    },
+    render: (args) => ({
+        props: {
+            config: args
+        },
+        template: html`
+            <button class="Button violet" [rdxDialogConfig]="config" [rdxDialogTrigger]="dialog">Open Dialog</button>
+
+            <ng-template #dialog>
+                <div class="DialogContent" rdxDialogContent>
+                    <h2 class="DialogTitle" rdxDialogTitle>Edit profile</h2>
+                    <p class="DialogDescription" rdxDialogDescription>
+                        Make changes to your profile here. Click save when you're done.
+                    </p>
+                    <fieldset class="Fieldset">
+                        <label class="Label" htmlFor="name">Name</label>
+                        <input class="Input" id="name" defaultValue="Pedro Duarte" />
+                    </fieldset>
+                    <fieldset class="Fieldset">
+                        <label class="Label" htmlFor="username">Username</label>
+                        <input class="Input" id="username" defaultValue="@peduarte" />
+                    </fieldset>
+                    <div style="display:flex; margin-top: 25px; justify-content: flex-end;">
+                        <button class="Button green" rdxDialogClose>Save changes</button>
+                    </div>
+                    <button class="IconButton" rdxDialogClose aria-label="Close">X</button>
+                </div>
+            </ng-template>
+
+            <style>
+                /* reset */
+                button,
+                fieldset,
+                input {
+                    all: unset;
+                }
+
+                .DialogOverlay {
+                    background-color: var(--black-a9);
+                    position: fixed;
+                    inset: 0;
+                    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+                }
+
+                .DialogContent {
+                    background-color: white;
+                    border-radius: 6px;
+                    box-shadow:
+                        hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+                        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+                    position: fixed;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 90vw;
+                    max-width: 450px;
+                    max-height: 85vh;
+                    padding: 25px;
+                    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+                }
+
+                .DialogContent:focus {
+                    outline: none;
+                }
+
+                .DialogTitle {
+                    margin: 0;
+                    font-weight: 500;
+                    color: var(--mauve-12);
+                    font-size: 17px;
+                }
+
+                .DialogDescription {
+                    margin: 10px 0 20px;
+                    color: var(--mauve-11);
+                    font-size: 15px;
+                    line-height: 1.5;
+                }
+
+                .Button {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    padding: 0 15px;
+                    font-size: 15px;
+                    line-height: 1;
+                    font-weight: 500;
+                    height: 35px;
+                }
+
+                .Button.violet {
+                    background-color: white;
+                    color: var(--violet-11);
+                    box-shadow: 0 2px 10px var(--black-a7);
+                }
+
+                .Button.violet:hover {
+                    background-color: var(--mauve-3);
+                }
+
+                .Button.violet:focus {
+                    box-shadow: 0 0 0 2px black;
+                }
+
+                .Button.green {
+                    background-color: var(--green-4);
+                    color: var(--green-11);
+                }
+
+                .Button.green:hover {
+                    background-color: var(--green-5);
+                }
+
+                .Button.green:focus {
+                    box-shadow: 0 0 0 2px var(--green-7);
+                }
+
+                .IconButton {
+                    font-family: inherit;
+                    border-radius: 100%;
+                    height: 25px;
+                    width: 25px;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: var(--violet-11);
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                }
+
+                .IconButton:hover {
+                    background-color: var(--violet-4);
+                }
+
+                .IconButton:focus {
+                    box-shadow: 0 0 0 2px var(--violet-7);
+                }
+
+                .Fieldset {
+                    display: flex;
+                    gap: 20px;
+                    align-items: center;
+                    margin-bottom: 15px;
+                }
+
+                .Label {
+                    font-size: 15px;
+                    color: var(--violet-11);
+                    width: 90px;
+                    text-align: right;
+                }
+
+                .Input {
+                    width: 100%;
+                    flex: 1;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    padding: 0 10px;
+                    font-size: 15px;
+                    line-height: 1;
+                    color: var(--violet-11);
+                    box-shadow: 0 0 0 1px var(--violet-7);
+                    height: 35px;
+                }
+
+                .Input:focus {
+                    box-shadow: 0 0 0 2px var(--violet-8);
+                }
+            </style>
+        `
+    })
+};
+
+export const DrawerStory: Story = {
+    render: (args) => ({
+        props: {
+            config: args
+        },
+        template: html``
+    })
+};

package/dropdown-menu/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/dropdown-menu/src/dropdown-menu-content.directive.ts

@@ -0,0 +1,47 @@
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { Directive, inject, Input } from '@angular/core';
+import { pairwise, startWith, Subject } from 'rxjs';
+import { RdxDropdownMenuItemDirective } from './dropdown-menu-item.directive';
+import { RdxDropdownMenuTriggerDirective } from './dropdown-menu-trigger.directive';
+
+@Directive({
+    selector: '[rdxDropdownMenuContent]',
+    standalone: true,
+    host: {
+        '[attr.data-state]': "menuTrigger.isOpen() ? 'open': 'closed'",
+        '[attr.data-align]': 'menuTrigger!.align',
+        '[attr.data-side]': 'menuTrigger!.side',
+        '[attr.data-orientation]': 'orientation'
+    },
+    providers: [
+        {
+            provide: CdkMenu,
+            useExisting: RdxDropdownMenuContentDirective
+        }
+    ]
+})
+export class RdxDropdownMenuContentDirective extends CdkMenu {
+    readonly highlighted = new Subject<RdxDropdownMenuItemDirective>();
+    readonly menuTrigger = inject(RdxDropdownMenuTriggerDirective, { optional: true });
+
+    @Input() onEscapeKeyDown: (event?: Event) => void = () => undefined;
+    @Input() closeOnEscape: boolean = true;
+
+    constructor() {
+        super();
+
+        this.highlighted.pipe(startWith(null), pairwise()).subscribe(([prev, item]) => {
+            if (prev) {
+                prev.highlighted = false;
+            }
+
+            if (item) {
+                item.highlighted = true;
+            }
+        });
+    }
+
+    updateActiveItem(item: CdkMenuItem) {
+        this.keyManager.updateActiveItem(item);
+    }
+}

package/dropdown-menu/src/dropdown-menu-item-checkbox.directive.ts

@@ -0,0 +1,30 @@
+import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';
+import { Directive } from '@angular/core';
+import { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';
+import { RdxDropdownMenuSelectable } from './dropdown-menu-item-selectable';
+import { RdxDropdownMenuItemDirective } from './dropdown-menu-item.directive';
+
+@Directive({
+    selector: '[rdxDropdownMenuItemCheckbox]',
+    standalone: true,
+    host: {
+        role: 'menuitemcheckbox'
+    },
+    providers: [
+        { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemCheckboxDirective },
+        { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
+        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
+        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
+    ]
+})
+export class RdxDropdownMenuItemCheckboxDirective extends RdxDropdownMenuSelectable {
+    override trigger(options?: { keepOpen: boolean }) {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+
+            this.checkedChange.emit(this.checked);
+        }
+
+        super.trigger(options);
+    }
+}

package/dropdown-menu/src/dropdown-menu-item-indicator.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, inject } from '@angular/core';
+import { RdxDropdownMenuSelectable } from './dropdown-menu-item-selectable';
+
+@Directive({
+    selector: '[rdxDropdownMenuItemIndicator]',
+    standalone: true,
+    host: {
+        '[style.display]': "item.checked ? 'block' : 'none'",
+        '[attr.data-state]': "item.checked ? 'checked' : 'unchecked'"
+    }
+})
+export class RdxDropdownMenuItemIndicatorDirective {
+    item = inject(RdxDropdownMenuSelectable);
+}

package/dropdown-menu/src/dropdown-menu-item-radio-group.directive.ts

@@ -0,0 +1,31 @@
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { AfterContentInit, Directive, EventEmitter, inject, Input, Output } from '@angular/core';
+
+@Directive({
+    selector: '[rdxDropdownMenuItemRadioGroup]',
+    standalone: true,
+    host: {
+        role: 'group'
+    },
+    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }]
+})
+export class RdxDropdownMenuItemRadioGroupDirective<T> implements AfterContentInit {
+    private readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
+
+    @Input()
+    set value(id: T | null) {
+        this._value = id;
+    }
+
+    get value(): T | null {
+        return this._value;
+    }
+
+    private _value: T | null = null;
+
+    @Output() readonly valueChange = new EventEmitter();
+
+    ngAfterContentInit(): void {
+        this.selectionDispatcher.notify(this.value as string, '');
+    }
+}

package/dropdown-menu/src/dropdown-menu-item-radio.directive.ts

@@ -0,0 +1,72 @@
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';
+import { AfterContentInit, Directive, inject, Input, OnDestroy } from '@angular/core';
+import { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';
+import { RdxDropdownMenuItemRadioGroupDirective } from './dropdown-menu-item-radio-group.directive';
+import { RdxDropdownMenuSelectable } from './dropdown-menu-item-selectable';
+import { RdxDropdownMenuItemDirective } from './dropdown-menu-item.directive';
+
+/** Counter used to set a unique id and name for a selectable item */
+let nextId = 0;
+
+@Directive({
+    selector: '[rdxDropdownMenuItemRadio]',
+    standalone: true,
+    host: {
+        role: 'menuitemradio'
+    },
+    providers: [
+        { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemRadioDirective },
+        { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
+        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
+        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
+    ]
+})
+export class RdxDropdownMenuItemRadioDirective
+    extends RdxDropdownMenuSelectable
+    implements AfterContentInit, OnDestroy
+{
+    /** The unique selection dispatcher for this radio's `RdxDropdownMenuItemRadioGroupDirective`. */
+    private readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
+
+    private readonly group = inject(RdxDropdownMenuItemRadioGroupDirective);
+
+    @Input()
+    get value() {
+        return this._value || this.id;
+    }
+
+    set value(value: string) {
+        this._value = value;
+    }
+
+    private _value: string | undefined;
+
+    /** An ID to identify this radio item to the `UniqueSelectionDispatcher`. */
+    private id = `${nextId++}`;
+
+    private removeDispatcherListener!: () => void;
+
+    constructor() {
+        super();
+
+        this.triggered.subscribe(() => {
+            if (!this.disabled) {
+                this.selectionDispatcher.notify(this.value, '');
+
+                this.group.valueChange.emit(this.value);
+            }
+        });
+    }
+
+    ngAfterContentInit() {
+        this.removeDispatcherListener = this.selectionDispatcher.listen((id: string) => {
+            this.checked = this.value === id;
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+        this.removeDispatcherListener();
+    }
+}

package/dropdown-menu/src/dropdown-menu-item-selectable.ts

@@ -0,0 +1,18 @@
+import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';
+import { RdxDropdownMenuItemDirective } from './dropdown-menu-item.directive';
+
+/** Base class providing checked state for selectable DropdownMenuItems. */
+@Directive({
+    standalone: true,
+    host: {
+        '[attr.aria-checked]': '!!checked',
+        '[attr.aria-disabled]': 'disabled || null',
+        '[attr.data-state]': 'checked ? "checked" : "unchecked"'
+    }
+})
+export class RdxDropdownMenuSelectable extends RdxDropdownMenuItemDirective {
+    /** Whether the element is checked */
+    @Input({ transform: booleanAttribute }) checked: boolean = false;
+
+    @Output() readonly checkedChange = new EventEmitter<boolean>();
+}

package/dropdown-menu/src/dropdown-menu-item.directive.ts

@@ -0,0 +1,66 @@
+import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';
+import { booleanAttribute, Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';
+
+@Directive({
+    selector: '[rdxDropdownMenuItem]',
+    standalone: true,
+    host: {
+        type: 'button',
+        // todo horizontal ?
+        '[attr.data-orientation]': '"vertical"',
+        '[attr.data-highlighted]': 'highlighted ? "" : null',
+        '[attr.data-disabled]': 'disabled ? "" : null',
+        '[attr.disabled]': 'disabled ? "" : null',
+        '(pointermove)': 'onPointerMove()',
+        '(focus)': 'menu.highlighted.next(this)',
+        '(keydown)': 'onKeydown($event)'
+    },
+    providers: [
+        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
+        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
+    ]
+})
+export class RdxDropdownMenuItemDirective extends CdkMenuItem {
+    protected readonly menu = inject(RdxDropdownMenuContentDirective);
+    protected readonly nativeElement = inject(ElementRef).nativeElement;
+
+    highlighted = false;
+
+    @Input({ transform: booleanAttribute }) override disabled: boolean = false;
+
+    @Output() readonly onSelect = new EventEmitter<void>();
+
+    constructor() {
+        super();
+
+        this.menu.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {
+            if (value !== this) {
+                this.highlighted = false;
+            }
+        });
+
+        this.triggered.subscribe(this.onSelect);
+    }
+
+    protected onPointerMove() {
+        this.nativeElement.focus({ preventScroll: true });
+        this.menu.updateActiveItem(this);
+    }
+
+    protected onKeydown(event: KeyboardEvent) {
+        if (this.nativeElement.tagName !== 'BUTTON' && ['Enter', ' '].includes(event.key)) {
+            event.preventDefault();
+        }
+
+        if (event.key === 'Escape') {
+            if (!this.menu.closeOnEscape) {
+                event.stopPropagation();
+            } else {
+                this.menu.onEscapeKeyDown(event);
+            }
+        }
+    }
+}

package/dropdown-menu/src/dropdown-menu-label.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[rdxDropdownMenuLabel]',
+    standalone: true
+})
+export class RdxDropdownMenuLabelDirective {}