@radix-ng/primitives 0.12.1 → 0.13.0

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

@@ -1,185 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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.