@xh/hoist 55.1.0 → 55.2.1

package/CHANGELOG.md

@@ -1,37 +1,65 @@
 # Changelog
 
+## v55.2.1 - 2023-02-24
+
+### 🐞 Bug Fixes
+
+* Fixed issue where a resizable `Panel` splitter could be rendered incorrectly while dragging.
+
+## v55.2.0 - 2023-02-10
+
+### 🎁 New Features
+
+* `DashCanvas` enhancements:
+    * Views now support minimum and maximum dimensions.
+    * Views now expose an `allowDuplicate` flag for controlling the `Duplicate` menu item
+      visibility.
+
+### 🐞 Bug Fixes
+
+* Fixed a bug with Cube views having dimensions containing non-string or `null` values. Rows grouped
+  by these dimensions would report values for the dimension which were incorrectly stringified (e.g.
+  `'null'` vs. `null` or `'5'` vs. `5`). This has been fixed. Note that the stringified value is
+  still reported for the rows' `cubeLabel` value, and will be used for the purposes of grouping.
+
+### ⚙️ Typescript API Adjustments
+
+* Improved signatures of `RestStore` APIs.
+
 ## v55.1.0 - 2023-02-09
 
-Version 55 is the first major update of the toolkit after our transition to typescript.  In addition
-to a host of runtime fixes and features, it also contains a good number of important typescript
-typing adjustments, which are listed below.  In also includes a helpful
+Version 55 is the first major update of the toolkit after our transition to Typescript. In addition
+to a host of runtime fixes and features, it also contains a good number of important Typescript
+typing adjustments, which are listed below. It also includes a helpful
 [Typescript upgrade guide](https://github.com/xh/hoist-react/blob/develop/docs/upgrade-to-typescript.md).
 
 ### 🎁 New Features
 
 * Grid exports can now be tracked in the admin activity tab by setting `exportOptions.track` to
   true (defaults to false).
-* Miscellaneous performance improvements to the cube package
-* The implementation of the `Cube.omitFn` feature has been enhanced.  This function will now be
-  called on *all* non-leaf nodes, not just single child nodes.  This allows for more flexible
+* Miscellaneous performance improvements to the cube package.
+* The implementation of the `Cube.omitFn` feature has been enhanced. This function will now be
+  called on *all* non-leaf nodes, not just single child nodes. This allows for more flexible
   editing of the shape of the resulting hierarchical data emitted by cube views.
 
 ### 🐞 Bug Fixes
+
 * Fixed: grid cell editors would drop a single character edit.
 * Fixed: grid date input editor's popup did not position correctly in a grid with pinned columns.
 * Fixed issue with `DashContainer` flashing its "empty" text briefly before loading.
 * Several Hoist TypeScript types, interfaces, and signatures have been improved or corrected (typing
   changes only).
 * Fix bug where a `className` provided to a `Panel` with `modalSupport` would be dropped when in a
-  modal state. Note this necessitated an additional layer in the `Panel` DOM hierarchy.  Highly
+  modal state. Note this necessitated an additional layer in the `Panel` DOM hierarchy. Highly
   specific CSS selectors may be affected.
 * Fix bug where `TileFrame` would not pass through the keys of its children.
 
 ### 💥 Breaking Changes
-* The semantics of `Cube.omitFn` have changed such that it will now be called on all aggregate nodes,
-  not just nodes with a single child. Applications may need to adjust any implementation of this
-  function accordingly.
-*  `hoistCmp.containerFactory` and `hoistCmp.withContainerFactory` are removed in favor of
+
+* The semantics of `Cube.omitFn` have changed such that it will now be called on all aggregate
+  nodes, not just nodes with a single child. Applications may need to adjust any implementation of
+  this function accordingly.
+* `hoistCmp.containerFactory` and `hoistCmp.withContainerFactory` are removed in favor of
   the basic `hoistCmp.factory` and `hoistCmp.withFactory` respectively. See typescript
   API adjustments below.
 
@@ -39,22 +67,19 @@ typing adjustments, which are listed below.  In also includes a helpful
 
 The following Typescript API were adjusted in v55.
 
-* Removed the distinction between `StandardElementFactory` and `ContainerElementFactory`.  This
+* Removed the distinction between `StandardElementFactory` and `ContainerElementFactory`. This
   distinction was deemed to be unnecessary, and overcomplicated the understanding of Hoist.
-  Applications should simply continue to use `ElementFactory` instead.  `hoistCmp.containerFactory` and
-  `hoistCmp.withContainerFactory` are also removed in favor of the basic `hoistCmp.factory` and
+  Applications should simply continue to use `ElementFactory` instead. `hoistCmp.containerFactory`
+  and `hoistCmp.withContainerFactory` are also removed in favor of the basic `hoistCmp.factory` and
   `hoistCmp.withFactory` respectively.
-
 * `HoistProps.modelConfig` now references the type declaration of `HoistModel.config`. See
   `PanelModel` and `TabContainerModel` for examples.
-
 * The new `SelectOption` type has been made multi-platform and moved to `@xh/hoist/core`.
 
 **Note** that we do not intend to make such extensive Typescript changes going forward post-v55.0.
 These changes were deemed critical and worth adjusting in our first typescript update, and before
 typescript has been widely adopted in production Hoist apps.
 
-
 ### ⚙️ Technical
 
 * Hoist's `Icon` enumeration has been re-organized slightly to better separate icons that describe

package/cmp/grid/filter/GridFilterFieldSpec.ts

@@ -7,27 +7,27 @@
 import {ColumnRenderer} from '@xh/hoist/cmp/grid';
 import {HoistInputProps} from '@xh/hoist/cmp/input';
 import {PlainObject} from '@xh/hoist/core';
+import {FieldFilterOperator, parseFilter, View} from '@xh/hoist/data';
 import {
     BaseFilterFieldSpec,
     BaseFilterFieldSpecConfig
 } from '@xh/hoist/data/filter/BaseFilterFieldSpec';
-import {FieldFilterOperator, parseFilter, View} from '@xh/hoist/data';
 import {castArray, compact, flatten, isDate, isEmpty, uniqBy} from 'lodash';
 import {GridFilterModel} from './GridFilterModel';
 
-
 export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
-    /** GridFilterModel instance which owns this fieldSpec. */
+    /** GridFilterModel instance owning this fieldSpec. */
     filterModel?: GridFilterModel;
+
     /**
-     * function returning a formatted string for each value in this values filter display.
+     * Function returning a formatted string for each value in this values filter display.
      * If not provided, the Column's renderer will be used.
      */
     renderer?: ColumnRenderer;
 
     /**
-     * Props to pass through to the HoistInput components used on the custom filter tab. Note
-     * that the HoistInput component used is decided by fieldType.
+     * Props to pass through to the HoistInput components used on the custom filter tab.
+     * Note that the HoistInput component used is decided by fieldType.
      */
     inputProps?: HoistInputProps;
 
@@ -36,8 +36,8 @@ export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
 }
 
 /**
- * Apps should NOT instantiate this class directly. Provide a config for this object
- * to the GridModel's `filterModel` property instead.
+ * Apps should NOT instantiate this class directly.
+ * Instead, provide a config for this object to the GridModel's `filterModel` config.
  */
 export class GridFilterFieldSpec extends BaseFilterFieldSpec {
 
@@ -53,7 +53,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         inputProps,
         defaultOp,
         ...rest
-    }:GridFilterFieldSpecConfig) {
+    }: GridFilterFieldSpecConfig) {
         super(rest);
 
         this.filterModel = filterModel;
@@ -106,9 +106,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         this.valueCount = allValues.length;
     }
 
