@xh/hoist 71.0.0-SNAPSHOT.1735061018823 → 71.0.0-SNAPSHOT.1735061320692

package/build/types/desktop/cmp/error/index.d.ts

@@ -1 +0,0 @@
-export * from './ErrorMessage';

package/build/types/desktop/cmp/treemap/impl/Splitter.d.ts

@@ -1,6 +0,0 @@
-import { SplitTreeMapModel } from '../SplitTreeMapModel';
-import './Splitter.scss';
-/**
- * @internal
- */
-export declare const splitter: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<SplitTreeMapModel>>;

package/build/types/mobile/cmp/error/ErrorMessage.d.ts

@@ -1,42 +0,0 @@
-import { HoistProps } from '@xh/hoist/core';
-import { ButtonProps } from '@xh/hoist/mobile/cmp/button';
-import '@xh/hoist/mobile/register';
-import { ReactNode, MouseEvent } from 'react';
-import './ErrorMessage.scss';
-export interface ErrorMessageProps extends HoistProps {
-    /**
-     * If provided, will render a "Retry" button that calls this function.
-     * Use `actionButtonProps` for further control over this button.
-     */
-    actionFn?: (e: MouseEvent) => void;
-    /**
-     * If provided, component will render an inline action button - prompting to user to take some
-     * action that might resolve the error, such as retrying a failed data load.
-     */
-    actionButtonProps?: ButtonProps;
-    /**
-     * If provided, will render a "Details" button that calls this function.
-     * Use `detailsButtonProps` for further control over this button.  Default false.
-     */
-    detailsFn?: (error: unknown) => void;
-    /**
-     * If provided, component will render an inline details button.
-     */
-    detailsButtonProps?: ButtonProps;
-    /**
-     * Error to display. If undefined, this component will look for an error property on its model.
-     * If no error is found, this component will not be displayed.
-     */
-    error?: unknown;
-    /**
-     * Message to display for the error.
-     * Defaults to the error, or any 'message' property contained within it.
-     */
-    message?: ReactNode;
-    /** Optional title to display above the message. */
-    title?: ReactNode;
-}
-/**
- * Component for displaying an error with standardized styling.
- */
-export declare const ErrorMessage: import("react").FC<ErrorMessageProps>, errorMessage: import("@xh/hoist/core").ElementFactory<ErrorMessageProps>;

package/build/types/mobile/cmp/error/index.d.ts

@@ -1 +0,0 @@
-export * from './ErrorMessage';

package/build/types/mobile/cmp/loadingindicator/LoadingIndicator.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { HoistProps, Some, TaskObserver } from '@xh/hoist/core';
-import '@xh/hoist/mobile/register';
-import './LoadingIndicator.scss';
-export interface LoadingIndicatorProps extends HoistProps {
-    /** TaskObserver(s) that should be monitored to determine if the Indicator should be displayed. */
-    bind?: Some<TaskObserver>;
-    /** Position of the indicator relative to its containing component. */
-    corner?: 'tl' | 'tr' | 'bl' | 'br';
-    /** True to display the indicator. */
-    isDisplayed?: boolean;
-    /** Max characters allowed in message, after which it will be elided. Default 30. */
-    maxMessageLength?: number;
-    /** Optional text to be displayed - can also be sourced from bound TaskObserver. */
-    message?: string;
-    /** True (default) to display with an animated spinner. */
-    spinner?: boolean;
-}
-/**
- * A minimal / unobtrusive LoadingIndicator displaying an optional spinner and/or message to signal
- * that a longer-running operation is in progress, without using a modal Mask. Can be explicitly
- * shown or bound to one or more tasks.
- *
- * Note that the Panel component's `loadingIndicator` prop provides a common and convenient way to
- * add an indicator to a Panel without needing to manually create or manage this component.
- */
-export declare const LoadingIndicator: import("react").FC<LoadingIndicatorProps>, loadingIndicator: import("@xh/hoist/core").ElementFactory<LoadingIndicatorProps>;

