@xh/hoist 80.0.0-SNAPSHOT.1768251400948 → 80.0.0-SNAPSHOT.1768251669499

package/build/types/cmp/layout/CollapsibleSet.d.ts

@@ -1,14 +0,0 @@
-import { type FieldsetHTMLAttributes, type ReactElement, type ReactNode } from 'react';
-import type { HoistProps, Intent, LayoutProps, RenderMode, TestSupportProps } from '@xh/hoist/core';
-import './CollapsibleSet.scss';
-export interface CollapsibleSetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>, HoistProps, TestSupportProps, LayoutProps {
-    icon?: ReactElement;
-    label: ReactNode;
-    tooltip?: JSX.Element | string;
-    intent?: Intent;
-    clickHandler?: () => void;
-    collapsed?: boolean;
-    hideItemCount?: boolean;
-    renderMode?: RenderMode;
-}
-export declare const CollapsibleSet: import("react").FC<CollapsibleSetProps>, collapsibleSet: import("@xh/hoist/core").ElementFactory<CollapsibleSetProps>;

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

@@ -1,12 +0,0 @@
-import { type ReactElement, type ReactNode, type JSX } from 'react';
-import type { Intent, HoistProps } from '@xh/hoist/core';
-export interface CollapsibleSetButtonProps extends HoistProps {
-    icon?: ReactElement;
-    text: ReactNode;
-    tooltip?: JSX.Element | string;
-    clickHandler?: (boolean: any) => void;
-    intent?: Intent;
-    collapsed?: boolean;
-    disabled?: boolean;
-}
-export declare const CollapsibleSetButton: import("react").FC<CollapsibleSetButtonProps>, collapsibleSetButton: import("@xh/hoist/core").ElementFactory<CollapsibleSetButtonProps>;

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

