npm - @odoo/o-spreadsheet - Versions diffs - 14.0.0 → 14.0.1 - Mend

@odoo/o-spreadsheet 14.0.0 → 14.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/.eslintrc.json +20 -0
package/.husky/post-checkout +9 -0
package/.husky/pre-commit +39 -0
package/.prettierignore +1 -0
package/astToFormula.patch +0 -0
package/demo/data.js +255 -0
package/demo/index.html +9 -0
package/demo/libs/Chart.bundle.js +20755 -0
package/demo/main.js +101 -0
package/doc/readme.md +46 -0
package/package.json +3 -17
package/rollup.config.js +23 -0
package/src/base_plugin.ts +102 -0
package/src/components/autofill.ts +146 -0
package/src/components/bottom_bar.ts +199 -0
package/src/components/color_picker.ts +150 -0
package/src/components/composer/autocomplete_dropdown.ts +135 -0
package/src/components/composer/composer.ts +487 -0
package/src/components/composer/content_editable_helper.ts +146 -0
package/src/components/figures/chart.ts +70 -0
package/src/components/figures/container.ts +268 -0
package/src/components/figures/text_figure.ts +36 -0
package/src/components/grid.ts +635 -0
package/src/components/helpers/dom_helpers.ts +7 -0
package/src/components/helpers/drag_and_drop.ts +17 -0
package/src/components/icons.ts +36 -0
package/src/components/index.ts +1 -0
package/src/components/menu.ts +288 -0
package/src/components/overlay.ts +457 -0
package/src/components/scrollbar.ts +22 -0
package/src/components/selection_input.ts +168 -0
package/src/components/side_panel/cell_is_rule_editor.ts +169 -0
package/src/components/side_panel/chart_panel.ts +104 -0
package/src/components/side_panel/color_scale_rule_editor.ts +145 -0
package/src/components/side_panel/conditional_formatting.ts +396 -0
package/src/components/side_panel/side_panel.ts +127 -0
package/src/components/side_panel/translations_terms.ts +45 -0
package/src/components/spreadsheet.ts +198 -0
package/src/components/top_bar.ts +535 -0
package/src/constants.ts +26 -0
package/src/data.ts +149 -0
package/src/fonts.ts +41 -0
package/src/formulas/compiler.ts +258 -0
package/src/formulas/composer_tokenizer.ts +70 -0
package/src/formulas/index.ts +15 -0
package/src/formulas/normalize.ts +52 -0
package/src/formulas/parser.ts +280 -0
package/src/formulas/range_tokenizer.ts +97 -0
package/src/formulas/tokenizer.ts +242 -0
package/src/functions/arguments.ts +114 -0
package/src/functions/dates.ts +302 -0
package/src/functions/helpers.ts +592 -0
package/src/functions/index.ts +52 -0
package/src/functions/module_database.ts +282 -0
package/src/functions/module_date.ts +743 -0
package/src/functions/module_info.ts +69 -0
package/src/functions/module_logical.ts +208 -0
package/src/functions/module_lookup.ts +185 -0
package/src/functions/module_math.ts +1252 -0
package/src/functions/module_operators.ts +291 -0
package/src/functions/module_statistical.ts +882 -0
package/src/functions/module_text.ts +370 -0
package/src/helpers/color.ts +30 -0
package/src/helpers/coordinates.ts +71 -0
package/src/helpers/grid_manipulation.ts +68 -0
package/src/helpers/index.ts +7 -0
package/src/helpers/misc.ts +76 -0
package/src/helpers/numbers.ts +117 -0
package/src/helpers/uuid.ts +19 -0
package/src/helpers/zones.ts +263 -0
package/src/history.ts +186 -0
package/src/index.ts +84 -0
package/src/model.ts +261 -0
package/src/plugins/autofill.ts +412 -0
package/src/plugins/chart.ts +404 -0
package/src/plugins/clipboard.ts +461 -0
package/src/plugins/conditional_format.ts +445 -0
package/src/plugins/core.ts +1502 -0
package/src/plugins/edition.ts +157 -0
package/src/plugins/evaluation.ts +428 -0
package/src/plugins/figures.ts +123 -0
package/src/plugins/formatting.ts +630 -0
package/src/plugins/highlight.ts +187 -0
package/src/plugins/index.ts +32 -0
package/src/plugins/merge.ts +524 -0
package/src/plugins/renderer.ts +571 -0
package/src/plugins/selection.ts +562 -0
package/src/plugins/selection_inputs.ts +326 -0
package/src/registries/autofill_modifiers.ts +76 -0
package/src/registries/autofill_rules.ts +98 -0
package/src/registries/figure_registry.ts +30 -0
package/src/registries/index.ts +7 -0
package/src/registries/menu_items_registry.ts +110 -0
package/src/registries/menus/cell_menu_registry.ts +79 -0
package/src/registries/menus/col_menu_registry.ts +63 -0
package/src/registries/menus/index.ts +6 -0
package/src/registries/menus/menu_items_actions.ts +425 -0
package/src/registries/menus/row_menu_registry.ts +63 -0
package/src/registries/menus/sheet_menu_registry.ts +75 -0
package/src/registries/menus/topbar_menu_registry.ts +204 -0
package/src/registries/side_panel_registry.ts +26 -0
package/src/registries/topbar_component_registry.ts +12 -0
package/src/registry.ts +51 -0
package/src/translation.ts +44 -0
package/src/types/autofill.ts +48 -0
package/src/types/chart.ts +26 -0
package/src/types/commands.ts +716 -0
package/src/types/conditional_formatting.ts +124 -0
package/src/types/env.ts +13 -0
package/src/types/functions.ts +35 -0
package/src/types/getters.ts +103 -0
package/src/types/index.ts +20 -0
package/src/types/misc.ts +143 -0
package/src/types/rendering.ts +41 -0
package/src/types/workbook_data.ts +62 -0
package/tests/__mocks__/uuid.ts +7 -0
package/tests/canvas.mock.ts +34 -0
package/tests/components/__mocks__/content_editable_helper.ts +79 -0
package/tests/components/__mocks__/scrollbar.ts +18 -0
package/tests/components/__snapshots__/autocomplete_dropdown_test.ts.snap +29 -0
package/tests/components/__snapshots__/bottom_bar_test.ts.snap +75 -0
package/tests/components/__snapshots__/context_menu_test.ts.snap +88 -0
package/tests/components/__snapshots__/grid_test.ts.snap +60 -0
package/tests/components/__snapshots__/spreadsheet_test.ts.snap +455 -0
package/tests/components/__snapshots__/top_bar_test.ts.snap +705 -0
package/tests/components/autocomplete_dropdown_test.ts +315 -0
package/tests/components/autofill_test.ts +167 -0
package/tests/components/bottom_bar_test.ts +262 -0
package/tests/components/chart_side_panel_test.ts +123 -0
package/tests/components/composer_test.ts +400 -0
package/tests/components/context_menu_test.ts +825 -0
package/tests/components/grid_manipulation_test.ts +163 -0
package/tests/components/grid_test.ts +581 -0
package/tests/components/overlay_test.ts +541 -0
package/tests/components/selection_input_test.ts +259 -0
package/tests/components/side_panel_test.ts +148 -0
package/tests/components/spreadsheet_test.ts +194 -0
package/tests/components/top_bar_test.ts +427 -0
package/tests/data_test.ts +175 -0
package/tests/dom_helper.ts +42 -0
package/tests/formulas/__snapshots__/compiler_test.ts.snap +302 -0
package/tests/formulas/compiler_test.ts +266 -0
package/tests/formulas/composer_tokenizer_test.ts +137 -0
package/tests/formulas/expressions_test.ts +57 -0
package/tests/formulas/formulas_test.ts +80 -0
package/tests/formulas/normalize_test.ts +82 -0
package/tests/formulas/parser_test.ts +224 -0
package/tests/formulas/range_tokenizer_test.ts +187 -0
package/tests/formulas/tokenizer_test.ts +164 -0
package/tests/functions/arguments_test.ts +141 -0
package/tests/functions/dates_test.ts +1081 -0
package/tests/functions/functions_test.ts +53 -0
package/tests/functions/helper_test.ts +98 -0
package/tests/functions/module_database_test.ts +311 -0
package/tests/functions/module_date_test.ts +941 -0
package/tests/functions/module_info_test.ts +139 -0
package/tests/functions/module_logical_test.ts +369 -0
package/tests/functions/module_lookup_test.ts +541 -0
package/tests/functions/module_math_test.ts +2482 -0
package/tests/functions/module_operators_test.ts +955 -0
package/tests/functions/module_statistical_test.ts +2014 -0
package/tests/functions/module_text_test.ts +667 -0
package/tests/helpers/coordinates_test.ts +25 -0
package/tests/helpers/misc_test.ts +95 -0
package/tests/helpers/numbers_test.ts +196 -0
package/tests/helpers/zones_test.ts +97 -0
package/tests/helpers.ts +384 -0
package/tests/menu_items_registry_test.ts +540 -0
package/tests/model/plugins/__snapshots__/chart_test.ts.snap +90 -0
package/tests/model/plugins/chart_test.ts +562 -0
package/tests/model_test.ts +82 -0
package/tests/plugins/__snapshots__/conditional_formatting_test.ts.snap +131 -0
package/tests/plugins/__snapshots__/renderer_test.ts.snap +371 -0
package/tests/plugins/autofill_test.ts +457 -0
package/tests/plugins/borders_test.ts +295 -0
package/tests/plugins/clipboard_test.ts +1180 -0
package/tests/plugins/conditional_formatting_test.ts +1253 -0
package/tests/plugins/core_test.ts +614 -0
package/tests/plugins/edition_test.ts +100 -0
package/tests/plugins/evaluation_async_test.ts +332 -0
package/tests/plugins/evaluation_dates_test.ts +79 -0
package/tests/plugins/evaluation_test.ts +901 -0
package/tests/plugins/figures_test.ts +327 -0
package/tests/plugins/formatting_test.ts +391 -0
package/tests/plugins/grid_manipulation_test.ts +1366 -0
package/tests/plugins/highlight_test.ts +413 -0
package/tests/plugins/history_test.ts +142 -0
package/tests/plugins/import_export_test.ts +276 -0
package/tests/plugins/merges_test.ts +490 -0
package/tests/plugins/navigation_test.ts +181 -0
package/tests/plugins/plugins/evaluation_test.ts +111 -0
package/tests/plugins/renderer_test.ts +598 -0
package/tests/plugins/resizing_test.ts +152 -0
package/tests/plugins/selection_input_test.ts +409 -0
package/tests/plugins/selection_test.ts +442 -0
package/tests/plugins/sheets_test.ts +643 -0
package/tests/plugins/style_test.ts +90 -0
package/tsconfig.json +22 -0

