@radix-ng/primitives 0.11.0 → 0.12.0

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
+
+@Directive({
+    selector: '[rdxDropdownMenuSeparator]',
+    standalone: true,
+    hostDirectives: [RdxSeparatorRootDirective],
+    host: {
+        role: 'separator',
+        '[attr.aria-orientation]': "'horizontal'"
+    }
+})
+export class RdxDropdownMenuSeparatorDirective {}

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

@@ -0,0 +1,185 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuTrigger, MENU_TRIGGER, PARENT_OR_NEW_MENU_STACK_PROVIDER } from '@angular/cdk/menu';
+import { ConnectedPosition, OverlayRef, VerticalConnectionPos } from '@angular/cdk/overlay';
+import { booleanAttribute, Directive, Input, input, numberAttribute, TemplateRef } from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+
+export enum DropdownSide {
+    Top = 'top',
+    Right = 'right',
+    Bottom = 'bottom',
+    Left = 'left'
+}
+
+export enum DropdownAlign {
+    Start = 'start',
+    Center = 'center',
+    End = 'end'
+}
+
+export const mapRdxAlignToCdkPosition = {
+    start: 'top',
+    center: 'center',
+    end: 'bottom'
+};
+
+const dropdownPositions: Record<DropdownSide, ConnectedPosition> = {
+    top: {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: 0,
+        offsetY: 0
+    },
+    right: {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 0
+    },
+    bottom: {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 0
+    },
+    left: {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 0
+    }
+};
+
+@Directive({
+    selector: '[rdxDropdownMenuTrigger]',
+    standalone: true,
+    host: {
+        type: 'button',
+        '[attr.aria-haspopup]': "'menu'",
+        '[attr.aria-expanded]': 'isOpen()',
+        '[attr.data-state]': "isOpen() ? 'open': 'closed'",
+        '[attr.data-disabled]': "disabled() ? '' : undefined",
+        '[disabled]': 'disabled()',
+
+        '(pointerdown)': 'onPointerDown($event)'
+    },
+    providers: [
+        { provide: CdkMenuTrigger, useExisting: RdxDropdownMenuTriggerDirective },
+        { provide: MENU_TRIGGER, useExisting: CdkMenuTrigger },
+        PARENT_OR_NEW_MENU_STACK_PROVIDER
+    ]
+})
+export class RdxDropdownMenuTriggerDirective extends CdkMenuTrigger {
+    /**
+     * @ignore
+     */
+    readonly disabled = input<boolean, BooleanInput>(false, {
+        transform: booleanAttribute
+    });
+
+    @Input()
+    set rdxDropdownMenuTrigger(value: TemplateRef<unknown> | null) {
+        this.menuTemplateRef = value;
+    }
+
+    @Input()
+    set side(value: DropdownSide) {
+        if (!Object.values(DropdownSide).includes(value)) {
+            throw new Error(`Unknown side: ${value}`);
+        }
+
+        this._side = value;
+
+        this.menuPosition[0] = dropdownPositions[value];
+    }
+
+    get side() {
+        return this._side;
+    }
+
+    private _side: DropdownSide = DropdownSide.Bottom;
+
+    @Input()
+    set align(value: DropdownAlign) {
+        if (!Object.values(DropdownAlign).includes(value)) {
+            throw new Error(`Unknown align: ${value}`);
+        }
+
+        this._align = value;
+
+        if (this.isVertical) {
+            this.defaultPosition.overlayX = this.defaultPosition.originX = value;
+        } else {
+            this.defaultPosition.overlayY = this.defaultPosition.originY = mapRdxAlignToCdkPosition[
+                value
+            ] as VerticalConnectionPos;
+        }
+    }
+
+    get align() {
+        return this._align;
+    }
+
+    private _align: DropdownAlign = DropdownAlign.Start;
+
+    @Input({ transform: numberAttribute })
+    set sideOffset(value: number) {
+        // todo need invert value for top and left
+        if (this.isVertical) {
+            this.defaultPosition.offsetY = value;
+        } else {
+            this.defaultPosition.offsetX = value;
+        }
+    }
+
+    @Input({ transform: numberAttribute })
+    set alignOffset(value: number) {
+        // todo need invert value for top and left
+        if (this.isVertical) {
+            this.defaultPosition.offsetX = value;
+        } else {
+            this.defaultPosition.offsetY = value;
+        }
+    }
+
+    onOpenChange = outputFromObservable(this.opened);
+
+    get isVertical(): boolean {
+        return this._side === DropdownSide.Top || this._side === DropdownSide.Bottom;
+    }
+
+    get defaultPosition(): ConnectedPosition {
+        return this.menuPosition[0];
+    }
+
+    constructor() {
+        super();
+        // todo priority
+        this.menuPosition = [{ ...dropdownPositions[DropdownSide.Bottom] }];
+    }
+
+    onPointerDown($event: MouseEvent) {
+        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+        // but not when the control key is pressed (avoiding MacOS right click)
+        if (!this.disabled() && $event.button === 0 && !$event.ctrlKey) {
+            /* empty */
+            if (!this.isOpen()) {
+                // prevent trigger focusing when opening
+                // this allows the content to be given focus without competition
+                $event.preventDefault();
+            }
+        }
+    }
+
+    getOverlayRef(): OverlayRef | null {
+        return this.overlayRef;
+    }
+}

