@onereach/ui-components 20.3.0 → 20.4.0

package/dist/esm/components/or-data-grid-v3/OrDataGrid.vue.d.ts

@@ -1,6 +1,10 @@
 import { PropType } from 'vue';
-import { Id } from '@onereach/ui-components-common/types';
-import { DataGridColumn, DataGridFeatures, DataGridModelValue, DataGridVariant } from './types';
+import { DataModel, Id } from '@onereach/ui-components-common/types';
+import { DataGridColumn, DataGridFeatures, DataGridItem, DataGridModelValue, DataGridVariant } from './types';
+type T = DataModel<{
+    id: Id;
+    [key: string]: any;
+}>;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<DataGridModelValue>;
@@ -33,6 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: undefined;
     };
+    interactiveRows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
@@ -43,6 +51,11 @@ declare const _default: import("vue").DefineComponent<{
     selectingIndicator: import("vue").WritableComputedRef<boolean>;
     showSelectingCouter: import("vue").ComputedRef<boolean | undefined>;
     selectingDisabled: import("vue").ComputedRef<boolean | undefined>;
+    handleMouseEnterRow: (item: DataGridItem<T>) => void;
+    handleMouseLeaveRow: (item: DataGridItem<T>) => void;
+    handleMouseEnterCell: (item: DataGridItem<T>, columnName: string, value: any) => void;
+    handleMouseLeaveCell: (item: DataGridItem<T>, columnName: string, value: any) => void;
+    handleRowClick: (item: DataGridItem<T>) => void;
     selectingModel: import("vue").WritableComputedRef<Id[]>;
     filteringModel: import("vue").WritableComputedRef<undefined>;
     searchingModel: import("vue").WritableComputedRef<import("@onereach/ui-components-common/types").ModelValue<string>>;
@@ -55,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     removeScrollOffset: (header: HTMLElement) => void;
     updateSearchingModel: (value: string) => void;
     scrollTo: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:item" | "close-notification")[], "update:modelValue" | "update:item" | "close-notification", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:item" | "close-notification" | "hover:row" | "blur:row" | "hover:cell" | "blur:cell" | "click:row")[], "update:modelValue" | "update:item" | "close-notification" | "hover:row" | "blur:row" | "hover:cell" | "blur:cell" | "click:row", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<DataGridModelValue>;
         default: undefined;
@@ -87,10 +100,19 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: undefined;
     };
+    interactiveRows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:item"?: ((...args: any[]) => any) | undefined;
     "onClose-notification"?: ((...args: any[]) => any) | undefined;
+    "onHover:row"?: ((...args: any[]) => any) | undefined;
+    "onBlur:row"?: ((...args: any[]) => any) | undefined;
+    "onHover:cell"?: ((...args: any[]) => any) | undefined;
+    "onBlur:cell"?: ((...args: any[]) => any) | undefined;
+    "onClick:row"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: DataGridModelValue;
     items: {
@@ -101,5 +123,6 @@ declare const _default: import("vue").DefineComponent<{
     features: DataGridFeatures;
     loading: boolean;
     notification: any;
+    interactiveRows: boolean;
 }, {}>;
 export default _default;

package/dist/esm/components/or-data-grid-v3/index.js

@@ -1,19 +1,19 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createVNode, renderList, createTextVNode, toDisplayString, mergeProps } from 'vue';
-import { OrCheckboxV3 as script$f } from '../or-checkbox-v3/index.js';
-import { OrDatePickerV3 as script$g } from '../or-date-picker-v3/index.js';
-import { s as script$h } from '../OrDateTimePickerV3-3c2fd488.js';
-import { OrInputV3 as script$i } from '../or-input-v3/index.js';
-import { OrRatingV3 as script$j } from '../or-rating-v3/index.js';
-import { OrSelectV3 as script$k } from '../or-select-v3/index.js';
-import { OrSwitchV3 as script$l } from '../or-switch-v3/index.js';
-import { OrTagInputV3 as script$m } from '../or-tag-input-v3/index.js';
-import { OrTimePickerV3 as script$n } from '../or-time-picker-v3/index.js';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createVNode, mergeProps, withCtx, createSlots, normalizeProps, guardReactiveProps, renderList, createTextVNode, toDisplayString } from 'vue';
+import { OrCheckboxV3 as script$g } from '../or-checkbox-v3/index.js';
+import { OrDatePickerV3 as script$h } from '../or-date-picker-v3/index.js';
+import { s as script$i } from '../OrDateTimePickerV3-3c2fd488.js';
+import { OrInputV3 as script$j } from '../or-input-v3/index.js';
+import { OrRatingV3 as script$k } from '../or-rating-v3/index.js';
+import { OrSelectV3 as script$l } from '../or-select-v3/index.js';
+import { OrSwitchV3 as script$m } from '../or-switch-v3/index.js';
+import { OrTagInputV3 as script$n } from '../or-tag-input-v3/index.js';
+import { OrTimePickerV3 as script$o } from '../or-time-picker-v3/index.js';
 import { useElementSize } from '@vueuse/core';