package/build/types/mobile/cmp/loadingindicator/index.d.ts

@@ -1 +0,0 @@
-export * from './LoadingIndicator';

package/build/types/mobile/cmp/mask/Mask.d.ts

@@ -1,25 +0,0 @@
-import { HoistProps, Some, TaskObserver } from '@xh/hoist/core';
-import '@xh/hoist/mobile/register';
-import { ReactNode, MouseEvent } from 'react';
-import './Mask.scss';
-export interface MaskProps extends HoistProps {
-    /** Task(s) that should be monitored to determine if the mask should be displayed. */
-    bind?: Some<TaskObserver>;
-    /** True to display the mask. */
-    isDisplayed?: boolean;
-    /** Text to be displayed under the loading spinner image */
-    message?: ReactNode;
-    /** Callback when mask is tapped, relayed to underlying div element. */
-    onClick?: (e: MouseEvent) => void;
-    /** True (default) to display a spinning image. */
-    spinner?: boolean;
-}
-/**
- * Mask with optional spinner and text.
- *
- * The mask can be explicitly controlled via props or bound to a TaskObserver.
- *
- * Note that the Panel component's `mask` prop provides a common and convenient method for masking
- * sections of the UI without needing to manually create or manage this component.
- */
-export declare const Mask: import("react").FC<MaskProps>, mask: import("@xh/hoist/core").ElementFactory<MaskProps>;

package/build/types/mobile/cmp/mask/index.d.ts

@@ -1 +0,0 @@
-export * from './Mask';

package/desktop/cmp/error/index.ts

@@ -1 +0,0 @@
-export * from './ErrorMessage';

package/desktop/cmp/treemap/impl/Splitter.scss

@@ -1,15 +0,0 @@
-.xh-treemap-splitter {
-  background-color: var(--xh-resizable-bg);
-
-  &.vertical {
-    height: 4px;
-    border-top: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
-    border-bottom: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
-  }
-
-  &.horizontal {
-    width: 4px;
-    border-left: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
-    border-right: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
-  }
-}

package/desktop/cmp/treemap/impl/Splitter.ts

@@ -1,28 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-import {hbox, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses} from '@xh/hoist/core';
-
-import {SplitTreeMapModel} from '../SplitTreeMapModel';
-import './Splitter.scss';
-
-/**
- * @internal
- */
-export const splitter = hoistCmp.factory({
-    displayName: 'TreeMap Splitter',
-    model: uses(SplitTreeMapModel),
-
-    render({model}) {
-        const {orientation} = model,
-            vertical = orientation === 'vertical',
-            cmp = vertical ? hbox : vbox,
-            cfg = {className: `xh-treemap-splitter ${vertical ? 'vertical' : 'horizontal'}`};
-
-        return cmp(cfg);
-    }
-});

package/mobile/cmp/error/ErrorMessage.scss

