@radix-ng/primitives 0.11.0 → 0.12.0

package/collapsible/__tests__/collapsible-root.directive.spec.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+
+@Component({
+    selector: 'rdx-collapsible-mock-trigger',
+    standalone: true,
+    imports: [RdxCollapsibleRootDirective],
+    template: `
+        <div CollapsibleRoot></div>
+    `
+})
+class RdxCollapsibleMockComponent {}
+
+describe('RdxCollapsibleRootDirective', () => {
+    let component: RdxCollapsibleMockComponent;
+    let fixture: ComponentFixture<RdxCollapsibleMockComponent>;
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RdxCollapsibleMockComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create an instance', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/collapsible/__tests__/collapsible-trigger.directive.spec.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+
+@Component({
+    selector: 'rdx-collapsible-mock-trigger',
+    standalone: true,
+    imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective],
+    template: `
+        <div CollapsibleRoot>
+            <button CollapsibleTrigger>Trigger</button>
+        </div>
+    `
+})
+class RdxCollapsibleMockComponent {}
+
+describe('RdxCollapsibleTriggerDirective', () => {
+    let component: RdxCollapsibleMockComponent;
+    let fixture: ComponentFixture<RdxCollapsibleMockComponent>;
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RdxCollapsibleMockComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create an instance', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/collapsible/ng-package.json

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

package/collapsible/src/collapsible-content.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+import { RdxCollapsibleContentToken } from './collapsible-content.token';
+import { RdxCollapsibleRootDirective } from './collapsible-root.directive';
+
+@Directive({
+    selector: '[rdxCollapsibleContent]',
+    standalone: true,
+    providers: [
+        {
+            provide: RdxCollapsibleContentToken,
+            useExisting: RdxCollapsibleContentDirective
+        }
+    ],
+    host: {
+        '[attr.data-state]': 'collapsible.getState()',
+        '[attr.data-disabled]': 'getDisabled()'
+    }
+})
+export class RdxCollapsibleContentDirective {
+    /**
+     * @ignore
+     */
+    protected readonly collapsible = inject(RdxCollapsibleRootDirective);
+
+    /**
+     * Reference to CollapsibleContent host element
+     * @ignore
+     */
+    elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+    getDisabled(): string | undefined {
+        return this.collapsible.disabled ? 'disabled' : undefined;
+    }
+}

package/collapsible/src/collapsible-content.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { RdxCollapsibleContentDirective } from './collapsible-content.directive';
+
+export const RdxCollapsibleContentToken = new InjectionToken<RdxCollapsibleContentDirective>(
+    'RdxCollapsibleContentToken'
+);

package/collapsible/src/collapsible-root.directive.ts

@@ -0,0 +1,120 @@
+import { contentChild, Directive, EventEmitter, inject, InjectionToken, Input, Output } from '@angular/core';
+import { asyncScheduler } from 'rxjs';
+import { RdxCollapsibleContentToken } from './collapsible-content.token';
+
+const RdxCollapsibleRootToken = new InjectionToken<RdxCollapsibleRootDirective>('RdxCollapsibleRootToken');
+
+export function injectCollapsible(): RdxCollapsibleRootDirective {
+    return inject(RdxCollapsibleRootDirective);
+}
+
+export type RdxCollapsibleState = 'open' | 'closed';
+
+@Directive({
+    selector: '[rdxCollapsibleRoot]',
+    standalone: true,
+    exportAs: 'collapsibleRoot',
+    providers: [{ provide: RdxCollapsibleRootToken, useExisting: RdxCollapsibleRootDirective }],
+    host: {
+        '[attr.data-state]': 'getState()',
+        '[attr.data-disabled]': 'disabled ? "" : undefined'
+    }
+})
+export class RdxCollapsibleRootDirective {
+    /**
+     * Reference to RdxCollapsibleContent directive
+     * @private
+     * @ignore
+     */
+    private readonly contentDirective = contentChild.required(RdxCollapsibleContentToken);
+
+    /**
+     * Stores collapsible state
+     * @private
+     * @ignore
+     */
+    private _open = false;
+
+    /**
+     * Determines whether a directive is available for interaction.
+     * When true, prevents the user from interacting with the collapsible.
+     */
+    @Input() disabled = false;
+
+    /**
+     * The controlled open state of the collapsible.
+     * Sets the state of the directive. `true` - expanded, `false` - collapsed
+     * @param {boolean} value
+     */
+    @Input() set open(value: boolean) {
+        if (value !== this._open) {
+            this.onOpenChange.emit(value);
+        }
+
+        this._open = value;
+        this.setPresence();
+    }
+
+    /**
+     * Emitted with new value when directive state changed.
+     * Event handler called when the open state of the collapsible changes.
+     */
+    @Output() onOpenChange = new EventEmitter<boolean>();
+
+    /**
+     * Allows to change directive state
+     * @param {boolean | undefined} value
+     */
+    setOpen(value?: boolean) {
+        if (this.disabled) {
+            return;
+        }
+
+        if (value === undefined) {
+            this.open = !this._open;
+        } else {
+            this.open = value;
+        }
+
+        this.setPresence();
+    }
+
+    /**
+     * Returns directive state (open | closed)
+     */
+    getState(): RdxCollapsibleState {
+        return this._open ? 'open' : 'closed';
+    }
+
+    /**
+     * Returns current directive state
+     */
+    isOpen(): boolean {
+        return this._open;
+    }
+
+    /**
+     * Controls visibility of content
+     * @private
+     * @ignore
+     */
+    private setPresence(): void {
+        if (!this.contentDirective) {
+            return;
+        }
+
+        this.contentDirective().elementRef.nativeElement.setAttribute('data-state', this.getState());
+
+        if (this.isOpen()) {
+            this.contentDirective().elementRef.nativeElement.removeAttribute('hidden');
+        } else {
+            asyncScheduler.schedule(() => {
+                const animations = this.contentDirective().elementRef.nativeElement.getAnimations();
+
+                if (animations === undefined || animations.length === 0) {
+                    this.contentDirective().elementRef.nativeElement.setAttribute('hidden', '');
+                }
+            });
+        }
+    }
+}

package/collapsible/src/collapsible-trigger.directive.ts

@@ -0,0 +1,44 @@
+import { Directive } from '@angular/core';
+import { injectCollapsible, RdxCollapsibleState } from './collapsible-root.directive';
+
+@Directive({
+    selector: '[rdxCollapsibleTrigger]',
+    standalone: true,
+    host: {
+        '(click)': 'onOpenToggle()',
+        '[attr.data-state]': 'getState()',
+        '[attr.aria-expanded]': 'getState() === "open" ? "true" : "false"',
+        '[disabled]': 'getDisabled()'
+    }
+})
+export class RdxCollapsibleTriggerDirective {
+    /**
+     * Reference to CollapsibleRoot
+     * @private
+     * @ignore
+     */
+    private readonly collapsible = injectCollapsible();
+
+    /**
+     * Called on trigger clicked
+     */
+    onOpenToggle(): void {
+        this.collapsible.setOpen();
+    }
+
+    /**
+     * Returns current directive state (open | closed)
+     * @ignore
+     */
+    getState(): RdxCollapsibleState {
+        return this.collapsible.getState();
+    }
+
+    /**
+     * Returns current trigger state
+     * @ignore
+     */
+    getDisabled(): string | undefined {
+        return this.collapsible.disabled ? 'disabled' : undefined;
+    }
+}

package/collapsible/stories/collapsible-animation.component.ts

@@ -0,0 +1,116 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+
+@Component({
+    selector: 'rdx-collapsible-animation',
+    standalone: true,
+    imports: [
+        RdxCollapsibleRootDirective,
+        RdxCollapsibleTriggerDirective,
+        RdxCollapsibleContentDirective,
+        LucideAngularModule
+    ],
+    // prettier-ignore
+    animations: [
+        trigger('contentExpansion', [
+            state('expanded', style({ height: '*', opacity: 1, visibility: 'visible' })),
+            state('collapsed', style({ height: '0px', opacity: 0, visibility: 'hidden' })),
+            transition('expanded <=> collapsed', animate('200ms cubic-bezier(.37,1.04,.68,.98)'))
+        ])
+    ],
+    styles: `
+        button {
+            all: unset;
+        }
+
+        .CollapsibleRoot {
+            width: 300px;
+        }
+
+        .IconButton {
+            font-family: inherit;
+            border-radius: 100%;
+            height: 25px;
+            width: 25px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--violet-11);
+            box-shadow: 0 2px 10px var(--black-a7);
+        }
+
+        .IconButton[data-state='closed'] {
+            background-color: white;
+        }
+
+        .IconButton[data-state='open'] {
+            background-color: var(--violet-3);
+        }
+
+        .IconButton:hover {
+            background-color: var(--violet-3);
+        }
+
+        .IconButton:focus {
+            box-shadow: 0 0 0 2px black;
+        }
+
+        .Text {
+            color: var(--violet-11);
+            font-size: 15px;
+            line-height: 25px;
+        }
+
+        .Repository {
+            background-color: white;
+            border-radius: 4px;
+            margin: 10px 0;
+            padding: 10px;
+            box-shadow: 0 2px 10px var(--black-a7);
+        }
+    `,
+    template: `
+        <div
+            class="CollapsibleRoot"
+            #collapsibleRoot="collapsibleRoot"
+            [open]="open"
+            (onOpenChange)="onOpenChange($event)"
+            rdxCollapsibleRoot
+        >
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+                <span class="Text" style="color: white">&#64;peduarte starred 3 repositories</span>
+                <button class="IconButton" rdxCollapsibleTrigger>
+                    @if (open) {
+                        <lucide-angular size="16" name="x" style="display: flex;" />
+                    } @else {
+                        <lucide-angular size="16" name="unfold-vertical" style="display: flex;" />
+                    }
+                </button>
+            </div>
+
+            <div class="Repository">
+                <span class="Text">&#64;radix-ui/primitives</span>
+            </div>
+
+            <div [@contentExpansion]="collapsibleRoot.isOpen() ? 'expanded' : 'collapsed'" rdxCollapsibleContent>
+                <div class="Repository">
+                    <span class="Text">&#64;radix-ui/colors</span>
+                </div>
+                <div class="Repository">
+                    <span class="Text">&#64;stitches/react</span>
+                </div>
+            </div>
+        </div>
+    `
+})
+export class RdxCollapsibleAnimationComponent {
+    open = true;
+
+    onOpenChange($event: boolean) {
+        this.open = $event;
+    }
+}

package/collapsible/stories/collapsible-external-triggering.component.ts

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+
+@Component({
+    selector: 'rdx-collapsible-external-triggering',
+    standalone: true,
+    imports: [
+        RdxCollapsibleRootDirective,
+        RdxCollapsibleContentDirective,
+        LucideAngularModule
+    ],
+    styles: `
+        .CollapsibleRoot {
+            width: 300px;
+        }
+
+        .ExternalTrigger {
+            font-family: inherit;
+            border-radius: 8px;
+
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--violet-11);
+            box-shadow: 0 2px 10px var(--black-a7);
+            margin-bottom: 10px;
+            padding: 4px;
+        }
+
+        .ExternalTrigger[data-state='closed'] {
+            background-color: white;
+        }
+
+        .ExternalTrigger[data-state='open'] {
+            background-color: var(--violet-3);
+        }
+
+        .ExternalTrigger:hover {
+            background-color: var(--violet-3);
+        }
+
+        .ExternalTrigger:focus {
+            box-shadow: 0 0 0 2px black;
+        }
+
+        .Text {
+            color: var(--violet-11);
+            font-size: 15px;
+            line-height: 25px;
+        }
+
+        .Repository {
+            background-color: white;
+            border-radius: 4px;
+            margin: 10px 0;
+            padding: 10px;
+            box-shadow: 0 2px 10px var(--black-a7);
+        }
+    `,
+    template: `
+        <button class="ExternalTrigger" (click)="open = !open">External Trigger</button>
+        <div class="CollapsibleRoot" #collapsibleRoot="collapsibleRoot" [open]="open" rdxCollapsibleRoot>
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+                <span class="Text" style="color: white">&#64;peduarte starred 3 repositories</span>
+            </div>
+
+            <div class="Repository">
+                <span class="Text">&#64;radix-ui/primitives</span>
+            </div>
+
+            <div rdxCollapsibleContent>
+                <div class="Repository">
+                    <span class="Text">&#64;radix-ui/colors</span>
+                </div>
+                <div class="Repository">
+                    <span class="Text">&#64;stitches/react</span>
+                </div>
+            </div>
+        </div>
+    `
+})
+export class RdxCollapsibleExternalTriggeringComponent {
+    open = true;
+}

package/collapsible/stories/collapsible.docs.mdx

@@ -0,0 +1,53 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import * as CollapsibleStories from './collapsible.stories';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
+
+<Meta title="Primitives/Collapsible" />
+
+# Collapsible
+
+#### An interactive component which expands/collapses a panel.
+
+<Canvas sourceState="hidden" of={CollapsibleStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Can be controlled or uncontrolled.
+
+## Anatomy
+
+```html
+<div rdxCollapsibleRoot [open]="...">
+  <button rdxCollapsibleTrigger>Trigger</button>
+  <div rdxCollapsibleContent>Content</div>
+</div>
+```
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import {
+  RdxCollapsibleRootDirective,
+  RdxCollapsibleTriggerDirective,
+  RdxCollapsibleContentDirective
+} from '@radix-ng/primitives/collapsible';
+```
+
+## API Reference
+
+## RdxCollapsibleRootDirective
+
+<ArgTypes of={RdxCollapsibleRootDirective} />
+
+## RdxCollapsibleTriggerDirective
+
+<ArgTypes of={RdxCollapsibleTriggerDirective} />
+
+## RdxCollapsibleContentDirective
+
+<ArgTypes of={RdxCollapsibleContentDirective} />

package/collapsible/stories/collapsible.stories.ts

@@ -0,0 +1,151 @@
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { LucideAngularModule, UnfoldVertical, X } from 'lucide-angular';
+import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+import { RdxCollapsibleAnimationComponent } from './collapsible-animation.component';
+import { RdxCollapsibleExternalTriggeringComponent } from './collapsible-external-triggering.component';
+
+export default {
+    title: 'Primitives/Collapsible',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxCollapsibleRootDirective,
+                RdxCollapsibleTriggerDirective,
+                RdxCollapsibleContentDirective,
+                RdxCollapsibleExternalTriggeringComponent,
+                RdxCollapsibleAnimationComponent,
+                BrowserAnimationsModule,
+                LucideAngularModule,
+                LucideAngularModule.pick({ X, UnfoldVertical })
+            ],
+            providers: [provideAnimations()]
+        }),
+        componentWrapperDecorator(
+            (story) => `
+                <div class="radix-themes light light-theme radix-themes-default-fonts"
+                    data-accent-color="indigo"
+                    data-radius="medium"
+                    data-scaling="100%"
+                >
+                    ${story}
+                </div>
+
+                <style>
+                    button {
+                        all: unset;
+                    }
+                    .CollapsibleRoot {
+                        width: 300px;
+                    }
+
+                    .IconButton {
+                        font-family: inherit;
+                        border-radius: 100%;
+                        height: 25px;
+                        width: 25px;
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: var(--violet-11);
+                        box-shadow: 0 2px 10px var(--black-a7);
+                    }
+
+                    .IconButton[data-state='closed'] {
+                        background-color: white;
+                    }
+
+                    .IconButton[data-state='open'] {
+                        background-color: var(--violet-3);
+                    }
+
+                    .IconButton:hover {
+                        background-color: var(--violet-3);
+                    }
+
+                    .IconButton:focus {
+                        box-shadow: 0 0 0 2px black;
+                    }
+
+                    .Text {
+                        color: var(--violet-11);
+                        font-size: 15px;
+                        line-height: 25px;
+                    }
+
+                    .Repository {
+                        background-color: white;
+                        border-radius: 4px;
+                        margin: 10px 0;
+                        padding: 10px;
+                        box-shadow: 0 2px 10px var(--black-a7);
+                    }
+                </style>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+            <div class="CollapsibleRoot" rdxCollapsibleRoot [open]="true" #collapsibleRoot="collapsibleRoot">
+
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <span class="Text" style="color: white">&#64;peduarte starred 3 repositories</span>
+                    <button class="IconButton" rdxCollapsibleTrigger>
+                        @if (collapsibleRoot.isOpen()) {
+                            <lucide-angular size="16" name="x" style="display: flex;"></lucide-angular>
+                        } @else {
+                            <lucide-angular size="16" name="unfold-vertical" style="display: flex;"></lucide-angular>
+                        }
+                    </button>
+                </div>
+
+                <div class="Repository">
+                    <span class="Text">&#64;radix-ui/primitives</span>
+                </div>
+
+                <div rdxCollapsibleContent>
+                    <div class="Repository">
+                        <span class="Text">&#64;radix-ui/colors</span>
+                    </div>
+                    <div class="Repository">
+                        <span class="Text">&#64;stitches/react</span>
+                    </div>
+                </div>
+            </div>
+        `
+    })
+};
+
+export const ExternalTrigger: Story = {
+    render: () => ({
+        template: `
+            <div class="radix-themes light light-theme radix-themes-default-fonts"
+                data-accent-color="indigo"
+                data-radius="medium"
+                data-scaling="100%"
+            >
+                <rdx-collapsible-external-triggering></rdx-collapsible-external-triggering>
+            </div>
+        `
+    })
+};
+
+export const Animation: Story = {
+    render: () => ({
+        template: `
+            <div class="radix-themes light light-theme radix-themes-default-fonts"
+                data-accent-color="indigo"
+                data-radius="medium"
+                data-scaling="100%"
+            >
+                <rdx-collapsible-animation></rdx-collapsible-animation>
+            </div>
+        `
+    })
+};

package/context-menu/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/context-menu