-    /**
-     * Recursively modify a Filter|CompoundFilter to remove all FieldFilters that reference this column
-     */
+    // Recursively modify a Filter|CompoundFilter to remove all FieldFilters referencing this column
     cleanFilter(filter) {
         if (!filter) return filter;
 

package/cmp/grid/filter/GridFilterModel.ts

@@ -5,15 +5,22 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 
-import {GridFilterModelConfig} from '@xh/hoist/cmp/grid';
+import {GridFilterFieldSpec, GridFilterModelConfig} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
-import {action, bindable, observable, makeObservable} from '@xh/hoist/mobx';
-import {CompoundFilter, FieldFilter, Filter,
-    FilterLike, flattenFilter, Store, View, withFilterByField, withFilterByTypes} from '@xh/hoist/data';
+import {
+    CompoundFilter,
+    FieldFilter,
+    Filter,
+    FilterLike,
+    flattenFilter,
+    Store,
+    View,
+    withFilterByField,
+    withFilterByTypes
+} from '@xh/hoist/data';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
-import {find, isString, isNil, castArray, uniq, every, compact} from 'lodash';
-
-import {GridFilterFieldSpec} from './GridFilterFieldSpec';
+import {castArray, compact, every, find, isNil, isString, uniq} from 'lodash';
 import {GridModel} from '../GridModel';
 
 
@@ -174,4 +181,4 @@ export class GridFilterModel extends HoistModel {
         const results = compact(filter.filters.map(it => this.getOuterCompoundFilter(it, field)));
         return results.length === 1 ? results[0] : null;
     }
-}
+}

