@xh/hoist 59.0.3 → 59.2.0

package/core/XH.ts

@@ -56,6 +56,7 @@ import '../styles/XH.scss';
 import {ModelSelector, HoistModel, RefreshContextModel} from './model';
 import {HoistAppModel, BannerSpec, ToastSpec, MessageSpec, HoistUser, TaskObserver} from './';
 import {CancelFn} from 'router5/types/types/base';
+import {apiDeprecated} from '@xh/hoist/utils/js';
 
 export const MIN_HOIST_CORE_VERSION = '16.0';
 
@@ -576,16 +577,11 @@ export class XHApi {
         this.exceptionHandler.handleException(exception, options);
     }
 
-    /**
-     * Show an exception. This method is an alias for {@link ExceptionHandler.showException}.
-     *
-     * Intended to be used for the deferred / user-initiated showing of exceptions that have
-     * already been appropriately logged. Apps should typically prefer {@link handleException}.
-     *
-     * @param exception - thrown object, will be coerced into a {@link HoistException}.
-     * @param options - provides further control over how the exception is shown and/or logged.
-     */
     showException(exception: unknown, options?: ExceptionHandlerOptions) {
+        apiDeprecated('showException', {
+            msg: 'Use XH.exceptionHandler.showException instead',
+            v: '62'
+        });
         this.exceptionHandler.showException(exception, options);
     }
 

package/core/exception/ExceptionHandler.ts

@@ -156,6 +156,21 @@ export class ExceptionHandler {
         XH.appContainerModel.exceptionDialogModel.show(e, opts);
     }
 
+    /**
+     * Show an exception in full detail, with ability to report and copy to clipboard.
+     * Intended to be used for the deferred / user-initiated showing of exceptions that have
+     * already been appropriately logged. Apps should typically prefer {@link handleException}.
+     *
+     * @param exception - thrown object, will be coerced into a {@link HoistException}.
+     * @param options - provides further control over how the exception is shown.
+     */
+    showExceptionDetails(exception: unknown, options?: ExceptionHandlerOptions) {
+        if (XH.pageState == 'terminated' || XH.pageState == 'frozen') return;
+
+        const {e, opts} = this.parseArgs(exception, options);
+        XH.appContainerModel.exceptionDialogModel.showDetails(e, opts);
+    }
+
     /**
      * Create a server-side exception entry. Client metadata will be set automatically.
      *

package/data/RecordAction.ts

@@ -66,7 +66,7 @@ export interface ActionFnData {
     action?: RecordAction;
 
     /** Row data object (entire row, if any).*/
-    record?: any;
+    record?: StoreRecord;
 
     /** All currently selected records (if any).*/
     selectedRecords?: StoreRecord[];

package/data/cube/Query.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
-import {Filter, parseFilter, StoreRecord} from '@xh/hoist/data';
+import {BucketSpecFn, Filter, LockFn, OmitFn, parseFilter, StoreRecord} from '@xh/hoist/data';
 import {isEqual, find} from 'lodash';
 import {FilterLike, FilterTestFn} from '../filter/Types';
 import {CubeField} from './CubeField';
@@ -51,6 +51,25 @@ export interface QueryConfig {
 
     /** True to include leaf nodes in return.*/
     includeLeaves?: boolean;
+
+    /**
+     * Optional function to be called for each aggregate node to determine if it should be "locked",
+     * preventing drill-down into its children.  Defaults to Cube.lockFn.
+     */
+    lockFn?: LockFn;
+
+    /**
+     * Optional function to be called for each dimension during row generation to determine if the
+     * children of that dimension should be bucketed into additional dynamic dimensions.
+     * Defaults to Cube.bucketSpecFn.
+     */
+    bucketSpecFn?: BucketSpecFn;
+
+    /**
+     * Optional function to be called on all single child rows during view processing.
+     * Return true to omit the row. Defaults to Cube.omitFn.
+     */
+    omitFn?: OmitFn;
 }
 
 /** {@inheritDoc QueryConfig} */
