@vaadin/grid 24.2.3 → 24.3.0-alpha10

package/src/vaadin-grid-styles.js

@@ -3,355 +3,351 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid',
-  css`
-    @keyframes vaadin-grid-appear {
-      to {
-        opacity: 1;
-      }
-    }
-
-    :host {
-      display: flex;
-      flex-direction: column;
-      animation: 1ms vaadin-grid-appear;
-      height: 400px;
-      flex: 1 1 auto;
-      align-self: stretch;
-      position: relative;
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    :host([disabled]) {
-      pointer-events: none;
-    }
-
-    #scroller {
-      display: flex;
-      flex-direction: column;
-      min-height: 100%;
-      transform: translateY(0);
-      width: auto;
-      height: auto;
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const gridStyles = css`
+  @keyframes vaadin-grid-appear {
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    animation: 1ms vaadin-grid-appear;
+    height: 400px;
+    flex: 1 1 auto;
+    align-self: stretch;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  #scroller {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    transform: translateY(0);
+    width: auto;
+    height: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  :host([all-rows-visible]) {
+    height: auto;
+    align-self: flex-start;
+    flex-grow: 0;
+    width: 100%;
+  }
+
+  :host([all-rows-visible]) #scroller {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  :host([all-rows-visible]) #items {
+    min-height: 1px;
+  }
+
+  #table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+    outline: none;
+    /* Workaround for a Desktop Safari bug: new stacking context here prevents the scrollbar from getting hidden */
+    z-index: 0;
+  }
+
+  #header,
+  #footer {
+    display: block;
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    overflow: visible;
+    width: 100%;
+    z-index: 1;
+  }
+
+  #header {
+    top: 0;
+  }
+
+  th {
+    text-align: inherit;
+  }
+
+  /* Safari doesn't work with "inherit" */
+  [safari] th {
+    text-align: initial;
+  }
+
+  #footer {
+    bottom: 0;
+  }
+
+  #items {
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: block;
+    position: -webkit-sticky;
+    position: sticky;
+    width: 100%;
+    left: 0;
+    overflow: visible;
+  }
+
+  [part~='row'] {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+    visibility: hidden;
+  }
+
+  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
+    transform: translateX(var(--_grid-lazy-columns-start));
+  }
+
+  #items [part~='row'] {
+    position: absolute;
+  }
+
+  #items [part~='row']:empty {
+    height: 100%;
+  }
+
+  [part~='cell']:not([part~='details-cell']) {
+    flex-shrink: 0;
+    flex-grow: 1;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  [part~='cell'] > [tabindex] {
+    display: flex;
+    align-items: inherit;
+    outline: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  [part~='details-cell'] {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  [frozen],
+  [frozen-to-end] {
+    z-index: 2;
+    will-change: transform;
+  }
+
+  [no-scrollbars][safari] #table,
+  [no-scrollbars][firefox] #table {
+    overflow: hidden;
+  }
+
+  /* Reordering styles */
+  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
+  :host([reordering]) [part~='resize-handle'],
+  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    pointer-events: none;
+  }
+
+  [part~='reorder-ghost'] {
+    visibility: hidden;
+    position: fixed;
+    pointer-events: none;
+    opacity: 0.5;
+
+    /* Prevent overflowing the grid in Firefox */
+    top: 0;
+    left: 0;
+  }
+
+  :host([reordering]) {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Resizing styles */
+  [part~='resize-handle'] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
+  }
+
+  [part~='resize-handle']::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 35px;
+    transform: translateX(-50%);
+  }
+
+  [last-column] [part~='resize-handle']::before,
+  [last-frozen] [part~='resize-handle']::before {
+    width: 18px;
+    transform: none;
+    right: 0;
+  }
+
+  [frozen-to-end] [part~='resize-handle'] {
+    left: 0;
+    right: auto;
+  }
+
+  [frozen-to-end] [part~='resize-handle']::before {
+    left: 0;
+    right: auto;
+  }
+
+  [first-frozen-to-end] [part~='resize-handle']::before {
+    width: 18px;
+    transform: none;
+  }
+
+  [first-frozen-to-end] {
+    margin-inline-start: auto;
+  }
+
+  /* Hide resize handle if scrolled to end */
+  :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
+    display: none;
+  }
+
+  #scroller[column-resizing] {
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Sizer styles */
+  #sizer {
+    display: flex;
+    position: absolute;
+    visibility: hidden;
+  }
+
+  #sizer [part~='details-cell'] {
+    display: none !important;
+  }
+
+  #sizer [part~='cell'][hidden] {
+    display: none !important;
+  }
+
+  #sizer [part~='cell'] {
+    display: block;
+    flex-shrink: 0;
+    line-height: 0;
+    height: 0 !important;
+    min-height: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+  }
+
+  #sizer [part~='cell']::before {
+    content: '-';
+  }
+
+  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    display: none !important;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) #items,
+  :host([dir='rtl']) #header,
+  :host([dir='rtl']) #footer {
+    left: auto;
+  }
+
+  :host([dir='rtl']) [part~='reorder-ghost'] {
+    left: auto;
+    right: 0;
+  }
+
+  :host([dir='rtl']) [part~='resize-handle'] {
+    left: 0;
+    right: auto;
+  }
+
+  :host([dir='rtl']) [part~='resize-handle']::before {
+    transform: translateX(50%);
+  }
+
+  :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
+  :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
+    left: 0;
+    right: auto;
+  }
+
+  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
+    right: 0;
+    left: auto;
+  }
+
+  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
+    right: 0;
+    left: auto;
+  }
+
+  @media (forced-colors: active) {
+    [part~='selected-row'] [part~='first-column-cell']::after {
+      content: '';
       position: absolute;
-      inset: 0;
-    }
-
-    :host([all-rows-visible]) {
-      height: auto;
-      align-self: flex-start;
-      flex-grow: 0;
-      width: 100%;
-    }
-
-    :host([all-rows-visible]) #scroller {
-      width: 100%;
-      height: 100%;
-      position: relative;
-    }
-
-    :host([all-rows-visible]) #items {
-      min-height: 1px;
-    }
-
-    #table {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      position: relative;
-      outline: none;
-      /* Workaround for a Desktop Safari bug: new stacking context here prevents the scrollbar from getting hidden */
-      z-index: 0;
-    }
-
-    #header,
-    #footer {
-      display: block;
-      position: -webkit-sticky;
-      position: sticky;
-      left: 0;
-      overflow: visible;
-      width: 100%;
-      z-index: 1;
-    }
-
-    #header {
       top: 0;
