@onereach/ui-components 20.4.0 → 20.5.0

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, 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 { OrCheckboxV3 as script$h } from '../or-checkbox-v3/index.js';
+import { OrDatePickerV3 as script$i } from '../or-date-picker-v3/index.js';
+import { s as script$j } from '../OrDateTimePickerV3-3c2fd488.js';
+import { OrInputV3 as script$k } from '../or-input-v3/index.js';
+import { OrRatingV3 as script$l } from '../or-rating-v3/index.js';
+import { OrSelectV3 as script$m } from '../or-select-v3/index.js';
+import { OrSwitchV3 as script$n } from '../or-switch-v3/index.js';
+import { OrTagInputV3 as script$o } from '../or-tag-input-v3/index.js';
+import { OrTimePickerV3 as script$p } from '../or-time-picker-v3/index.js';
 import { useElementSize } from '@vueuse/core';
-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 { OrIconV3 as script$q } from '../or-icon-v3/index.js';
+import { OrNotificationV3 as script$r } from '../or-notification-v3/index.js';
+import { OrPaginationV3 as script$s } from '../or-pagination-v3/index.js';
+import { OrSearchV3 as script$t } from '../or-search-v3/index.js';
+import { OrSkeletonTextV3 as script$u } from '../or-skeleton-v3/index.js';
 import '../OrAutocompleteV3-fd7065f1.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -59,7 +59,7 @@ const DataGridFooterStatus = [
 // Typography
 'typography-body-2-semibold'];
 