@@ -1,25 +0,0 @@
-.xh-error-message {
-  align-items: center;
-  justify-content: center;
-
-  &__inner {
-    margin: 0 var(--xh-pad-px);
-    padding: var(--xh-pad-px);
-    background: var(--xh-intent-danger-trans1);
-    border: 1px solid var(--xh-intent-danger);
-    text-align: center;
-    word-break: break-word;
-
-    & > * {
-      margin: 0 0 var(--xh-pad-px);
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__title {
-    font-weight: bold;
-  }
-}

package/mobile/cmp/error/ErrorMessage.ts

@@ -1,140 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-import {div, filler, frame, hbox, p} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
-import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
-import '@xh/hoist/mobile/register';
-import {isNil, isString} from 'lodash';
-import {isValidElement, ReactNode, MouseEvent} from 'react';
-
-import './ErrorMessage.scss';
-import {Icon} from '@xh/hoist/icon';
-
-export interface ErrorMessageProps extends HoistProps {
-    /**
-     * If provided, will render a "Retry" button that calls this function.
-     * Use `actionButtonProps` for further control over this button.
-     */
-    actionFn?: (e: MouseEvent) => void;
-
-    /**
-     * If provided, component will render an inline action button - prompting to user to take some
-     * action that might resolve the error, such as retrying a failed data load.
-     */
-    actionButtonProps?: ButtonProps;
-
-    /**
-     * If provided, will render a "Details" button that calls this function.
-     * Use `detailsButtonProps` for further control over this button.  Default false.
-     */
-    detailsFn?: (error: unknown) => void;
-
-    /**
-     * If provided, component will render an inline details button.
-     */
-    detailsButtonProps?: ButtonProps;
-
-    /**
-     * Error to display. If undefined, this component will look for an error property on its model.
-     * If no error is found, this component will not be displayed.
-     */
-    error?: unknown;
-
-    /**
-     * Message to display for the error.
-     * Defaults to the error, or any 'message' property contained within it.
-     */
-    message?: ReactNode;
-
-    /** Optional title to display above the message. */
-    title?: ReactNode;
-}
-
-/**
- * Component for displaying an error with standardized styling.
- */
-export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessageProps>({
-    className: 'xh-error-message',
-    render(props, ref) {
-        let {
-            className,
-            model,
-            error = model?.['error'],
-            message,
-            title,
-            actionFn,
-            actionButtonProps,
-            detailsFn,
-            detailsButtonProps
-        } = props;
-
-        if (isNil(error)) return null;
-
-        if (!message) {
-            if (isString(error)) {
-                message = error;
-            } else {
-                message = error.message || error.name || 'Unknown Error';
-            }
-        }
-
-        if (actionFn) {
-            actionButtonProps = {...actionButtonProps, onClick: () => actionFn(error)};
-        }
-
-        if (detailsFn) {
-            detailsButtonProps = {...detailsButtonProps, onClick: () => detailsFn(error)};
-        }
-
-        let buttons = [],
-            buttonBar = null;
-        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps));
-        if (actionButtonProps) buttons.push(actionButton(actionButtonProps));
-        if (buttons.length == 1) {
-            buttonBar = buttons[0];
-        } else if (buttons.length == 2) {
-            buttonBar = hbox(buttons[0], filler(), buttons[1]);
-        }
-
-        return frame({
-            ref,
-            className,
-            item: div({
-                className: 'xh-error-message__inner',
-                items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
-            })
-        });
-    }
-});
-
-const titleCmp = hoistCmp.factory(({title}) => {
-    if (isValidElement(title)) return title;
-    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
-    return null;
-});
-
-const messageCmp = hoistCmp.factory(({message}) => {
-    if (isValidElement(message)) return message;
-    if (isString(message)) return p(message);
-    return null;
-});
-
-const actionButton = hoistCmp.factory<ButtonProps>(props => {
-    return button({
-        text: 'Retry',
-        icon: Icon.refresh(),
-        ...props
-    });
-});
-
-const detailsButton = hoistCmp.factory<ButtonProps>(props => {
-    return button({
-        text: 'Show Details',
-        icon: Icon.detail(),
-        ...props
-    });
-});

package/mobile/cmp/error/index.ts

@@ -1,8 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-
-export * from './ErrorMessage';

package/mobile/cmp/loadingindicator/LoadingIndicator.scss