@@ -61,6 +80,9 @@ export class Query {
     readonly includeRoot: boolean;
     readonly includeLeaves: boolean;
     readonly cube: Cube;
+    readonly lockFn: LockFn;
+    readonly bucketSpecFn: BucketSpecFn;
+    readonly omitFn: OmitFn;
 
     private readonly _testFn: FilterTestFn;
 
@@ -70,7 +92,10 @@ export class Query {
         dimensions,
         filter = null,
         includeRoot = false,
-        includeLeaves = false
+        includeLeaves = false,
+        lockFn = cube.lockFn,
+        bucketSpecFn = cube.bucketSpecFn,
+        omitFn = cube.omitFn
     }: QueryConfig) {
         this.cube = cube;
         this.fields = this.parseFields(fields);
@@ -78,6 +103,9 @@ export class Query {
         this.includeRoot = includeRoot;
         this.includeLeaves = includeLeaves;
         this.filter = parseFilter(filter);
+        this.lockFn = lockFn;
+        this.bucketSpecFn = bucketSpecFn;
+        this.omitFn = omitFn;
 
         this._testFn = this.filter?.getTestFn(this.cube.store) ?? null;
     }
@@ -89,6 +117,9 @@ export class Query {
             filter: this.filter,
             includeRoot: this.includeRoot,
             includeLeaves: this.includeLeaves,
+            lockFn: this.lockFn,
+            bucketSpecFn: this.bucketSpecFn,
+            omitFn: this.omitFn,
             cube: this.cube,
             ...overrides
         };
@@ -121,7 +152,10 @@ export class Query {
             isEqual(this.dimensions, other.dimensions) &&
             this.cube === other.cube &&
             this.includeRoot === other.includeRoot &&
-            this.includeLeaves === other.includeLeaves
+            this.includeLeaves === other.includeLeaves &&
+            this.bucketSpecFn == other.bucketSpecFn &&
+            this.omitFn == other.omitFn &&
+            this.lockFn == other.lockFn
         );
     }
 

package/data/cube/View.ts