-var script$f = defineComponent({
+var script$g = defineComponent({
   name: 'OrDataGridFooter',
   expose: ['root'],
   setup() {
@@ -75,22 +75,22 @@ var script$f = defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function render$g(_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$4)) : 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$5)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
 }
 
-script$f.render = render$f;
-script$f.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
+script$g.render = render$g;
+script$g.__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$e = defineComponent({
+var script$f = defineComponent({
   name: 'OrDataGridHeader',
   expose: ['root'],
   setup() {
@@ -119,22 +119,22 @@ var script$e = defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+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['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$3)) : 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$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
 }
 
-script$e.render = render$e;
-script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
+script$f.render = render$f;
+script$f.__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$d = defineComponent({
+var script$e = defineComponent({
   name: 'OrDataGridTableContentCell',
   components: {
-    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
+    OrCheckbox: script$h,
+    OrDatePicker: script$i,
+    OrDateTimePicker: script$j,
+    OrInput: script$k,
+    OrRating: script$l,
+    OrSelect: script$m,
+    OrSwitch: script$n,
+    OrTagInput: script$o,
+    OrTimePicker: script$p
   },
   model: {
     prop: 'modelValue',
@@ -243,11 +243,11 @@ var script$d = defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 2,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function render$e(_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$d(_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$2, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
 }
 
-script$d.render = render$d;
-script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
+script$e.render = render$e;
+script$e.__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$c = defineComponent({
+var script$d = defineComponent({
   name: 'OrDataGridTableContentRow',
   props: {
     variant: {
@@ -387,23 +387,23 @@ var script$c = defineComponent({
   }
 });
 
-const _hoisted_1$1 = ["selected"];
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$2 = ["selected"];
+function render$d(_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$1);
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$2);
 }
 
-script$c.render = render$c;
-script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
+script$d.render = render$d;
+script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
 
 const DataGridTableContent = [
 // Layout
 'contents'];
 
-var script$b = defineComponent({
+var script$c = defineComponent({
   name: 'OrDataGridTableContent',
   expose: ['root'],
   setup() {
@@ -417,15 +417,15 @@ var script$b = defineComponent({
   }
 });
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$b.render = render$b;
-script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
+script$c.render = render$c;
+script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
 
 const DataGridTableFooterCell = [
 // Layout
@@ -435,7 +435,7 @@ const DataGridTableFooterCell = [
 // Theme
 'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
 
-var script$a = defineComponent({
+var script$b = defineComponent({
   name: 'OrDataGridTableFooterCell',
   expose: ['root'],
   setup() {
@@ -449,15 +449,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-footer-cell/OrDataGridTableFooterCell.vue";
+script$b.render = render$b;
+script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
 
 const DataGridTableFooterRow = [
 // Layout
@@ -480,7 +480,7 @@ const DataGridTableFooterRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$9 = defineComponent({
+var script$a = defineComponent({
   name: 'OrDataGridTableFooterRow',
   props: {
     variant: {
@@ -500,21 +500,21 @@ 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-row/OrDataGridTableFooterRow.vue";
+script$a.render = render$a;
+script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
 
 const DataGridTableFooter = [
 // Layout
 'contents'];
 
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: 'OrDataGridTableFooter',
   expose: ['root'],
   setup() {
@@ -528,15 +528,15 @@ 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/OrDataGridTableFooter.vue";
+script$9.render = render$9;
+script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
 
 const DataGridTableHeaderCell = [
 // Layout
@@ -550,10 +550,10 @@ const DataGridTableHeaderCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: script$p
+    OrIcon: script$q
   },
   model: {
     prop: 'modelValue',
@@ -669,24 +669,24 @@ var script$7 = defineComponent({
   }
 });
 
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_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, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
+  }, [createElementVNode("div", _hoisted_1$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$7.render = render$7;
-script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
+script$8.render = render$8;
+script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
 
 const DataGridTableHeaderRow = [
 // Position
@@ -709,7 +709,7 @@ const DataGridTableHeaderRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'OrDataGridTableHeaderRow',
   props: {
     variant: {
@@ -729,21 +729,21 @@ var script$6 = defineComponent({
   }
 });
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$6.render = render$6;
-script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
+script$7.render = render$7;
+script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
 
 const DataGridTableHeader = [
 // Layout
 'contents'];
 
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: 'OrDataGridTableHeader',
   expose: ['root'],
   setup() {
@@ -757,15 +757,15 @@ 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/OrDataGridTableHeader.vue";
+script$6.render = render$6;
+script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
 
 const DataGridTablePlaceholder = [
 // Layout
@@ -788,7 +788,7 @@ const DataGridTablePlaceholderVariants = {
   'min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'OrDataGridTablePlaceholder',
   props: {
     variant: {
@@ -808,15 +808,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-placeholder/OrDataGridTablePlaceholder.vue";
+script$5.render = render$5;
+script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
 
 const DataGridTable = [
 // Layout
@@ -826,7 +826,7 @@ const DataGridTable = [
 // Interactivity
 'interactivity-default'];
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'OrDataGridTable',
   props: {
     columns: {
@@ -865,7 +865,7 @@ 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),
@@ -873,8 +873,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */);
 }
 
-script$3.render = render$3;
-script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
 
 const DataGridToolbar = [
 // Layout
@@ -884,7 +884,7 @@ const DataGridToolbar = [
 // Spacing
 'gap-xl'];
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'OrDataGridToolbar',
   expose: ['root'],
   setup() {
@@ -898,15 +898,15 @@ 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)
   }, [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";
+script$3.render = render$3;
+script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
 
 const DataGridNotification = [
 // Position
@@ -925,9 +925,9 @@ const DataGridNotificationPositionVariants = {
   'top-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   components: {
-    OrNotification: script$q
+    OrNotification: script$r
   },
   props: {
     notification: {
@@ -948,7 +948,7 @@ var script$1 = defineComponent({
   }
 });
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrNotification = resolveComponent("OrNotification");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.rootStyles)
@@ -963,8 +963,59 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16 /* FULL_PROPS */)], 2 /* CLASS */);
 }
 
+script$2.render = render$2;
+script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue";
+
+const DataGridTableExtraRow = [
+// Layout
+'grid px-sm+',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-border-disabled', 'dark:theme-border-disabled-dark',
+// Theme (children)
+'children:theme-foreground-default', 'dark:children:theme-foreground-default-dark', 'children:theme-background-default', 'dark:children:theme-background-default-dark'];
+const DataGridTableExtraRowVariants = {
+  [DataGridVariant.Standard]: [
+  // Box
+  'h-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Box
+  'h-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Box
+  'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$1 = defineComponent({
+  name: 'OrDataGridTableExtraRow',
+  props: {
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-footer-row-v3', ...DataGridTableExtraRow, ...DataGridTableExtraRowVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
 script$1.render = render$1;
-script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue";
+script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-extra-row/OrDataGridTableExtraRow.vue";
 
 const DataGrid = [
 // Layout
@@ -973,25 +1024,26 @@ const DataGrid = [
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    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
+    OrCheckbox: script$h,
+    OrDataGridFooter: script$g,
+    OrDataGridHeader: script$f,
+    OrDataGridTable: script$4,
+    OrDataGridTableContent: script$c,
+    OrDataGridTableContentCell: script$e,
+    OrDataGridTableContentRow: script$d,
+    OrDataGridTableFooter: script$9,
+    OrDataGridTableFooterCell: script$b,
+    OrDataGridTableFooterRow: script$a,
+    OrDataGridTableExtraRow: script$1,
+    OrDataGridTableHeader: script$6,
+    OrDataGridTableHeaderCell: script$8,
+    OrDataGridTableHeaderRow: script$7,
+    OrDataGridTablePlaceholder: script$5,
+    OrDataGridToolbar: script$3,
+    OrDataGridNotification: script$2,
+    OrPagination: script$s,
+    OrSearch: script$t,
+    OrSkeletonText: script$u
   },
   model: {
     prop: 'modelValue',
@@ -1238,6 +1290,12 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = {
+  class: "col-span-full self-center"
+};
+const _hoisted_2 = {
+  class: "col-span-full self-center"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSearch = resolveComponent("OrSearch");
   const _component_OrDataGridHeader = resolveComponent("OrDataGridHeader");
@@ -1247,6 +1305,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrDataGridTableHeaderRow = resolveComponent("OrDataGridTableHeaderRow");
   const _component_OrDataGridTableHeader = resolveComponent("OrDataGridTableHeader");
   const _component_OrDataGridNotification = resolveComponent("OrDataGridNotification");
+  const _component_OrDataGridTableExtraRow = resolveComponent("OrDataGridTableExtraRow");
   const _component_OrSkeletonText = resolveComponent("OrSkeletonText");
   const _component_OrDataGridTableContentCell = resolveComponent("OrDataGridTableContentCell");
   const _component_OrDataGridTableContentRow = resolveComponent("OrDataGridTableContentRow");
@@ -1343,8 +1402,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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
+      default: withCtx(() => [_ctx.$slots['before-rows'] ? (openBlock(), createBlock(_component_OrDataGridTableExtraRow, {
+        key: 0,
+        class: normalizeClass(['col-span-full border-b-1']),
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, 'before-rows')])]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true), _ctx.loading ? (openBlock(), createElementBlock(Fragment, {
+        key: 1
       }, renderList(10, n => {
         return createVNode(_component_OrDataGridTableContentRow, {
           key: n,
@@ -1374,7 +1440,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 2 /* DYNAMIC */
         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "interactive"]);
       }), 64 /* STABLE_FRAGMENT */)) : _ctx.items.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
-        key: 1
+        key: 2
       }, renderList(_ctx.items, item => {
         return openBlock(), createBlock(_component_OrDataGridTableContentRow, {
           key: item.id,
@@ -1426,7 +1492,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 2 /* DYNAMIC */
         }, 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,
+        key: 3,
         class: normalizeClass(['col-span-full']),
         variant: _ctx.variant
       }, {
@@ -1436,12 +1502,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         })]),
         _: 3 /* FORWARDED */
       }, 8 /* PROPS */, ["variant"])) : _ctx.$slots['empty'] ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
-        key: 3,
+        key: 4,
         class: normalizeClass(['col-span-full']),
         variant: _ctx.variant
       }, {
         default: withCtx(() => [renderSlot(_ctx.$slots, 'empty')]),
         _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true), _ctx.$slots['after-rows'] ? (openBlock(), createBlock(_component_OrDataGridTableExtraRow, {
+        key: 5,
+        class: normalizeClass(['col-span-full']),
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, 'after-rows')])]),
+        _: 3 /* FORWARDED */
       }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true)]),
       _: 3 /* FORWARDED */
     })]),

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

@@ -13,3 +13,4 @@ export { default as OrDataGridTablePlaceholder } from './or-data-grid-table-plac
 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';
+export { default as OrDataGridTableExtraRow } from './or-data-grid-table-extra-row/OrDataGridTableExtraRow.vue';

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

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

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-table-extra-row/styles.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.4.0",
+  "version": "20.5.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.4.0",
-    "@onereach/ui-components-common": "^20.4.0",
+    "@onereach/styles": "^20.5.0",
+    "@onereach/ui-components-common": "^20.5.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": "4739e1eb32ed19459b84bf21e1c5b7bfe548332e"
+  "gitHead": "133b4d56fdf3542c0eca19ffff605f0a0fc41986"
 }