@@ -1,81 +0,0 @@
-.xh-loading-indicator {
-  --border-width: 1px;
-  --height: 20px; // should match spinner height
-
-  position: absolute;
-  padding: var(--xh-pad-half-px);
-  background-color: var(--xh-loading-indicator-bg);
-  color: var(--xh-loading-indicator-color);
-  border-color: var(--xh-loading-indicator-border-color);
-  border-style: solid;
-  border-width: 0;
-
-  &--tl {
-    top: 0;
-    left: 0;
-    border-bottom-width: var(--border-width);
-    border-right-width: var(--border-width);
-    border-radius: 0 0 4px 0;
-
-    &.xh-loading-indicator--has-spinner {
-      .xh-loading-indicator__message {
-        margin-left: var(--xh-pad-px);
-      }
-    }
-  }
-
-  &--tr {
-    top: 0;
-    right: 0;
-    border-bottom-width: var(--border-width);
-    border-left-width: var(--border-width);
-    border-radius: 0 0 0 4px;
-
-    &.xh-loading-indicator--has-spinner {
-      .xh-loading-indicator__message {
-        margin-right: var(--xh-pad-px);
-      }
-    }
-  }
-
-  &--bl {
-    bottom: 0;
-    left: 0;
-    border-top-width: var(--border-width);
-    border-right-width: var(--border-width);
-    border-radius: 0 4px 0 0;
-
-    &.xh-loading-indicator--has-spinner {
-      .xh-loading-indicator__message {
-        margin-left: var(--xh-pad-px);
-      }
-    }
-  }
-
-  &--br {
-    bottom: 0;
-    right: 0;
-    border-top-width: var(--border-width);
-    border-left-width: var(--border-width);
-    border-radius: 4px 0 0 0;
-
-    &.xh-loading-indicator--has-spinner {
-      .xh-loading-indicator__message {
-        margin-right: var(--xh-pad-px);
-      }
-    }
-  }
-
-  .xh-hbox {
-    flex: none;
-    align-items: start;
-    flex-wrap: nowrap;
-  }
-
-  &__message {
-    height: var(--height);
-    line-height: var(--height);
-    align-items: center;
-    white-space: nowrap;
-  }
-}

package/mobile/cmp/loadingindicator/LoadingIndicator.ts

@@ -1,90 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-import {hbox} from '@xh/hoist/cmp/layout';
-import {div} from '@xh/hoist/cmp/layout/Tags';
-import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
-import {hoistCmp, HoistModel, HoistProps, Some, TaskObserver, useLocalModel} from '@xh/hoist/core';
-import '@xh/hoist/mobile/register';
-import {withDefault} from '@xh/hoist/utils/js';
-import classNames from 'classnames';
-import {truncate} from 'lodash';
-import './LoadingIndicator.scss';
-
-export interface LoadingIndicatorProps extends HoistProps {
-    /** TaskObserver(s) that should be monitored to determine if the Indicator should be displayed. */
-    bind?: Some<TaskObserver>;
-    /** Position of the indicator relative to its containing component. */
-    corner?: 'tl' | 'tr' | 'bl' | 'br';
-    /** True to display the indicator. */
-    isDisplayed?: boolean;
-    /** Max characters allowed in message, after which it will be elided. Default 30. */
-    maxMessageLength?: number;
-    /** Optional text to be displayed - can also be sourced from bound TaskObserver. */
-    message?: string;
-    /** True (default) to display with an animated spinner. */
-    spinner?: boolean;
-}
-
-/**
- * A minimal / unobtrusive LoadingIndicator displaying an optional spinner and/or message to signal
- * that a longer-running operation is in progress, without using a modal Mask. Can be explicitly
- * shown or bound to one or more tasks.
- *
- * Note that the Panel component's `loadingIndicator` prop provides a common and convenient way to
- * add an indicator to a Panel without needing to manually create or manage this component.
- */
-export const [LoadingIndicator, loadingIndicator] = hoistCmp.withFactory<LoadingIndicatorProps>({
-    displayName: 'LoadingIndicator',
-    className: 'xh-loading-indicator',
-
-    render(
-        {isDisplayed, message, spinner = true, corner = 'br', maxMessageLength = 30, className},
-        ref
-    ) {
-        const impl = useLocalModel(LocalMaskModel);
-
-        isDisplayed = withDefault(isDisplayed, impl.task?.isPending);
-        message = withDefault(message, impl.task?.message);
-        message = truncate(message, {length: maxMessageLength});
-
-        if (!isDisplayed || (!spinner && !message)) return null;
-
-        const innerItems = () => {
-            const spinnerEl = spinnerCmp({compact: true});
-            if (!message) return [spinnerEl];
-            const msgBox = div({className: `xh-loading-indicator__message`, item: message});
-
-            return corner === 'tl' || corner === 'bl'
-                ? [spinner ? spinnerEl : null, msgBox]
-                : [msgBox, spinner ? spinnerEl : null];
-        };
-
-        const hasMessageCls = message ? 'xh-loading-indicator--has-message' : null,
-            hasSpinnerCls = spinner ? 'xh-loading-indicator--has-spinner' : null,
-            cornerCls = `xh-loading-indicator--${corner}`;
-
-        return div({
-            ref,
-            className: classNames(className, hasMessageCls, hasSpinnerCls, cornerCls),
-            item: hbox(innerItems())
-        });
-    }
-});
-
-class LocalMaskModel extends HoistModel {
-    task;
-
-    override onLinked() {
-        const {bind} = this.componentProps;
-        if (bind) {
-            this.task =
-                bind instanceof TaskObserver
-                    ? bind
-                    : this.markManaged(TaskObserver.trackAll({tasks: bind}));
-        }
-    }
-}

