@lensui/lens-table 0.1.64 → 0.1.65

package/dist/index.css

@@ -2128,7 +2128,9 @@
 }
 .rvg-choice-content {
   min-width: var(--reference-width);
+  max-height: 240px;
   padding: 5px;
+  overflow-y: auto;
   transform-origin: var(--transform-origin);
   border-radius: 4px;
 }
@@ -2650,3 +2652,152 @@
   margin: 0;
   -webkit-appearance: none;
 }
+.rvg-searchable-choice-editor {
+  display: flex;
+  padding-right: 24px;
+  align-items: center;
+}
+.rvg-searchable-choice-editor > input {
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 4px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--rvg-color-text);
+  font:
+    var(--rvg-font-size-body) Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  box-sizing: border-box;
+}
+.rvg-searchable-choice-editor > input.is-pristine {
+  color: var(--rvg-color-subtle);
+}
+.rvg-searchable-choice-indicator {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  border-radius: 3px;
+  background: var(--rvg-color-hover-muted);
+  transform: translateY(-50%);
+}
+.rvg-searchable-choice-content {
+  z-index: 1000;
+}
+.rvg-searchable-choice-content .rvg-choice-item {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  text-align: left;
+}
+.rvg-searchable-choice-content .rvg-choice-item:is(:hover, .is-active) {
+  background: var(--rvg-color-hover);
+}
+.rvg-searchable-choice-content .rvg-choice-item.is-selected {
+  background: var(--rvg-color-primary-soft);
+  color: var(--rvg-color-primary);
+  font-weight: 600;
+}
+.rvg-textarea-editor {
+  padding-right: 24px;
+}
+.rvg-textarea-trigger {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: grid;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: 3px;
+  background: var(--rvg-color-hover-muted);
+  color: #3c4043;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.rvg-multiline-icon {
+  width: 13px;
+  height: 13px;
+  fill: currentColor;
+}
+.rvg-textarea-backdrop {
+  position: fixed;
+  z-index: 1200;
+  inset: 0;
+  display: grid;
+  padding: 32px;
+  place-items: center;
+  background: rgb(0 0 0 / 24%);
+}
+.rvg-textarea-dialog {
+  display: grid;
+  width: min(720px, calc(100vw - 64px));
+  max-height: calc(100vh - 64px);
+  grid-template-rows: 52px minmax(220px, 1fr) 64px;
+  overflow: hidden;
+  border: 1px solid var(--rvg-color-border);
+  border-radius: 12px;
+  background: var(--rvg-color-bg);
+  box-shadow: 0 18px 54px rgb(0 0 0 / 28%);
+}
+.rvg-textarea-dialog > header {
+  display: flex;
+  padding: 0 20px;
+  align-items: center;
+  border-bottom: 1px solid var(--rvg-color-grid);
+  color: var(--rvg-color-text);
+  font:
+    600 16px Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+.rvg-textarea-dialog > textarea {
+  min-height: 220px;
+  margin: 20px;
+  padding: 10px;
+  resize: none;
+  border: 1px solid var(--rvg-color-border);
+  outline: none;
+  background: var(--rvg-color-bg);
+  color: var(--rvg-color-text);
+  font:
+    14px/1.5 Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+.rvg-textarea-dialog > textarea:focus {
+  border-color: var(--rvg-color-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rvg-color-primary) 18%, transparent);
+}
+.rvg-textarea-dialog > footer {
+  display: flex;
+  padding: 12px 20px;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--rvg-color-grid);
+}
+.rvg-textarea-dialog > footer button {
+  min-width: 88px;
+  height: 36px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--rvg-color-primary);
+  color: #fff;
+  font:
+    14px Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  cursor: pointer;
+}

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent, CSSProperties, RefAttributes, ReactElement } from 'react';
+import { ReactNode, MouseEvent, CSSProperties, RefAttributes } from 'react';
 
 type GridKey = string | number;
 type SelectionMode = 'single' | 'multiple';
@@ -193,15 +193,29 @@ interface GridColumn<Row> {
     align?: 'left' | 'center' | 'right';
     /** Enables double-click / Enter editing when an editor or fallback input exists. */
     editable?: boolean | ((value: unknown, row: Row, rowIndex: number) => boolean);
-    /** Built-in editor configuration for text, selectable, date, time, and range cells. */
+    /** Hide the painted active-cell fill and border while preserving selection semantics. */
+    suppressSelectionStyle?: boolean;
+    /** Built-in editor configuration for text, numeric, selectable, multiline, date, time, and range cells. */
     editor?: {
         type: 'text';
+    } | {
+        type: 'number';
+        min?: number;
+        max?: number;
+        integer?: boolean;
     } | {
         type: 'select';
         options: Array<{
             label: string;
             value: string;
         }>;
+        searchable?: boolean;
+        allowCustomValue?: boolean;
+        maxDropdownHeight?: number;
+    } | {
+        type: 'textarea';
+        title?: string;
+        maxLength?: number;
     } | {
         type: 'date' | 'time' | 'date-time' | 'year' | 'month' | 'date-range' | 'time-range' | 'date-time-range';
         format?: string;
@@ -441,7 +455,12 @@ interface ViewportRange {
     columnEnd: number;
 }
 
-declare const Table: <Row extends object>(props: TableProps<Row> & RefAttributes<TableRef<Row>>) => ReactElement;
+interface CompatibleReactElement {
+    type: any;
+    props: any;
+    key: string | null;
+}
+declare const Table: <Row extends object>(props: TableProps<Row> & RefAttributes<TableRef<Row>>) => CompatibleReactElement;
 
 type LayoutColumn<Row> = GridColumn<Row> & {
     rowSelection?: boolean;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent, CSSProperties, RefAttributes, ReactElement } from 'react';
+import { ReactNode, MouseEvent, CSSProperties, RefAttributes } from 'react';
 
 type GridKey = string | number;
 type SelectionMode = 'single' | 'multiple';
@@ -193,15 +193,29 @@ interface GridColumn<Row> {
     align?: 'left' | 'center' | 'right';
     /** Enables double-click / Enter editing when an editor or fallback input exists. */
     editable?: boolean | ((value: unknown, row: Row, rowIndex: number) => boolean);
-    /** Built-in editor configuration for text, selectable, date, time, and range cells. */
+    /** Hide the painted active-cell fill and border while preserving selection semantics. */
+    suppressSelectionStyle?: boolean;
+    /** Built-in editor configuration for text, numeric, selectable, multiline, date, time, and range cells. */
     editor?: {
         type: 'text';
+    } | {
+        type: 'number';
+        min?: number;
+        max?: number;
+        integer?: boolean;
     } | {
         type: 'select';
         options: Array<{
             label: string;
             value: string;
         }>;
+        searchable?: boolean;
+        allowCustomValue?: boolean;
+        maxDropdownHeight?: number;
+    } | {
+        type: 'textarea';
+        title?: string;
+        maxLength?: number;
     } | {
         type: 'date' | 'time' | 'date-time' | 'year' | 'month' | 'date-range' | 'time-range' | 'date-time-range';
         format?: string;
@@ -441,7 +455,12 @@ interface ViewportRange {
     columnEnd: number;
 }
 
-declare const Table: <Row extends object>(props: TableProps<Row> & RefAttributes<TableRef<Row>>) => ReactElement;
+interface CompatibleReactElement {
+    type: any;
+    props: any;
+    key: string | null;
+}
+declare const Table: <Row extends object>(props: TableProps<Row> & RefAttributes<TableRef<Row>>) => CompatibleReactElement;
 
 type LayoutColumn<Row> = GridColumn<Row> & {
     rowSelection?: boolean;