@xh/hoist 80.0.0-SNAPSHOT.1767973504648 → 80.0.0-SNAPSHOT.1767974090726

package/build/types/desktop/cmp/button/FieldsetCollapseButton.d.ts

@@ -1,10 +0,0 @@
-import { type ReactElement, type ReactNode } from 'react';
-import { HoistProps } from '@xh/hoist/core';
-export interface FieldsetCollapseButtonProps extends HoistProps {
-    icon?: ReactElement;
-    text: ReactNode;
-    clickHandler?: (boolean: any) => void;
-    collapsed?: boolean;
-    disabled?: boolean;
-}
-export declare const FieldsetCollapseButton: import("react").FC<FieldsetCollapseButtonProps>, fieldsetCollapseButton: import("@xh/hoist/core").ElementFactory<FieldsetCollapseButtonProps>;

package/build/types/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWell.d.ts

@@ -1,17 +0,0 @@
-import { HoistProps } from '@xh/hoist/core';
-import { DashCanvasModel } from '@xh/hoist/desktop/cmp/dash';
-import './DashCanvasWidgetWell.scss';
-export interface DashCanvasWidgetWellProps extends HoistProps {
-    /** DashCanvasModel for which this widget well should allow the user to add views from. */
-    dashCanvasModel?: DashCanvasModel;
-}
-/**
- * Widget Well from which to add items to a DashCanvas by drag-and-drop.
- *
- * Available view specs are listed in their defined order,
- * grouped by their 'groupName' property if present.
- *
- * Typically, an app developer would place this inside a collapsible panel to the side of
- * a DashCanvas.
- */
-export declare const DashCanvasWidgetWell: import("react").FC<DashCanvasWidgetWellProps>, dashCanvasWidgetWell: import("@xh/hoist/core").ElementFactory<DashCanvasWidgetWellProps>;

package/build/types/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWellModel.d.ts

@@ -1,11 +0,0 @@
-import { DragEvent } from 'react';
-import { DashCanvasModel } from '@xh/hoist/desktop/cmp/dash';
-import { HoistModel } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
-export declare class DashCanvasWidgetWellModel extends HoistModel {
-    dashCanvasModel: DashCanvasModel;
-    constructor();
-    onLinked(): void;
-    onDragStart(evt: DragEvent<HTMLDivElement>): void;
-    onDragEnd(evt: DragEvent<HTMLDivElement>): void;
-}

package/build/types/desktop/cmp/form/CollapsibleFieldset.d.ts

@@ -1,11 +0,0 @@
-import { type FieldsetHTMLAttributes, type ReactElement, type ReactNode } from 'react';
-import { HoistProps } from '@xh/hoist/core';
-import './CollapsibleFieldset.scss';
-export interface CollapsibleFieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>, HoistProps {
-    icon?: ReactElement;
-    label: ReactNode;
-    clickHandler?: () => void;
-    collapsed?: boolean;
-    hideItemCount?: boolean;
-}
-export declare const CollapsibleFieldset: import("react").FC<CollapsibleFieldsetProps>, collapsibleFieldset: import("@xh/hoist/core").ElementFactory<CollapsibleFieldsetProps>;

package/desktop/cmp/button/FieldsetCollapseButton.ts

@@ -1,44 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2026 Extremely Heavy Industries Inc.
- */
-
-import {type ReactElement, type ReactNode, useState} from 'react';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
-import {legend} from '@xh/hoist/cmp/layout';
-import {Icon} from '@xh/hoist/icon/Icon';
-
-export interface FieldsetCollapseButtonProps extends HoistProps {
-    icon?: ReactElement;
-    text: ReactNode;
-    clickHandler?: (boolean) => void;
-    collapsed?: boolean;
-    disabled?: boolean;
-}
-
-export const [FieldsetCollapseButton, fieldsetCollapseButton] =
-    hoistCmp.withFactory<FieldsetCollapseButtonProps>({
-        displayName: 'FieldsetCollapseButton',
-        model: false,
-        render({icon, text, clickHandler, collapsed, disabled}) {
-            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true);
-
-            return legend(
-                button({
-                    text,
-                    icon,
-                    rightIcon: isCollapsed ? Icon.angleDown() : Icon.angleUp(),
-                    outlined: false,
-                    disabled,
-                    onClick: () => {
-                        const val = !isCollapsed;
-                        setIsCollapsed(val);
-                        clickHandler?.(val);
-                    }
-                })
-            );
-        }
-    });

package/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWell.scss