package/mobile/cmp/loadingindicator/index.ts

@@ -1,7 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-export * from './LoadingIndicator';

package/mobile/cmp/mask/Mask.ts

@@ -1,75 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-import {box, div, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
-import {hoistCmp, HoistModel, HoistProps, Some, TaskObserver, useLocalModel} from '@xh/hoist/core';
-import '@xh/hoist/mobile/register';
-import {withDefault} from '@xh/hoist/utils/js';
-import {ReactNode, MouseEvent} from 'react';
-import './Mask.scss';
-
-export interface MaskProps extends HoistProps {
-    /** Task(s) that should be monitored to determine if the mask should be displayed. */
-    bind?: Some<TaskObserver>;
-    /** True to display the mask. */
-    isDisplayed?: boolean;
-    /** Text to be displayed under the loading spinner image */
-    message?: ReactNode;
-    /** Callback when mask is tapped, relayed to underlying div element. */
-    onClick?: (e: MouseEvent) => void;
-    /** True (default) to display a spinning image. */
-    spinner?: boolean;
-}
-
-/**
- * Mask with optional spinner and text.
- *
- * The mask can be explicitly controlled via props or bound to a TaskObserver.
- *
- * Note that the Panel component's `mask` prop provides a common and convenient method for masking
- * sections of the UI without needing to manually create or manage this component.
- */
-export const [Mask, mask] = hoistCmp.withFactory<MaskProps>({
-    displayName: 'Mask',
-    className: 'xh-mask',
-
-    render({isDisplayed, message, spinner = false, onClick, className}, ref) {
-        const impl = useLocalModel(LocalMaskModel);
-
-        isDisplayed = isDisplayed ?? impl.task?.isPending;
-        message = withDefault(message, impl.task?.message);
-
-        if (!isDisplayed) return null;
-        return div({
-            ref,
-            onClick,
-            className,
-            item: vbox({
-                className: 'xh-mask-body',
-                items: [
-                    spinner ? spinnerCmp() : null,
-                    spinner ? vspacer(10) : null,
-                    message ? box({className: 'xh-mask-text', item: message}) : null
-                ]
-            })
-        });
-    }
-});
-
-class LocalMaskModel extends HoistModel {
-    task;
-
-    override onLinked() {
-        const {bind} = this.componentProps;
-        if (bind) {
-            this.task =
-                bind instanceof TaskObserver
-                    ? bind
-                    : this.markManaged(TaskObserver.trackAll({tasks: bind}));
-        }
-    }
-}

package/mobile/cmp/mask/index.ts

@@ -1,7 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2024 Extremely Heavy Industries Inc.
- */
-export * from './Mask';