@@ -1,19 +0,0 @@
-import { HoistProps, TestSupportProps } from '@xh/hoist/core';
-import { DashCanvasModel } from '@xh/hoist/desktop/cmp/dash';
-import './DashCanvasWidgetWell.scss';
-export interface DashCanvasWidgetWellProps extends HoistProps, TestSupportProps {
-    /** DashCanvasModel for which this widget well should allow the user to add views from. */
-    dashCanvasModel?: DashCanvasModel;
-    /** Defaults to `column` */
-    flexDirection?: 'row' | 'column';
-}
-/**
- * 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/mobile/cmp/button/CollapsibleSetButton.d.ts

@@ -1,12 +0,0 @@
-import { type ReactElement, type ReactNode, type JSX } from 'react';
-import type { Intent, HoistProps } from '@xh/hoist/core';
-export interface CollapsibleSetButtonProps extends HoistProps {
-    icon?: ReactElement;
-    text: ReactNode;
-    tooltip?: JSX.Element | string;
-    clickHandler?: (boolean: any) => void;
-    intent?: Intent;
-    collapsed?: boolean;
-    disabled?: boolean;
-}
-export declare const CollapsibleSetButton: import("react").FC<CollapsibleSetButtonProps>, collapsibleSetButton: import("@xh/hoist/core").ElementFactory<CollapsibleSetButtonProps>;

package/cmp/layout/CollapsibleSet.scss

@@ -1,49 +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-set {
-  &--collapsed {
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-
-    &--render-mode--always,
-    &--render-mode--lazy {
-      > *:not(:first-child) {
-        display: none;
-      }
-    }
-  }
-
-  &.xh-collapsible-set--intent-primary {
-    border-color: var(--xh-intent-primary-trans2);
-    &.xh-collapsible-set--enabled {
-      border-color: var(--xh-intent-primary);
-    }
-  }
-
-  &.xh-collapsible-set--intent-success {
-    border-color: var(--xh-intent-success-trans2);
-    &.xh-collapsible-set--enabled {
-      border-color: var(--xh-intent-success);
-    }
-  }
-
-  &.xh-collapsible-set--intent-warning {
-    border-color: var(--xh-intent-warning-trans2);
-    &.xh-collapsible-set--enabled {
-      border-color: var(--xh-intent-warning);
-    }
-  }
-
-  &.xh-collapsible-set--intent-danger {
-    border-color: var(--xh-intent-danger-trans2);
-    &.xh-collapsible-set--enabled {
-      border-color: var(--xh-intent-danger);
-    }
-  }
-}

package/cmp/layout/CollapsibleSet.ts

@@ -1,135 +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 classNames from 'classnames';
-import {castArray} from 'lodash';
-import {type FieldsetHTMLAttributes, type ReactElement, type ReactNode, useState} from 'react';
-import {XH, hoistCmp} from '@xh/hoist/core';
-import type {HoistProps, Intent, LayoutProps, RenderMode, TestSupportProps} from '@xh/hoist/core';
-import {fieldset} from '@xh/hoist/cmp/layout';
-import {TEST_ID, mergeDeep} from '@xh/hoist/utils/js';
-import {splitLayoutProps} from '@xh/hoist/utils/react';
-import {collapsibleSetButton as desktopCollapsibleSetButtonImpl} from '@xh/hoist/dynamics/desktop';
-import {collapsibleSetButton as mobileCollapsibleSetButtonImpl} from '@xh/hoist/dynamics/mobile';
-
-import './CollapsibleSet.scss';
-
-export interface CollapsibleSetProps
-    extends FieldsetHTMLAttributes<HTMLFieldSetElement>, HoistProps, TestSupportProps, LayoutProps {
-    icon?: ReactElement;
-    label: ReactNode;
-    tooltip?: JSX.Element | string;
-    intent?: Intent;
-    clickHandler?: () => void;
-    collapsed?: boolean;
-    hideItemCount?: boolean;
-    renderMode?: RenderMode;
-}
-
-export const [CollapsibleSet, collapsibleSet] = hoistCmp.withFactory<CollapsibleSetProps>({
-    displayName: 'CollapsibleSet',
-    model: false,
-    className: 'xh-collapsible-set',
-    render({
-        icon,
-        label,
-        tooltip,
-        intent,
-        collapsed,
-        children,
-        hideItemCount,
-        className,
-        disabled,
-        display = 'flex',
-        flexDirection = 'column',
-        flexWrap = 'wrap',
-        renderMode = 'unmountOnHide',
-        ...rest
-    }) {
-        // Note `model` destructured off of non-layout props to avoid setting
-        // model as a bogus DOM attribute. This low-level component may easily be passed one from
-        // a parent that has not properly managed its own props.
-        let [layoutProps, {model, testId, ...restProps}] = splitLayoutProps(rest);
-
-        restProps = mergeDeep(
-            {style: {display, flexDirection, flexWrap, ...layoutProps}},
-            {[TEST_ID]: testId},
-            restProps
-        );
-
-        const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true),
-            [expandCount, setExpandCount] = useState<number>(!collapsed ? 1 : 0),
-            items = castArray(children),
-            itemCount = hideItemCount === true ? '' : ` (${items.length})`,
-            classes = [];
-
-        if (isCollapsed) {
-            classes.push('xh-collapsible-set--collapsed');
-        } else {
-            classes.push('xh-collapsible-set--expanded');
-        }
-
-        if (disabled) {
-            classes.push('xh-collapsible-set--disabled');
-        } else {
-            classes.push('xh-collapsible-set--enabled');
-        }
-
-        if (intent) {
-            classes.push(`xh-collapsible-set--intent-${intent}`);
-        } else {
-            classes.push(`xh-collapsible-set--intent-none`);
-        }
-
-        const btn = XH.isMobileApp
-            ? mobileCollapsibleSetButtonImpl
-            : desktopCollapsibleSetButtonImpl;
-
-        let content;
-        switch (renderMode) {
-            case 'always':
-                content = items;
-                if (isCollapsed) {
-                    classes.push('xh-collapsible-set--collapsed--render-mode--always');
-                }
-                break;
-
-            case 'lazy':
-                content = isCollapsed && !expandCount ? [] : items;
-                if (isCollapsed) {
-                    classes.push('xh-collapsible-set--collapsed--render-mode--lazy');
-                }
-                break;
-
-            // unmountOnHide
-            default:
-                content = isCollapsed ? [] : items;
-                break;
-        }
-
-        return fieldset({
-            className: classNames(className, classes),
-            items: [
-                btn({
-                    icon,
-                    text: `${label}${itemCount}`,
-                    tooltip,
-                    intent,
-                    clickHandler: val => {
-                        setIsCollapsed(val);
-                        setExpandCount(expandCount + 1);
-                    },
-                    collapsed: isCollapsed,
-                    disabled
-                }),
-                ...content
-            ],
-            disabled,
-            ...restProps
-        });
-    }
-});

package/desktop/cmp/button/CollapsibleSetButton.ts

@@ -1,57 +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, type JSX, useState} from 'react';
-import {tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
-import {hoistCmp} from '@xh/hoist/core';
-import type {Intent, 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 CollapsibleSetButtonProps extends HoistProps {
-    icon?: ReactElement;
-    text: ReactNode;
-    tooltip?: JSX.Element | string;
-    clickHandler?: (boolean) => void;
-    intent?: Intent;
-    collapsed?: boolean;
-    disabled?: boolean;
-}
-
-export const [CollapsibleSetButton, collapsibleSetButton] =
-    hoistCmp.withFactory<CollapsibleSetButtonProps>({
-        displayName: 'CollapsibleSetButton',
-        model: false,
-        render({icon, text, tooltip, intent, clickHandler, collapsed, disabled}) {
-            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true),
-                btn = button({
-                    text,
-                    icon,
-                    rightIcon: isCollapsed ? Icon.angleDown() : Icon.angleUp(),
-                    outlined: isCollapsed && !intent,
-                    minimal: !intent || (intent && !isCollapsed),
-                    intent,
-                    disabled,
-                    onClick: () => {
-                        const val = !isCollapsed;
-                        setIsCollapsed(val);
-                        clickHandler?.(val);
-                    }
-                });
-
-            return legend(
-                tooltip
-                    ? bpTooltip({
-                          item: btn,
-                          content: tooltip,
-                          intent
-                      })
-                    : btn
-            );
-        }
-    });

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

@@ -1,34 +0,0 @@
-.xh-dash-canvas-widget-well {
-  padding: 0 var(--xh-pad-half-px);
-
-  .xh-collapsible-set {
-    padding: 0 var(--xh-pad-half-px) var(--xh-pad-half-px) var(--xh-pad-half-px);
-    margin: var(--xh-pad-half-px);
-  }
-
-  .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);
-    text-wrap-mode: nowrap;
-    cursor: grab;
-
-    &.is-dragging {
-      cursor: grabbing;
-      // lighten background color of left behind placeholder
-      // when dragging
-      opacity: 0.25;
-    }
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  &--row {
-    .xh-dash-canvas-draggable-widget {
-      align-self: flex-start;
-    }
-  }
-}

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

@@ -1,135 +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, frame} from '@xh/hoist/cmp/layout';
-import {creates, hoistCmp, HoistProps, TestSupportProps, 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 {collapsibleSet} from '@xh/hoist/cmp/layout/CollapsibleSet';
-
-import './DashCanvasWidgetWell.scss';
-
-export interface DashCanvasWidgetWellProps extends HoistProps, TestSupportProps {
-    /** DashCanvasModel for which this widget well should allow the user to add views from. */
-    dashCanvasModel?: DashCanvasModel;
-    /** Defaults to `column` */
-    flexDirection?: 'row' | 'column';
-}
-
-/**
- * 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, flexDirection, className, testId}) {
-            if (!dashCanvasModel) return;
-
-            const classes = [];
-            if (flexDirection === 'row') classes.push('xh-dash-canvas-widget-well--row');
-
-            return frame({
-                className: classNames(className, classes),
-                overflowY: 'auto',
-                flexDirection: flexDirection || 'column',
-                flexWrap: flexDirection === 'row' ? 'wrap' : 'nowrap',
-                items: createDraggableItems(dashCanvasModel, flexDirection),
-                testId
-            });
-        }
-    });
-
-//---------------------------
-// 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, flexDirection): 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 collapsibleSet({
-                icon,
-                collapsed: false,
-                label,
-                flexDirection,
-                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/mobile/cmp/button/CollapsibleSetButton.ts

@@ -1,57 +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, type JSX, useState} from 'react';
-import {tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
-import {fragment} from '@xh/hoist/cmp/layout';
-import {hoistCmp} from '@xh/hoist/core';
-import type {Intent, HoistProps} from '@xh/hoist/core';
-import {button} from '@xh/hoist/mobile/cmp/button';
-import {legend} from '@xh/hoist/cmp/layout';
-import {Icon} from '@xh/hoist/icon/Icon';
-
-export interface CollapsibleSetButtonProps extends HoistProps {
-    icon?: ReactElement;
-    text: ReactNode;
-    tooltip?: JSX.Element | string;
-    clickHandler?: (boolean) => void;
-    intent?: Intent;
-    collapsed?: boolean;
-    disabled?: boolean;
-}
-
-export const [CollapsibleSetButton, collapsibleSetButton] =
-    hoistCmp.withFactory<CollapsibleSetButtonProps>({
-        displayName: 'CollapsibleSetButton',
-        model: false,
-        render({icon, text, tooltip, intent, clickHandler, collapsed, disabled}) {
-            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true),
-                btn = button({
-                    text: fragment(text, isCollapsed ? Icon.angleDown() : Icon.angleUp()),
-                    icon,
-                    outlined: isCollapsed && !intent,
-                    minimal: !intent || (intent && !isCollapsed),
-                    intent,
-                    disabled,
-                    onClick: () => {
-                        const val = !isCollapsed;
-                        setIsCollapsed(val);
-                        clickHandler?.(val);
-                    }
-                });
-
-            return legend(
-                tooltip
-                    ? bpTooltip({
-                          item: btn,
-                          content: tooltip,
-                          intent
-                      })
-                    : btn
-            );
-        }
-    });