handsontable 0.0.0-next-407bbbc-20241107 → 0.0.0-next-6129043-20241108

package/core.mjs

@@ -39,6 +39,7 @@ import { installFocusCatcher, createViewportScroller } from "./core/index.mjs";
 import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
 import { createShortcutManager } from "./shortcuts/index.mjs";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
+import { getThemeClassName } from "./helpers/themes.mjs";
 let activeGuid = null;
 
 /**
@@ -225,6 +226,7 @@ export default function Core(rootElement, userSettings) {
   rootElement.insertBefore(this.container, rootElement.firstChild);
   if (isRootInstance(this)) {
     _injectProductInfo(userSettings.licenseKey, rootElement);
+    addClass(rootElement, 'ht-wrapper');
   }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
@@ -1025,6 +1027,13 @@ export default function Core(rootElement, userSettings) {
     }
     this.updateSettings(tableMeta, true);
     this.view = new TableView(this);
+    const themeName = tableMeta.themeName || getThemeClassName(instance.rootElement);
+
+    // Use the theme defined as a root element class or in the settings (in that order).
+    instance.useTheme(themeName);
+
+    // Add the theme class name to the license info element.
+    instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
     viewportScroller = createViewportScroller(instance);
     focusManager = new FocusManager(instance);
@@ -2378,6 +2387,19 @@ export default function Core(rootElement, userSettings) {
       if (instance.view) {
         instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
         instance.view._wt.exportSettingsAsClassNames();
+        const currentThemeName = instance.getCurrentThemeName();
+        const themeNameOptionExists = hasOwnProperty(settings, 'themeName');
+        if (currentThemeName && themeNameOptionExists) {
+          instance.view.getStylesHandler().removeClassNames();
+          instance.view.removeClassNameFromLicenseElement(currentThemeName);
+        }
+        const themeName = themeNameOptionExists && settings.themeName || getThemeClassName(instance.rootElement);
+
+        // Use the theme defined as a root element class or in the settings (in that order).
+        instance.useTheme(themeName);
+
+        // Add the theme class name to the license info element.
+        instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
       }
       instance.runHooks('afterUpdateSettings', settings);
     }
@@ -4581,6 +4603,30 @@ export default function Core(rootElement, userSettings) {
   };
   this.timeouts = [];
 
+  /**
+   * Use the theme specified by the provided name.
+   *
+   * @memberof Core#
+   * @function useTheme
+   * @since 15.0.0
+   * @param {string|boolean|undefined} themeName The name of the theme to use.
+   */
+  this.useTheme = themeName => {
+    this.view.getStylesHandler().useTheme(themeName);
+  };
+
+  /**
+   * Gets the name of the currently used theme.
+   *
+   * @memberof Core#
+   * @function getCurrentThemeName
+   * @since 15.0.0
+   * @returns {string|undefined} The name of the currently used theme.
+   */
+  this.getCurrentThemeName = () => {
+    return this.view.getStylesHandler().getThemeName();
+  };
+
   /**
    * Sets timeout. Purpose of this method is to clear all known timeouts when `destroy` method is called.
    *

package/dataMap/metaManager/metaSchema.js

@@ -3842,8 +3842,8 @@ var _default = () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is 23 px (22 px + 1 px of the row's bottom border).
-     * You can change it to equal or greater than 23px, by setting the `rowHeights` option to one of the following:
+     * In the rendering process, the default row height is 23 px (in the classic theme: 22 px + 1 px of the row's bottom border) or what's defined as `--ht-row-height` in the used theme.
+     * You can change it to equal or greater than the defautl value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
      * | ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -3875,7 +3875,7 @@ var _default = () => {
      * // set the first (by visual index) row's height to 100
      * // set the second (by visual index) row's height to 120
      * // set the third (by visual index) row's height to `undefined`
-     * // set any other row's height to the default 23px
+     * // set any other row's height to the default height value
      * rowHeights: [100, 120, undefined],
      *
      * // set each row's height individually, using a function
@@ -4313,6 +4313,26 @@ var _default = () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `themeName` option allows enabling a theme by that name.
+     *
+     * If no `themeName` is provided, the table will use the classic theme (if the correct CSS files are imported).
+     *
+     * Read more:
+     * - [Themes](@/guides/styling/themes/themes.md)
+     *
+     * @memberof Options#
+     * @type {string|boolean|undefined}
+     * @default undefined
+     * @category Core
+     * @since 15.0.0
+     *
+     * @example
+     * ```js
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *

package/dataMap/metaManager/metaSchema.mjs

@@ -3839,8 +3839,8 @@ export default () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is 23 px (22 px + 1 px of the row's bottom border).
-     * You can change it to equal or greater than 23px, by setting the `rowHeights` option to one of the following:
+     * In the rendering process, the default row height is 23 px (in the classic theme: 22 px + 1 px of the row's bottom border) or what's defined as `--ht-row-height` in the used theme.
+     * You can change it to equal or greater than the defautl value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
      * | ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -3872,7 +3872,7 @@ export default () => {
      * // set the first (by visual index) row's height to 100
      * // set the second (by visual index) row's height to 120
      * // set the third (by visual index) row's height to `undefined`
-     * // set any other row's height to the default 23px
+     * // set any other row's height to the default height value
      * rowHeights: [100, 120, undefined],
      *
      * // set each row's height individually, using a function
@@ -4310,6 +4310,26 @@ export default () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `themeName` option allows enabling a theme by that name.
+     *
+     * If no `themeName` is provided, the table will use the classic theme (if the correct CSS files are imported).
+     *
+     * Read more:
+     * - [Themes](@/guides/styling/themes/themes.md)
+     *
+     * @memberof Options#
+     * @type {string|boolean|undefined}
+     * @default undefined
+     * @category Core
+     * @since 15.0.0
+     *
+     * @example
+     * ```js
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *

package/dist/handsontable.css

@@ -25,13 +25,13 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-407bbbc-20241107
- * Release date: 17/10/2024 (built at 07/11/2024 10:00:41)
+ * Version: 0.0.0-next-6129043-20241108
+ * Release date: 17/10/2024 (built at 08/11/2024 09:48:45)
  */
 /**
  * Fix for bootstrap styles
  */
-.handsontable .table th, .handsontable .table td {
+ .handsontable .table th, .handsontable .table td {
   border-top: none;
 }
 
@@ -589,6 +589,7 @@ innerBorderBottom - Property controlled by bottom overlay
   color: #000;
   border-radius: 0;
   background-color: #FFF;
+  box-sizing: border-box !important;
   /*overwrite styles potentionally made by a framework*/
 }
 
@@ -603,16 +604,25 @@ innerBorderBottom - Property controlled by bottom overlay
 }
 
 .htSelectEditor {
-  -webkit-appearance: menulist-button !important;
   position: absolute;
-  width: auto;
-  border: 2px solid #4b89ff;
+
+  select {
+    -webkit-appearance: menulist-button !important;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #4b89ff;
+    box-sizing: border-box !important;
+  }
 }
 
-.htSelectEditor:focus {
+.htSelectEditor select:focus {
   outline: none;
 }
 
+.htSelectEditor .htAutocompleteArrow {
+  display: none;
+}
+
 /*
 TextRenderer readOnly cell
 */
@@ -2056,5 +2066,3 @@ textarea.HandsontableCopyPaste {
   left: 0;
   right: unset;
 }
-
-/*# sourceMappingURL=handsontable.css.map*/