@@ -1,26 +0,0 @@
-.xh-dash-canvas-widget-well {
-  padding: 0 var(--xh-pad-px);
-
-  .xh-collapsible-fieldset {
-    margin: var(--xh-pad-half-px) 0;
-  }
-
-  .xh-dash-canvas-draggable-widget {
-    border: var(--xh-border-dotted);
-    background-color: var(--xh-bg-alt);
-    padding: var(--xh-pad-half-px);
-    margin: var(--xh-pad-half-px) 0;
-    cursor: grab;
-
-    &.is-dragging {
-      cursor: grabbing;
-      // lighten background color of left behind placeholder
-      // when dragging
-      opacity: 0.25;
-    }
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-}

package/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWell.ts

@@ -1,126 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2025 Extremely Heavy Industries Inc.
- */
-
-import {uniqBy} from 'lodash';
-import classNames from 'classnames';
-import type {ReactElement} from 'react';
-import {div, vframe} from '@xh/hoist/cmp/layout';
-import {creates, hoistCmp, HoistProps, uses} from '@xh/hoist/core';
-import {DashCanvasModel, DashCanvasViewSpec} from '@xh/hoist/desktop/cmp/dash';
-import {DashCanvasWidgetWellModel} from '@xh/hoist/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWellModel';
-import {collapsibleFieldset} from '@xh/hoist/desktop/cmp/form/CollapsibleFieldset';
-
-import './DashCanvasWidgetWell.scss';
-
-export interface DashCanvasWidgetWellProps extends HoistProps {
-    /** DashCanvasModel for which this widget well should allow the user to add views from. */
-    dashCanvasModel?: DashCanvasModel;
-}
-
-/**
- * Widget Well from which to add items to a DashCanvas by drag-and-drop.
- *
- * Available view specs are listed in their defined order,
- * grouped by their 'groupName' property if present.
- *
- * Typically, an app developer would place this inside a collapsible panel to the side of
- * a DashCanvas.
- */
-export const [DashCanvasWidgetWell, dashCanvasWidgetWell] =
-    hoistCmp.withFactory<DashCanvasWidgetWellProps>({
-        displayName: 'DashCanvasWidgetWell',
-        model: creates(DashCanvasWidgetWellModel),
-        className: 'xh-dash-canvas-widget-well',
-        render({dashCanvasModel, className}) {
-            if (!dashCanvasModel) return;
-
-            return vframe({
-                className: classNames(className),
-                overflow: 'auto',
-                items: createDraggableItems(dashCanvasModel)
-            });
-        }
-    });
-
-//---------------------------
-// Implementation
-//---------------------------
-const draggableWidget = hoistCmp.factory<DashCanvasWidgetWellModel>({
-    displayName: 'DraggableWidget',
-    model: uses(DashCanvasWidgetWellModel),
-    render({model, viewSpec}) {
-        const {id, icon, title} = viewSpec as DashCanvasViewSpec;
-        return div({
-            id: `draggableFor-${id}`,
-            className: 'xh-dash-canvas-draggable-widget',
-            draggable: true,
-            unselectable: 'on',
-            onDragStart: e => model.onDragStart(e),
-            onDragEnd: e => model.onDragEnd(e),
-            items: [icon, ' ', title]
-        });
-    }
-});
-
-/**
- * Used to create draggable items (for adding views)
- * @internal
- */
-function createDraggableItems(dashCanvasModel: DashCanvasModel): any[] {
-    if (!dashCanvasModel.ref.current) return [];
-
-    const groupedItems = {},
-        ungroupedItems = [];
-
-    const addToGroup = (item, icon, groupName) => {
-        const group = groupedItems[groupName];
-        if (group) {
-            group.push({item, icon});
-        } else {
-            groupedItems[groupName] = [{item, icon}];
-        }
-    };
-
-    dashCanvasModel.viewSpecs
-        .filter(viewSpec => {
-            return (
-                viewSpec.allowAdd &&
-                (!viewSpec.unique || !dashCanvasModel.getViewsBySpecId(viewSpec.id).length)
-            );
-        })
-        .forEach(viewSpec => {
-            const {groupName} = viewSpec,
-                item = draggableWidget({viewSpec});
-
-            if (groupName) {
-                addToGroup(item, viewSpec.icon, groupName);
-            } else {
-                ungroupedItems.push(item);
-            }
-        });
-
-    return [
-        ...Object.keys(groupedItems).map(group => {
-            const label = group,
-                items = groupedItems[group],
-                sameIcons =
-                    uniqBy<{item: ReactElement; icon: ReactElement}>(
-                        items,
-                        it => it.icon.props.iconName
-                    ).length === 1,
-                icon = sameIcons ? items[0].icon : null;
-
-            return collapsibleFieldset({
-                icon,
-                collapsed: false,
-                label,
-                items: items.map(it => it.item)
-            });
-        }),
-        ...ungroupedItems
-    ];
-}

package/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWellModel.ts

@@ -1,65 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2025 Extremely Heavy Industries Inc.
- */
-import {DragEvent} from 'react';
-import {DashCanvasModel} from '@xh/hoist/desktop/cmp/dash';
-import {HoistModel, managed} from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
-import {makeObservable, observable} from '@xh/hoist/mobx';
-import {runInAction} from 'mobx';
-
-export class DashCanvasWidgetWellModel extends HoistModel {
-    @managed
-    @observable.ref
-    dashCanvasModel: DashCanvasModel;
-
-    constructor() {
-        super();
-        makeObservable(this);
-    }
-
-    override onLinked() {
-        this.addReaction({
-            track: () => this.componentProps,
-            run: () =>
-                runInAction(() => (this.dashCanvasModel = this.componentProps.dashCanvasModel)),
-            fireImmediately: true
-        });
-    }
-
-    onDragStart(evt: DragEvent<HTMLDivElement>) {
-        const target = evt.target as HTMLElement;
-        if (!target) return;
-
-        this.dashCanvasModel.showAddViewButtonWhenEmpty = false;
-        evt.dataTransfer.effectAllowed = 'move';
-        target.classList.add('is-dragging');
-
-        const viewSpecId: string = target.getAttribute('id').split('draggableFor-')[1],
-            viewSpec = this.dashCanvasModel.viewSpecs.find(it => it.id === viewSpecId),
-            {width, height} = viewSpec,
-            widget = {
-                viewSpecId,
-                layout: {
-                    x: 0,
-                    y: 0,
-                    w: width,
-                    h: height
-                }
-            };
-
-        this.dashCanvasModel.setDraggedInView(widget);
-    }
-
-    onDragEnd(evt: DragEvent<HTMLDivElement>) {
-        this.dashCanvasModel.showAddViewButtonWhenEmpty = true;
-
-        const target = evt.target as HTMLElement;
-        if (!target) return;
-
-        target.classList.remove('is-dragging');
-    }
-}

package/desktop/cmp/form/CollapsibleFieldset.scss

@@ -1,14 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2026 Extremely Heavy Industries Inc.
- */
-
-.xh-collapsible-fieldset {
-  &--collapsed {
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-  }
-}

package/desktop/cmp/form/CollapsibleFieldset.ts

@@ -1,65 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2026 Extremely Heavy Industries Inc.
- */
-
-import {fieldsetCollapseButton} from '@xh/hoist/desktop/cmp/button/FieldsetCollapseButton';
-import classNames from 'classnames';
-import {castArray} from 'lodash';
-import {type FieldsetHTMLAttributes, type ReactElement, type ReactNode, useState} from 'react';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
-import {fieldset} from '@xh/hoist/cmp/layout';
-
-import './CollapsibleFieldset.scss';
-
-export interface CollapsibleFieldsetProps
-    extends FieldsetHTMLAttributes<HTMLFieldSetElement>, HoistProps {
-    icon?: ReactElement;
-    label: ReactNode;
-    clickHandler?: () => void;
-    collapsed?: boolean;
-    hideItemCount?: boolean;
-}
-
-export const [CollapsibleFieldset, collapsibleFieldset] =
-    hoistCmp.withFactory<CollapsibleFieldsetProps>({
-        displayName: 'FieldsetCollapseButton',
-        model: false,
-        className: 'xh-collapsible-fieldset',
-        render({icon, label, collapsed, children, hideItemCount, className, disabled, ...rest}) {
-            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true),
-                items = castArray(children),
-                itemCount = hideItemCount === true ? '' : ` (${items.length})`,
-                classes = [];
-
-            if (isCollapsed) {
-                classes.push('xh-collapsible-fieldset--collapsed');
-            } else {
-                classes.push('xh-collapsible-fieldset--expanded');
-            }
-
-            if (disabled) {
-                classes.push('xh-collapsible-fieldset--disabled');
-            } else {
-                classes.push('xh-collapsible-fieldset--enabled');
-            }
-
-            return fieldset({
-                className: classNames(className, classes),
-                items: [
-                    fieldsetCollapseButton({
-                        icon,
-                        text: `${label}${itemCount}`,
-                        clickHandler: val => setIsCollapsed(val),
-                        collapsed: isCollapsed,
-                        disabled
-                    }),
-                    ...(isCollapsed ? [] : items)
-                ],
-                disabled,
-                ...rest
-            });
-        }
-    });