package/cmp/tab/TabModel.ts

@@ -90,7 +90,7 @@ export class TabModel extends HoistModel {
     @bindable.ref icon: ReactElement;
     @bindable.ref tooltip: ReactNode;
     @observable disabled: boolean;
-    excludeFromSwitcher: boolean;
+    @bindable excludeFromSwitcher: boolean;
     showRemoveAction: boolean;
     content: Content;
 

package/core/HoistService.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
-import {HoistBase, managed, LoadSupport, LoadSpec, Loadable} from './';
+import {HoistBase, managed, LoadSupport, LoadSpec, Loadable, PlainObject} from './';
 
 /**
  * Core superclass for Services in Hoist. Services are special classes used in both Hoist and
@@ -64,12 +64,12 @@ export class HoistService extends HoistBase implements Loadable {
     @managed
     loadSupport: LoadSupport;
 
-    get loadModel()                         {return this.loadSupport?.loadModel}
-    get lastLoadRequested()                 {return this.loadSupport?.lastLoadRequested}
-    get lastLoadCompleted()                 {return this.loadSupport?.lastLoadCompleted}
-    get lastLoadException()                 {return this.loadSupport?.lastLoadException}
-    async refreshAsync(meta?: object)       {return this.loadSupport?.refreshAsync(meta)}
-    async autoRefreshAsync(meta?: object)   {return this.loadSupport?.autoRefreshAsync(meta)}
+    get loadModel()                             {return this.loadSupport?.loadModel}
+    get lastLoadRequested()                     {return this.loadSupport?.lastLoadRequested}
+    get lastLoadCompleted()                     {return this.loadSupport?.lastLoadCompleted}
+    get lastLoadException()                     {return this.loadSupport?.lastLoadException}
+    async refreshAsync(meta?: PlainObject)      {return this.loadSupport?.refreshAsync(meta)}
+    async autoRefreshAsync(meta?: PlainObject)  {return this.loadSupport?.autoRefreshAsync(meta)}
     async doLoadAsync(loadSpec: LoadSpec) {}
     async loadAsync(loadSpec?: LoadSpec|Partial<LoadSpec>) {
         return this.loadSupport?.loadAsync(loadSpec);

package/core/exception/ExceptionHandler.ts

@@ -37,10 +37,9 @@ export interface ExceptionHandlerOptions {
     showAlert?: boolean;
 
     /**
-     * If `showAlert`, which type of alert to display.
-     * Valid options are 'dialog'|'toast'. Defaults to ExceptionHandler.ALERT_TYPE.
+     * If `showAlert`, which type of alert to display. Defaults to ExceptionHandler.ALERT_TYPE.
      */
-    alertType?: string;
+    alertType?: 'dialog'|'toast';
 
     /**
      * Force user to fully refresh the app in order to dismiss - default false, excepting
@@ -80,9 +79,8 @@ export class ExceptionHandler {
 
     /**
      * Default type of alert to use to display exceptions with `showAlert`.
-     * Valid options are 'dialog'|'toast'.
      */
-    static ALERT_TYPE: string = 'dialog';
+    static ALERT_TYPE: 'dialog'|'toast' = 'dialog';
 
     /**
      * Default props provided to toast, when alert type is 'toast'

package/core/load/LoadSpec.ts

@@ -6,6 +6,7 @@
  */
 
 import {LoadSupport} from './';
+import {PlainObject} from '../types/Types';
 
 /**
  * Object describing a load/refresh request in Hoist.
@@ -46,7 +47,7 @@ export class LoadSpec {
     owner: LoadSupport;
 
     /** Application specific information about the load request */
-    meta: object;
+    meta: PlainObject;
 
     /** True if a more recent request to load this object's owner has *started*. */
     get isStale(): boolean {

package/core/model/HoistModel.ts

@@ -6,7 +6,7 @@
  */
 import {forOwn, has, isFunction} from 'lodash';
 import {warnIf} from '@xh/hoist/utils/js';
-import {DefaultHoistProps, HoistBase, managed} from '../';
+import {DefaultHoistProps, HoistBase, managed, PlainObject} from '../';
 import {ModelSelector} from './';
 import {LoadSupport, LoadSpec, Loadable} from '../load';
 import {observable, action, makeObservable} from '@xh/hoist/mobx';
@@ -94,12 +94,12 @@ export abstract class HoistModel extends HoistBase implements Loadable {
     @managed
     loadSupport: LoadSupport;
 
-    get loadModel()                         {return this.loadSupport?.loadModel}
-    get lastLoadRequested()                 {return this.loadSupport?.lastLoadRequested}
-    get lastLoadCompleted()                 {return this.loadSupport?.lastLoadCompleted}
-    get lastLoadException()                 {return this.loadSupport?.lastLoadException}
-    async refreshAsync(meta?: object)       {return this.loadSupport?.refreshAsync(meta)}
-    async autoRefreshAsync(meta?: object)   {return this.loadSupport?.autoRefreshAsync(meta)}
+    get loadModel()                             {return this.loadSupport?.loadModel}
+    get lastLoadRequested()                     {return this.loadSupport?.lastLoadRequested}
+    get lastLoadCompleted()                     {return this.loadSupport?.lastLoadCompleted}
+    get lastLoadException()                     {return this.loadSupport?.lastLoadException}
+    async refreshAsync(meta?: PlainObject)      {return this.loadSupport?.refreshAsync(meta)}
+    async autoRefreshAsync(meta?: PlainObject)  {return this.loadSupport?.autoRefreshAsync(meta)}
     async doLoadAsync(loadSpec: LoadSpec) {}
     async loadAsync(loadSpec?: LoadSpec|Partial<LoadSpec>) {
         return this.loadSupport?.loadAsync(loadSpec);

package/data/cube/View.ts

@@ -10,6 +10,7 @@ import {
     Cube,
     CubeField,
     Filter,
+    FilterLike,
     Query,
     QueryConfig,
     Store,
@@ -17,15 +18,14 @@ import {
     StoreRecordId
 } from '@xh/hoist/data';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {throwIf, logWithDebug} from '@xh/hoist/utils/js';
 import {shallowEqualArrays} from '@xh/hoist/utils/impl';
-import {castArray, forEach, groupBy, isEmpty, isNil, map, find} from 'lodash';
+import {logWithDebug, throwIf} from '@xh/hoist/utils/js';
+import {castArray, find, forEach, groupBy, isEmpty, isNil, map} from 'lodash';
 import {AggregationContext} from './aggregate/AggregationContext';
-
 import {AggregateRow} from './row/AggregateRow';
+import {BaseRow} from './row/BaseRow';
 import {BucketRow} from './row/BucketRow';
 import {LeafRow} from './row/LeafRow';
-import {BaseRow} from './row/BaseRow';
 
 export interface ViewConfig {
     /** Query to be used to construct this view. */
@@ -177,7 +177,7 @@ export class View extends HoistBase {
     }
 
     /** Update the filter on the current Query.*/
-    setFilter(filter: Filter) {
+    setFilter(filter: FilterLike) {
         this.updateQuery({filter});
     }
 
@@ -268,7 +268,7 @@ export class View extends HoistBase {
         if (includeRoot) {
             newRows = [
                 this.cachedRow(rootId, newRows,
-                    () => new AggregateRow(this, rootId, newRows, null, 'Total', {})
+                    () => new AggregateRow(this, rootId, newRows, null, 'Total', 'Total', {})
                 )
             ];
         } else if (!query.includeLeaves && newRows[0]?.isLeaf) {
@@ -308,15 +308,17 @@ export class View extends HoistBase {
             groups = groupBy(records, (it) => it.data[dimName]);
 
         appliedDimensions = {...appliedDimensions};
-        return map(groups, (groupRecords, val) => {
+        return map(groups, (groupRecords, strVal) => {
+            const val = groupRecords[0].data[dimName],
+                id = rootId + `${dimName}=[${strVal}]`;
+
             appliedDimensions[dimName] = val;
-            const id = rootId + `${dimName}=[${val}]`;
 
             let children = this.groupAndInsertRecords(groupRecords, dimensions.slice(1), id, appliedDimensions, leafMap);
             children = this.bucketRows(children, id, appliedDimensions);
 
             return this.cachedRow(id, children,
-                () => new AggregateRow(this, id, children, dim, val, appliedDimensions)
+                () => new AggregateRow(this, id, children, dim, val, strVal, appliedDimensions)
             );
         });
     }

package/data/cube/row/AggregateRow.ts

@@ -25,6 +25,7 @@ export class AggregateRow extends BaseRow {
         children: BaseRow[],
         dim: CubeField,
         val: any,
+        strVal: string,
         appliedDimensions: PlainObject
     ) {
         super(view, id);
@@ -32,7 +33,7 @@ export class AggregateRow extends BaseRow {
 
         this.dim = dim;
         this.dimName = dimName;
-        this.data.cubeLabel = val;
+        this.data.cubeLabel = strVal;
         this.data.cubeDimension = dimName;
 
         this.initAggregate(children, dimName, val, appliedDimensions);

package/desktop/cmp/dash/DashViewModel.ts

@@ -31,12 +31,12 @@ export type DashViewState = Record<string, any>;
  * Content hosted within this view can use this model at runtime to access and set state
  * for the view or access other information.
  */
-export class DashViewModel extends HoistModel {
+export class DashViewModel<T extends DashViewSpec = DashViewSpec> extends HoistModel {
 
     id: string;
 
     /** DashViewSpec used to create this view. */
-    viewSpec: DashViewSpec;
+    viewSpec: T;
 
     /**
      * Parent DashContainerModel or DashCanvasModel. Provided by the container when
@@ -74,7 +74,7 @@ export class DashViewModel extends HoistModel {
         title,
         viewState = null,
         containerModel
-    }: DashViewConfig) {
+    }: DashViewConfig<T>) {
         super();
         makeObservable(this);
         throwIf(!id, 'DashViewModel requires an id');
@@ -99,9 +99,9 @@ export class DashViewModel extends HoistModel {
 }
 
 /** @internal */
-export interface DashViewConfig {
+export interface DashViewConfig<T extends DashViewSpec = DashViewSpec> {
     id: string;
-    viewSpec: DashViewSpec;
+    viewSpec: T;
     icon?: ReactElement;
     title?: string;
     viewState?: DashViewState;

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -101,10 +101,19 @@ export class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashCanvasIte
     private isLoadingState: boolean;
 
     get rglLayout() {
-        return this.layout.map(it => ({
-            ...it,
-            resizeHandles: this.getView(it.i).autoHeight ? ['e'] : ['e', 's', 'se']
-        }));
+        return this.layout.map(it => {
+            const dashCanvasView = this.getView(it.i),
+                {autoHeight, viewSpec} = dashCanvasView;
+
+            return {
+                ...it,
+                resizeHandles: autoHeight ? ['e'] : ['e', 's', 'se'],
+                maxH: viewSpec.maxHeight,
+                minH: viewSpec.minHeight,
+                maxW: viewSpec.maxWidth,
+                minW: viewSpec.minWidth
+            };
+        });
     }
 
     constructor({
@@ -135,6 +144,7 @@ export class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashCanvasIte
                 omit: false,
                 unique: false,
                 allowAdd: true,
+                allowDuplicate: true,
                 allowRemove: true,
                 allowRename: true,
                 height: 5,
@@ -339,8 +349,8 @@ export class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashCanvasIte
             prevLayout = previousViewId ? this.getViewLayout(previousViewId) : null,
             x = prevLayout?.x ?? layout?.x ?? 0,
             y = prevLayout?.y ?? layout?.y ?? this.rows,
-            h = layout?.h ?? viewSpec.height ?? 1,
-            w = layout?.w ?? viewSpec.width ?? 1;
+            h = layout?.h ?? viewSpec.height ?? viewSpec.minHeight ?? 1,
+            w = layout?.w ?? viewSpec.width ?? viewSpec.minWidth ?? 1;
 
         this.setLayout([...this.layout, {i: id, x, y, h, w}]);
         this.viewModels = [...this.viewModels, model];

package/desktop/cmp/dash/canvas/DashCanvasViewModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
+import {DashCanvasViewSpec} from '@xh/hoist/desktop/cmp/dash';
 import {DashViewConfig, DashViewModel} from '../DashViewModel';
 import '@xh/hoist/desktop/register';
 import {createObservableRef} from '@xh/hoist/utils/react';
@@ -13,7 +14,10 @@ import {ReactNode} from 'react';
 /**
  * Model for a content item within a DashCanvas.
  */
-export class DashCanvasViewModel extends DashViewModel {
+export class DashCanvasViewModel extends DashViewModel<DashCanvasViewSpec> {
+
+    /** True (default) to allow duplicating the view. */
+    @observable allowDuplicate: boolean;
 
     /** Hide the Header Panel for the view? Default false. */
     @observable hidePanelHeader: boolean;
@@ -29,9 +33,10 @@ export class DashCanvasViewModel extends DashViewModel {
 
     ref = createObservableRef<HTMLElement>();
 
-    constructor(cfg: DashViewConfig) {
+    constructor(cfg: DashViewConfig<DashCanvasViewSpec>) {
         super(cfg);
         makeObservable(this);
+        this.allowDuplicate = cfg.viewSpec.allowDuplicate ?? true;
         this.hidePanelHeader = !!cfg.viewSpec.hidePanelHeader;
         this.hideMenuButton = !!cfg.viewSpec.hideMenuButton;
         this.autoHeight = !!cfg.viewSpec.autoHeight;

package/desktop/cmp/dash/canvas/DashCanvasViewSpec.ts

@@ -21,6 +21,18 @@ export interface DashCanvasViewSpec extends DashViewSpec {
     /** Initial width of view when added to canvas (default 5). */
     width?: number
 
+    /** Maximum height of the view (default undefined). */
+    maxHeight?: number;
+
+    /** Minimum height of the view (default undefined). */
+    minHeight?: number;
+
+    /** Maximum width of the view (default undefined). */
+    maxWidth?: number
+
+    /** Minimum width of the view (default undefined). */
+    minWidth?: number
+
     /** True to hide the panel header (default false). */
     hidePanelHeader?: boolean;
 
@@ -29,4 +41,7 @@ export interface DashCanvasViewSpec extends DashViewSpec {
 
     /** True to set height automatically based on content height (default false). */
     autoHeight?: boolean;
+
+    /** True (default) to allow duplicating the view. */
+    allowDuplicate?: boolean;
 }

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

@@ -58,7 +58,7 @@ const headerMenu = hoistCmp.factory<DashCanvasViewModel>(
     ({model}) => {
         if (model.hideMenuButton) return null;
 
-        const {viewState, viewSpec, id, containerModel, positionParams, title} = model,
+        const {allowDuplicate, viewState, viewSpec, id, containerModel, positionParams, title} = model,
             {contentLocked, renameLocked} = containerModel,
 
             addMenuItems = createViewMenuItems({
@@ -101,7 +101,7 @@ const headerMenu = hoistCmp.factory<DashCanvasViewModel>(
                     {
                         text: 'Duplicate',
                         icon: Icon.copy(),
-                        hidden: contentLocked || viewSpec.unique,
+                        hidden: !allowDuplicate || contentLocked || viewSpec.unique,
                         actionFn: () =>
                             containerModel.addViewInternal(viewSpec.id, {
                                 layout: getDuplicateLayout(positionParams, model),

package/desktop/cmp/panel/PanelModel.ts

@@ -159,6 +159,7 @@ export class PanelModel extends HoistModel {
     // Implementation
     //-----------------
     _resizeRef;
+    splitterRef = createRef<HTMLDivElement>();
 
     constructor({
         collapsible = true,

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

@@ -30,7 +30,8 @@ export const splitter = hoistCmp.factory({
                     icon: Icon[chevron](),
                     onClick: () => panelModel.toggleCollapsed(),
                     omit: !showSplitterCollapseButton || !collapsible
-                })
+                }),
+                ref: panelModel.splitterRef
             };
 
         return cmp(cfg);

package/desktop/cmp/panel/impl/dragger/DraggerModel.ts

@@ -155,8 +155,8 @@ export class DraggerModel extends HoistModel {
 
     private getDraggableSplitter() {
         // clone .xh-resizable-splitter to get its styling
-        const splitter = this.panelEl.querySelector('.xh-resizable-splitter'),
-            ret = splitter.cloneNode();
+        const splitter = this.panelModel.splitterRef.current,
+            ret = splitter.cloneNode() as HTMLDivElement;
 
         ret.style.position = 'absolute';
         ret.style.display = 'none'; // display = none needed to prevent flash

package/desktop/cmp/rest/RestGridModel.ts

@@ -185,7 +185,7 @@ export class RestGridModel extends HoistModel {
     }
 
     cloneRecord(record: StoreRecord) {
-        const clone = this.store.editableDataForRecord(record as any);
+        const clone = this.store.editableDataForRecord(record);
         this.prepareCloneFn?.({record, clone});
         this.formModel.openClone(clone);
     }
@@ -247,4 +247,4 @@ export class RestGridModel extends HoistModel {
     private parseStore(store: RestStore|RestStoreConfig) {
         return store instanceof RestStore ? store : this.markManaged(new RestStore(store));
     }
-}
+}

package/desktop/cmp/rest/data/RestStore.ts

@@ -5,13 +5,9 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {PlainObject, XH} from '@xh/hoist/core';
-import {
-    StoreRecord,
-    UrlStore,
-    UrlStoreConfig
-} from '@xh/hoist/data';
+import {StoreRecord, StoreRecordId, UrlStore, UrlStoreConfig} from '@xh/hoist/data';
 import '@xh/hoist/desktop/register';
-import {filter, keyBy, mapValues} from 'lodash';
+import {filter, isNil, keyBy, mapValues} from 'lodash';
 import {RestField, RestFieldSpec} from './RestField';
 
 
@@ -81,17 +77,17 @@ export class RestStore extends UrlStore {
         return resp;
     }
 
-    async addRecordAsync(rec: {id: string, data: PlainObject}) {
+    async addRecordAsync(rec: {id?: StoreRecordId, data: PlainObject}) {
         return this.saveRecordInternalAsync(rec, true)
             .linkTo(this.loadModel);
     }
 
-    async saveRecordAsync(rec: {id: string, data: PlainObject}) {
+    async saveRecordAsync(rec: {id: StoreRecordId, data: PlainObject}) {
         return this.saveRecordInternalAsync(rec, false)
             .linkTo(this.loadModel);
     }
 
-    async bulkUpdateRecordsAsync(ids: string[], newParams: PlainObject) {
+    async bulkUpdateRecordsAsync(ids: StoreRecordId[], newParams: PlainObject) {
         const {url} = this,
             resp = await XH.fetchService.putJson({
                 url: `${url}/bulkUpdate`,
@@ -104,7 +100,7 @@ export class RestStore extends UrlStore {
         return resp;
     }
 
-    editableDataForRecord(record: {id: string, data: PlainObject}): PlainObject {
+    editableDataForRecord(record: {data: PlainObject}): PlainObject {
         const {data} = record,
             editable = keyBy(filter(this.fields, 'editable'), 'name');
         return mapValues(editable, (v, k) => data[k]);
@@ -117,12 +113,15 @@ export class RestStore extends UrlStore {
     //--------------------------------
     // Implementation
     //--------------------------------
-    private async saveRecordInternalAsync(rec: {id: string, data: PlainObject}, isAdd) {
-        let {url, dataRoot} = this;
-        if (!isAdd) url += '/' + rec.id;
+    private async saveRecordInternalAsync(rec: {id?: StoreRecordId, data: PlainObject}, isAdd) {
+        let {url, dataRoot} = this,
+            {id} = rec;
+
+        if (!isAdd) url += '/' + id;
 
         // Only include editable fields in the request data
-        const data = {id: rec.id, ...this.editableDataForRecord(rec)};
+        const data = this.editableDataForRecord(rec);
+        if (!isNil(id)) data.id = id;
 
         const fetchMethod = isAdd ? 'postJson' : 'putJson',
             response = await XH.fetchService[fetchMethod]({url, body: {data}}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "55.1.0",
+  "version": "55.2.1",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",