@beyondwork/docx-react-component 1.0.79 → 1.0.81

package/src/ui-tailwind/chrome/editor-action-registry.ts

@@ -66,11 +66,30 @@ export interface EditorActionDispatchContext {
  * `WordReviewEditorRef`; the surface is intentionally minimal now.
  */
 export interface EditorActionHostCallbacks {
+  // Command history
+  readonly onUndo?: () => void;
+  readonly onRedo?: () => void;
+
   // Clipboard (always available — browser-native fallback acceptable)
   readonly onCut?: () => void;
   readonly onCopy?: () => void;
   readonly onPaste?: () => void;
 
+  // Formatting / paragraph operations (plain text + table-cell targets)
+  readonly onToggleBold?: () => void;
+  readonly onToggleItalic?: () => void;
+  readonly onToggleUnderline?: () => void;
+  readonly onToggleStrikethrough?: () => void;
+  readonly onToggleBulletedList?: () => void;
+  readonly onToggleNumberedList?: () => void;
+  readonly onOutdent?: () => void;
+  readonly onIndent?: () => void;
+  readonly onSetAlignment?: (
+    alignment: "left" | "center" | "right" | "justify",
+  ) => void;
+  readonly onInsertTable?: () => void;
+  readonly onAddComment?: () => void;
+
   // Tracked-change operations (suggestion target)
   readonly onAcceptSuggestion?: () => void;
   readonly onRejectSuggestion?: () => void;
@@ -87,6 +106,7 @@ export interface EditorActionHostCallbacks {
   readonly onInsertColumnAfter?: () => void;
   readonly onDeleteRow?: () => void;
   readonly onDeleteColumn?: () => void;
+  readonly onDeleteTable?: () => void;
   readonly onMergeCells?: () => void;
   readonly onSplitCell?: () => void;
   readonly onOpenTableProperties?: () => void;
@@ -220,6 +240,24 @@ function mkArg<A, K extends keyof EditorActionHostCallbacks>(opts: {
 }
 
 export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
+  // -------- History --------
+  mk({
+    id: "undo",
+    label: "Undo",
+    shortcut: ["Mod", "Z"],
+    group: "misc",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onUndo",
+  }),
+  mk({
+    id: "redo",
+    label: "Redo",
+    shortcut: ["Mod", "Shift", "Z"],
+    group: "misc",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onRedo",
+  }),
+
   // -------- Clipboard (always available across every target kind) --------
   mk({
     id: "cut",
@@ -271,6 +309,113 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     callback: "onPaste",
   }),
 
+  // -------- Formatting / paragraph --------
+  mk({
+    id: "format-bold",
+    label: "Bold",
+    shortcut: ["Mod", "B"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleBold",
+  }),
+  mk({
+    id: "format-italic",
+    label: "Italic",
+    shortcut: ["Mod", "I"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleItalic",
+  }),
+  mk({
+    id: "format-underline",
+    label: "Underline",
+    shortcut: ["Mod", "U"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleUnderline",
+  }),
+  mk({
+    id: "format-strikethrough",
+    label: "Strikethrough",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleStrikethrough",
+  }),
+  mk({
+    id: "list-bulleted",
+    label: "Bulleted list",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleBulletedList",
+  }),
+  mk({
+    id: "list-numbered",
+    label: "Numbered list",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleNumberedList",
+  }),
+  mk({
+    id: "paragraph-outdent",
+    label: "Decrease indent",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onOutdent",
+  }),
+  mk({
+    id: "paragraph-indent",
+    label: "Increase indent",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onIndent",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-left",
+    label: "Align left",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "left",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-center",
+    label: "Align center",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "center",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-right",
+    label: "Align right",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "right",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-justify",
+    label: "Justify",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "justify",
+  }),
+  mk({
+    id: "insert-table",
+    label: "Insert table",
+    group: "table",
+    targetKinds: ["plain-text"],
+    callback: "onInsertTable",
+  }),
+  mk({
+    id: "comment-add",
+    label: "Add comment",
+    group: "comment",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onAddComment",
+  }),
+
   // -------- Suggestion / tracked change --------
   mk({
     id: "accept-suggestion",
@@ -379,6 +524,14 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     targetKinds: ["table-column", "table-whole"],
     callback: "onDeleteColumn",
   }),
+  // ── Whole-table destructive op ──
+  mk({
+    id: "table-delete-table",
+    label: "Delete table",
+    group: "table",
+    targetKinds: ["table-whole"],
+    callback: "onDeleteTable",
+  }),
   // ── Whole-table — properties / borders surface at any tier so
   //    they are reachable from a single right-click in a cell ──
   mk({

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -75,6 +75,7 @@ export interface TwSelectionToolHostProps {
   onDistributeColumnsEvenly?: () => void;
   onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
+  onOpenTableMore?: (coords: { clientX: number; clientY: number }) => void;
 }
 
 /**
@@ -299,6 +300,7 @@ function renderTool(
           onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
           onSetTableAlignment={props.onSetTableAlignment}
           onSetCellVerticalAlign={props.onSetCellVerticalAlign}
+          onOpenTableMore={props.onOpenTableMore}
         />
       );
     case "comment-thread":

package/src/ui-tailwind/chrome/tw-selection-tool-structure.tsx

@@ -35,6 +35,7 @@ export interface TwSelectionToolStructureProps {
   onDistributeColumnsEvenly?: () => void;
   onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
+  onOpenTableMore?: (coords: { clientX: number; clientY: number }) => void;
 }
 
 export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
@@ -58,7 +59,10 @@ export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
       return (
         <TwTableContextToolbar
           disabled={!props.model.canMutate}
-          tableContext={props.model.activeTable ?? null}          tableStyles={props.model.tableStyles ?? []}
+          tableContext={props.model.activeTable ?? null}
+          tableStyles={props.model.tableStyles ?? []}
+          compact={true}
+          onOpenMore={props.onOpenTableMore}
           onSetTableStyle={props.onSetTableStyle}
           onAddRowBefore={props.onAddRowBefore}
           onAddRowAfter={props.onAddRowAfter}

package/src/ui-tailwind/chrome/use-context-menu-controller.ts

@@ -58,6 +58,18 @@ function tableContextToKinds(
   }
 }
 
+function mergeTableTierKinds(
+  kinds: readonly TargetKind[],
+  tableContext: TableStructureContextSnapshot | null | undefined,
+): readonly TargetKind[] {
+  if (!kinds.includes("table-cell") || !tableContext) return kinds;
+  const merged = [...kinds];
+  for (const k of tableContextToKinds(tableContext)) {
+    if (!merged.includes(k)) merged.push(k);
+  }
+  return merged;
+}
+
 export interface ContextMenuRequest {
   readonly clientX: number;
   readonly clientY: number;
@@ -149,14 +161,7 @@ export function useContextMenuController(
       // is in a table cell. Cell-level ops carry every table-* kind
       // (so they are still visible) and tier-only ops (delete row /
       // delete column) gate on the matching kind.
-      const tierKinds =
-        baseKinds.includes("table-cell") && tableContext
-          ? tableContextToKinds(tableContext)
-          : [];
-      const merged = [...baseKinds];
-      for (const k of tierKinds) {
-        if (!merged.includes(k)) merged.push(k);
-      }
+      const merged = mergeTableTierKinds(baseKinds, tableContext);
       const entries = buildEntries(merged);
       // Progressive disclosure: if no actions resolve (every host callback
       // absent + no scope-anchor + etc), don't open an empty menu.  Let
@@ -180,7 +185,7 @@ export function useContextMenuController(
       clientY: number;
       kinds: readonly TargetKind[];
     }) => {
-      const entries = buildEntries(args.kinds);
+      const entries = buildEntries(mergeTableTierKinds(args.kinds, tableContext));
       if (entries.length === 0) return;
       setState({
         open: true,
@@ -189,7 +194,7 @@ export function useContextMenuController(
         entries,
       });
     },
-    [buildEntries],
+    [buildEntries, tableContext],
   );
 
   // D.5.Nit1 — the return value is consumed directly by the caller

package/src/ui-tailwind/review-workspace/types.ts

@@ -150,6 +150,7 @@ export interface TwReviewWorkspaceProps {
   interactionGuardSnapshot?: InteractionGuardSnapshot;
   chromePreset?: WordReviewEditorChromePreset;
   chromeOptions?: Partial<WordReviewEditorChromeOptions>;
+  density?: "compact" | "standard" | "comfortable";
   /** P9g — live collab session for the `"collab"` chrome preset's top nav. */
   collabSession?: import("../../runtime/collab-session.ts").CollabSession;
   collabTransportStatus?: import("../../api/awareness-identity-types.ts").TransportStatus;

package/src/ui-tailwind/review-workspace/use-workspace-composition.ts

@@ -10,10 +10,18 @@ export type UseWorkspaceCompositionOptions = Pick<
   ChromeCompositionInput,
   | "chromePreset"
   | "chromeOptions"
+  | "chromeVisibility"
   | "reviewMode"
   | "role"
+  | "readOnly"
   | "markupDisplay"
+  | "activeRailTab"
+  | "railOpen"
+  | "pinnedRailTabs"
+  | "density"
+  | "containerWidth"
   | "diagnosticsSignal"
+  | "modeOverride"
 >;
 
 /**
@@ -49,11 +57,11 @@ export type UseWorkspaceCompositionOptions = Pick<
  * downstream. Review M6 (2026-04-22) flagged this as a silent perf
  * regression risk.
  *
- * `readOnly` is intentionally omitted from the option set: the
- * composition seam is independent of read-only posture today; Phase E
- * threads it through the interactionGuardSnapshot wiring once the rail
- * owns the full posture composition.
- */
+   * Product-lane note: this hook intentionally accepts the full set of
+   * mounted composition signals the resolver already models. Leaving these
+   * out makes `resolveChromeComposition()` look canonical in tests while the
+   * shipped editor silently falls back to stale defaults.
+   */
 export function useWorkspaceComposition(
   options: UseWorkspaceCompositionOptions,
 ): ReturnType<typeof resolveChromeComposition> {
@@ -61,10 +69,18 @@ export function useWorkspaceComposition(
   const {
     chromePreset,
     chromeOptions,
+    chromeVisibility,
     reviewMode,
     role,
+    readOnly,
     markupDisplay,
+    activeRailTab,
+    railOpen,
+    pinnedRailTabs,
+    density,
+    containerWidth,
     diagnosticsSignal,
+    modeOverride,
   } = options;
 
   return useMemo(
@@ -72,15 +88,39 @@ export function useWorkspaceComposition(
       const input: ChromeCompositionInput = {
         chromePreset,
         chromeOptions,
+        chromeVisibility,
         reviewMode,
         role,
+        readOnly,
         markupDisplay,
+        activeRailTab,
+        railOpen,
+        pinnedRailTabs,
+        density,
+        containerWidth,
         diagnosticsSignal,
+        modeOverride,
       };
       return ui
         ? ui.chrome.getComposition(input)
         : resolveChromeComposition(input);
     },
-    [ui, chromePreset, chromeOptions, reviewMode, role, markupDisplay, diagnosticsSignal],
+    [
+      ui,
+      chromePreset,
+      chromeOptions,
+      chromeVisibility,
+      reviewMode,
+      role,
+      readOnly,
+      markupDisplay,
+      activeRailTab,
+      railOpen,
+      pinnedRailTabs,
+      density,
+      containerWidth,
+      diagnosticsSignal,
+      modeOverride,
+    ],
   );
 }

package/src/ui-tailwind/theme/editor-theme.css

@@ -1075,7 +1075,16 @@
 }
 
 .wre-page-band:hover {
-  background-color: color-mix(in srgb, var(--color-bg-muted) 80%, var(--color-surface));
+  /*
+   * N3 audit (2026-04-24): the prior `color-mix(bg-muted 80%, surface 20%)`
+   * blended two near-adjacent tokens — in dark mode (#17211C vs #182420)
+   * the result moved ≤2 RGB units from the base, leaving no visible
+   * hover affordance. `--color-bg-hover` is the token the design system
+   * already dedicates to this signal (light #EAF6EF vs muted #F7FAF8;
+   * dark #21342A vs muted #17211C) and resolves the dark-mode legibility
+   * gap without regressing light-mode subtlety.
+   */
+  background-color: var(--color-bg-hover);
 }
 
 .wre-page-band[data-active="true"] {

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -43,7 +43,10 @@ import {
 import { TwContextBand } from "./chrome/tw-context-band";
 import { TwRoleActionRegion } from "./toolbar/tw-role-action-region";
 import { LocalSurfaceArbiterContext } from "./chrome/local-surface-arbiter";
-import { TwWorkspaceChromeHost } from "./chrome/tw-workspace-chrome-host";
+import {
+  TwWorkspaceChromeHost,
+  type TwWorkspaceChromeHostController,
+} from "./chrome/tw-workspace-chrome-host";
 import { TwChromeOverlay, TwPageStackOverlayLayer } from "./chrome-overlay";
 import { TwFloatingImageLayer } from "./page-stack/tw-floating-image-layer.tsx";
 import { shouldHidePageBorderForSelection } from "./review-workspace/paragraph-layout.ts";
@@ -85,16 +88,14 @@ export type {
 import type { EditorRole } from "../api/public-types.ts";
 
 // Default shell-header modes for the workspace's default composition.
-// Designsystem §6.1 prescribes a 4-mode switcher (edit / review / workflow
-// / more).  "more" is kept in the layout for parity but marked disabled
-// until its handler is defined by refactor/11 Slice 7 + refactor/10
-// Slice 5 (Phase Q debug UX).  Hosts that want a fully-wired 4-mode set
-// supply their own `shellHeader` prop.
+// Designsystem §6.1 prescribes a 4-mode switcher; all four are reachable in
+// the product path. "More" is a shell-owned diagnostics/search posture, so it
+// uses `ChromeCompositionInput.modeOverride` instead of changing runtime role.
 const DEFAULT_WORKSPACE_SHELL_MODES: readonly ShellHeaderModeOption[] = [
   { id: "edit", label: "Edit" },
   { id: "review", label: "Review" },
   { id: "workflow", label: "Workflow" },
-  { id: "more", label: "More", disabled: true },
+  { id: "more", label: "More" },
 ];
 
 function editorRoleToShellMode(role: EditorRole): ShellHeaderMode {
@@ -121,6 +122,47 @@ function shellModeToEditorRole(mode: ShellHeaderMode): EditorRole | null {
   }
 }
 
+function TwMoreContextBandContent(props: {
+  onOpenDiagnostics: () => void;
+  onOpenCompatibility: () => void;
+  onOpenOutline: () => void;
+  onOpenSearch?: () => void;
+}): React.JSX.Element {
+  return (
+    <div
+      className="flex min-w-0 items-center gap-1"
+      data-testid="more-context-band-content"
+    >
+      <ContextBandButton label="Diagnostics" onClick={props.onOpenDiagnostics} />
+      <ContextBandButton label="Compatibility" onClick={props.onOpenCompatibility} />
+      <ContextBandButton label="Outline" onClick={props.onOpenOutline} />
+      <ContextBandButton
+        label="Search"
+        onClick={props.onOpenSearch}
+        disabled={!props.onOpenSearch}
+      />
+    </div>
+  );
+}
+
+function ContextBandButton(props: {
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}): React.JSX.Element {
+  return (
+    <button
+      type="button"
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-7 items-center rounded-[var(--radius-md)] px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.label}
+    </button>
+  );
+}
+
 export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const props = {
     ...inputProps,
@@ -128,6 +170,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   } as TwReviewWorkspaceProps & EditorCommandBag;
   const { snapshot, viewState } = props;
   const selectionToolbarRootRef = useRef<HTMLDivElement>(null);
+  const workspaceChromeControllerRef =
+    useRef<TwWorkspaceChromeHostController | null>(null);
+  const [shellModeOverride, setShellModeOverride] =
+    useState<ShellHeaderMode | null>(null);
   // P8.11 — body slot wrapping `{props.document}` (the PM surface) + scroll
   // root ref.  The chrome layer's `TwPageStackChromeLayer` needs both to
   // measure per-page rects and to reparent PM's DOM node across band
@@ -382,18 +428,46 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     props.onSetParagraphTabStops,
   ]);
 
+  const setWorkspaceChromeController = useCallback(
+    (instance: TwWorkspaceChromeHostController | null) => {
+      workspaceChromeControllerRef.current = instance;
+      const ref = props.chromeControllerRef;
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(instance);
+        return;
+      }
+      (ref as React.MutableRefObject<TwWorkspaceChromeHostController | null>).current =
+        instance;
+    },
+    [props.chromeControllerRef],
+  );
+
+  const openTableMoreMenu = useCallback(
+    (coords: { clientX: number; clientY: number }) => {
+      workspaceChromeControllerRef.current?.openWithKinds({
+        ...coords,
+        kinds: ["table-cell"],
+      });
+    },
+    [],
+  );
+
   // Audit §2.4 — the shell header is ALWAYS present in default composition.
   // When the host does not supply a pre-assembled shell node, fall back to
   // a default TwShellHeader wired to the workspace's editor-role state so
   // the mode tabs actually change the active role instead of being
-  // decorative.  The "more" tab is included for layout parity with §6.1
-  // but disabled until its handler is defined (Phase Q debug UX / Slice 7).
+  // decorative. The "more" tab is shell-owned diagnostics/search posture:
+  // it drives composition mode via `modeOverride` and does not mutate the
+  // runtime editor role.
   // Host-supplied shells continue to win (back-compat).
   const defaultShellModes: readonly ShellHeaderModeOption[] =
     DEFAULT_WORKSPACE_SHELL_MODES;
   const defaultShellActiveMode: ShellHeaderMode = editorRoleToShellMode(
     viewState.editorRole,
   );
+  const activeShellMode: ShellHeaderMode =
+    shellModeOverride === "more" ? "more" : defaultShellActiveMode;
   // coord-11 §21 — host-supplied shellHeader wins; otherwise the default
   // TwShellHeader mounts only when `chromeVisibility.shellHeader === true`
   // (default for every preset except `selection`). The `selection` preset
@@ -406,8 +480,15 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
         ? (
           <TwShellHeader
             modes={defaultShellModes}
-            activeMode={defaultShellActiveMode}
+            activeMode={activeShellMode}
             onModeChange={(mode) => {
+              if (mode === "more") {
+                setShellModeOverride("more");
+                setReviewRailOpen(true);
+                props.onActiveRailTabChange?.("health");
+                return;
+              }
+              setShellModeOverride(null);
               const nextRole = shellModeToEditorRole(mode);
               if (nextRole !== null && nextRole !== viewState.editorRole) {
                 props.onEditorRoleChange?.(nextRole);
@@ -444,10 +525,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const composition = useWorkspaceComposition({
     chromePreset,
     chromeOptions: props.chromeOptions,
+    chromeVisibility: props.chromeVisibility,
     reviewMode: props.reviewMode,
     role: viewState.editorRole,
+    readOnly: snapshot.readOnly,
     markupDisplay: props.markupDisplay,
+    activeRailTab: props.activeRailTab,
+    railOpen: reviewRailOpen,
+    density: props.density,
+    containerWidth: viewportWidth,
     diagnosticsSignal,
+    modeOverride: shellModeOverride === "more" ? "more" : undefined,
   });
   const showHealthRailTab = composition.rail.visibleTabs.has("health");
 
@@ -481,7 +569,20 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
          */}
         {chromeVisibility.toolbar ? (
           <TwContextBand mode={composition.mode}>
-            {viewState.editorRole ? (
+            {composition.mode === "more" ? (
+              <TwMoreContextBandContent
+                onOpenDiagnostics={() => {
+                  setReviewRailOpen(true);
+                  props.onActiveRailTabChange?.("health");
+                }}
+                onOpenCompatibility={() => {
+                  setReviewRailOpen(true);
+                  props.onActiveRailTabChange?.("health");
+                }}
+                onOpenOutline={() => setNavOpen(true)}
+                onOpenSearch={props.reviewRailFooter?.onSearch}
+              />
+            ) : viewState.editorRole ? (
               <TwRoleActionRegion
                 role={viewState.editorRole}
                 policy={scopedChromePolicy}
@@ -574,9 +675,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           <TwWorkspaceChromeHost
             mode={composition.mode}
             editorActionHost={props.editorActionHost}
-            {...(props.chromeControllerRef
-              ? { controllerRef: props.chromeControllerRef }
-              : {})}
+            controllerRef={setWorkspaceChromeController}
             {...(props.commandPaletteDisabled !== undefined
               ? { paletteDisabled: props.commandPaletteDisabled }
               : {})}
@@ -875,6 +974,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
                     onSetTableAlignment={props.onSetTableAlignment}
                     onSetCellVerticalAlign={props.onSetCellVerticalAlign}
+                    onOpenTableMore={openTableMoreMenu}
                     chromePins={viewState.chromePins}
                     onChromePinChange={props.onChromePinChange}
                   />