@radix-ng/primitives 0.12.1 → 0.13.0

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

@@ -1,65 +0,0 @@
-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 { RdxContextMenuContentDirective } from './context-menu-content.directive';
-
-@Directive({
-    selector: '[rdxContextMenuItem]',
-    standalone: true,
-    host: {
-        type: 'button',
-        '[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: RdxContextMenuItemDirective },
-        { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-    ]
-})
-export class RdxContextMenuItemDirective extends CdkMenuItem {
-    protected readonly menu = inject(RdxContextMenuContentDirective);
-    protected readonly nativeElement = inject(ElementRef).nativeElement;
-
-    highlighted = false;
-
-    @Input({ transform: booleanAttribute }) override disabled = 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/context-menu/src/context-menu-label.directive.ts

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

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

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

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

@@ -1,82 +0,0 @@
-import { CdkContextMenuTrigger, MENU_STACK, MENU_TRIGGER, MenuStack } from '@angular/cdk/menu';
-import { ConnectedPosition } from '@angular/cdk/overlay';
-import { booleanAttribute, Directive, Input, numberAttribute, TemplateRef } from '@angular/core';
-import { outputFromObservable } from '@angular/core/rxjs-interop';
-
-export enum ContextMenuSide {
-    Top = 'top',
-    Right = 'right',
-    Bottom = 'bottom',
-    Left = 'left'
-}
-
-const ContextMenuPositions: Record<ContextMenuSide, 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: '[rdxContextMenuTrigger]',
-    standalone: true,
-    host: {
-        '[attr.data-state]': "isOpen() ? 'open': 'closed'",
-        '[attr.data-disabled]': "disabled ? '' : null",
-
-        '(contextmenu)': '_openOnContextMenu($event)'
-    },
-    providers: [
-        { provide: MENU_TRIGGER, useExisting: RdxContextMenuTriggerDirective },
-        { provide: MENU_STACK, useClass: MenuStack }
-    ]
-})
-export class RdxContextMenuTriggerDirective extends CdkContextMenuTrigger {
-    override menuPosition = [{ ...ContextMenuPositions[ContextMenuSide.Bottom] }];
-
-    @Input()
-    set rdxContextMenuTrigger(value: TemplateRef<unknown> | null) {
-        this.menuTemplateRef = value;
-    }
-
-    @Input({ transform: numberAttribute })
-    set alignOffset(value: number) {
-        this.defaultPosition.offsetX = value;
-    }
-
-    @Input({ transform: booleanAttribute }) override disabled = false;
-
-    onOpenChange = outputFromObservable(this.opened);
-
-    get defaultPosition(): ConnectedPosition {
-        return this.menuPosition[0];
-    }
-}

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

@@ -1,23 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as ContextMenuStories from './context-menu.stories';
-
-<Meta title="Primitives/Context Menu" />
-
-# Context Menu
-
-#### Displays a menu to the user—such as a set of actions or functions—triggered by a button.
-
-<Canvas sourceState="hidden" of={ContextMenuStories.Default} height="300px" />
-
-## Features
-
-- ✅ Supports submenus with configurable reading direction.
-- ✅ Supports items, labels, groups of items.
-- ✅ Supports checkable items (single or multiple) with optional indeterminate state.
-- ✅ Supports modal and non-modal modes.
-- ✅ Customize side, alignment, offsets, collision handling.
-- ✅ Focus is fully managed.
-- ✅ Full keyboard navigation.
-- ✅ Typeahead support.
-- ✅ Dismissing and layering behavior is highly customizable.
-- ✅ Triggers with a long press on touch devices

package/context-menu/stories/context-menu.stories.ts