package/dropdown-menu/stories/dropdown-menu-item-checkbox.component.ts

@@ -0,0 +1,104 @@
+import { Component } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { RdxDropdownMenuContentDirective } from '../src/dropdown-menu-content.directive';
+import { RdxDropdownMenuItemCheckboxDirective } from '../src/dropdown-menu-item-checkbox.directive';
+import { RdxDropdownMenuItemIndicatorDirective } from '../src/dropdown-menu-item-indicator.directive';
+import { RdxDropdownMenuItemDirective } from '../src/dropdown-menu-item.directive';
+import { RdxDropdownMenuLabelDirective } from '../src/dropdown-menu-label.directive';
+import { RdxDropdownMenuSeparatorDirective } from '../src/dropdown-menu-separator.directive';
+import { RdxDropdownMenuTriggerDirective } from '../src/dropdown-menu-trigger.directive';
+
+@Component({
+    selector: 'dropdown-menu-item-checkbox',
+    styleUrl: 'dropdown-menu-item-checkbox.styles.scss',
+    template: `
+        <button
+            class="IconButton"
+            [rdxDropdownMenuTrigger]="menu"
+            sideOffset="4"
+            alignOffset="-5"
+            aria-label="Customise options"
+        >
+            <lucide-angular size="16" name="menu" style="height: 1.2rem;" />
+        </button>
+
+        <ng-template #menu>
+            <div class="DropdownMenuContent" [onEscapeKeyDown]="onEscapeKeyDown" rdxDropdownMenuContent>
+                <button
+                    class="DropdownMenuItem"
+                    [(checked)]="itemState"
+                    (onSelect)="onSelect()"
+                    rdxDropdownMenuItemCheckbox
+                >
+                    <div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
+                        <lucide-icon size="16" name="check" />
+                    </div>
+                    New Tab
+                    <div class="RightSlot">⌘ T</div>
+                </button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItemCheckbox disabled>
+                    New Window
+                    <div class="RightSlot">⌘ N</div>
+                </button>
+                <button
+                    class="DropdownMenuItem"
+                    [(checked)]="itemState2"
+                    (onSelect)="onSelect()"
+                    rdxDropdownMenuItemCheckbox
+                >
+                    <div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
+                        <lucide-icon size="16" name="check" />
+                    </div>
+                    New Incognito Window
+                </button>
+                <div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
+                <div class="DropdownMenuLabel" rdxDropdownMenuLabel>Label</div>
+                <button class="DropdownMenuItem" [rdxDropdownMenuTrigger]="share" [side]="'right'" rdxDropdownMenuItem>
+                    Share
+                    <div class="RightSlot">></div>
+                </button>
+                <div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
+                <button class="DropdownMenuItem" (onSelect)="onSelect()" rdxDropdownMenuItem>
+                    Print…
+                    <div class="RightSlot">⌘ P</div>
+                </button>
+            </div>
+        </ng-template>
+
+        <ng-template #share>
+            <div class="DropdownMenuSubContent" rdxDropdownMenuContent>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Undo</button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Redo</button>
+                <div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Cut</button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Copy</button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Paste</button>
+            </div>
+        </ng-template>
+    `,
+    standalone: true,
+    imports: [
+        RdxDropdownMenuTriggerDirective,
+        RdxDropdownMenuItemDirective,
+        RdxDropdownMenuItemCheckboxDirective,
+        RdxDropdownMenuItemIndicatorDirective,
+        RdxDropdownMenuSeparatorDirective,
+        RdxDropdownMenuContentDirective,
+        RdxDropdownMenuLabelDirective,
+        LucideAngularModule
+    ]
+})
+export class DropdownMenuItemCheckboxExampleComponent {
+    itemState = true;
+    itemState2 = false;
+
+    onSelect() {
+        console.log('onSelect');
+    }
+
+    onEscapeKeyDown(event: Event) {
+        event.stopPropagation();
+
+        console.log('onEscapeKeyDown: ', event);
+    }
+}

package/dropdown-menu/stories/dropdown-menu-item-checkbox.styles.scss