-    }
-
-    th {
-      text-align: inherit;
-    }
-
-    /* Safari doesn't work with "inherit" */
-    [safari] th {
-      text-align: initial;
-    }
-
-    #footer {
-      bottom: 0;
-    }
-
-    #items {
-      flex-grow: 1;
-      flex-shrink: 0;
-      display: block;
-      position: -webkit-sticky;
-      position: sticky;
-      width: 100%;
       left: 0;
-      overflow: visible;
-    }
-
-    [part~='row'] {
-      display: flex;
-      width: 100%;
-      box-sizing: border-box;
-      margin: 0;
-    }
-
-    [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
-      visibility: hidden;
-    }
-
-    [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
-      transform: translateX(var(--_grid-lazy-columns-start));
-    }
-
-    #items [part~='row'] {
-      position: absolute;
-    }
-
-    #items [part~='row']:empty {
-      height: 100%;
-    }
-
-    [part~='cell']:not([part~='details-cell']) {
-      flex-shrink: 0;
-      flex-grow: 1;
-      box-sizing: border-box;
-      display: flex;
-      width: 100%;
-      position: relative;
-      align-items: center;
-      padding: 0;
-      white-space: nowrap;
-    }
-
-    [part~='cell'] > [tabindex] {
-      display: flex;
-      align-items: inherit;
-      outline: none;
-      position: absolute;
-      inset: 0;
-    }
-
-    [part~='details-cell'] {
-      position: absolute;
       bottom: 0;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 0;
-    }
-
-    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    [hidden] {
-      display: none !important;
-    }
-
-    [frozen],
-    [frozen-to-end] {
-      z-index: 2;
-      will-change: transform;
-    }
-
-    [no-scrollbars][safari] #table,
-    [no-scrollbars][firefox] #table {
-      overflow: hidden;
-    }
-
-    /* Reordering styles */
-    :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
-    :host([reordering]) [part~='resize-handle'],
-    #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      pointer-events: none;
-    }
-
-    [part~='reorder-ghost'] {
-      visibility: hidden;
-      position: fixed;
-      pointer-events: none;
-      opacity: 0.5;
-
-      /* Prevent overflowing the grid in Firefox */
-      top: 0;
-      left: 0;
-    }
-
-    :host([reordering]) {
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    /* Resizing styles */
-    [part~='resize-handle'] {
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      cursor: col-resize;
-      z-index: 1;
-    }
-
-    [part~='resize-handle']::before {
-      position: absolute;
-      content: '';
-      height: 100%;
-      width: 35px;
-      transform: translateX(-50%);
-    }
-
-    [last-column] [part~='resize-handle']::before,
-    [last-frozen] [part~='resize-handle']::before {
-      width: 18px;
-      transform: none;
-      right: 0;
-    }
-
-    [frozen-to-end] [part~='resize-handle'] {
-      left: 0;
-      right: auto;
-    }
-
-    [frozen-to-end] [part~='resize-handle']::before {
-      left: 0;
-      right: auto;
-    }
-
-    [first-frozen-to-end] [part~='resize-handle']::before {
-      width: 18px;
-      transform: none;
-    }
-
-    [first-frozen-to-end] {
-      margin-inline-start: auto;
-    }
-
-    /* Hide resize handle if scrolled to end */
-    :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
-      display: none;
-    }
-
-    #scroller[column-resizing] {
-      -ms-user-select: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    /* Sizer styles */
-    #sizer {
-      display: flex;
-      position: absolute;
-      visibility: hidden;
-    }
-
-    #sizer [part~='details-cell'] {
-      display: none !important;
-    }
-
-    #sizer [part~='cell'][hidden] {
-      display: none !important;
-    }
-
-    #sizer [part~='cell'] {
-      display: block;
-      flex-shrink: 0;
-      line-height: 0;
-      height: 0 !important;
-      min-height: 0 !important;
-      max-height: 0 !important;
-      padding: 0 !important;
-      border: none !important;
-    }
-
-    #sizer [part~='cell']::before {
-      content: '-';
-    }
-
-    #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      display: none !important;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) #items,
-    :host([dir='rtl']) #header,
-    :host([dir='rtl']) #footer {
-      left: auto;
-    }
-
-    :host([dir='rtl']) [part~='reorder-ghost'] {
-      left: auto;
-      right: 0;
-    }
-
-    :host([dir='rtl']) [part~='resize-handle'] {
-      left: 0;
-      right: auto;
-    }
-
-    :host([dir='rtl']) [part~='resize-handle']::before {
-      transform: translateX(50%);
-    }
-
-    :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
-    :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
-      left: 0;
-      right: auto;
-    }
-
-    :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
-      right: 0;
-      left: auto;
-    }
-
-    :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
-      right: 0;
-      left: auto;
+      border: 2px solid;
     }
 
-    @media (forced-colors: active) {
-      [part~='selected-row'] [part~='first-column-cell']::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        border: 2px solid;
-      }
-
-      [part~='focused-cell']::before {
-        outline: 2px solid !important;
-        outline-offset: -1px;
-      }
+    [part~='focused-cell']::before {
+      outline: 2px solid !important;
+      outline-offset: -1px;
     }
-  `,
-  { moduleId: 'vaadin-grid-styles' },
-);
+  }
+`;

package/src/vaadin-grid-styling-mixin.js

@@ -31,7 +31,10 @@ export const StylingMixin = (superClass) =>
          * @type {GridCellClassNameGenerator | null | undefined}
          * @deprecated Use `cellPartNameGenerator` instead.
          */
-        cellClassNameGenerator: Function,
+        cellClassNameGenerator: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
@@ -52,7 +55,10 @@ export const StylingMixin = (superClass) =>
          *
          * @type {GridCellPartNameGenerator | null | undefined}
          */
-        cellPartNameGenerator: Function,
+        cellPartNameGenerator: {
+          type: Function,
+          sync: true,
+        },
       };
     }