@@ -1,253 +0,0 @@
-import {
-    RdxDropdownMenuContentDirective,
-    RdxDropdownMenuItemDirective,
-    RdxDropdownMenuTriggerDirective
-} from '@radix-ng/primitives/dropdown-menu';
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { Check, Dot, LucideAngularModule, Menu } from 'lucide-angular';
-
-import { RdxContextMenuContentDirective } from '../src/context-menu-content.directive';
-import { RdxContextMenuItemCheckboxDirective } from '../src/context-menu-item-checkbox.directive';
-import { RdxContextMenuItemIndicatorDirective } from '../src/context-menu-item-indicator.directive';
-import { RdxContextMenuItemRadioGroupDirective } from '../src/context-menu-item-radio-group.directive';
-import { RdxContextMenuItemRadioDirective } from '../src/context-menu-item-radio.directive';
-import { RdxContextMenuItemDirective } from '../src/context-menu-item.directive';
-import { RdxContextMenuSeparatorDirective } from '../src/context-menu-separator.directive';
-import { RdxContextMenuTriggerDirective } from '../src/context-menu-trigger.directive';
-
-export default {
-    title: 'Primitives/Context Menu',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                RdxContextMenuTriggerDirective,
-                RdxDropdownMenuTriggerDirective,
-                RdxContextMenuItemDirective,
-                RdxDropdownMenuItemDirective,
-                RdxContextMenuItemCheckboxDirective,
-                RdxContextMenuItemRadioDirective,
-                RdxContextMenuItemRadioGroupDirective,
-                RdxContextMenuItemIndicatorDirective,
-                RdxContextMenuSeparatorDirective,
-                RdxContextMenuContentDirective,
-                RdxDropdownMenuContentDirective,
-                LucideAngularModule,
-                LucideAngularModule.pick({ Menu, Check, Dot })
-            ]
-        }),
-        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 = {
-    render: () => ({
-        template: `
-<div class="context-menu-trigger"
-    [rdxContextMenuTrigger]="menu">
-    Right click here
-</div>
-
-<ng-template #menu>
-  <div class="ContextMenuContent" rdxContextMenuContent>
-    <button class="ContextMenuItem" rdxContextMenuItem>
-        Back <div class="RightSlot">⌘ + [</div>
-    </button>
-    <button class="ContextMenuItem" rdxContextMenuItem disabled>
-        Forward <div class="RightSlot">⌘ + ]</div>
-    </button>
-    <button class="ContextMenuItem" rdxContextMenuItem>
-        Reload <div class="RightSlot">⌘ + R</div>
-    </button>
-    <button
-        class="ContextMenuItem"
-        rdxContextMenuItem
-        [rdxDropdownMenuTrigger]="share"
-        [side]="'right'"
-    >
-        More Tools <div class="RightSlot">></div>
-    </button>
-
-    <div rdxContextMenuSeparator class="ContextMenuSeparator"></div>
-
-    <button class="ContextMenuItem" rdxContextMenuItemCheckbox [checked]="true">
-        <div class="ContextMenuItemIndicator" rdxContextMenuItemIndicator>
-            <lucide-icon size="16" name="check"></lucide-icon>
-        </div>
-        Show Bookmarks <div class="RightSlot">⌘ + B</div>
-    </button>
-    <button class="ContextMenuItem" rdxContextMenuItemCheckbox>
-        <div class="ContextMenuItemIndicator" rdxContextMenuItemIndicator>
-            <lucide-icon size="16" name="check"></lucide-icon>
-        </div>
-        Show Full URLs
-    </button>
-
-    <div rdxContextMenuSeparator class="ContextMenuSeparator"></div>
-
-    <div class="ContextMenuLabel" rdxContextMenuLabel>People</div>
-    <div class="ContextMenuItemRadioGroup" rdxContextMenuItemRadioGroup [value]="'1'">
-        <button class="ContextMenuItem" rdxContextMenuItemRadio [value]="'1'">
-            <div class="ContextMenuItemIndicator" rdxContextMenuItemIndicator>
-                <lucide-icon size="16" name="dot" strokeWidth="8"></lucide-icon>
-            </div>
-            Pedro Duarte
-        </button>
-        <button class="ContextMenuItem" rdxContextMenuItemRadio [value]="'2'">
-            <div class="ContextMenuItemIndicator" rdxContextMenuItemIndicator>
-                <lucide-icon size="16" name="dot" strokeWidth="8"></lucide-icon>
-            </div>
-            Colm Tuite
-        </button>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #share>
-  <div class="DropdownMenuContent" rdxDropdownMenuContent>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Undo</button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Redo</button>
-    <div rdxDropdownMenuSeparator class="DropdownMenuSeparator"></div>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Cut</button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Copy</button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Paste</button>
-  </div>
-</ng-template>
-
-<style>
-    .context-menu-trigger {
-        display: block;
-        border: 2px dashed #fff;
-        color: #fff;
-        border-radius: 4px;
-        font-size: 15px;
-        -webkit-user-select: none;
-        user-select: none;
-        padding: 45px 0;
-        width: 300px;
-        text-align: center;
-
-      &:focus: {
-        outline: none;
-        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
-      },
-
-        &[data-state="open"]: {
-            background-color: lightblue;
-            /*display: flex;*/
-            /*align-items: center;*/
-            /*justify-content: center;*/
-            /*width: 200vw;*/
-            /*height: 200vh;*/
-            /*gap: 20;*/
-        }
-    }
-/* reset */
-button {
-  all: unset;
-}
-
-.ContextMenuContent,
-.DropdownMenuContent {
-  flex-direction: column;
-  display: inline-flex;
-  min-width: 220px;
-  background-color: white;
-  border-radius: 6px;
-  padding: 5px;
-  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
-  will-change: transform, opacity;
-}
-
-.ContextMenuItem,
-.DropdownMenuItem,
-.ContextMenuCheckboxItem,
-.ContextMenuRadioItem {
-  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;
-}
-
-.ContextMenuItem[data-disabled],
-.DropdownMenuItem[data-disabled],
-.ContextMenuCheckboxItem[data-disabled],
-.ContextMenuRadioItem[data-disabled] {
-  color: var(--mauve-8);
-  pointer-events: none;
-}
-.ContextMenuItem[data-highlighted],
-.DropdownMenuItem[data-highlighted],
-.ContextMenuCheckboxItem[data-highlighted],
-.ContextMenuRadioItem[data-highlighted] {
-  background-color: var(--violet-9);
-  color: var(--violet-1);
-}
-
-.DropdownMenuSeparator,
-.ContextMenuSeparator {
-  height: 1px;
-  background-color: var(--violet-6);
-  margin: 5px;
-}
-
-.ContextMenuLabel {
-  padding-left: 25px;
-  font-size: 12px;
-  line-height: 25px;
-  color: var(--mauve-11);
-}
-
-.ContextMenuItemIndicator {
-  position: absolute;
-  left: 4px;
-  width: 25px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ContextMenuItemRadioGroup {
-  display: flex;
-  flex-direction: column;
-}
-
-.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;
-}
-
-</style>
-`
-    })
-};

