@nocobase/client-v2 2.1.0-beta.37 → 2.1.0-beta.38

package/src/flow/models/blocks/table/TableBlockModel.tsx

@@ -39,6 +39,7 @@ import { TableColumnModel } from './TableColumnModel';
 import { extractIndex, adjustColumnOrder, setNestedValue, extractIds, getRowKey, useBlockHeight } from './utils';
 import { resolveTableSorterField } from './sortUtils';
 import { commonConditionHandler, ConditionBuilder } from '../../../components/ConditionBuilder';
+import { BulkDeleteActionModel } from '../../actions/BulkDeleteActionModel';
 import {
   applyMobilePaginationProps,
   createCompactSimpleItemRender,
@@ -128,6 +129,18 @@ const rowSelectCheckboxWrapperNoIndexClass = css`
   }
 `;
 
+const leftAuxiliaryColumnCellClass = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+`;
+
+const leftAuxiliaryColumnCellWithHandleClass = css`
+  padding-left: 24px;
+`;
+
 const highlightedRowClass = css`
   & td {
     background-color: #e6f7ff !important;
@@ -382,21 +395,76 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     },
   };
 
-  renderCell = (checked, record, index, originNode) => {
-    if (!this.props.dragSort && !this.props.showIndex) {
-      return originNode;
-    }
-    const current = this.resource.getPage();
+  isRowSelectionEnabled() {
+    return this.props.enableRowSelection !== false;
+  }
+
+  isShowIndexEnabled() {
+    return this.props.showIndex !== false;
+  }
 
+  getRecordIndex(record: Record<string, unknown>, index: number) {
+    let nextIndex = index;
+    const current = this.resource.getPage();
     const pageSize = this.resource.getPageSize() || 20;
     if (current) {
-      index = index + (current - 1) * pageSize + 1;
+      nextIndex = nextIndex + (current - 1) * pageSize + 1;
     } else {
-      index = index + 1;
+      nextIndex = nextIndex + 1;
     }
-    if (record.__index) {
-      index = extractIndex(record.__index);
+    const treeIndex = record?.__index;
+    if (treeIndex) {
+      return extractIndex(treeIndex);
     }
+    return nextIndex;
+  }
+
+  getLeftAuxiliaryColumn() {
+    const showIndex = this.isShowIndexEnabled();
+    const showDragHandle = this.props.dragSort && this.props.dragSortBy;
+    if (!showIndex && !showDragHandle) {
+      return null;
+    }
+
+    return {
+      key: '__rowSelectionDisabledAuxiliary__',
+      width: showDragHandle ? 74 : 50,
+      align: 'center' as const,
+      render: (_value: unknown, record: Record<string, unknown>, index: number) => {
+        const displayIndex = this.getRecordIndex(record, index);
+        const rowKey = getRowKey(record, this.collection.filterTargetKey);
+        const rowKeyString = rowKey == null ? rowKey : String(rowKey);
+        return (
+          <div
+            className={classNames(leftAuxiliaryColumnCellClass, {
+              [leftAuxiliaryColumnCellWithHandleClass]: showDragHandle,
+            })}
+          >
+            {showDragHandle && (
+              <SortHandle
+                id={rowKeyString}
+                style={{
+                  position: 'absolute',
+                  left: 0,
+                  top: '50%',
+                  justifyContent: 'center',
+                  transform: 'translateY(-50%)',
+                }}
+              />
+            )}
+            {showIndex && <TableIndex index={displayIndex} aria-label={`table-index-${displayIndex}`} />}
+          </div>
+        );
+      },
+    };
+  }
+
+  renderCell = (checked, record, index, originNode) => {
+    const showIndex = this.isShowIndexEnabled();
+    if (!this.props.dragSort && !showIndex) {
+      return originNode;
+    }
+    index = this.getRecordIndex(record, index);
     const rowKey = getRowKey(record, this.collection.filterTargetKey);
     const rowKeyString = rowKey == null ? rowKey : String(rowKey);
     const showDragHandle = this.props.dragSort && this.props.dragSortBy;
@@ -406,7 +474,7 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
         aria-label={`table-index-${index}`}
         className={classNames(checked ? 'checked' : null, rowSelectCheckboxWrapperClass, {
           [rowSelectCheckboxWrapperClassHover]: true,
-          [rowSelectCheckboxWrapperNoIndexClass]: !this.props.showIndex,
+          [rowSelectCheckboxWrapperNoIndexClass]: !showIndex,
         })}
       >
         {showDragHandle && (
@@ -422,7 +490,7 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
           />
         )}
         <div className={classNames(checked ? 'checked' : null, rowSelectCheckboxContentClass)}>
-          {this.props.showIndex && <TableIndex index={index} />}
+          {showIndex && <TableIndex index={index} />}
         </div>
 
         <div className={classNames('nb-origin-node', checked ? 'checked' : null, rowSelectCheckboxCheckedClassHover)}>
@@ -445,6 +513,16 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     );
   }
 
+  shouldRenderAction(action: ActionModel, isConfigMode: boolean) {
+    if (action.hidden && !isConfigMode) {
+      return false;
+    }
+    if (!isConfigMode && !this.isRowSelectionEnabled() && action instanceof BulkDeleteActionModel) {
+      return false;
+    }
+    return true;
+  }
+
   pagination() {
     const totalCount = this.resource.getMeta('count');
     const pageSize = this.resource.getPageSize();
@@ -509,6 +587,9 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
           >
             <Space wrap>
               {this.mapSubModels('actions', (action) => {
+                if (!this.shouldRenderAction(action, isConfigMode)) {
+                  return null;
+                }
                 // @ts-ignore
                 if (action.props.position === 'left') {
                   return (
@@ -527,8 +608,8 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
             </Space>
             <Space wrap>
               {this.mapSubModels('actions', (action) => {
-                if (action.hidden && !isConfigMode) {
-                  return;
+                if (!this.shouldRenderAction(action, isConfigMode)) {
+                  return null;
                 }
                 // @ts-ignore
                 if (action.props.position !== 'left') {
@@ -673,6 +754,20 @@ TableBlockModel.registerFlow({
         });
       },
     },
+    enableRowSelection: {
+      title: tExpr('Enable row selection'),
+      uiMode: { type: 'switch', key: 'enableRowSelection' },
+      defaultParams: {
+        enableRowSelection: true,
+      },
+      handler(ctx, params) {
+        const model = ctx.model as TableBlockModel;
+        model.setProps('enableRowSelection', params.enableRowSelection);
+        if (!params.enableRowSelection) {
+          model.resource.setSelectedRows([]);
+        }
+      },
+    },
     showRowNumbers: {
       title: tExpr('Show row numbers'),
       uiMode: { type: 'switch', key: 'showIndex' },
@@ -875,7 +970,11 @@ const HighPerformanceTable = React.memo(
       [model.collection.filterTargetKey],
     );
 
+    const enableRowSelection = model.isRowSelectionEnabled();
     const rowSelection = useMemo(() => {
+      if (!enableRowSelection) {
+        return undefined;
+      }
       return {
         columnWidth: 50,
         type: 'checkbox',
@@ -887,7 +986,10 @@ const HighPerformanceTable = React.memo(
         renderCell: model.renderCell,
         ...model.rowSelectionProps,
       };
-    }, [model, selectedRowKeys]);
+    }, [enableRowSelection, model, selectedRowKeys]);
+
+    const leftAuxiliaryColumn = enableRowSelection ? null : model.getLeftAuxiliaryColumn();
+    const mergedColumns = leftAuxiliaryColumn ? [leftAuxiliaryColumn, ...columns] : columns;
 
     const handleChange = useCallback(
       async (pagination, filters, sorter) => {
@@ -923,7 +1025,7 @@ const HighPerformanceTable = React.memo(
       [highlightedRowKey, model.collection?.filterTargetKey],
     );
 
-    const pagination = useMemo(() => _pagination, [dataSource]);
+    const pagination = _pagination;
 
     const onRow = useCallback(
       (record, rowIndex) => {
@@ -1029,7 +1131,7 @@ const HighPerformanceTable = React.memo(
         virtual={virtual}
         scroll={tableScroll}
         dataSource={dataSource}
-        columns={columns}
+        columns={mergedColumns}
         pagination={pagination}
         onChange={handleChange}
         rowClassName={rowClassName}

package/src/flow/models/blocks/table/__tests__/TableBlockModel.rowSelection.test.tsx

@@ -0,0 +1,114 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { render, screen } from '@testing-library/react';
+import { FlowEngine } from '@nocobase/flow-engine';
+import '@nocobase/client';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { BulkDeleteActionModel } from '../../../actions/BulkDeleteActionModel';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel() {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: 'posts-table',
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+describe('TableBlockModel row selection setting', () => {
+  it('keeps row selection enabled by default', () => {
+    const model = createTableModel();
+
+    expect(model.isRowSelectionEnabled()).toBe(true);
+
+    model.setProps('enableRowSelection', false);
+
+    expect(model.isRowSelectionEnabled()).toBe(false);
+  });
+
+  it('builds a standalone row-number column when row selection is disabled', () => {
+    const model = createTableModel();
+    model.resource.setPage(2);
+    model.resource.setPageSize(20);
+    model.setProps('enableRowSelection', false);
+    model.setProps('showIndex', true);
+
+    const column = model.getLeftAuxiliaryColumn();
+
+    expect(column).toMatchObject({
+      key: '__rowSelectionDisabledAuxiliary__',
+      width: 50,
+      align: 'center',
+    });
+
+    render(<>{column?.render(null, { id: 1, title: 'first post' }, 1)}</>);
+
+    expect(screen.getByLabelText('table-index-22').textContent).toBe('22');
+  });
+
+  it('omits the standalone column when row selection and row numbers are both disabled', () => {
+    const model = createTableModel();
+    model.setProps('enableRowSelection', false);
+    model.setProps('showIndex', false);
+
+    expect(model.getLeftAuxiliaryColumn()).toBeNull();
+  });
+
+  it('keeps a standalone drag handle column without row selection checkboxes', () => {
+    const model = createTableModel();
+    model.setProps('enableRowSelection', false);
+    model.setProps('showIndex', false);
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+
+    expect(model.getLeftAuxiliaryColumn()).toMatchObject({
+      key: '__rowSelectionDisabledAuxiliary__',
+      width: 74,
+      align: 'center',
+    });
+  });
+
+  it('hides bulk delete in runtime when row selection is disabled', () => {
+    const model = createTableModel();
+    const bulkDelete = new BulkDeleteActionModel({
+      uid: 'bulk-delete',
+      use: 'BulkDeleteActionModel',
+      flowEngine: model.flowEngine,
+    });
+
+    expect(model.shouldRenderAction(bulkDelete, false)).toBe(true);
+
+    model.setProps('enableRowSelection', false);
+
+    expect(model.shouldRenderAction(bulkDelete, false)).toBe(false);
+    expect(model.shouldRenderAction(bulkDelete, true)).toBe(true);
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/SubFormFieldModel.tsx

@@ -213,6 +213,7 @@ const ArrayNester = ({
   const isConfigMode = !!model.context.flowSettingsEnabled;
   const { t } = useTranslation();
   const rowIndex = model.context.fieldIndex || [];
+  const parentFieldPathArray = (model?.parent as any)?.context?.fieldPathArray || [];
   // 用来缓存每行的 fork，保证每行只创建一次
   const forksRef = useRef<Record<string, any>>({});
   const collectionName = model.context.collectionField.name;
@@ -251,7 +252,7 @@ const ArrayNester = ({
               {displayFields.map((field: any, index) => {
                 const { key, name: fieldName, isDefault } = field;
                 const fieldIndex = [...rowIndex, `${collectionName}:${index}`];
-
+                const fieldPathArray = parentFieldPathArray;
                 // 每行只创建一次 fork
                 if (!forksRef.current[key]) {
                   const fork = gridModel.createFork({ disabled });
@@ -268,6 +269,11 @@ const ArrayNester = ({
                   get: () => fieldIndex,
                   cache: false,
                 });
+                console.log(fieldPathArray);
+                currentFork.context.defineProperty('fieldPathArray', {
+                  get: () => fieldPathArray,
+                  cache: false,
+                });
 
                 const getRowItem = createItemChainGetter({
                   valueAccessor: () => currentFork.context.form.getFieldValue([name, fieldName]),

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -269,7 +269,7 @@ export function SubTableField(props) {
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-              minHeight: '20px',
+              minHeight: '36px',
             }}
           >
             <Space>

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/index.tsx

@@ -60,13 +60,13 @@ export class SubTableFieldModel extends AssociationFieldModel {
   setCurrentPage;
   currentPageSize;
 
-  getCurrentValue = () => {
+  getCurrentValue() {
     const fallback = Array.isArray(this.props.value) ? this.props.value : [];
-    const fieldPathArray = this.parent?.context?.fieldPathArray;
+    const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
     if (!Array.isArray(fieldPathArray) || !fieldPathArray.length) return fallback;
     const latest = this.context.blockModel?.context?.form?.getFieldValue?.(fieldPathArray as any);
     return Array.isArray(latest) ? latest : fallback;
-  };
+  }
 
   get collection() {
     return this.context.collection;
@@ -111,6 +111,7 @@ export class SubTableFieldModel extends AssociationFieldModel {
       },
     };
     const isConfigMode = !!this.context.flowSettingsEnabled;
+    const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
     return (
       <SubTableField
         {...this.props}
@@ -121,8 +122,8 @@ export class SubTableFieldModel extends AssociationFieldModel {
         parentItem={this.context.item}
         filterTargetKey={this.collection.filterTargetKey}
         formValuesChangeEmitter={this.context.blockModel?.emitter}
-        fieldPathArray={this.parent?.context?.fieldPathArray}
-        getCurrentValue={this.getCurrentValue}
+        fieldPathArray={fieldPathArray}
+        getCurrentValue={() => this.getCurrentValue()}
       />
     );
   }

package/src/flow/models/fields/ClickableFieldModel.tsx

@@ -191,7 +191,15 @@ export class ClickableFieldModel extends FieldModel {
   }
 
   renderInDisplayStyle(value, record?, isToMany?, wrap?) {
-    const { clickToOpen = false, displayStyle, titleField, overflowMode, disabled, ...restProps } = this.props;
+    const {
+      clickToOpen = false,
+      displayStyle,
+      titleField,
+      overflowMode,
+      disabled,
+      timeFormat,
+      ...restProps
+    } = this.props;
     const titleCollectionField = titleField
       ? this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField
       : this.context.collectionField;

package/src/flow/models/fields/DisplayTimeFieldModel.tsx

@@ -15,7 +15,7 @@ import { ClickableFieldModel } from './ClickableFieldModel';
 export class DisplayTimeFieldModel extends ClickableFieldModel {
   public renderComponent(value) {
     const { prefix, suffix, style, className } = this.props;
-    const format = this.props['format'] || 'HH:mm:ss';
+    const format = this.props['timeFormat'] || this.props['format'] || 'HH:mm:ss';
     const result = value && dayjs(value, 'HH:mm:ss').format(format);
     return (
       <span className={className} style={style}>

package/src/flow/models/fields/TimeFieldModel.tsx

@@ -15,7 +15,7 @@ import { FieldModel } from '../base/FieldModel';
 import { MobileTimePicker } from './mobile-components/MobileTimePicker';
 
 const TimePickerCom = (props) => {
-  const format = props['format'] || 'HH:mm:ss';
+  const format = props['timeFormat'] || props['format'] || 'HH:mm:ss';
   const onChange = props.onChange;
   const ctx = useFlowModelContext();
   const componentProps = {

package/src/flow/models/fields/__tests__/TimeFieldModel.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine, FlowModelProvider } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import React from 'react';
+import { DisplayTimeFieldModel } from '../DisplayTimeFieldModel';
+import { TimeFieldModel } from '../TimeFieldModel';
+
+describe('TimeFieldModel', () => {
+  it('uses timeFormat before format when rendering the editable time picker', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TimeFieldModel });
+
+    const model = engine.createModel<TimeFieldModel>({
+      use: TimeFieldModel,
+      uid: 'time-field-format',
+      props: {
+        value: '13:05:06',
+        format: 'HH:mm:ss',
+        timeFormat: 'hh:mm:ss a',
+      },
+    });
+
+    render(
+      <FlowModelProvider model={model}>
+        <>{model.render()}</>
+      </FlowModelProvider>,
+    );
+
+    expect(screen.getByDisplayValue('01:05:06 pm')).toBeInTheDocument();
+  });
+});
+
+describe('DisplayTimeFieldModel', () => {
+  it('uses timeFormat before format when rendering read pretty time text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTimeFieldModel });
+
+    const model = engine.createModel<DisplayTimeFieldModel>({
+      use: DisplayTimeFieldModel,
+      uid: 'display-time-field-format',
+      props: {
+        value: '13:05:06',
+        format: 'HH:mm:ss',
+        timeFormat: 'hh:mm:ss a',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('01:05:06 pm')).toBeInTheDocument();
+  });
+});

package/src/flow/models/fields/mobile-components/MobileDatePicker.tsx

@@ -9,11 +9,26 @@
 
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { dayjs } from '@nocobase/utils/client';
+import type { Dayjs } from 'dayjs';
 import { DatePicker } from 'antd';
 import { DatePicker as AntdMobileDatePicker } from 'antd-mobile';
 import React from 'react';
 import { useCallback, useState } from 'react';
 
+type DateValue = string | number | Date | Dayjs | null | undefined;
+
+function toNativeDate(value: DateValue): Date | null {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  const parsed = dayjs.isDayjs(value) ? value : dayjs(value);
+  return parsed.isValid() ? parsed.toDate() : null;
+}
+
 export const MobileDatePicker = (props) => {
   const {
     value,
@@ -56,9 +71,9 @@ export const MobileDatePicker = (props) => {
         return data;
     }
   }, []);
-  // Convert dayjs min/max to native Date for Antd Mobile Picker
-  const minDate = min ? (min as any).toDate() : new Date(1950, 0, 1);
-  const maxDate = max ? (max as any).toDate() : new Date(2050, 11, 31);
+  const mobileValue = toNativeDate(value);
+  const minDate = toNativeDate(min) ?? new Date(1950, 0, 1);
+  const maxDate = toNativeDate(max) ?? new Date(2050, 11, 31);
 
   return (
     <>
@@ -78,6 +93,7 @@ export const MobileDatePicker = (props) => {
         cancelText={t('Cancel')}
         confirmText={t('Confirm')}
         visible={visible}
+        value={mobileValue}
         title={<a onClick={handleClear}>{t('Clear')}</a>}
         onClose={() => {
           setVisible(false);

package/src/flow/models/fields/mobile-components/__tests__/MobileDatePicker.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@nocobase/test/client';
+import { dayjs } from '@nocobase/utils/client';
+import { MobileDatePicker } from '../MobileDatePicker';
+
+type MockDatePickerProps = Record<string, unknown> & {
+  value?: unknown;
+  visible?: boolean;
+};
+
+const mockState = vi.hoisted(
+  (): {
+    antdDatePickerProps?: MockDatePickerProps;
+    mobileDatePickerProps?: MockDatePickerProps;
+  } => ({
+    antdDatePickerProps: undefined,
+    mobileDatePickerProps: undefined,
+  }),
+);
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
+  return {
+    ...actual,
+    useFlowModelContext: () => ({
+      t: (value: string) => value,
+    }),
+  };
+});
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<typeof import('antd')>('antd');
+  return {
+    ...actual,
+    DatePicker: (props: MockDatePickerProps) => {
+      mockState.antdDatePickerProps = props;
+      return <div data-testid="antd-date-picker" />;
+    },
+  };
+});
+
+vi.mock('antd-mobile', () => ({
+  DatePicker: (props: MockDatePickerProps) => {
+    mockState.mobileDatePickerProps = props;
+    return props.visible ? <div data-testid="mobile-date-picker" /> : null;
+  },
+}));
+
+describe('MobileDatePicker', () => {
+  beforeEach(() => {
+    mockState.antdDatePickerProps = undefined;
+    mockState.mobileDatePickerProps = undefined;
+  });
+
+  it('uses the form value as the mobile popup value', () => {
+    render(
+      <MobileDatePicker
+        value={dayjs('2037-03-06 12:34:56')}
+        showTime
+        picker="date"
+        timeFormat="HH:mm:ss"
+        onChange={vi.fn()}
+      />,
+    );
+
+    const trigger = screen.getByTestId('antd-date-picker').parentElement as HTMLElement;
+    act(() => {
+      fireEvent.click(trigger);
+    });
+
+    const popupValue = mockState.mobileDatePickerProps?.value;
+    expect(screen.getByTestId('mobile-date-picker')).toBeInTheDocument();
+    expect(popupValue).toBeInstanceOf(Date);
+    if (!(popupValue instanceof Date)) {
+      throw new Error('Expected popup value to be a Date');
+    }
+    expect(popupValue.getFullYear()).toBe(2037);
+    expect(popupValue.getMonth()).toBe(2);
+    expect(popupValue.getDate()).toBe(6);
+    expect(popupValue.getHours()).toBe(12);
+    expect(popupValue.getMinutes()).toBe(34);
+    expect(popupValue.getSeconds()).toBe(56);
+  });
+});

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -282,7 +282,7 @@ const UIEditorTopbarAction = observer(
     const { token } = theme.useToken();
     const customToken = token as CustomToken;
     const designable = !!flowEngine.context.flowSettingsEnabled;
-    const isMobileLayout = !!flowEngine.context.isMobileLayout;
+    const isMobileLayout = !!model.context.isMobileLayout;
 
     useHotkeys(
       'ctrl+shift+u',