@@ -99,7 +99,7 @@ export class View extends HoistBase {
         const {query, stores = [], connect = false} = config;
 
         this.query = query;
-        this.stores = castArray(stores);
+        this.stores = this.parseStores(stores);
         this._rowCache = new Map();
         this.fullUpdate();
 
@@ -185,7 +185,7 @@ export class View extends HoistBase {
 
     /** Set stores to be loaded/reloaded with data from this view. */
     setStores(stores: Some<Store>) {
-        this.stores = castArray(stores);
+        this.stores = this.parseStores(stores);
         this.loadStores();
     }
 
@@ -351,9 +351,9 @@ export class View extends HoistBase {
         parentId: string,
         appliedDimensions: PlainObject
     ): BaseRow[] {
-        if (!this.cube.bucketSpecFn) return rows;
+        if (!this.query.bucketSpecFn) return rows;
 
-        const bucketSpec = this.cube.bucketSpecFn(rows);
+        const bucketSpec = this.query.bucketSpecFn(rows);
         if (!bucketSpec) return rows;
 
         if (!this.query.includeLeaves && rows[0]?.isLeaf) return rows;
@@ -463,6 +463,18 @@ export class View extends HoistBase {
         return this.fields.every(({aggregator}) => !aggregator || aggregator.dependsOnChildrenOnly);
     }
 
+    private parseStores(stores: Some<Store>): Store[] {
+        const ret = castArray(stores);
+
+        // Views mutate the rows they feed to connected stores  -- `reuseRecords` not appropriate
+        throwIf(
+            ret.some(s => s.reuseRecords),
+            'Store.reuseRecords cannot be used on a Store that is connected to a Cube View'
+        );
+
+        return ret;
+    }
+
     override destroy() {
         this.disconnect();
         super.destroy();

package/data/cube/row/BaseRow.ts

@@ -59,7 +59,7 @@ export abstract class BaseRow {
         let dataChildren = this.getVisibleChildrenDatas();
 
         // 2) If omitting ourselves, we are done, return visible children.
-        if (!isLeaf && view.cube.omitFn?.(this as any)) return dataChildren;
+        if (!isLeaf && view.query.omitFn?.(this as any)) return dataChildren;
 
         // 3) Otherwise, we can attach this data to the children data and return.
 
@@ -89,7 +89,7 @@ export abstract class BaseRow {
         }
 
         // Skip all children in a locked node
-        if (view.cube.lockFn?.(this as any)) {
+        if (view.query.lockFn?.(this as any)) {
             this.locked = true;
             return null;
         }

package/desktop/appcontainer/AppContainer.ts

@@ -7,7 +7,7 @@
 import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
 import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
 import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/core';
-import {errorBoundary} from '@xh/hoist/appcontainer/ErrorBoundary';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {changelogDialog} from '@xh/hoist/desktop/appcontainer/ChangelogDialog';
 import {suspendPanel} from '@xh/hoist/desktop/appcontainer/SuspendPanel';
 import {dockContainerImpl} from '@xh/hoist/desktop/cmp/dock/impl/DockContainer';
@@ -40,6 +40,7 @@ import {optionsDialog} from './OptionsDialog';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 import {ReactElement} from 'react';
+import {errorMessage} from '../cmp/error/ErrorMessage';
 
 installDesktopImpls({
     tabContainerImpl,
@@ -52,7 +53,8 @@ installDesktopImpls({
     ColChooserModel,
     ColumnHeaderFilterModel,
     useContextMenu,
-    ModalSupportModel
+    ModalSupportModel,
+    errorMessage
 });
 /**
  * Top-level wrapper for Desktop applications.
@@ -73,7 +75,19 @@ export const AppContainer = hoistCmp({
 
         return fragment(
             hotkeysProvider(
-                errorBoundary(viewForState()),
+                errorBoundary({
+                    modelConfig: {
+                        errorHandler: {
+                            title: 'Critical Error',
+                            message:
+                                XH.clientAppName +
+                                ' encountered a critical error and cannot be displayed.',
+                            requireReload: true
+                        },
+                        errorRenderer: () => null
+                    },
+                    item: viewForState()
+                }),
                 // Modal component helpers rendered here at top-level to support display of messages
                 // and exceptions at any point during the app lifecycle.
                 exceptionDialog(),

package/desktop/appcontainer/Banner.scss

@@ -21,6 +21,31 @@ body.xh-app .xh-banner {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    // Disallow most markdown styling except **bold**, *italics* and (links)
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    ul,
+    li,
+    a,
+    code {
+      display: inline;
+      margin: unset;
+      padding: unset;
+      color: unset;
+      font-weight: unset;
+      font-size: unset;
+      font-family: unset;
+      list-style: none;
+    }
+
+    // Render links with an underline
+    a {
+      text-decoration: underline;
+    }
   }
 
   &__action-button,

package/desktop/appcontainer/Banner.ts

@@ -10,7 +10,8 @@ import {hframe, div} from '@xh/hoist/cmp/layout';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
-import {isFunction, isEmpty} from 'lodash';
+import {markdown} from '@xh/hoist/cmp/markdown';
+import {isFunction, isEmpty, isString} from 'lodash';
 import classNames from 'classnames';
 
 import './Banner.scss';
@@ -43,7 +44,7 @@ export const banner = hoistCmp.factory({
                         icon,
                         div({
                             className: 'xh-banner__message',
-                            item: message,
+                            item: isString(message) ? markdown({content: message}) : message,
                             onClick
                         })
                     ]

package/desktop/cmp/dash/canvas/impl/DashCanvasView.ts

@@ -14,6 +14,7 @@ import {popover, Position} from '@xh/hoist/kit/blueprint';
 import {button} from '../../../button';
 import {panel} from '../../../panel';
 import {DashCanvasViewModel} from '../DashCanvasViewModel';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 /**
  * Implementation component to show an item within a DashCanvas.  This component
@@ -46,7 +47,9 @@ export const dashCanvasView = hoistCmp.factory({
             ...headerProps,
             item: box({
                 ref: useOnResize(dims => model.onContentsResized(dims), {debounce: 100}),
-                item: elementFromContent(viewSpec.content, {flex: 1, viewModel: model}),
+                item: errorBoundary(
+                    elementFromContent(viewSpec.content, {flex: 1, viewModel: model})
+                ),
                 flex: autoHeight ? 'none' : 'auto'
             })
         });

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -22,7 +22,7 @@ import {wait} from '@xh/hoist/promise';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {debounced, ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {cloneDeep, defaultsDeep, find, isFinite, isNil, reject, startCase} from 'lodash';
+import {cloneDeep, defaultsDeep, find, isFinite, isNil, last, reject, startCase} from 'lodash';
 import {createRoot} from 'react-dom/client';
 import {DashConfig, DashModel} from '../';
 import {DashViewModel, DashViewState} from '../DashViewModel';
@@ -290,7 +290,8 @@ export class DashContainerModel extends DashModel<
 
         if (!isFinite(index)) index = container.contentItems.length;
         container.addChild(goldenLayoutConfig(viewSpec), index);
-        wait(1).then(() => this.onStackActiveItemChange(container));
+        const stack = container.isStack ? container : last(container.contentItems);
+        wait(1).then(() => this.onStackActiveItemChange(stack));
     }
 
     /**

package/desktop/cmp/dash/container/impl/DashContainerUtils.ts

@@ -46,8 +46,8 @@ function convertGLToStateInner(configItems = [], contentItems = [], dashContaine
 
             ret.push(view);
         } else {
-            const {type, width, height, activeItemIndex, content} = configItem,
-                container = {type} as PlainObject;
+            const {type, width, height, activeItemIndex, content, isClosable} = configItem,
+                container = {type, allowRemove: isClosable} as PlainObject;
 
             if (isFinite(width)) container.width = round(width, 2);
             if (isFinite(height)) container.height = round(height, 2);
@@ -138,12 +138,12 @@ function convertStateToGLInner(items = [], viewSpecs = [], containerSize, contai
             const content = convertStateToGLInner(item.content, viewSpecs, itemSize, item).filter(
                 it => !isNil(it)
             );
-            if (!content.length) return null;
+            if (!content.length && item.allowRemove) return null;
 
             // Below is a workaround for issue https://github.com/golden-layout/golden-layout/issues/418
             // GoldenLayouts can sometimes export its state with an out-of-bounds `activeItemIndex`.
             // If we encounter this, we overwrite `activeItemIndex` to point to the last item.
-            const ret = {...item, content};
+            const ret = {...item, content, isClosable: item.allowRemove};
             if (
                 type === 'stack' &&
                 isFinite(ret.activeItemIndex) &&

package/desktop/cmp/dash/container/impl/DashContainerView.ts

@@ -9,6 +9,7 @@ import {hoistCmp, refreshContextView, uses} from '@xh/hoist/core';
 import {elementFromContent} from '@xh/hoist/utils/react';
 import {useRef} from 'react';
 import {DashViewModel} from '../../DashViewModel';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 /**
  * Implementation component to show an item within a DashContainer.  This component
@@ -44,7 +45,7 @@ export const dashContainerView = hoistCmp.factory({
             className,
             item: refreshContextView({
                 model: refreshContextModel,
-                item: elementFromContent(viewSpec.content, {flex: 1})
+                item: errorBoundary(elementFromContent(viewSpec.content, {flex: 1}))
             })
         });
     }

package/desktop/cmp/dock/DockViewModel.ts

@@ -13,7 +13,7 @@ import {
     RefreshContextModel,
     RefreshMode,
     RenderMode,
-    XH
+    Awaitable
 } from '@xh/hoist/core';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport/ModalSupportModel';
 import '@xh/hoist/desktop/register';
@@ -53,6 +53,8 @@ export interface DockViewConfig {
     allowClose?: boolean;
     /** true (default) to allow popping out of the dock and displaying in a modal Dialog. */
     allowDialog?: boolean;
+    /** Awaitable callback invoked on close. Return false to prevent close. */
+    onClose?: () => Awaitable<boolean | void>;
 }
 
 /**
@@ -75,6 +77,7 @@ export class DockViewModel extends HoistModel {
     collapsedWidth: number;
     allowClose: boolean;
     allowDialog: boolean;
+    onClose?: () => Awaitable<boolean | void>;
 
     containerModel: DockContainerModel;
     @managed refreshContextModel: RefreshContextModel;
@@ -109,7 +112,8 @@ export class DockViewModel extends HoistModel {
         docked = true,
         collapsed = false,
         allowClose = true,
-        allowDialog = true
+        allowDialog = true,
+        onClose
     }: DockViewConfig) {
         super();
         makeObservable(this);
@@ -128,6 +132,7 @@ export class DockViewModel extends HoistModel {
         this.collapsed = collapsed;
         this.allowClose = allowClose;
         this.allowDialog = allowDialog;
+        this.onClose = onClose;
 
         this._renderMode = renderMode;
         this._refreshMode = refreshMode;
@@ -195,11 +200,8 @@ export class DockViewModel extends HoistModel {
     // Actions
     //-----------------------
     close() {
-        this.containerModel.removeView(this.id);
-    }
-
-    override destroy() {
-        XH.safeDestroy(this.content);
-        super.destroy();
+        Promise.resolve(this.onClose?.()).then(v => {
+            if (v !== false) this.containerModel.removeView(this.id);
+        });
     }
 }

package/desktop/cmp/dock/impl/DockContainer.ts

@@ -25,6 +25,7 @@ export function dockContainerImpl(
         className: classNames(className, `xh-dock-container--${model.direction}`),
         items: model.views.map(viewModel => {
             return dockView({
+                key: viewModel.xhId,
                 model: viewModel,
                 compactHeaders
             });

package/desktop/cmp/dock/impl/DockView.ts

@@ -15,6 +15,7 @@ import {elementFromContent} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {useRef} from 'react';
 import './Dock.scss';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 interface DockViewProps extends HoistProps<DockViewModel> {
     /** True to style docked headers with reduced padding and font-size. */
@@ -57,7 +58,7 @@ export const dockView = hoistCmp.factory<DockViewProps>({
                           model: refreshContextModel,
                           item: div({
                               className: 'xh-dock-view__body',
-                              item: elementFromContent(model.content)
+                              item: errorBoundary(elementFromContent(model.content))
                           })
                       });
 

package/desktop/cmp/error/ErrorMessage.scss

@@ -1,6 +1,7 @@
 .xh-error-message {
   align-items: center;
   justify-content: center;
+  padding: 10px;
 
   &__inner {
     padding: var(--xh-pad-px);

package/desktop/cmp/error/ErrorMessage.ts

@@ -4,36 +4,52 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {div, frame, p} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, PlainObject} from '@xh/hoist/core';
+import {div, filler, frame, hbox, p} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistProps} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
-import {isEmpty, isNil, isString} from 'lodash';
-import {isValidElement, ReactNode, MouseEvent} from 'react';
+import {isNil, isString} from 'lodash';
+import {isValidElement, ReactNode} 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;
+    actionFn?: (error: unknown) => 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?: Error | string | PlainObject;
+    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;
 }
@@ -43,38 +59,53 @@ export interface ErrorMessageProps extends HoistProps {
  */
 export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessageProps>({
     className: 'xh-error-message',
-    render(
-        {
+    render(props, ref) {
+        let {
             className,
             model,
-            error = (model as any)?.error,
+            error = model?.['error'],
             message,
             title,
             actionFn,
-            actionButtonProps
-        },
-        ref
-    ) {
-        if (actionFn) {
-            actionButtonProps = {...actionButtonProps, onClick: actionFn};
-        }
+            actionButtonProps,
+            detailsFn,
+            detailsButtonProps
+        } = props;
 
         if (isNil(error)) return null;
 
         if (!message) {
             if (isString(error)) {
-                message = error as any;
+                message = error;
             } else if (error.message) {
                 message = error.message;
             }
         }
 
+        if (actionFn) {
+            actionButtonProps = {...actionButtonProps, onClick: error => actionFn(error)};
+        }
+
+        if (detailsFn) {
+            detailsButtonProps = {...detailsButtonProps, onClick: error => 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({
-                ref,
                 className: 'xh-error-message__inner',
-                items: [titleCmp({title}), messageCmp({message}), actionButton({actionButtonProps})]
+                items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
             })
         });
     }
@@ -92,11 +123,18 @@ const messageCmp = hoistCmp.factory(({message}) => {
     return null;
 });
 
-const actionButton = hoistCmp.factory(({actionButtonProps}) => {
-    if (isEmpty(actionButtonProps)) return null;
+const actionButton = hoistCmp.factory<ButtonProps>(props => {
     return button({
         text: 'Retry',
-        minimal: false,
-        ...actionButtonProps
+        icon: Icon.refresh(),
+        ...props
+    });
+});
+
+const detailsButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Details',
+        icon: Icon.detail(),
+        ...props
     });
 });

package/desktop/cmp/input/Checkbox.scss

@@ -0,0 +1,13 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+
+.xh-check-box.xh-input-disabled input:checked ~ .bp4-control-indicator {
+  background-color: var(--xh-input-disabled-bg) !important;
+  &::before {
+    background-image: var(--xh-input-disabled-checkmark-svg) !important;
+  }
+}

package/desktop/cmp/input/Checkbox.ts

@@ -12,6 +12,8 @@ import {withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
 import {ReactNode} from 'react';
 
+import './Checkbox.scss';
+
 export interface CheckboxProps extends HoistProps, HoistInputProps, StyleProps {
     value?: boolean;