@svgrid/grid 2.1.22 → 2.2.0

package/src/SvGrid.css

@@ -485,13 +485,28 @@
   justify-content: flex-end;
 }
 /* The custom vertical scrollbar overlays the right 16px of the viewport
-   (absolute, z-index 40). Nudge the last column's right-aligned content in by
-   that width when the scrollbar is visible, so numbers/values aren't hidden
-   underneath it. Left/center content already clears the right edge. */
-.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
-.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
+   (absolute, z-index 40) and does NOT shrink the scroll container's
+   clientWidth. Two cases keep the last column clear of it:
+
+   1. No horizontal overflow (content fits, nothing to scroll): nudge the last
+      column's right-aligned content in by the scrollbar width so numbers
+      aren't hidden underneath it. Left/center content already clears it.
+   2. Horizontal overflow: there's nothing to nudge (you scroll to the end and
+      the last 16px sit under the bar with no room left). Instead reserve a
+      trailing gutter on the scroll container so you can scroll the last column
+      fully out from under the overlay. See `.sv-grid-has-vscroll.sv-grid-has-hscroll`. */
+.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
+.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
   padding-right: calc(var(--sg-cell-px, 7px) + 16px);
 }
+/* Case 2: reserve the overlay scrollbar's width as end-of-scroll space so the
+   final column can be scrolled clear of the vertical scrollbar. Modern browsers
+   include a scroll container's inline-end padding in its scrollable overflow;
+   the custom scrollbars are siblings of this container, so their layout is
+   unaffected. */
+.sv-grid-container.sv-grid-has-vscroll.sv-grid-has-hscroll {
+  padding-right: 16px;
+}
 .sv-grid-column[data-align="center"] .sv-grid-header-sort {
   justify-content: center;
 }
@@ -857,6 +872,11 @@
   flex-direction: row;
   align-items: center;
   gap: 4px;
+  box-sizing: border-box;
+  /* Inset the operator button + input from the cell edges so the filter row
+     lines up with the header label / body text (same --sg-cell-px gutter) and
+     isn't cramped against the top/side borders. */
+  padding: 5px var(--sg-filter-cell-px, var(--sg-cell-px, 7px));
 }
 
 .sv-grid-filter-operator {
@@ -871,6 +891,100 @@
   box-sizing: border-box;
 }
 
+/* Invalid regex pattern: flag the input so the user knows the half-typed
+   pattern isn't being applied (it matches nothing until it compiles). */
+.sv-grid-filter-value.sv-grid-filter-value-invalid,
+.sv-grid-tp-filter-input.sv-grid-filter-value-invalid {
+  border-color: var(--sg-danger, #e5484d) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-danger, #e5484d) 45%, transparent);
+}
+
+/* In / Not-in chip (token) input: chips + a flex-growing text box share one
+   bordered control that reads like a single field. */
+.sv-grid-filter-chips {
+  flex: 3 1 0;
+  min-width: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 4px;
+  border: 1px solid var(--sg-input-border, #8794a8);
+  border-radius: 4px;
+  background: var(--sg-input-bg, #fff);
+  overflow: hidden;
+}
+
+/* A few chips stay visible; the rest collapse into a non-wrapping "+N" pill
+   that opens the value dropdown (select / unselect). */
+.sv-grid-filter-chip .sv-grid-filter-chip-label {
+  max-width: 84px;
+}
+.sv-grid-filter-chip-more {
+  flex: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--sg-text, inherit);
+}
+.sv-grid-filter-chip-more:hover {
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 26%, transparent);
+}
+.sv-grid-filter-chips:focus-within {
+  border-color: var(--sg-accent, #0b63f3);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-accent, #0b63f3) 45%, transparent);
+}
+.sv-grid-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 120px;
+  padding: 0 2px 0 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 16px;
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 16%, transparent);
+  color: var(--sg-text, inherit);
+}
+.sv-grid-filter-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-grid-filter-chip-x {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.sv-grid-filter-chip-x:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 28%, transparent);
+}
+.sv-grid-filter-chips .sv-grid-filter-chip-input {
+  flex: 1 1 14px;
+  min-width: 14px;
+  border: 0 !important;
+  padding: 0 2px;
+  background: transparent;
+  box-shadow: none !important;
+  outline: none;
+}
+
 /* Brief glow used when the user clicks the funnel icon while the grid
    is in row-filter mode - draws attention to where the input is so
    the click isn't a no-op. */
@@ -1220,6 +1334,22 @@ select.sv-grid-fr-editor {
   width: 100%;
   font-size: 0.8125rem;
 }
+/* The global "Filter all rows" search: a labelled input bar above the grid. Ships
+   styled so it never renders as a bare, unpositioned text label + input. */
+.sv-grid-global-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 0.8125rem;
+  font-weight: 550;
+  color: var(--sg-muted, #64748b);
+}
+.sv-grid-global-filter input {
+  height: 30px;
+  min-width: 220px;
+  font-size: 0.8125rem;
+}
 .sv-grid-column-filter::placeholder,
 .sv-grid-filter-value::placeholder,
 .sv-grid-menu-search::placeholder,
@@ -1752,6 +1882,38 @@ select.sv-grid-fr-editor {
   background: var(--sg-row-hover-bg, #eef2f8);
 }
 
+/* In / Not-in value-suggestions dropdown (anchored under the chip input).
+   Defined AFTER .sv-grid-menu so its tighter sizing wins - the element
+   carries both classes. Compact rows keep a long value list scannable. */
+.sv-grid-menu.sv-grid-in-suggest {
+  min-width: 140px;
+  max-width: 260px;
+  max-height: 220px;
+  overflow-y: auto;
+  font-size: 12px;
+}
+.sv-grid-in-suggest-item {
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+}
+.sv-grid-in-suggest-item[aria-selected="true"] {
+  color: var(--sg-accent, #0b63f3);
+  font-weight: 600;
+}
+.sv-grid-in-suggest-check {
+  flex: none;
+  width: 12px;
+  text-align: center;
+  color: var(--sg-accent, #0b63f3);
+}
+.sv-grid-in-suggest-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .sv-grid-menu-item[aria-checked="true"] {
   background: var(--sg-selection-bg, #eaf2ff);
   color: var(--sg-accent, #0b63f3);
@@ -2376,6 +2538,32 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #101828);
 }
 
+/* Placeholder shown when `scheduler` is set but the enterprise renderer that
+   powers the calendar view has not been registered. */
+.sv-grid-scheduler-upsell {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  text-align: left;
+  border: 1px dashed var(--sg-border, #e4e7ec);
+  border-radius: var(--sg-radius, 8px);
+  background: color-mix(in srgb, var(--sg-fg, #1f2937) 5%, transparent);
+  color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
+}
+.sv-grid-scheduler-upsell strong { font-size: 0.95rem; }
+.sv-grid-scheduler-upsell p { margin: 0; font-size: 0.85rem; max-width: 42ch; }
+.sv-grid-scheduler-upsell code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.82em;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+}
+
 /* ===================================================================
    Integrated chart panel (the `charting` prop)
    =================================================================== */