package/core/index.ts

@@ -1,3 +0,0 @@
-export * from './src/accessor/provide-value-accessor';
-export * from './src/auto-focus.directive';
-export * from './src/inject-ng-control';

package/core/src/accessor/provide-value-accessor.ts

@@ -1,20 +0,0 @@
-import { Provider, Type } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Include in the providers section of a component which utilizes ControlValueAccessor to redundant code.
- *
- * ```ts
- * @Directive({
- *   providers: [provideValueAccessor(ExampleDirective)]
- *}
- * export class ExampleDirective{}
- * ```
- */
-export function provideValueAccessor(type: Type<never>): Provider {
-    return {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: type,
-        multi: true
-    };
-}

package/core/src/auto-focus.directive.ts

@@ -1,81 +0,0 @@
-import { booleanAttribute, Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
-
-/*
- * <div [rdxAutoFocus]="true"></div>
- */
-
-@Directive({
-    selector: '[rdxAutoFocus]',
-    standalone: true
-})
-export class RdxAutoFocusDirective {
-    #elementRef = inject(ElementRef);
-    #ngZone = inject(NgZone);
-
-    private _autoSelect = false;
-
-    /**
-     * @default false
-     */
-    @Input({ alias: 'rdxAutoFocus', transform: booleanAttribute })
-    set autoFocus(value: boolean) {
-        if (value) {
-            // Note: Running this outside Angular's zone because `element.focus()` does not trigger change detection.
-            this.#ngZone.runOutsideAngular(() =>
-                // Note: `element.focus()` causes re-layout which might lead to frame drops on slower devices.
-                // https://gist.github.com/paulirish/5d52fb081b3570c81e3a#setting-focus
-                // `setTimeout` is a macrotask executed within the current rendering frame.
-                // Animation tasks are executed in the next rendering frame.
-                reqAnimationFrame(() => {
-                    this.#elementRef.nativeElement.focus();
-                    if (this._autoSelect && this.#elementRef.nativeElement.select) {
-                        this.#elementRef.nativeElement.select();
-                    }
-                })
-            );
-        }
-    }
-
-    // Setter for autoSelect attribute to enable text selection when autoFocus is true.
-    @Input({ transform: booleanAttribute })
-    set autoSelect(value: boolean) {
-        this._autoSelect = value;
-    }
-}
-
-const availablePrefixes = ['moz', 'ms', 'webkit'];
-
-function requestAnimationFramePolyfill(): typeof requestAnimationFrame {
-    let lastTime = 0;
-
-    return function (callback: FrameRequestCallback): number {
-        const currTime = new Date().getTime();
-        const timeToCall = Math.max(0, 16 - (currTime - lastTime));
-
-        const id = setTimeout(() => {
-            callback(currTime + timeToCall);
-        }, timeToCall) as any;
-
-        lastTime = currTime + timeToCall;
-
-        return id;
-    };
-}
-
-// Function to get the appropriate requestAnimationFrame method with fallback to polyfill.
-function getRequestAnimationFrame(): typeof requestAnimationFrame {
-    if (typeof window === 'undefined') {
-        return () => 0;
-    }
-    if (window.requestAnimationFrame) {
-        // https://github.com/vuejs/vue/issues/4465
-        return window.requestAnimationFrame.bind(window);
-    }
-
-    const prefix = availablePrefixes.filter((key) => `${key}RequestAnimationFrame` in window)[0];
-
-    return prefix ? (window as any)[`${prefix}RequestAnimationFrame`] : requestAnimationFramePolyfill();
-}
-
-// Get the requestAnimationFrame function or its polyfill.
-const reqAnimationFrame = getRequestAnimationFrame();