package/tests/components/__snapshots__/top_bar_test.ts.snap ADDED Viewed

@@ -0,0 +1,705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`TopBar component can set cell format 1`] = `
+<div
+  class="o-spreadsheet-topbar"
+>
+  <div
+    class="o-topbar-top"
+  >
+    <!-- Menus -->
+    <div
+      class="o-topbar-topleft"
+    >
+      <div
+        class="o-topbar-menu"
+        data-id="file"
+      >
+        File
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="edit"
+      >
+        Edit
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="view"
+      >
+        View
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="insert"
+      >
+        Insert
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="format"
+      >
+        Format
+      </div>
+    </div>
+    <div
+      class="o-topbar-topright"
+    />
+  </div>
+  <!-- Toolbar and Cell Content -->
+  <div
+    class="o-topbar-toolbar"
+  >
+    <!-- Toolbar -->
+    <div
+      class="o-toolbar-tools"
+    >
+      <div
+        class="o-tool o-disabled"
+        title="Undo"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M11.5656391,4.43436088 L9,7 L16,7 L16,0 L13.0418424,2.95815758 C11.5936787,1.73635959 9.72260775,1 7.67955083,1 C4.22126258,1 1.25575599,3.10984908 0,6 L2,7 C2.93658775,4.60974406 5.12943697,3.08011229 7.67955083,3 C9.14881247,3.0528747 10.4994783,3.57862053 11.5656391,4.43436088 Z"
+            fill="#000000"
+            transform="matrix(-1 0 0 1 17 5)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool o-disabled"
+        title="Redo"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M11.5656391,4.43436088 L9,7 L16,7 L16,0 L13.0418424,2.95815758 C11.5936787,1.73635959 9.72260775,1 7.67955083,1 C4.22126258,1 1.25575599,3.10984908 0,6 L2,7 C2.93658775,4.60974406 5.12943697,3.08011229 7.67955083,3 C9.14881247,3.0528747 10.4994783,3.57862053 11.5656391,4.43436088 Z"
+            fill="#000000"
+            transform="translate(1 5)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Paint Format"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M9,0 L1,0 C0.45,0 0,0.45 0,1 L0,4 C0,4.55 0.45,5 1,5 L9,5 C9.55,5 10,4.55 10,4 L10,3 L11,3 L11,6 L4,6 L4,14 L6,14 L6,8 L13,8 L13,2 L10,2 L10,1 C10,0.45 9.55,0 9,0 Z"
+            fill="#000000"
+            transform="translate(3 2)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Clear Format"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M0.27,1.55 L5.43,6.7 L3,12 L5.5,12 L7.14,8.42 L11.73,13 L13,11.73 L1.55,0.27 L0.27,1.55 L0.27,1.55 Z M3.82,0 L5.82,2 L7.58,2 L7.03,3.21 L8.74,4.92 L10.08,2 L14,2 L14,0 L3.82,0 L3.82,0 Z"
+            fill="#000000"
+            transform="translate(2 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool"
+        title="Format as percent"
+      >
+        %
+      </div>
+      <div
+        class="o-tool"
+        title="Decrease decimal places"
+      >
+        .0
+      </div>
+      <div
+        class="o-tool"
+        title="Increase decimal places"
+      >
+        .00
+      </div>
+      <div
+        class="o-tool o-dropdown"
+        title="More formats"
+      >
+        <div
+          class="o-text-icon"
+        >
+          123
+          <svg
+            class="o-icon"
+          >
+            <polygon
+              fill="#000000"
+              points="0 0 4 4 8 0"
+              transform="translate(5 7)"
+            />
+          </svg>
+        </div>
+        <div
+          class="o-dropdown-content o-text-options o-format-tool"
+        >
+          <div
+            class="active"
+            data-format="auto"
+          >
+            Automatic
+          </div>
+          <div
+            data-format="number"
+          >
+            Number (1,000.12)
+          </div>
+          <div
+            data-format="percent"
+          >
+            Percent (10.12%)
+          </div>
+          <div
+            data-format="date"
+          >
+            Date (9/26/2008)
+          </div>
+          <div
+            data-format="time"
+          >
+            Time (10:43:00 PM)
+          </div>
+          <div
+            data-format="datetime"
+          >
+            Date time (9/26/2008 22:43:00)
+          </div>
+          <div
+            data-format="duration"
+          >
+            Duration (27:51:38)
+          </div>
+        </div>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <!-- &lt;div class="o-tool" title="Font"&gt;&lt;span&gt;Roboto&lt;/span&gt; &lt;svg class="o-icon"&gt;&lt;polygon fill="#000000" points="0 0 4 4 8 0" transform="translate(5 7)"/&gt;&lt;/svg&gt;&lt;/div&gt; -->
+      <div
+        class="o-tool o-dropdown"
+        title="Font Size"
+      >
+        <div
+          class="o-text-icon"
+        >
+          10
+          <svg
+            class="o-icon"
+          >
+            <polygon
+              fill="#000000"
+              points="0 0 4 4 8 0"
+              transform="translate(5 7)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool"
+        title="Bold"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M9,3.5 C9,1.57 7.43,0 5.5,0 L1.77635684e-15,0 L1.77635684e-15,12 L6.25,12 C8.04,12 9.5,10.54 9.5,8.75 C9.5,7.45 8.73,6.34 7.63,5.82 C8.46,5.24 9,4.38 9,3.5 Z M5,2 C5.82999992,2 6.5,2.67 6.5,3.5 C6.5,4.33 5.82999992,5 5,5 L3,5 L3,2 L5,2 Z M3,10 L3,7 L5.5,7 C6.32999992,7 7,7.67 7,8.5 C7,9.33 6.32999992,10 5.5,10 L3,10 Z"
+            fill="#000000"
+            fill-rule="evenodd"
+            transform="translate(4 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Italic"
+      >
+        <svg
+          class="o-icon"
+        >
+          <polygon
+            fill="#000000"
+            fill-rule="evenodd"
+            points="4 0 4 2 6.58 2 2.92 10 0 10 0 12 8 12 8 10 5.42 10 9.08 2 12 2 12 0"
+            transform="translate(3 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Strikethrough"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M2.8875,3.06 C2.8875,2.6025 2.985,2.18625 3.18375,1.8075 C3.3825,1.42875 3.66,1.10625 4.02,0.84 C4.38,0.57375 4.80375,0.3675 5.29875,0.22125 C5.79375,0.075 6.33375,0 6.92625,0 C7.53375,0 8.085,0.0825 8.58,0.25125 C9.075,0.42 9.49875,0.6525 9.85125,0.95625 C10.20375,1.25625 10.47375,1.6125 10.665,2.02875 C10.85625,2.44125 10.95,2.895 10.95,3.38625 L8.6925,3.38625 C8.6925,3.1575 8.655,2.94375 8.58375,2.74875 C8.5125,2.55 8.4,2.38125 8.25,2.2425 C8.1,2.10375 7.9125,1.99125 7.6875,1.91625 C7.4625,1.8375 7.19625,1.8 6.88875,1.8 C6.5925,1.8 6.3375,1.83375 6.11625,1.8975 C5.89875,1.96125 5.71875,2.05125 5.57625,2.1675 C5.43375,2.28375 5.325,2.41875 5.25375,2.5725 C5.1825,2.72625 5.145,2.895 5.145,3.0675 C5.145,3.4275 5.32875,3.73125 5.69625,3.975 C5.71780203,3.98908066 5.73942012,4.00311728 5.76118357,4.01733315 C6.02342923,4.18863185 6.5,4.5 7,5 L4,5 C4,5 3.21375,4.37625 3.17625,4.30875 C2.985,3.9525 2.8875,3.53625 2.8875,3.06 Z M14,6 L0,6 L0,8 L7.21875,8 C7.35375,8.0525 7.51875,8.105 7.63125,8.15375 C7.90875,8.2775 8.12625,8.40875 8.28375,8.53625 C8.44125,8.6675 8.54625,8.81 8.6025,8.96 C8.65875,9.11375 8.685,9.28625 8.685,9.47375 C8.685,9.65 8.65125,9.815 8.58375,9.965 C8.51625,10.11875 8.41125,10.25 8.2725,10.35875 C8.13375,10.4675 7.95375,10.55375 7.74,10.6175 C7.5225,10.68125 7.27125,10.71125 6.97875,10.71125 C6.6525,10.71125 6.35625,10.6775 6.09,10.61375 C5.82375,10.55 5.59875,10.445 5.41125,10.3025 C5.22375,10.16 5.0775,9.9725 4.9725,9.74375 C4.8675,9.515 4.78125,9.17 4.78125,9 L2.55,9 C2.55,9.2525 2.61,9.6875 2.72625,10.025 C2.8425,10.3625 3.0075,10.66625 3.21375,10.9325 C3.42,11.19875 3.6675,11.4275 3.94875,11.6225 C4.23,11.8175 4.53375,11.9825 4.86375,12.11 C5.19375,12.24125 5.535,12.33875 5.89875,12.39875 C6.25875,12.4625 6.6225,12.4925 6.9825,12.4925 C7.5825,12.4925 8.13,12.425 8.6175,12.28625 C9.105,12.1475 9.525,11.94875 9.87,11.69375 C10.215,11.435 10.48125,11.12 10.6725,10.74125 C10.86375,10.3625 10.95375,9.935 10.95375,9.455 C10.95375,9.005 10.875,8.6 10.72125,8.24375 C10.68375,8.1575 10.6425,8.075 10.59375,7.9925 L14,8 L14,6 Z"
+            fill="#010101"
+            fill-rule="evenodd"
+            transform="translate(2 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool o-dropdown o-with-color"
+      >
+        <span
+          style="border-color:black"
+          title="Text Color"
+        >
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M7,0 L5,0 L0.5,12 L2.5,12 L3.62,9 L8.37,9 L9.49,12 L11.49,12 L7,0 L7,0 Z M4.38,7 L6,2.67 L7.62,7 L4.38,7 L4.38,7 Z"
+              fill="#000000"
+              transform="translate(3 1)"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool o-dropdown o-with-color"
+      >
+        <span
+          style="border-color:white"
+          title="Fill Color"
+        >
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M14.5,8.87 C14.5,8.87 13,10.49 13,11.49 C13,12.32 13.67,12.99 14.5,12.99 C15.33,12.99 16,12.32 16,11.49 C16,10.5 14.5,8.87 14.5,8.87 L14.5,8.87 Z M12.71,6.79 L5.91,0 L4.85,1.06 L6.44,2.65 L2.29,6.79 C1.9,7.18 1.9,7.81 2.29,8.2 L6.79,12.7 C6.99,12.9 7.24,13 7.5,13 C7.76,13 8.01,12.9 8.21,12.71 L12.71,8.21 C13.1,7.82 13.1,7.18 12.71,6.79 L12.71,6.79 Z M4.21,7 L7.5,3.71 L10.79,7 L4.21,7 L4.21,7 Z"
+              fill="#000000"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="o-tool o-dropdown"
+      >
+        <span
+          title="Borders"
+        >
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M0,0 L0,14 L14,14 L14,0 L0,0 L0,0 Z M6,12 L2,12 L2,8 L6,8 L6,12 L6,12 Z M6,6 L2,6 L2,2 L6,2 L6,6 L6,6 Z M12,12 L8,12 L8,8 L12,8 L12,12 L12,12 Z M12,6 L8,6 L8,2 L12,2 L12,6 L12,6 Z"
+              fill="#000000"
+              transform="translate(2 2)"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="o-tool o-disabled"
+        title="Merge Cells"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M3,6 L1,6 L1,2 L8,2 L8,4 L3,4 L3,6 Z M10,4 L10,2 L17,2 L17,6 L15,6 L15,4 L10,4 Z M10,14 L15,14 L15,12 L17,12 L17,16 L10,16 L10,14 Z M1,12 L3,12 L3,14 L8,14 L8,16 L1,16 L1,12 Z M1,8 L5,8 L5,6 L8,9 L5,12 L5,10 L1,10 L1,8 Z M10,9 L13,6 L13,8 L17,8 L17,10 L13,10 L13,12 L10,9 Z"
+            fill="#000000"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool o-dropdown"
+        title="Horizontal align"
+      >
+        <span>
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M0,14 L10,14 L10,12 L0,12 L0,14 Z M10,4 L0,4 L0,6 L10,6 L10,4 Z M0,0 L0,2 L14,2 L14,0 L0,0 Z M0,10 L14,10 L14,8 L0,8 L0,10 Z"
+              fill="#000000"
+              transform="translate(2 2)"
+            />
+          </svg>
+          <svg
+            class="o-icon"
+          >
+            <polygon
+              fill="#000000"
+              points="0 0 4 4 8 0"
+              transform="translate(5 7)"
+            />
+          </svg>
+        </span>
+      </div>
+      <!-- &lt;div class="o-tool" title="Vertical align"&gt;&lt;span&gt;&lt;svg class="o-icon"&gt;&lt;path fill="#000000" d="M9.5,3 L7,3 L7,0 L5,0 L5,3 L2.5,3 L6,6.5 L9.5,3 L9.5,3 Z M0,8 L0,10 L12,10 L12,8 L0,8 L0,8 Z M2.5,15 L5,15 L5,18 L7,18 L7,15 L9.5,15 L6,11.5 L2.5,15 L2.5,15 Z" transform="translate(3)"/&gt;&lt;/svg&gt;&lt;/span&gt; &lt;svg class="o-icon"&gt;&lt;polygon fill="#000000" points="0 0 4 4 8 0" transform="translate(5 7)"/&gt;&lt;/svg&gt;&lt;/div&gt; -->
+      <!-- &lt;div class="o-tool" title="Text Wrapping"&gt;&lt;svg class="o-icon"&gt;&lt;path fill="#000000" d="M14,0 L0,0 L0,2 L14,2 L14,0 Z M0,12 L4,12 L4,10 L0,10 L0,12 Z M11.5,5 L0,5 L0,7 L11.75,7 C12.58,7 13.25,7.67 13.25,8.5 C13.25,9.33 12.58,10 11.75,10 L9,10 L9,8 L6,11 L9,14 L9,12 L11.5,12 C13.43,12 15,10.43 15,8.5 C15,6.57 13.43,5 11.5,5 Z" transform="translate(2 3)"/&gt;&lt;/svg&gt;&lt;/div&gt; -->
+      <div
+        class="o-divider"
+      />
+    </div>
+    <!-- Cell content -->
+    <div
+      class="o-toolbar-cell-content"
+    />
+  </div>
+</div>
+`;
+exports[`TopBar component simple rendering 1`] = `
+<div
+  class="o-spreadsheet-topbar"
+>
+  <div
+    class="o-topbar-top"
+  >
+    <!-- Menus -->
+    <div
+      class="o-topbar-topleft"
+    >
+      <div
+        class="o-topbar-menu"
+        data-id="file"
+      >
+        File
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="edit"
+      >
+        Edit
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="view"
+      >
+        View
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="insert"
+      >
+        Insert
+      </div>
+      <div
+        class="o-topbar-menu"
+        data-id="format"
+      >
+        Format
+      </div>
+    </div>
+    <div
+      class="o-topbar-topright"
+    />
+  </div>
+  <!-- Toolbar and Cell Content -->
+  <div
+    class="o-topbar-toolbar"
+  >
+    <!-- Toolbar -->
+    <div
+      class="o-toolbar-tools"
+    >
+      <div
+        class="o-tool o-disabled"
+        title="Undo"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M11.5656391,4.43436088 L9,7 L16,7 L16,0 L13.0418424,2.95815758 C11.5936787,1.73635959 9.72260775,1 7.67955083,1 C4.22126258,1 1.25575599,3.10984908 0,6 L2,7 C2.93658775,4.60974406 5.12943697,3.08011229 7.67955083,3 C9.14881247,3.0528747 10.4994783,3.57862053 11.5656391,4.43436088 Z"
+            fill="#000000"
+            transform="matrix(-1 0 0 1 17 5)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool o-disabled"
+        title="Redo"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M11.5656391,4.43436088 L9,7 L16,7 L16,0 L13.0418424,2.95815758 C11.5936787,1.73635959 9.72260775,1 7.67955083,1 C4.22126258,1 1.25575599,3.10984908 0,6 L2,7 C2.93658775,4.60974406 5.12943697,3.08011229 7.67955083,3 C9.14881247,3.0528747 10.4994783,3.57862053 11.5656391,4.43436088 Z"
+            fill="#000000"
+            transform="translate(1 5)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Paint Format"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M9,0 L1,0 C0.45,0 0,0.45 0,1 L0,4 C0,4.55 0.45,5 1,5 L9,5 C9.55,5 10,4.55 10,4 L10,3 L11,3 L11,6 L4,6 L4,14 L6,14 L6,8 L13,8 L13,2 L10,2 L10,1 C10,0.45 9.55,0 9,0 Z"
+            fill="#000000"
+            transform="translate(3 2)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Clear Format"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M0.27,1.55 L5.43,6.7 L3,12 L5.5,12 L7.14,8.42 L11.73,13 L13,11.73 L1.55,0.27 L0.27,1.55 L0.27,1.55 Z M3.82,0 L5.82,2 L7.58,2 L7.03,3.21 L8.74,4.92 L10.08,2 L14,2 L14,0 L3.82,0 L3.82,0 Z"
+            fill="#000000"
+            transform="translate(2 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool"
+        title="Format as percent"
+      >
+        %
+      </div>
+      <div
+        class="o-tool"
+        title="Decrease decimal places"
+      >
+        .0
+      </div>
+      <div
+        class="o-tool"
+        title="Increase decimal places"
+      >
+        .00
+      </div>
+      <div
+        class="o-tool o-dropdown"
+        title="More formats"
+      >
+        <div
+          class="o-text-icon"
+        >
+          123
+          <svg
+            class="o-icon"
+          >
+            <polygon
+              fill="#000000"
+              points="0 0 4 4 8 0"
+              transform="translate(5 7)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <!-- &lt;div class="o-tool" title="Font"&gt;&lt;span&gt;Roboto&lt;/span&gt; &lt;svg class="o-icon"&gt;&lt;polygon fill="#000000" points="0 0 4 4 8 0" transform="translate(5 7)"/&gt;&lt;/svg&gt;&lt;/div&gt; -->
+      <div
+        class="o-tool o-dropdown"
+        title="Font Size"
+      >
+        <div
+          class="o-text-icon"
+        >
+          10
+          <svg
+            class="o-icon"
+          >
+            <polygon
+              fill="#000000"
+              points="0 0 4 4 8 0"
+              transform="translate(5 7)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool"
+        title="Bold"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M9,3.5 C9,1.57 7.43,0 5.5,0 L1.77635684e-15,0 L1.77635684e-15,12 L6.25,12 C8.04,12 9.5,10.54 9.5,8.75 C9.5,7.45 8.73,6.34 7.63,5.82 C8.46,5.24 9,4.38 9,3.5 Z M5,2 C5.82999992,2 6.5,2.67 6.5,3.5 C6.5,4.33 5.82999992,5 5,5 L3,5 L3,2 L5,2 Z M3,10 L3,7 L5.5,7 C6.32999992,7 7,7.67 7,8.5 C7,9.33 6.32999992,10 5.5,10 L3,10 Z"
+            fill="#000000"
+            fill-rule="evenodd"
+            transform="translate(4 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Italic"
+      >
+        <svg
+          class="o-icon"
+        >
+          <polygon
+            fill="#000000"
+            fill-rule="evenodd"
+            points="4 0 4 2 6.58 2 2.92 10 0 10 0 12 8 12 8 10 5.42 10 9.08 2 12 2 12 0"
+            transform="translate(3 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool"
+        title="Strikethrough"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M2.8875,3.06 C2.8875,2.6025 2.985,2.18625 3.18375,1.8075 C3.3825,1.42875 3.66,1.10625 4.02,0.84 C4.38,0.57375 4.80375,0.3675 5.29875,0.22125 C5.79375,0.075 6.33375,0 6.92625,0 C7.53375,0 8.085,0.0825 8.58,0.25125 C9.075,0.42 9.49875,0.6525 9.85125,0.95625 C10.20375,1.25625 10.47375,1.6125 10.665,2.02875 C10.85625,2.44125 10.95,2.895 10.95,3.38625 L8.6925,3.38625 C8.6925,3.1575 8.655,2.94375 8.58375,2.74875 C8.5125,2.55 8.4,2.38125 8.25,2.2425 C8.1,2.10375 7.9125,1.99125 7.6875,1.91625 C7.4625,1.8375 7.19625,1.8 6.88875,1.8 C6.5925,1.8 6.3375,1.83375 6.11625,1.8975 C5.89875,1.96125 5.71875,2.05125 5.57625,2.1675 C5.43375,2.28375 5.325,2.41875 5.25375,2.5725 C5.1825,2.72625 5.145,2.895 5.145,3.0675 C5.145,3.4275 5.32875,3.73125 5.69625,3.975 C5.71780203,3.98908066 5.73942012,4.00311728 5.76118357,4.01733315 C6.02342923,4.18863185 6.5,4.5 7,5 L4,5 C4,5 3.21375,4.37625 3.17625,4.30875 C2.985,3.9525 2.8875,3.53625 2.8875,3.06 Z M14,6 L0,6 L0,8 L7.21875,8 C7.35375,8.0525 7.51875,8.105 7.63125,8.15375 C7.90875,8.2775 8.12625,8.40875 8.28375,8.53625 C8.44125,8.6675 8.54625,8.81 8.6025,8.96 C8.65875,9.11375 8.685,9.28625 8.685,9.47375 C8.685,9.65 8.65125,9.815 8.58375,9.965 C8.51625,10.11875 8.41125,10.25 8.2725,10.35875 C8.13375,10.4675 7.95375,10.55375 7.74,10.6175 C7.5225,10.68125 7.27125,10.71125 6.97875,10.71125 C6.6525,10.71125 6.35625,10.6775 6.09,10.61375 C5.82375,10.55 5.59875,10.445 5.41125,10.3025 C5.22375,10.16 5.0775,9.9725 4.9725,9.74375 C4.8675,9.515 4.78125,9.17 4.78125,9 L2.55,9 C2.55,9.2525 2.61,9.6875 2.72625,10.025 C2.8425,10.3625 3.0075,10.66625 3.21375,10.9325 C3.42,11.19875 3.6675,11.4275 3.94875,11.6225 C4.23,11.8175 4.53375,11.9825 4.86375,12.11 C5.19375,12.24125 5.535,12.33875 5.89875,12.39875 C6.25875,12.4625 6.6225,12.4925 6.9825,12.4925 C7.5825,12.4925 8.13,12.425 8.6175,12.28625 C9.105,12.1475 9.525,11.94875 9.87,11.69375 C10.215,11.435 10.48125,11.12 10.6725,10.74125 C10.86375,10.3625 10.95375,9.935 10.95375,9.455 C10.95375,9.005 10.875,8.6 10.72125,8.24375 C10.68375,8.1575 10.6425,8.075 10.59375,7.9925 L14,8 L14,6 Z"
+            fill="#010101"
+            fill-rule="evenodd"
+            transform="translate(2 3)"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-tool o-dropdown o-with-color"
+      >
+        <span
+          style="border-color:black"
+          title="Text Color"
+        >
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M7,0 L5,0 L0.5,12 L2.5,12 L3.62,9 L8.37,9 L9.49,12 L11.49,12 L7,0 L7,0 Z M4.38,7 L6,2.67 L7.62,7 L4.38,7 L4.38,7 Z"
+              fill="#000000"
+              transform="translate(3 1)"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool o-dropdown o-with-color"
+      >
+        <span
+          style="border-color:white"
+          title="Fill Color"
+        >
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M14.5,8.87 C14.5,8.87 13,10.49 13,11.49 C13,12.32 13.67,12.99 14.5,12.99 C15.33,12.99 16,12.32 16,11.49 C16,10.5 14.5,8.87 14.5,8.87 L14.5,8.87 Z M12.71,6.79 L5.91,0 L4.85,1.06 L6.44,2.65 L2.29,6.79 C1.9,7.18 1.9,7.81 2.29,8.2 L6.79,12.7 C6.99,12.9 7.24,13 7.5,13 C7.76,13 8.01,12.9 8.21,12.71 L12.71,8.21 C13.1,7.82 13.1,7.18 12.71,6.79 L12.71,6.79 Z M4.21,7 L7.5,3.71 L10.79,7 L4.21,7 L4.21,7 Z"
+              fill="#000000"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="o-tool o-dropdown"
+      >
+        <span
+          title="Borders"
+        >
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M0,0 L0,14 L14,14 L14,0 L0,0 L0,0 Z M6,12 L2,12 L2,8 L6,8 L6,12 L6,12 Z M6,6 L2,6 L2,2 L6,2 L6,6 L6,6 Z M12,12 L8,12 L8,8 L12,8 L12,12 L12,12 Z M12,6 L8,6 L8,2 L12,2 L12,6 L12,6 Z"
+              fill="#000000"
+              transform="translate(2 2)"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="o-tool o-disabled"
+        title="Merge Cells"
+      >
+        <svg
+          class="o-icon"
+        >
+          <path
+            d="M3,6 L1,6 L1,2 L8,2 L8,4 L3,4 L3,6 Z M10,4 L10,2 L17,2 L17,6 L15,6 L15,4 L10,4 Z M10,14 L15,14 L15,12 L17,12 L17,16 L10,16 L10,14 Z M1,12 L3,12 L3,14 L8,14 L8,16 L1,16 L1,12 Z M1,8 L5,8 L5,6 L8,9 L5,12 L5,10 L1,10 L1,8 Z M10,9 L13,6 L13,8 L17,8 L17,10 L13,10 L13,12 L10,9 Z"
+            fill="#000000"
+          />
+        </svg>
+      </div>
+      <div
+        class="o-divider"
+      />
+      <div
+        class="o-tool o-dropdown"
+        title="Horizontal align"
+      >
+        <span>
+          <svg
+            class="o-icon"
+          >
+            <path
+              d="M0,14 L10,14 L10,12 L0,12 L0,14 Z M10,4 L0,4 L0,6 L10,6 L10,4 Z M0,0 L0,2 L14,2 L14,0 L0,0 Z M0,10 L14,10 L14,8 L0,8 L0,10 Z"
+              fill="#000000"
+              transform="translate(2 2)"
+            />
+          </svg>
+          <svg
+            class="o-icon"
+          >
+            <polygon
+              fill="#000000"
+              points="0 0 4 4 8 0"
+              transform="translate(5 7)"
+            />
+          </svg>
+        </span>
+      </div>
+      <!-- &lt;div class="o-tool" title="Vertical align"&gt;&lt;span&gt;&lt;svg class="o-icon"&gt;&lt;path fill="#000000" d="M9.5,3 L7,3 L7,0 L5,0 L5,3 L2.5,3 L6,6.5 L9.5,3 L9.5,3 Z M0,8 L0,10 L12,10 L12,8 L0,8 L0,8 Z M2.5,15 L5,15 L5,18 L7,18 L7,15 L9.5,15 L6,11.5 L2.5,15 L2.5,15 Z" transform="translate(3)"/&gt;&lt;/svg&gt;&lt;/span&gt; &lt;svg class="o-icon"&gt;&lt;polygon fill="#000000" points="0 0 4 4 8 0" transform="translate(5 7)"/&gt;&lt;/svg&gt;&lt;/div&gt; -->
+      <!-- &lt;div class="o-tool" title="Text Wrapping"&gt;&lt;svg class="o-icon"&gt;&lt;path fill="#000000" d="M14,0 L0,0 L0,2 L14,2 L14,0 Z M0,12 L4,12 L4,10 L0,10 L0,12 Z M11.5,5 L0,5 L0,7 L11.75,7 C12.58,7 13.25,7.67 13.25,8.5 C13.25,9.33 12.58,10 11.75,10 L9,10 L9,8 L6,11 L9,14 L9,12 L11.5,12 C13.43,12 15,10.43 15,8.5 C15,6.57 13.43,5 11.5,5 Z" transform="translate(2 3)"/&gt;&lt;/svg&gt;&lt;/div&gt; -->
+      <div
+        class="o-divider"
+      />
+    </div>
+    <!-- Cell content -->
+    <div
+      class="o-toolbar-cell-content"
+    />
+  </div>
+</div>
+`;