-import { OrIconV3 as script$o } from '../or-icon-v3/index.js';
-import { OrPaginationV3 as script$p } from '../or-pagination-v3/index.js';
-import { OrSearchV3 as script$q } from '../or-search-v3/index.js';
-import { OrSkeletonTextV3 as script$r } from '../or-skeleton-v3/index.js';
-import { OrNotificationV3 as script$s } from '../or-notification-v3/index.js';
+import { OrIconV3 as script$p } from '../or-icon-v3/index.js';
+import { OrNotificationV3 as script$q } from '../or-notification-v3/index.js';
+import { OrPaginationV3 as script$r } from '../or-pagination-v3/index.js';
+import { OrSearchV3 as script$s } from '../or-search-v3/index.js';
+import { OrSkeletonTextV3 as script$t } from '../or-skeleton-v3/index.js';
 import '../OrAutocompleteV3-fd7065f1.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -41,8 +41,8 @@ import '../or-tag-v3/index.js';
 import '../or-menu-v3/index.js';
 import '../OrEditorTabsV3-152c10c5.js';
 import '../or-expansion-panel-v3/index.js';
-import 'lodash/range';
 import '../or-indicator-v3/index.js';
+import 'lodash/range';
 
 const DataGridFooter = [
 // Layout
@@ -59,7 +59,7 @@ const DataGridFooterStatus = [
 // Typography
 'typography-body-2-semibold'];
 
-var script$e = defineComponent({
+var script$f = defineComponent({
   name: 'OrDataGridFooter',
   expose: ['root'],
   setup() {
@@ -75,22 +75,22 @@ var script$e = defineComponent({
   }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$4 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [_ctx.$slots['status'] ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.statusStyles)
-  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
 }
 
-script$e.render = render$e;
-script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
+script$f.render = render$f;
+script$f.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
 
 const DataGridHeader = [
 // Layout
@@ -103,7 +103,7 @@ const DataGridHeaderTitle = [
 // Typography
 'typography-headline-2'];
 
-var script$d = defineComponent({
+var script$e = defineComponent({
   name: 'OrDataGridHeader',
   expose: ['root'],
   setup() {
@@ -119,22 +119,22 @@ var script$d = defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [_ctx.$slots['title'] ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.titleStyles)
-  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$3)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
 }
 
-script$d.render = render$d;
-script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
+script$e.render = render$e;
+script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
 
 const DataGridTableContentCell = [
 // Layout
@@ -150,18 +150,18 @@ const DataGridTableContentCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
-var script$c = defineComponent({
+var script$d = defineComponent({
   name: 'OrDataGridTableContentCell',
   components: {
-    OrCheckbox: script$f,
-    OrDatePicker: script$g,
-    OrDateTimePicker: script$h,
-    OrInput: script$i,
-    OrRating: script$j,
-    OrSelect: script$k,
-    OrSwitch: script$l,
-    OrTagInput: script$m,
-    OrTimePicker: script$n
+    OrCheckbox: script$g,
+    OrDatePicker: script$h,
+    OrDateTimePicker: script$i,
+    OrInput: script$j,
+    OrRating: script$k,
+    OrSelect: script$l,
+    OrSwitch: script$m,
+    OrTagInput: script$n,
+    OrTimePicker: script$o
   },
   model: {
     prop: 'modelValue',
@@ -243,11 +243,11 @@ var script$c = defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 2,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInput = resolveComponent("OrInput");
   const _component_OrRating = resolveComponent("OrRating");
   const _component_OrSelect = resolveComponent("OrSelect");
@@ -319,11 +319,11 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
     modelValue: _ctx.model,
     "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.model = $event),
     variant: 'embedded'
-  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
 }
 
-script$c.render = render$c;
-script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
+script$d.render = render$d;
+script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
 
 var DataGridVariant;
 (function (DataGridVariant) {
@@ -359,7 +359,7 @@ const DataGridTableContentRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$b = defineComponent({
+var script$c = defineComponent({
   name: 'OrDataGridTableContentRow',
   props: {
     variant: {
@@ -369,13 +369,17 @@ var script$b = defineComponent({
     selected: {
       type: Boolean,
       default: false
+    },
+    interactive: {
+      type: Boolean,
+      default: false
     }
   },
   expose: ['root'],
   setup(props) {
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-data-grid-table-content-row-v3', ...DataGridTableContentRow, ...DataGridTableContentRowVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-data-grid-table-content-row-v3', ...DataGridTableContentRow, ...DataGridTableContentRowVariants[props.variant], ...(props.interactive ? ['cursor-pointer'] : [])]);
     return {
       root,
       rootStyles
@@ -383,23 +387,23 @@ var script$b = defineComponent({
   }
 });
 
-const _hoisted_1$2 = ["selected"];
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1 = ["selected"];
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     selected: _ctx.selected
-  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$2);
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$1);
 }
 
-script$b.render = render$b;
-script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
+script$c.render = render$c;
+script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
 
 const DataGridTableContent = [
 // Layout
 'contents'];
 
-var script$a = defineComponent({
+var script$b = defineComponent({
   name: 'OrDataGridTableContent',
   expose: ['root'],
   setup() {
@@ -413,15 +417,15 @@ var script$a = defineComponent({
   }
 });
 
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$a.render = render$a;
-script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
+script$b.render = render$b;
+script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
 
 const DataGridTableFooterCell = [
 // Layout
@@ -431,7 +435,7 @@ const DataGridTableFooterCell = [
 // Theme
 'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
 
-var script$9 = defineComponent({
+var script$a = defineComponent({
   name: 'OrDataGridTableFooterCell',
   expose: ['root'],
   setup() {
@@ -445,15 +449,15 @@ var script$9 = defineComponent({
   }
 });
 
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$9.render = render$9;
-script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
+script$a.render = render$a;
+script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
 
 const DataGridTableFooterRow = [
 // Layout
@@ -476,7 +480,7 @@ const DataGridTableFooterRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: 'OrDataGridTableFooterRow',
   props: {
     variant: {
@@ -496,21 +500,21 @@ var script$8 = defineComponent({
   }
 });
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$8.render = render$8;
-script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
+script$9.render = render$9;
+script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
 
 const DataGridTableFooter = [
 // Layout
 'contents'];
 
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'OrDataGridTableFooter',
   expose: ['root'],
   setup() {
@@ -524,15 +528,15 @@ var script$7 = defineComponent({
   }
 });
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$7.render = render$7;
-script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
+script$8.render = render$8;
+script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
 
 const DataGridTableHeaderCell = [
 // Layout
@@ -546,10 +550,10 @@ const DataGridTableHeaderCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: script$o
+    OrIcon: script$p
   },
   model: {
     prop: 'modelValue',
@@ -665,24 +669,24 @@ var script$6 = defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1 = {
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     style: normalizeStyle(_ctx.rootInlineStyles),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleSorting())
-  }, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
+  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
     key: 0,
     icon: _ctx.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
   }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
 }
 
-script$6.render = render$6;
-script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
+script$7.render = render$7;
+script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
 
 const DataGridTableHeaderRow = [
 // Position
@@ -705,7 +709,7 @@ const DataGridTableHeaderRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: 'OrDataGridTableHeaderRow',
   props: {
     variant: {
@@ -725,21 +729,21 @@ var script$5 = defineComponent({
   }
 });
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$5.render = render$5;
-script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
+script$6.render = render$6;
+script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
 
 const DataGridTableHeader = [
 // Layout
 'contents'];
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'OrDataGridTableHeader',
   expose: ['root'],
   setup() {
@@ -753,15 +757,15 @@ var script$4 = defineComponent({
   }
 });
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$4.render = render$4;
-script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
+script$5.render = render$5;
+script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
 
 const DataGridTablePlaceholder = [
 // Layout
@@ -784,7 +788,7 @@ const DataGridTablePlaceholderVariants = {
   'min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'OrDataGridTablePlaceholder',
   props: {
     variant: {
@@ -804,15 +808,15 @@ var script$3 = defineComponent({
   }
 });
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$3.render = render$3;
-script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
 
 const DataGridTable = [
 // Layout
@@ -822,7 +826,7 @@ const DataGridTable = [
 // Interactivity
 'interactivity-default'];
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'OrDataGridTable',
   props: {
     columns: {
@@ -861,7 +865,7 @@ var script$2 = defineComponent({
   }
 });
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
@@ -869,8 +873,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */);
 }
 
-script$2.render = render$2;
-script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
+script$3.render = render$3;
+script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
 
 const DataGridToolbar = [
 // Layout
@@ -880,7 +884,7 @@ const DataGridToolbar = [
 // Spacing
 'gap-xl'];
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'OrDataGridToolbar',
   expose: ['root'],
   setup() {
@@ -894,15 +898,73 @@ var script$1 = defineComponent({
   }
 });
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
+script$2.render = render$2;
+script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
+
+const DataGridNotification = [
+// Position
+'grid sticky z-10',
+// Layout
+'col-span-full'];
+const DataGridNotificationPositionVariants = {
+  [DataGridVariant.Standard]: [
+  // Position
+  'top-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Position
+  'top-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Position
+  'top-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$1 = defineComponent({
+  components: {
+    OrNotification: script$q
+  },
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    },
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['close-notification'],
+  setup(props) {
+    const rootStyles = computed(() => ['or-data-grid-notification-v3', ...DataGridNotification, ...DataGridNotificationPositionVariants[props.variant]]);
+    return {
+      rootStyles
+    };
+  }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrNotification = resolveComponent("OrNotification");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_OrNotification, mergeProps(_ctx.notification, {
+    class: "rounded-0 shadow-none",
+    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close-notification'))
+  }), {
+    default: withCtx(() => [_ctx.$slots['notification'] ? renderSlot(_ctx.$slots, 'notification', {
+      key: 0
+    }) : createCommentVNode("v-if", true)]),
+    _: 3 /* FORWARDED */
+  }, 16 /* FULL_PROPS */)], 2 /* CLASS */);
+}
+
 script$1.render = render$1;
-script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
+script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue";
 
 const DataGrid = [
 // Layout
@@ -911,25 +973,25 @@ const DataGrid = [
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    OrCheckbox: script$f,
-    OrDataGridFooter: script$e,
-    OrDataGridHeader: script$d,
-    OrDataGridTable: script$2,
-    OrDataGridTableContent: script$a,
-    OrDataGridTableContentCell: script$c,
-    OrDataGridTableContentRow: script$b,
-    OrDataGridTableFooter: script$7,
-    OrDataGridTableFooterCell: script$9,
-    OrDataGridTableFooterRow: script$8,
-    OrDataGridTableHeader: script$4,
-    OrDataGridTableHeaderCell: script$6,
-    OrDataGridTableHeaderRow: script$5,
-    OrDataGridTablePlaceholder: script$3,
-    OrDataGridToolbar: script$1,
-    OrPagination: script$p,
-    OrSearch: script$q,
-    OrSkeletonText: script$r,
-    OrNotification: script$s
+    OrCheckbox: script$g,
+    OrDataGridFooter: script$f,
+    OrDataGridHeader: script$e,
+    OrDataGridTable: script$3,
+    OrDataGridTableContent: script$b,
+    OrDataGridTableContentCell: script$d,
+    OrDataGridTableContentRow: script$c,
+    OrDataGridTableFooter: script$8,
+    OrDataGridTableFooterCell: script$a,
+    OrDataGridTableFooterRow: script$9,
+    OrDataGridTableHeader: script$5,
+    OrDataGridTableHeaderCell: script$7,
+    OrDataGridTableHeaderRow: script$6,
+    OrDataGridTablePlaceholder: script$4,
+    OrDataGridToolbar: script$2,
+    OrDataGridNotification: script$1,
+    OrPagination: script$r,
+    OrSearch: script$s,
+    OrSkeletonText: script$t
   },
   model: {
     prop: 'modelValue',
@@ -963,9 +1025,13 @@ var script = defineComponent({
     notification: {
       type: Object,
       default: undefined
+    },
+    interactiveRows: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['update:modelValue', 'update:item', 'close-notification'],
+  emits: ['update:modelValue', 'update:item', 'close-notification', 'hover:row', 'blur:row', 'hover:cell', 'blur:cell', 'click:row'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -1103,6 +1169,38 @@ var script = defineComponent({
           break;
       }
     }
+    function handleMouseEnterRow(item) {
+      if (!props.interactiveRows) return;
+      context.emit('hover:row', item);
+    }
+    function handleMouseLeaveRow(item) {
+      if (!props.interactiveRows) return;
+      context.emit('blur:row', item);
+    }
+    function handleMouseEnterCell(item, columnName, value) {
+      if (!props.interactiveRows) return;
+      context.emit('hover:cell', {
+        item,
+        columnName,
+        value
+      });
+    }
+    function handleMouseLeaveCell(item, columnName, value) {
+      if (!props.interactiveRows) return;
+      context.emit('blur:cell', {
+        item,
+        columnName,
+        value
+      });
+    }
+    function handleRowClick(item) {
+      if (!props.interactiveRows) return;
+      context.emit('click:row', item);
+    }
+    // function handleCellClick(item: DataGridItem<T>, columnName: string, value: any): void {
+    //   if (!props.interactiveRows) return;
+    //   context.emit('click:cell', { item, columnName, value });
+    // }
     function removeScrollOffset(header) {
       scrollOffsetStart.value.delete(header);
       scrollOffsetStart.value = new Map(scrollOffsetStart.value);
@@ -1122,6 +1220,11 @@ var script = defineComponent({
       selectingIndicator,
       showSelectingCouter,
       selectingDisabled,
+      handleMouseEnterRow,
+      handleMouseLeaveRow,
+      handleMouseEnterCell,
+      handleMouseLeaveCell,
+      handleRowClick,
       selectingModel,
       filteringModel,
       searchingModel,
@@ -1135,10 +1238,6 @@ var script = defineComponent({
   }
 });
 
-const _hoisted_1 = {
-  key: 0,
-  class: "grid col-span-full"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSearch = resolveComponent("OrSearch");
   const _component_OrDataGridHeader = resolveComponent("OrDataGridHeader");
@@ -1147,7 +1246,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrDataGridTableHeaderCell = resolveComponent("OrDataGridTableHeaderCell");
   const _component_OrDataGridTableHeaderRow = resolveComponent("OrDataGridTableHeaderRow");
   const _component_OrDataGridTableHeader = resolveComponent("OrDataGridTableHeader");
-  const _component_OrNotification = resolveComponent("OrNotification");
+  const _component_OrDataGridNotification = resolveComponent("OrDataGridNotification");
   const _component_OrSkeletonText = resolveComponent("OrSkeletonText");
   const _component_OrDataGridTableContentCell = resolveComponent("OrDataGridTableContentCell");
   const _component_OrDataGridTableContentRow = resolveComponent("OrDataGridTableContentRow");
@@ -1232,21 +1331,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1 /* STABLE */
       }, 8 /* PROPS */, ["variant"])]),
       _: 1 /* STABLE */
-    }), _ctx.notification ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_OrNotification, mergeProps(_ctx.notification, {
-      class: "rounded-0",
-      onClose: _cache[3] || (_cache[3] = $event => _ctx.$emit('close-notification'))
-    }), {
-      default: withCtx(() => [_ctx.$slots['notification'] ? renderSlot(_ctx.$slots, 'notification', {
-        key: 0
-      }) : createCommentVNode("v-if", true)]),
-      _: 3 /* FORWARDED */
-    }, 16 /* FULL_PROPS */)])) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTableContent, null, {
+    }), _ctx.notification ? (openBlock(), createBlock(_component_OrDataGridNotification, {
+      key: 0,
+      notification: _ctx.notification,
+      variant: _ctx.variant,
+      onCloseNotification: _cache[3] || (_cache[3] = $event => _ctx.$emit('close-notification'))
+    }, createSlots({
+      _: 2 /* DYNAMIC */
+    }, [_ctx.$slots['notification'] ? {
+      name: "notification",
+      fn: withCtx(() => [renderSlot(_ctx.$slots, 'notification')]),
+      key: "0"
+    } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["notification", "variant"])) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTableContent, null, {
       default: withCtx(() => [_ctx.loading ? (openBlock(), createElementBlock(Fragment, {
         key: 0
       }, renderList(10, n => {
         return createVNode(_component_OrDataGridTableContentRow, {
           key: n,
-          variant: _ctx.variant
+          variant: _ctx.variant,
+          interactive: _ctx.interactiveRows
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
@@ -1269,14 +1372,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["column", "features"]);
           }), 128 /* KEYED_FRAGMENT */))]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "interactive"]);
       }), 64 /* STABLE_FRAGMENT */)) : _ctx.items.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(_ctx.items, item => {
         return openBlock(), createBlock(_component_OrDataGridTableContentRow, {
           key: item.id,
           variant: _ctx.variant,
-          selected: _ctx.selectingModel.includes(item.id)
+          selected: _ctx.selectingModel.includes(item.id),
+          interactive: _ctx.interactiveRows,
+          onMouseenter: () => _ctx.handleMouseEnterRow(item),
+          onMouseleave: () => _ctx.handleMouseLeaveRow(item),
+          onClick: () => _ctx.handleRowClick(item)
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
@@ -1284,7 +1391,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               stickiness: 'start'
             },
             "force-state": 'none',
-            class: "!py-xs !px-xs md:!py-none md:!px-sm+"
+            class: "!py-xs !px-xs md:!py-none md:!px-sm+",
+            onMouseenter: () => _ctx.handleMouseEnterCell(item, 'selecting', _ctx.selectingModel.includes(item.id)),
+            onMouseleave: () => _ctx.handleMouseLeaveCell(item, 'selecting', _ctx.selectingModel.includes(item.id))
           }, {
             default: withCtx(() => [createVNode(_component_OrCheckbox, {
               modelValue: _ctx.selectingModel,
@@ -1293,7 +1402,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: _ctx.selectingDisabled
             }, null, 8 /* PROPS */, ["modelValue", "value", "disabled"])]),
             _: 2 /* DYNAMIC */
-          }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onMouseenter", "onMouseleave"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
             return openBlock(), createBlock(_component_OrDataGridTableContentCell, {
               key: column.name,
               "model-value": item[column.name],
@@ -1303,17 +1412,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 item[column.name] = value;
                 _ctx.$emit('update:item', item);
               },
-              onFocusin: _cache[5] || (_cache[5] = $event => _ctx.scrollTo($event))
+              onFocusin: _cache[5] || (_cache[5] = $event => _ctx.scrollTo($event)),
+              onMouseenter: () => _ctx.handleMouseEnterCell(item, column.name, item[column.name]),
+              onMouseleave: () => _ctx.handleMouseLeaveCell(item, column.name, item[column.name])
             }, {
               default: withCtx(() => [renderSlot(_ctx.$slots, column.name, {
                 column: column,
                 item: item
               }, () => [createTextVNode(toDisplayString(item[column.name]), 1 /* TEXT */)])]),
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "column", "features", "onInput"]);
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "column", "features", "onInput", "onMouseenter", "onMouseleave"]);
           }), 128 /* KEYED_FRAGMENT */))]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */)) : _ctx.$slots['noSearchResults'] && (_ctx.features.filtering && _ctx.filteringModel || _ctx.features.searching && _ctx.searchingModel) ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
         key: 2,
         class: normalizeClass(['col-span-full']),

package/dist/esm/components/or-data-grid-v3/partials/index.d.ts

@@ -12,3 +12,4 @@ export { default as OrDataGridTableHeader } from './or-data-grid-table-header/Or
 export { default as OrDataGridTablePlaceholder } from './or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue';
 export { default as OrDataGridTable } from './or-data-grid-table/OrDataGridTable.vue';
 export { default as OrDataGridToolbar } from './or-data-grid-toolbar/OrDataGridToolbar.vue';
+export { default as OrDataGridNotification } from './or-data-grid-notification/OrDataGridNotification.vue';

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue.d.ts

@@ -0,0 +1,26 @@
+import { PropType } from 'vue';
+import { DataGridVariant } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    notification: {
+        type: PropType<any>;
+        required: true;
+    };
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}, {
+    rootStyles: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close-notification"[], "close-notification", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    notification: {
+        type: PropType<any>;
+        required: true;
+    };
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}>> & {
+    "onClose-notification"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-notification/styles.d.ts

@@ -0,0 +1,3 @@
+import { DataGridVariant } from '../../types';
+export declare const DataGridNotification: string[];
+export declare const DataGridNotificationPositionVariants: Record<DataGridVariant, string[]>;

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
@@ -21,7 +25,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     selected: boolean;
+    interactive: boolean;
 }, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.3.0",
+  "version": "20.4.0",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {
@@ -44,8 +44,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^20.3.0",
-    "@onereach/ui-components-common": "^20.3.0",
+    "@onereach/styles": "^20.4.0",
+    "@onereach/ui-components-common": "^20.4.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -105,5 +105,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "da62f7d2af0507ea35abbe990f2c03918721e4f6"
+  "gitHead": "4739e1eb32ed19459b84bf21e1c5b7bfe548332e"
 }