package/core/src/inject-ng-control.ts

@@ -1,28 +0,0 @@
-import { inject } from '@angular/core';
-import { FormControlDirective, FormControlName, NgControl, NgModel } from '@angular/forms';
-
-export function injectNgControl(params: {
-    optional: true;
-}): FormControlDirective | FormControlName | NgModel | undefined;
-export function injectNgControl(params: { optional: false }): FormControlDirective | FormControlName | NgModel;
-export function injectNgControl(): FormControlDirective | FormControlName | NgModel;
-
-export function injectNgControl(params?: { optional: true } | { optional: false }) {
-    const ngControl = inject(NgControl, { self: true, optional: true });
-
-    if (!params?.optional && !ngControl) throw new Error('NgControl not found');
-
-    if (
-        ngControl instanceof FormControlDirective ||
-        ngControl instanceof FormControlName ||
-        ngControl instanceof NgModel
-    ) {
-        return ngControl;
-    }
-
-    if (params?.optional) {
-        return undefined;
-    }
-
-    throw new Error('NgControl is not an instance of FormControlDirective, FormControlName or NgModel');
-}

package/core/src/mount.ts

@@ -1,27 +0,0 @@
-import { AfterViewInit, Directive } from '@angular/core';
-
-const callAll =
-    <T extends (...a: never[]) => void>(...fns: (T | undefined)[]) =>
-    (...a: Parameters<T>) => {
-        fns.forEach(function (fn) {
-            fn?.(...a);
-        });
-    };
-
-@Directive({
-    standalone: true
-})
-export class OnMountDirective implements AfterViewInit {
-    #onMountFns?: () => void;
-
-    onMount(fn: () => void) {
-        this.#onMountFns = callAll(this.#onMountFns, fn);
-    }
-
-    ngAfterViewInit() {
-        if (!this.#onMountFns) {
-            throw new Error('The onMount function must be called before the component is mounted.');
-        }
-        this.#onMountFns();
-    }
-}

package/dialog/__tests__/dialog-content.directive.spec.ts

@@ -1,77 +0,0 @@
-import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { Subject } from 'rxjs';
-import { RdxDialogContentDirective } from '../src/dialog-content.directive';
-import { RdxDialogRef } from '../src/dialog-ref';
-
-@Component({
-    template: '<div rdxDialogContent>Dialog Content</div>'
-})
-class TestComponent {}
-
-describe('RdxDialogContentDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
-    let directiveElement: DebugElement;
-    let directive: RdxDialogContentDirective;
-    let dialogRefMock: jest.Mocked<RdxDialogRef>;
-    let closedSubject: Subject<any>;
-
-    beforeEach(async () => {
-        closedSubject = new Subject();
-        dialogRefMock = {
-            closed$: closedSubject.asObservable(),
-            close: jest.fn(),
-            dismiss: jest.fn()
-        } as any;
-
-        await TestBed.configureTestingModule({
-            declarations: [TestComponent],
-            imports: [RdxDialogContentDirective],
-            providers: [
-                { provide: RdxDialogRef, useValue: dialogRefMock }]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(TestComponent);
-        directiveElement = fixture.debugElement.query(By.directive(RdxDialogContentDirective));
-        directive = directiveElement.injector.get(RdxDialogContentDirective);
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(directive).toBeTruthy();
-    });
-
-    it('should have correct initial state', () => {
-        expect(directive['state']()).toBe('open');
-    });
-
-    it('should update state when dialog is closed', () => {
-        closedSubject.next(undefined);
-        fixture.detectChanges();
-        expect(directive['state']()).toBe('closed');
-    });
-
-    it('should call dialogRef.dismiss when dismiss method is called', () => {
-        directive.dismiss();
-        expect(dialogRefMock.dismiss).toHaveBeenCalled();
-    });
-
-    it('should call dialogRef.dismiss when dismiss method is called', () => {
-        directive.dismiss();
-        expect(dialogRefMock.dismiss).toHaveBeenCalled();
-    });
-
-    it('should have correct host bindings', () => {
-        const element = directiveElement.nativeElement;
-        expect(element.getAttribute('role')).toBe('dialog');
-        expect(element.getAttribute('aria-describedby')).toBe('true');
-        expect(element.getAttribute('aria-labelledby')).toBe('true');
-        expect(element.getAttribute('data-state')).toBe('open');
-
-        closedSubject.next(undefined);
-        fixture.detectChanges();
-
-        expect(element.getAttribute('data-state')).toBe('closed');
-    });
-});