@@ -0,0 +1,106 @@
+button {
+    all: unset;
+}
+
+.DropdownMenuContent,
+.DropdownMenuSubContent {
+    flex-direction: column;
+    display: inline-flex;
+    min-width: 220px;
+    background-color: white;
+    border-radius: 6px;
+    padding: 5px;
+    box-shadow:
+        0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+        0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    will-change: transform, opacity;
+}
+
+.DropdownMenuItem,
+.DropdownMenuCheckboxItem,
+.DropdownMenuRadioItem,
+.DropdownMenuSubTrigger {
+    font-size: 13px;
+    line-height: 1;
+    color: var(--violet-11);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    height: 25px;
+    position: relative;
+    padding: 0 5px 0 25px;
+    user-select: none;
+    outline: none;
+}
+
+.DropdownMenuItem[data-disabled],
+.DropdownMenuCheckboxItem[data-disabled],
+.DropdownMenuRadioItem[data-disabled] {
+    color: var(--mauve-8);
+    pointer-events: none;
+}
+
+.DropdownMenuItem[data-highlighted],
+.DropdownMenuCheckboxItem[data-highlighted],
+.DropdownMenuRadioItem[data-highlighted] {
+    background-color: var(--violet-9);
+    color: var(--violet-1);
+}
+
+.DropdownMenuSeparator {
+    height: 1px;
+    background-color: var(--violet-6);
+    margin: 5px;
+}
+
+.DropdownMenuLabel {
+    padding-left: 25px;
+    font-size: 12px;
+    line-height: 25px;
+    color: var(--mauve-11);
+}
+
+.IconButton {
+    font-family: inherit;
+    border-radius: 100%;
+    height: 35px;
+    width: 35px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet-11);
+    background-color: white;
+    box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.DropdownMenuSubTrigger[data-state='open'] {
+    background-color: var(--violet-4);
+    color: var(--violet-11);
+}
+
+.DropdownMenuItemIndicator {
+    position: absolute;
+    left: 4px;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.IconButton:hover {
+    background-color: var(--violet-3);
+}
+
+.IconButton:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.RightSlot {
+    margin-left: auto;
+    padding-left: 20px;
+    color: var(--mauve-9);
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    justify-content: flex-end;
+}

package/dropdown-menu/stories/dropdown-menu-item-radio.component.ts

@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { RdxDropdownMenuContentDirective } from '../src/dropdown-menu-content.directive';
+import { RdxDropdownMenuItemIndicatorDirective } from '../src/dropdown-menu-item-indicator.directive';
+import { RdxDropdownMenuItemRadioGroupDirective } from '../src/dropdown-menu-item-radio-group.directive';
+import { RdxDropdownMenuItemRadioDirective } from '../src/dropdown-menu-item-radio.directive';
+import { RdxDropdownMenuItemDirective } from '../src/dropdown-menu-item.directive';
+import { RdxDropdownMenuLabelDirective } from '../src/dropdown-menu-label.directive';
+import { RdxDropdownMenuSeparatorDirective } from '../src/dropdown-menu-separator.directive';
+import { RdxDropdownMenuTriggerDirective } from '../src/dropdown-menu-trigger.directive';
+
+@Component({
+    selector: 'dropdown-menu-item-radio',
+    styleUrl: 'dropdown-menu-item-radio.styles.scss',
+    template: `
+        <button
+            class="IconButton"
+            [rdxDropdownMenuTrigger]="menu"
+            sideOffset="4"
+            alignOffset="-5"
+            aria-label="Customise options"
+        >
+            <lucide-angular size="16" name="menu" style="height: 1.2rem;" />
+        </button>
+        <ng-template #menu>
+            <div class="DropdownMenuContent" [closeOnEscape]="false" rdxDropdownMenuContent>
+                <div [(value)]="selectedValue" (valueChange)="onValueChange($event)" rdxDropdownMenuItemRadioGroup>
+                    <div class="DropdownMenuItem" [value]="'1'" rdxDropdownMenuItemRadio>
+                        <div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
+                            <lucide-icon size="16" name="dot" strokeWidth="8" />
+                        </div>
+                        New Tab
+                        <div class="RightSlot">⌘ T</div>
+                    </div>
+                    <div class="DropdownMenuItem" [value]="'2'" disabled rdxDropdownMenuItemRadio>
+                        <div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
+                            <lucide-icon size="16" name="dot" strokeWidth="8" />
+                        </div>
+                        New Window
+                        <div class="RightSlot">⌘ N</div>
+                    </div>
+                    <div class="DropdownMenuItem" [value]="'3'" rdxDropdownMenuItemRadio>
+                        <div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
+                            <lucide-icon size="16" name="dot" strokeWidth="8" />
+                        </div>
+                        New Incognito Window
+                    </div>
+                </div>
+                <div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
+                <div class="DropdownMenuLabel" rdxDropdownMenuLabel>Label</div>
+                <button class="DropdownMenuItem" [rdxDropdownMenuTrigger]="share" [side]="'right'" rdxDropdownMenuItem>
+                    Share
+                    <div class="RightSlot">></div>
+                </button>
+                <div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>
+                    Print…
+                    <div class="RightSlot">⌘ P</div>
+                </button>
+            </div>
+        </ng-template>
+
+        <ng-template #share>
+            <div class="DropdownMenuSubContent" rdxDropdownMenuContent>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Undo</button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Redo</button>
+                <div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Cut</button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Copy</button>
+                <button class="DropdownMenuItem" rdxDropdownMenuItem>Paste</button>
+            </div>
+        </ng-template>
+    `,
+    standalone: true,
+    imports: [
+        RdxDropdownMenuTriggerDirective,
+        RdxDropdownMenuItemDirective,
+        RdxDropdownMenuItemRadioDirective,
+        RdxDropdownMenuItemRadioGroupDirective,
+        RdxDropdownMenuItemIndicatorDirective,
+        RdxDropdownMenuSeparatorDirective,
+        RdxDropdownMenuContentDirective,
+        RdxDropdownMenuLabelDirective,
+        LucideAngularModule
+    ]
+})
+export class DropdownMenuItemRadioExampleComponent {
+    selectedValue = '2';
+
+    onValueChange(value: string) {
+        this.selectedValue = value;
+
+        console.log('this.selectedValue', this.selectedValue);
+    }
+}

package/dropdown-menu/stories/dropdown-menu-item-radio.styles.scss

@@ -0,0 +1,106 @@
+button {
+    all: unset;
+}
+
+.DropdownMenuContent,
+.DropdownMenuSubContent {
+    flex-direction: column;
+    display: inline-flex;
+    min-width: 220px;
+    background-color: white;
+    border-radius: 6px;
+    padding: 5px;
+    box-shadow:
+        0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+        0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    will-change: transform, opacity;
+}
+
+.DropdownMenuItem,
+.DropdownMenuCheckboxItem,
+.DropdownMenuRadioItem,
+.DropdownMenuSubTrigger {
+    font-size: 13px;
+    line-height: 1;
+    color: var(--violet-11);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    height: 25px;
+    position: relative;
+    padding: 0 5px 0 25px;
+    user-select: none;
+    outline: none;
+}
+
+.DropdownMenuItem[data-disabled],
+.DropdownMenuCheckboxItem[data-disabled],
+.DropdownMenuRadioItem[data-disabled] {
+    color: var(--mauve-8);
+    pointer-events: none;
+}
+
+.DropdownMenuItem[data-highlighted],
+.DropdownMenuCheckboxItem[data-highlighted],
+.DropdownMenuRadioItem[data-highlighted] {
+    background-color: var(--violet-9);
+    color: var(--violet-1);
+}
+
+.DropdownMenuSeparator {
+    height: 1px;
+    background-color: var(--violet-6);
+    margin: 5px;
+}
+
+.DropdownMenuLabel {
+    padding-left: 25px;
+    font-size: 12px;
+    line-height: 25px;
+    color: var(--mauve-11);
+}
+
+.IconButton {
+    font-family: inherit;
+    border-radius: 100%;
+    height: 35px;
+    width: 35px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet-11);
+    background-color: white;
+    box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.DropdownMenuSubTrigger[data-state='open'] {
+    background-color: var(--violet-4);
+    color: var(--violet-11);
+}
+
+.DropdownMenuItemIndicator {
+    position: absolute;
+    left: 4px;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.IconButton:hover {
+    background-color: var(--violet-3);
+}
+
+.IconButton:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.RightSlot {
+    margin-left: auto;
+    padding-left: 20px;
+    color: var(--mauve-9);
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    justify-content: flex-end;
+}

package/dropdown-menu/stories/dropdown.docs.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as DropdownStories from './dropdown.stories';
+
+<Meta title="Primitives/Dropdown Menu" />
+
+# Dropdown Menu
+
+#### Displays a menu to the user—such as a set of actions or functions—triggered by a button.
+
+<Canvas sourceState="hidden" of={DropdownStories.Default} height="300px" />
+
+## Features
+
+- ✅ Supports submenus with configurable reading direction.
+- ✅ Supports items, labels, groups of items.
+- ✅ Customize side, alignment, offsets.
+
+ToDo
+
+- Can be controlled or uncontrolled.
+- Supports checkable items (single or multiple) with optional indeterminate state.
+- Supports modal and non-modal modes.
+- Optionally render a pointing arrow.
+- Focus is fully managed.
+- Full keyboard navigation.
+- Typeahead support.
+- Dismissing and layering behavior is highly customizable.