@lvce-editor/static-server 0.67.3 → 0.67.5

package/static/{40424f5 → fd11a0c}/packages/keybindings-view-worker/dist/keyBindingsViewWorkerMain.js

@@ -1009,6 +1009,7 @@ const WebWorkerRpcClient = {
 };
 
 const CheckBox = 'checkbox';
+const Document = 'document';
 const None$1 = 'none';
 
 const Button$1 = 1;
@@ -1018,7 +1019,7 @@ const Div = 4;
 const Input$1 = 6;
 const Kbd = 7;
 const Span = 8;
-const Table$2 = 9;
+const Table$1 = 9;
 const TBody = 10;
 const Td = 11;
 const Text = 12;
@@ -1105,8 +1106,14 @@ const Plus$1 = 132;
 const KeyBindingsTable$1 = 26;
 
 const RendererWorker = 1;
+const TextMeasurementWorker = 7011;
 
+const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
+const SetDom2 = 'Viewlet.setDom2';
+const SetValueByName = 'Viewlet.setValueByName';
+
+const FocusKeyBindingsTable$1 = 39;
 
 const rpcs = Object.create(null);
 const set$2 = (id, rpc) => {
@@ -1147,9 +1154,6 @@ const {
 const showContextMenu = async (x, y, id, ...args) => {
   return invoke$1('ContextMenu.show', x, y, id, ...args);
 };
-const setFocus$1 = key => {
-  return invoke$1('Focus.setFocus', key);
-};
 const writeClipBoardText = async text => {
   await invoke$1('ClipBoard.writeText', /* text */text);
 };
@@ -1607,7 +1611,6 @@ const getFilteredKeyBindings = (keyBindings, value) => {
 };
 
 const Input = 1;
-const Table$1 = 2;
 
 const User = 1;
 const Script = 2;
@@ -1642,15 +1645,21 @@ const handleInput = (state, value) => {
   const maxLineY = Math.min(sorted.length, maxVisibleItems);
   return {
     ...state,
-    value,
+    focus: Input,
+    inputSource: User,
     items: sorted,
     maxLineY,
-    inputSource: User,
-    focus: Input
+    value
   };
 };
 
 const clearInput = state => {
+  const {
+    value
+  } = state;
+  if (value === '') {
+    return state;
+  }
   const newState = handleInput(state, '');
   return {
     ...newState,
@@ -1713,6 +1722,7 @@ const create = (uid, uri, x, y, width, height, platform) => {
     columnWidth3: 0,
     resizerOneLeft: 0,
     resizerTwoLeft: 0,
+    paddingLeft: 27,
     contentPadding: /* left */27 + /* right */15,
     defineKeyBindingsId: -1,
     deltaY: 0,
@@ -1737,7 +1747,7 @@ const create = (uid, uri, x, y, width, height, platform) => {
     resizerDownId: 0,
     searchHeaderHeight: 50,
     selectedIndex: -1,
-    tableHeaderHeight: 24,
+    tableHeaderHeight: 30,
     uid,
     uri,
     value: '',
@@ -1746,7 +1756,8 @@ const create = (uid, uri, x, y, width, height, platform) => {
     x,
     y,
     visibleItems: [],
-    recordingKeysLabelWidth: 0
+    recordingKeysLabelWidth: 0,
+    placeholder: ''
   };
   set(uid, state, state);
 };
@@ -1768,7 +1779,7 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.selectedIndex === newState.selectedIndex && oldState.focusedIndex === newState.focusedIndex && oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3 && oldState.isRecordingKeys === newState.isRecordingKeys && oldState.isSortingByPrecedence === newState.isSortingByPrecedence && oldState.editingWhenExpression === newState.editingWhenExpression;
+  return oldState.editingWhenExpression === newState.editingWhenExpression && oldState.focusedIndex === newState.focusedIndex && oldState.isRecordingKeys === newState.isRecordingKeys && oldState.isRecordingKeys === newState.isRecordingKeys && oldState.isSortingByPrecedence === newState.isSortingByPrecedence && oldState.items === newState.items && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.selectedIndex === newState.selectedIndex;
 };
 
 const RenderKeyBindings = 1;
@@ -1791,6 +1802,9 @@ const modules = [isEqual$2, isEqual$6, isEqual$1, isEqual$4, isEqual$3, isEqual,
 const numbers = [RenderKeyBindings, RenderColumnWidth, RenderValue, RenderFocus, RenderFocusContext, RenderWhenExpressionValue, RenderCss];
 
 const diff = (oldState, newState) => {
+  if (oldState === newState) {
+    return [];
+  }
   const diffResult = [];
   for (let i = 0; i < modules.length; i++) {
     const fn = modules[i];
@@ -1986,6 +2000,10 @@ const getKeyBindings = () => {
     key: Escape$2,
     command: 'KeyBindings.cancelEditingWhenExprssion',
     when: FocusKeyBindingsWhenExpression
+  }, {
+    key: Escape$2,
+    command: 'KeyBindings.handleEscape',
+    when: FocusKeyBindingsTable
   }];
 };
 
@@ -2009,10 +2027,12 @@ const Command = 'Command';
 const Copy = 'Copy';
 const CopyCommandId = 'Copy Command ID';
 const CopyCommandTitle = 'Copy Command Title';
+const Edit$1 = 'Edit';
 const Key$1 = 'Key';
 const KeyBindings$1 = 'KeyBindings';
 const NoKeyBindingsFound = 'No matching Keybindings found';
 const RecordingKeys = 'Recording keys';
+const RecordingKeysPressEscapeToExit = `Recording Keys. Press Escape to exit (⇅ for history)`;
 const RecordKeys$2 = 'Record keys';
 const RemoveKeyBinding = 'Remove Keybinding...';
 const ResetKeyBinding = 'Reset Keybinding';
@@ -2031,6 +2051,9 @@ const command = () => {
 const when = () => {
   return i18nString(When);
 };
+const edit = () => {
+  return i18nString(Edit$1);
+};
 const key = () => {
   return i18nString(Key$1);
 };
@@ -2082,6 +2105,9 @@ const sortByPrecedence$1 = () => {
 const clearSearchInput = () => {
   return i18nString(ClearSearchInput$1);
 };
+const recordingKeysPressEscapeToExit = () => {
+  return i18nString(RecordingKeysPressEscapeToExit);
+};
 
 const Separator = 1;
 const None = 0;
@@ -2146,8 +2172,6 @@ const getMenuEntryIds = () => {
   return [KeyBindingsTable$1];
 };
 
-const setFocus = setFocus$1;
-
 const getIndex = (state, eventX, eventY) => {
   const {
     minLineY,
@@ -2172,26 +2196,34 @@ const showDefineKeyBinding = async () => {
   await openWidget(DefineKeyBinding);
 };
 
+const handleClickIndex = async (state, index, showDefineKeyBinding$1) => {
+  const {
+    uid
+  } = state;
+  const newState = {
+    ...state,
+    focusedIndex: index,
+    selectedIndex: index,
+    focus: FocusKeyBindingsTable$1
+  };
+  if (showDefineKeyBinding$1) {
+    set(uid, newState, newState);
+    await showDefineKeyBinding();
+    return state;
+  }
+  return newState;
+};
+
 const handleClick = async (state, eventX, eventY) => {
   const {
     padding,
     editIconSize,
     x
   } = state;
-  const selectedIndex = getIndex(state, eventX, eventY);
+  const index = getIndex(state, eventX, eventY);
   const relativeX = eventX - x;
-  if (relativeX > padding && relativeX < padding + editIconSize) {
-    await showDefineKeyBinding();
-  } else {
-    // TODO avoid side effect, make focus functional
-    await setFocus(FocusKeyBindingsTable);
-  }
-  return {
-    ...state,
-    focusedIndex: selectedIndex,
-    selectedIndex,
-    focus: Table$1
-  };
+  const showDefine = relativeX > padding && relativeX < padding + editIconSize;
+  return handleClickIndex(state, index, showDefine);
 };
 
 const show = async (x, y, id, ...args) => {
@@ -2216,15 +2248,7 @@ const handleContextMenu = async (state, button, eventX, eventY) => {
 
 const handleDoubleClick = async (state, eventX, eventY) => {
   const selectedIndex = getIndex(state, eventX, eventY);
-  await showDefineKeyBinding();
-  // TODO wait promise?
-  // showDefineWidget(state, selectedIndex)
-  return {
-    ...state,
-    focusedIndex: selectedIndex,
-    selectedIndex,
-    defineKeyBindingsId: 1
-  };
+  return handleClickIndex(state, selectedIndex, true);
 };
 
 const handleInputFocus = state => {
@@ -2234,10 +2258,19 @@ const handleInputFocus = state => {
   };
 };
 
+const getPlaceholder = isRecordingKeys => {
+  if (isRecordingKeys) {
+    return recordingKeysPressEscapeToExit();
+  }
+  return typeToSearchKeyBindings();
+};
+
 const stopRecordingKeys = state => {
+  const placeholder = getPlaceholder(false);
   return {
     ...state,
-    isRecordingKeys: false
+    isRecordingKeys: false,
+    placeholder
   };
 };
 
@@ -2248,7 +2281,11 @@ const handleEscape = state => {
   if (isRecordingKeys) {
     return stopRecordingKeys(state);
   }
-  return state;
+  return {
+    ...state,
+    focusedIndex: -1,
+    focus: FocusKeyBindingsTable$1
+  };
 };
 
 const Escape$1 = 'Escape';
@@ -2271,38 +2308,80 @@ const handleKeyDown = (state, altKey, ctrlKey, key) => {
   };
 };
 
-const handleResizerClick = (state, id, x) => {
+const getResizerId = name => {
+  switch (name) {
+    case 'ResizerOne':
+      return 1;
+    case 'ResizerTwo':
+      return 2;
+    default:
+      return 0;
+  }
+};
+const handleResizerClick = (state, name, x) => {
+  const resizerDownId = getResizerId(name);
   return {
     ...state,
-    resizerDownId: id
+    resizerDownId
   };
 };
 
-const handleResizerMove = (state, eventX) => {
-  const {
-    resizerDownId,
-    contentPadding,
-    width,
-    columnWidth1,
-    columnWidth2,
-    x
-  } = state;
+const distributeColumns = (resizerDownId, contentPadding, width, columnWidth1, columnWidth2, x, eventX) => {
+  const minColumnWidth = 100;
   const contentWidth = width - contentPadding;
   if (resizerDownId === 1) {
-    const newColumnWidth1 = eventX - contentPadding - x;
+    const newColumnWidth1 = Math.max(eventX - contentPadding - x, minColumnWidth);
     const newColumnWidth3 = contentWidth - newColumnWidth1 - columnWidth2;
     return {
-      ...state,
-      columnWidth1: newColumnWidth1,
-      columnWidth3: newColumnWidth3
+      newColumnWidth1: newColumnWidth1,
+      newColumnWidth3: newColumnWidth3,
+      newColumnWidth2: columnWidth2
     };
   }
-  const newColumnWidth3 = contentWidth - (eventX - contentPadding - x);
+  const newColumnWidth3 = Math.max(contentWidth - (eventX - contentPadding - x), minColumnWidth);
   const newColumnWidth2 = contentWidth - newColumnWidth3 - columnWidth1;
+  return {
+    newColumnWidth1: columnWidth1,
+    newColumnWidth2: newColumnWidth2,
+    newColumnWidth3: newColumnWidth3
+  };
+};
+
+const handleResizerMove = (state, eventX) => {
+  const {
+    columnWidth0,
+    columnWidth1,
+    columnWidth2,
+    contentPadding,
+    paddingLeft,
+    resizerDownId,
+    width,
+    x
+  } = state;
+  if (!resizerDownId) {
+    return state;
+  }
+  const {
+    newColumnWidth1,
+    newColumnWidth2,
+    newColumnWidth3
+  } = distributeColumns(resizerDownId, contentPadding, width, columnWidth1, columnWidth2, x, eventX);
+  const resizerOneLeft = paddingLeft + columnWidth0 + columnWidth1;
+  const resizerTwoLeft = resizerOneLeft + columnWidth2;
   return {
     ...state,
+    columnWidth1: newColumnWidth1,
     columnWidth2: newColumnWidth2,
-    columnWidth3: newColumnWidth3
+    columnWidth3: newColumnWidth3,
+    resizerOneLeft,
+    resizerTwoLeft
+  };
+};
+
+const handleResizerPointerUp = (state, id, x) => {
+  return {
+    ...state,
+    resizerDownId: 0
   };
 };
 
@@ -2338,15 +2417,16 @@ const sortByPrecedence = state => {
 const {
   invoke,
   setFactory
-} = createLazyRpc(9222);
+} = createLazyRpc(TextMeasurementWorker);
 
+const fallbackWidth = 150;
 const measureTextWidth = async (text, fontWeight, fontSize, fontFamily, letterSpacing) => {
   try {
     const isMonospaceFont = false;
     const charWidth = 0;
     return await invoke('TextMeasurement.measureTextWidth', text, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
   } catch {
-    return 150;
+    return fallbackWidth;
   }
 };
 
@@ -2369,10 +2449,13 @@ const getRecordingKeysLabelWidth = async isRecordingKeys => {
 
 const startRecordingKeys = async state => {
   const recordingKeysLabelWidth = await getRecordingKeysLabelWidth(true);
+  const placeholder = getPlaceholder(true);
   return {
     ...state,
     isRecordingKeys: true,
-    recordingKeysLabelWidth
+    placeholder,
+    recordingKeysLabelWidth,
+    focus: Input
   };
 };
 
@@ -2408,6 +2491,19 @@ const handleSearchHeaderContextMenu = async state => {
   return state;
 };
 
+const handleTableFocus = async state => {
+  const {
+    focus
+  } = state;
+  if (focus === FocusKeyBindingsTable$1) {
+    return state;
+  }
+  return {
+    ...state,
+    focus: FocusKeyBindingsTable$1
+  };
+};
+
 const setDeltaY = (state, deltaY) => {
   const {
     maxVisibleItems,
@@ -2691,22 +2787,48 @@ const getSavedValue = savedState => {
   return '';
 };
 
+const hasProperty = (object, key) => {
+  if (!object || typeof object !== 'object' || !(key in object)) {
+    return false;
+  }
+  return true;
+};
+
+const getSavedIsRecordingKeys = savedState => {
+  if (hasProperty(savedState, 'isRecordingKeys') && typeof savedState.isRecordingKeys === 'boolean') {
+    return savedState.isRecordingKeys;
+  }
+  return false;
+};
+const getSavedIsSortingByPrecedence = savedState => {
+  if (hasProperty(savedState, 'isSortingByPrecedence') && typeof savedState.isSortingByPrecedence === 'boolean') {
+    return savedState.isSortingByPrecedence;
+  }
+  return false;
+};
+const getSavedFocus = savedState => {
+  if (hasProperty(savedState, 'focus') && typeof savedState.focus === 'number') {
+    return savedState.focus;
+  }
+  return 0;
+};
+const getSavedSelectedIndex = savedState => {
+  if (hasProperty(savedState, 'selectedIndex') && typeof savedState.selectedIndex === 'number') {
+    return savedState.selectedIndex;
+  }
+  return -1;
+};
 const restoreState = savedState => {
-  // TODO make it type safe
   const savedValue = getSavedValue(savedState);
-  // @ts-ignore
-  const isRecordingKeys = savedState?.['isRecordingKeys'];
-  // @ts-ignore
-  const isSortingByPrecedence = savedState?.['isSortingByPrecedence'];
-  // @ts-ignore
-  const focus = savedState?.['focus'];
-  // @ts-ignore
-  const selectedIndex = savedState?.['selectedIndex'];
+  const isRecordingKeys = getSavedIsRecordingKeys(savedState);
+  const isSortingByPrecedence = getSavedIsSortingByPrecedence(savedState);
+  const focus = getSavedFocus(savedState);
+  const selectedIndex = getSavedSelectedIndex(savedState);
   return {
-    savedValue,
+    focus,
     isRecordingKeys,
     isSortingByPrecedence,
-    focus,
+    savedValue,
     selectedIndex
   };
 };
@@ -2720,6 +2842,7 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
 
 const loadContent = async (state, savedState) => {
   const {
+    paddingLeft,
     height,
     itemHeight,
     width,
@@ -2742,6 +2865,7 @@ const loadContent = async (state, savedState) => {
   const filteredKeyBindings = getFilteredKeyBindings(parsedKeyBindings, savedValue);
   const listHeight = height - searchHeaderHeight - tableHeaderHeight;
   const contentHeight = filteredKeyBindings.length * itemHeight;
+  const placeholder = getPlaceholder(isRecordingKeys);
   const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
   const maxLineY = Math.min(filteredKeyBindings.length, maxVisibleItems);
   const finalDeltaY = Math.max(contentHeight - listHeight, 0);
@@ -2751,26 +2875,29 @@ const loadContent = async (state, savedState) => {
   const columnWidth2 = contentWidth / 3;
   const columnWidth3 = contentWidth / 3 - columnWidth0;
   const visibleItems = getVisibleKeyBindings(filteredKeyBindings, 0, maxLineY, selectedIndex, editingWhenExpression);
+  const resizerOneLeft = paddingLeft + columnWidth0 + columnWidth1;
+  const resizerTwoLeft = resizerOneLeft + columnWidth2;
   return {
     ...state,
-    parsedKeyBindings,
-    items: filteredKeyBindings,
-    maxLineY,
-    maxVisibleItems,
-    value: savedValue,
-    scrollBarHeight,
-    finalDeltaY,
     columnWidth0,
     columnWidth1,
     columnWidth2,
     columnWidth3,
-    resizerOneLeft: columnWidth0 + columnWidth1,
-    resizerTwoLeft: columnWidth0 + columnWidth1 + columnWidth2,
+    finalDeltaY,
     isRecordingKeys,
     isSortingByPrecedence,
+    items: filteredKeyBindings,
+    maxLineY,
+    maxVisibleItems,
+    parsedKeyBindings,
+    placeholder,
+    recordingKeysLabelWidth,
+    resizerOneLeft,
+    resizerTwoLeft,
+    scrollBarHeight,
     selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : state.selectedIndex,
-    visibleItems,
-    recordingKeysLabelWidth
+    value: savedValue,
+    visibleItems
   };
 };
 
@@ -2840,11 +2967,13 @@ const renderColumnWidths = (oldState, newState) => {
     columnWidth3
   } = newState;
   const css = getCss(columnWidth1, columnWidth2, columnWidth3);
-  return [/* method */'Viewlet.setCss', uid, css];
+  return [SetCss, uid, css];
 };
 
 const getSelector = focus => {
   switch (focus) {
+    case FocusKeyBindingsTable:
+      return `.Table`;
     case FocusKeyBindingsWhenExpression:
       return `[name="${WhenExpression}"]`;
     default:
@@ -2857,26 +2986,31 @@ const renderFocus = (oldState, newState) => {
     focus
   } = newState;
   const selector = getSelector(focus);
-  return ['Viewlet.focusSelector', uid, selector];
+  return [FocusSelector, uid, selector];
 };
 
 const renderFocusContext = (oldState, newState) => {
-  return ['Viewlet.focusSelector', newState.uid, KeyBindingsFilter];
+  const {
+    uid
+  } = newState;
+  return [FocusSelector, uid, KeyBindingsFilter];
 };
 
 const IconButton = 'IconButton';
+const InputBadge = 'InputBadge';
 const Key = 'Key';
 const KeyBindings = 'KeyBindings';
 const KeyBindingsEditButton = 'KeyBindingsEditButton';
 const KeyBindingsHeader = 'KeyBindingsHeader';
 const KeyBindingsSearchActions = 'KeyBindingsSearchActions';
+const KeyBindingsSearchButtons = 'KeyBindingsSearchButtons';
 const KeyBindingsSearchInputBox = 'KeyBindingsSearchInputBox';
 const KeyBindingsSearchWrapper = 'KeyBindingsSearchWrapper';
 const MaskIcon = 'MaskIcon';
 const Message = 'Message';
 const NoMatchingKeyBindingsFoundMessage = 'NoMatchingKeyBindingsFoundMessage';
-const InputBadge = 'InputBadge';
 const Resizer = 'Resizer';
+const ResizerInner = 'ResizerInner';
 const ResizerOne = 'ResizerOne';
 const ResizerTwo = 'ResizerTwo';
 const ScrollBar = 'ScrollBar';
@@ -2890,11 +3024,11 @@ const Table = 'Table';
 const TableBody = 'TableBody';
 const TableCell = 'TableCell';
 const TableCol = 'TableCol';
+const TableColGroup = 'TableColGroup';
 const TableColOne = 'TableColOne';
-const TableColTwo = 'TableColTwo';
 const TableColThree = 'TableColThree';
+const TableColTwo = 'TableColTwo';
 const TableColZero = 'TableColZero';
-const TableColGroup = 'TableColGroup';
 const TableHead = 'TableHead';
 const TableRow = 'TableRow';
 const TableRowEven = 'TableRowEven';
@@ -2915,15 +3049,17 @@ const HandleTableDoubleClick = 10;
 const HandleWheel = 11;
 const HandleWhenExpressionInputBlur = 12;
 const HandleSearchHeaderContextMenu = 14;
+const HandleTableFocus = 15;
+const HandleResizerPointerUp = 16;
 
 const Search = 'search';
 
-const getKeyBindingsInputVirtualDom = () => {
+const getKeyBindingsInputVirtualDom = placeholder => {
   return {
     type: Input$1,
     className: KeyBindingsSearchInputBox,
     inputType: Search,
-    placeholder: typeToSearchKeyBindings(),
+    placeholder,
     name: KeyBindingsFilter,
     onFocus: HandleInputFocus,
     onInput: HandleInput,
@@ -3018,22 +3154,25 @@ const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, isSortingByPrece
     childCount
   }, ...getRecordingKeysBadgeVirtualDom(isRecordingKeys), {
     type: Div,
-    className: SearchFieldButtons,
+    className: mergeClassNames(SearchFieldButtons, KeyBindingsSearchButtons),
     childCount: actions.length
   }, ...actions.flatMap(getSearchFieldButtonVirtualDom)];
 };
 
-const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence, hasValue) => {
+const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence, hasValue, placeholder) => {
   return [{
     type: Div,
     className: KeyBindingsHeader,
     onContextMenu: HandleSearchHeaderContextMenu,
-    childCount: 1
+    childCount: 1,
+    role: None$1
   }, {
     type: Div,
     className: KeyBindingsSearchWrapper,
-    childCount: 2
-  }, getKeyBindingsInputVirtualDom(), ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, isSortingByPrecedence, hasValue)];
+    role: 'search',
+    childCount: 2,
+    ariaLabel: 'KeyBindings'
+  }, getKeyBindingsInputVirtualDom(placeholder), ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, isSortingByPrecedence, hasValue)];
 };
 
 const getRowClassName = (isEven, selected) => {
@@ -3096,16 +3235,22 @@ const getIconVirtualDom = (icon, type = Div) => {
   };
 };
 
+const cell$1 = {
+  type: Td,
+  childCount: 1,
+  className: TableCell
+};
+const icon = getIconVirtualDom(Edit);
+const className = mergeClassNames(IconButton, KeyBindingsEditButton);
 const getKeyBindingsTableEditCellDom = () => {
-  return [{
-    type: Td,
-    childCount: 1,
-    className: TableCell
-  }, {
+  const title = edit();
+  return [cell$1, {
     type: Button$1,
-    className: mergeClassNames(IconButton, KeyBindingsEditButton),
+    className,
+    tabIndex: -1,
+    title,
     childCount: 1
-  }, getIconVirtualDom(Edit)];
+  }, icon];
 };
 
 const kbdDom = {
@@ -3255,19 +3400,19 @@ const tableHeading = {
   className: TableCell,
   childCount: 1
 };
-const staticTableHeadDom = [tableHead, tableHeadRow, tableHeading, text(''), tableHeading, text(command()), tableHeading, text(key()), tableHeading, text(when())];
 const getKeyBindingsTableHeadVirtualDom = () => {
-  return staticTableHeadDom;
+  return [tableHead, tableHeadRow, tableHeading, text(''), tableHeading, text(command()), tableHeading, text(key()), tableHeading, text(when())];
 };
 
 const getTableDom = (filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3) => {
   const tableDom = [{
-    type: Table$2,
+    type: Table$1,
     className: Table,
     ariaLabel: keyBindings(),
     ariaRowCount: filteredItemsCount,
     tabIndex: 0,
-    childCount: 3
+    childCount: 3,
+    onFocus: HandleTableFocus
   }, ...getKeyBindingsTableColGroupVirtualDom(), ...getKeyBindingsTableHeadVirtualDom(), ...getKeyBindingsTableBodyDom(displayKeyBindings)];
   return tableDom;
 };
@@ -3281,6 +3426,25 @@ const getNoKeyBindingsFoundVirtualDom = () => {
   }, text(noKeyBindingsFound$1)];
 };
 
+const getResizerVirtualDom = extraClassName => {
+  return [{
+    type: Button$1,
+    className: mergeClassNames(Resizer, extraClassName),
+    role: None$1,
+    name: extraClassName,
+    childCount: 1,
+    onPointerDown: HandleResizerPointerDown
+  }, {
+    type: Div,
+    className: ResizerInner,
+    childCount: 0
+  }];
+};
+
+const getResizersVirtualDom = () => {
+  return [...getResizerVirtualDom(ResizerOne), ...getResizerVirtualDom(ResizerTwo)];
+};
+
 const scrollbarNode = {
   type: Div,
   className: ScrollBar,
@@ -3305,49 +3469,45 @@ const getKeyBindingsTableWrapperVirtualDom = (filteredItemsCount, displayKeyBind
   return [{
     type: Div,
     className,
+    role: None$1,
     onWheel: HandleWheel,
     onDblClick: HandleTableDoubleClick,
     onClick: HandleTableClick,
     onContextMenu: HandleTableContextMenu,
     childCount: 4
-  }, ...getTableDom(filteredItemsCount, displayKeyBindings), {
-    type: Div,
-    className: mergeClassNames(Resizer, ResizerOne),
-    childCount: 0
-  }, {
-    type: Div,
-    className: mergeClassNames(Resizer, ResizerTwo),
-    childCount: 0
-  }, ...getScrollBarVirtualDom()];
+  }, ...getTableDom(filteredItemsCount, displayKeyBindings), ...getResizersVirtualDom(), ...getScrollBarVirtualDom()];
 };
 
-const getKeyBindingsVirtualDom = (filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, hasValue, focusedIndex) => {
+const getKeyBindingsVirtualDom = (filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, hasValue, focusedIndex, placeholder) => {
   return [{
     type: Div,
     className: mergeClassNames(Viewlet, KeyBindings),
+    role: Document,
     childCount: 2
-  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, isSortingByPrecedence, hasValue), ...getKeyBindingsTableWrapperVirtualDom(filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, focusedIndex)];
+  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, isSortingByPrecedence, hasValue, placeholder), ...getKeyBindingsTableWrapperVirtualDom(filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, focusedIndex)];
 };
 
 const renderKeyBindings = (oldState, newState) => {
   const {
-    items,
-    minLineY,
-    maxLineY,
-    selectedIndex,
     columnWidth1,
     columnWidth2,
     columnWidth3,
+    editingWhenExpression,
     finalDeltaY,
-    itemHeight,
+    focusedIndex,
     height,
-    searchHeaderHeight,
-    tableHeaderHeight,
     isRecordingKeys,
-    value,
     isSortingByPrecedence,
-    focusedIndex,
-    editingWhenExpression
+    itemHeight,
+    items,
+    maxLineY,
+    minLineY,
+    placeholder,
+    searchHeaderHeight,
+    selectedIndex,
+    tableHeaderHeight,
+    uid,
+    value
   } = newState;
   const deltaY = minLineY * itemHeight;
   const percent = deltaY / finalDeltaY;
@@ -3358,8 +3518,8 @@ const renderKeyBindings = (oldState, newState) => {
   const scrollBarThumbTop = (height - scrollBarThumbHeight) * percent;
   const displayKeyBindings = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex, editingWhenExpression);
   const hasValue = value.length > 0;
-  const tableDom = getKeyBindingsVirtualDom(items.length, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, hasValue, focusedIndex);
-  return ['Viewlet.setDom2', newState.uid, /* tableDom */tableDom];
+  const tableDom = getKeyBindingsVirtualDom(items.length, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, hasValue, focusedIndex, placeholder);
+  return [SetDom2, uid, tableDom];
 };
 
 const renderValue = (oldState, newState) => {
@@ -3367,7 +3527,7 @@ const renderValue = (oldState, newState) => {
     uid,
     value
   } = newState;
-  return ['Viewlet.setValueByName', uid, KeyBindingsFilter, value];
+  return [SetValueByName, uid, KeyBindingsFilter, value];
 };
 
 const renderWhenExpressionValue = (oldState, newState) => {
@@ -3375,7 +3535,7 @@ const renderWhenExpressionValue = (oldState, newState) => {
     uid,
     whenExpressionText
   } = newState;
-  return ['Viewlet.setValueByName', uid, WhenExpression, whenExpressionText];
+  return [SetValueByName, uid, WhenExpression, whenExpressionText];
 };
 
 const getRenderer = diffType => {
@@ -3437,10 +3597,11 @@ const renderEventListeners = () => {
     params: ['handleWhenExpressionInputBlur']
   }, {
     name: HandleResizerPointerDown,
-    params: ['handleResizerClick', ClientX]
+    params: ['handleResizerClick', TargetName, ClientX],
+    trackPointerEvents: [HandleResizerMove, HandleResizerPointerUp]
   }, {
     name: HandleResizerMove,
-    params: ['handleResizerMove', ClientY]
+    params: ['handleResizerMove', ClientX]
   }, {
     name: HandleTableContextMenu,
     params: ['handleContextMenu', Button, ClientX, ClientY],
@@ -3465,6 +3626,9 @@ const renderEventListeners = () => {
     name: HandleSearchHeaderContextMenu,
     params: ['handleSearchHeaderContextMenu'],
     preventDefault: true
+  }, {
+    name: HandleTableFocus,
+    params: ['handleTableFocus']
   }];
 };
 
@@ -3518,12 +3682,12 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
-    value,
+    focus,
     isRecordingKeys,
     isSortingByPrecedence,
-    focus,
+    recordingKeysLabelWidth,
     selectedIndex,
-    recordingKeysLabelWidth
+    value
   } = state;
   return {
     focus,
@@ -3583,15 +3747,18 @@ const commandMap = {
   'KeyBindings.getMenuEntries': getMenuEntries,
   'KeyBindings.getMenuEntryIds': getMenuEntryIds,
   'KeyBindings.handleClick': wrapCommand(handleClick),
+  'KeyBindings.handleClickIndex': wrapCommand(handleClickIndex),
   'KeyBindings.handleContextMenu': wrapCommand(handleContextMenu),
-  'KeyBindings.handleSearchHeaderContextMenu': wrapCommand(handleSearchHeaderContextMenu),
   'KeyBindings.handleDoubleClick': wrapCommand(handleDoubleClick),
   'KeyBindings.handleInput': wrapCommand(handleInput),
   'KeyBindings.handleInputFocus': wrapCommand(handleInputFocus),
   'KeyBindings.handleKeyDown': wrapCommand(handleKeyDown),
   'KeyBindings.handleResizerClick': wrapCommand(handleResizerClick),
   'KeyBindings.handleResizerMove': wrapCommand(handleResizerMove),
+  'KeyBindings.handleResizerPointerUp': wrapCommand(handleResizerPointerUp),
   'KeyBindings.handleSearchActionClick': wrapCommand(handleSearchActionClick),
+  'KeyBindings.handleSearchHeaderContextMenu': wrapCommand(handleSearchHeaderContextMenu),
+  'KeyBindings.handleTableFocus': wrapCommand(handleTableFocus),
   'KeyBindings.handleWheel': wrapCommand(handleWheel),
   'KeyBindings.handleWhenExpressionInputBlur': wrapCommand(handleWhenexpressionInputBlur),
   'KeyBindings.loadContent': wrapCommand(loadContent),