@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-11997.0 → 0.0.0-bugfix-dev-KB-99999.0

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -66,6 +66,8 @@ export class SnkFilterBar {
         });
       }
     }
+    if (this._loadingPending || this._configUpdated)
+      this.configUpdated.emit(newValue);
     this.processAfterUpdateConfig();
   }
   /**
@@ -74,6 +76,62 @@ export class SnkFilterBar {
   async reload() {
     this.loadConfigFromStorage();
   }
+  /**
+   * Retorna um item de filtro pelo ID.
+   */
+  async getFilterItem(id) {
+    const item = this.filterConfig.find(item => item.id === id);
+    return Promise.resolve(ObjectUtils.copy(item));
+  }
+  /**
+  * Atualiza um item do filtro.
+  *
+  * @param filterItem - Item com as informações atualizadas, caso o item não seja encontrado no array ele mão será modificado
+  */
+  async updateFilterItem(newFilterItem) {
+    const itemIndex = this.filterConfig.findIndex(item => item.id === newFilterItem.id);
+    if (itemIndex == -1) {
+      console.warn("[SnkFilterBar.updateFilterItem] FilterItem não encontrado, o mesmo não será atualizado.");
+      return Promise.resolve();
+    }
+    this._loadingPending = true;
+    this.updateFilter(newFilterItem);
+    return Promise.resolve();
+  }
+  /**
+  * Adiciona um item de filtro.
+  *
+  * @param filterItem - Item a ser adicionado, caso o item já exista com o ID ele não será adicionado novamente
+  */
+  async addFilterItem(filterItem) {
+    const itemIndex = this.filterConfig.findIndex(item => item.id === filterItem.id);
+    if (itemIndex > -1) {
+      console.warn("[SnkFilterBar.addFilterItem] FilterItem já existe , o mesmo não será adicionado novamente.");
+      return Promise.resolve();
+    }
+    this.filterConfig.push(filterItem);
+    this._loadingPending = true;
+    this.updateFilter(filterItem);
+    return Promise.resolve();
+  }
+  /**
+  * Remove um item de filtro.
+  *
+  * @param filterID - ID do a ser adicionado
+  *
+  * @returns {Promise<SnkFilterItemConfig|undefined>} - Retorna o item de filtro removido, ou undefined caso não encontrado.
+  */
+  async removeFilterItem(filterID) {
+    const itemIndex = this.filterConfig.findIndex(item => item.id === filterID);
+    if (itemIndex > -1) {
+      console.warn("[SnkFilterBar.removeFilterItem] FilterItem não encontrado");
+      return Promise.resolve(undefined);
+    }
+    const itemToRemove = this.filterConfig[itemIndex];
+    ;
+    this.filterConfig = this.filterConfig.filter(item => item.id !== filterID);
+    return Promise.resolve(itemToRemove);
+  }
   componentDidLoad() {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
@@ -98,6 +156,8 @@ export class SnkFilterBar {
   }
   async processAfterUpdateConfig() {
     if (this._loadingPending) {
+      if (await this._application.isLoadedByPk() && !this._configUpdated)
+        return;
       const personalizedFilter = this.getPersonalizedFilterItem();
       this._pendingVariables = !PersonalizedFilterUtils.validateVariableValues(personalizedFilter);
       if (this._pendingVariables) {
@@ -269,13 +329,18 @@ export class SnkFilterBar {
     const callbackOnApplyFilter = (filters) => {
       this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
     };
+    let filtersConfigCopy = ObjectUtils.copy(this.filterConfig);
+    filtersConfigCopy = filtersConfigCopy.sort((itemA, itemB) => {
+      return itemA.originOrder - itemB.originOrder;
+    });
     const factoryParams = {
-      filterConfig: ObjectUtils.copy(this.filterConfig),
+      filterConfig: filtersConfigCopy,
       configName: this.configName,
       onComplete: callbackOnApplyFilter,
       getMessage: (key, props) => this.getMessage(key, props),
       onAddPersonalizedFilter: () => this.addPersonalizedFilter(),
-      onEditPersonalizedFilter: (id) => this.editPersonalizedFilter(id)
+      onEditPersonalizedFilter: (id) => this.editPersonalizedFilter(id),
+      onDeletePersonalizedFilter: (filter, configName) => this.deletePersonalizedFilter(filter, FilterItemType.PERSONALIZED, configName),
     };
     this._filterModalFactory = new SnkFilterModalFactory(factoryParams);
     await this._filterModalFactory.showModal();
@@ -293,11 +358,24 @@ export class SnkFilterBar {
     this.showPersonalizedFilter = true;
     this.personalizedFilterId = id;
   }
+  deletePersonalizedFilter(filter, filterItemType, configName) {
+    if (filterItemType === FilterItemType.PERSONALIZED) {
+      ConfigStorage.removePersonalizedFilter(filter, this.resourceID, configName);
+    }
+  }
+  handleHidePersonalizedFilter(reloadFilterBar) {
+    if (reloadFilterBar) {
+      this.loadConfigFromStorage().then(() => {
+        this.hidePersonalizedFilter();
+      });
+    }
+    else {
+      this.hidePersonalizedFilter();
+    }
+  }
   hidePersonalizedFilter() {
-    this.loadConfigFromStorage().then(() => {
-      this.personalizedFilterId = undefined;
-      this.showPersonalizedFilter = false;
-    });
+    this.personalizedFilterId = undefined;
+    this.showPersonalizedFilter = false;
   }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -315,7 +393,7 @@ export class SnkFilterBar {
       return undefined;
     }
     if (this.showPersonalizedFilter) {
-      return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.hidePersonalizedFilter(), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
+      return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.handleHidePersonalizedFilter(false), onEzAfterSave: () => this.handleHidePersonalizedFilter(true), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
     }
     return (h(Host, null, h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
@@ -440,6 +518,29 @@ export class SnkFilterBar {
       "personalizedFilterId": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "configUpdated",
+        "name": "configUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig[]",
+          "resolved": "SnkFilterItemConfig[]",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          }
+        }
+      }];
+  }
   static get methods() {
     return {
       "reload": {
@@ -457,6 +558,116 @@ export class SnkFilterBar {
           "text": "Faz o recarregamento da filterbar buscando o state no servidor.",
           "tags": []
         }
+      },
+      "getFilterItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<SnkFilterItemConfig | undefined>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<SnkFilterItemConfig>"
+        },
+        "docs": {
+          "text": "Retorna um item de filtro pelo ID.",
+          "tags": []
+        }
+      },
+      "updateFilterItem": {
+        "complexType": {
+          "signature": "(newFilterItem: SnkFilterItemConfig) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza um item do filtro.",
+          "tags": [{
+              "name": "param",
+              "text": "filterItem - Item com as informa\u00E7\u00F5es atualizadas, caso o item n\u00E3o seja encontrado no array ele m\u00E3o ser\u00E1 modificado"
+            }]
+        }
+      },
+      "addFilterItem": {
+        "complexType": {
+          "signature": "(filterItem: SnkFilterItemConfig) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "filterItem - Item a ser adicionado, caso o item j\u00E1 exista com o ID ele n\u00E3o ser\u00E1 adicionado novamente"
+                }],
+              "text": "- Item a ser adicionado, caso o item j\u00E1 exista com o ID ele n\u00E3o ser\u00E1 adicionado novamente"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Adiciona um item de filtro.",
+          "tags": [{
+              "name": "param",
+              "text": "filterItem - Item a ser adicionado, caso o item j\u00E1 exista com o ID ele n\u00E3o ser\u00E1 adicionado novamente"
+            }]
+        }
+      },
+      "removeFilterItem": {
+        "complexType": {
+          "signature": "(filterID: string) => Promise<SnkFilterItemConfig | undefined>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "filterID - ID do a ser adicionado"
+                }],
+              "text": "- ID do a ser adicionado"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          },
+          "return": "Promise<SnkFilterItemConfig>"
+        },
+        "docs": {
+          "text": "Remove um item de filtro.",
+          "tags": [{
+              "name": "param",
+              "text": "filterID - ID do a ser adicionado"
+            }, {
+              "name": "returns",
+              "text": "- Retorna o item de filtro removido, ou undefined caso n\u00E3o encontrado."
+            }]
+        }
       }
     };
   }

package/dist/collection/components/snk-filter-bar/utils/SnkFilterModalFactory.js

@@ -1,12 +1,13 @@
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 class SnkFilterModalFactory {
-  constructor({ filterConfig, configName, onComplete, getMessage, onAddPersonalizedFilter, onEditPersonalizedFilter }) {
+  constructor({ filterConfig, configName, onComplete, getMessage, onAddPersonalizedFilter, onEditPersonalizedFilter, onDeletePersonalizedFilter }) {
     this._filterConfig = filterConfig;
     this._configName = configName;
     this._onComplete = onComplete;
     this._getMessage = getMessage;
     this._addPersonalizedFilterFn = onAddPersonalizedFilter;
     this._editPersonalizedFilterFn = onEditPersonalizedFilter;
+    this._onDeletePersonalizedFilter = onDeletePersonalizedFilter;
   }
   applyFilters(newFilterConfig) {
     this._onComplete(newFilterConfig);
@@ -22,6 +23,7 @@ class SnkFilterModalFactory {
     filterModal.closeModal = () => this._closeModal();
     filterModal.addPersonalizedFilter = () => this._addPersonalizedFilterFn();
     filterModal.editPersonalizedFilter = (id) => this._editPersonalizedFilterFn(id);
+    filterModal.deletePersonalizedFilter = (filter, configName) => this._onDeletePersonalizedFilter(filter, configName);
     return filterModal;
   }
   async showModal() {

package/dist/collection/components/snk-form/SnkFormConfigManager.js

@@ -1,5 +1,5 @@
 import { ConfigStorage } from "../../lib/configs/ConfigStorage";
-import { ObjectUtils } from "@sankhyalabs/core";
+import { ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { FormConfigFetcher } from "../../lib/http/data-fetcher/fetchers/form-config-fetcher";
 export class SnkFormConfigManager {
   constructor(configName, resourceID, onConfigChange) {
@@ -62,19 +62,36 @@ export class SnkFormConfigManager {
     }
     return updatingCardConfig;
   }
-  getFieldsList(dataUnit) {
+  getFieldsList(dataUnit, descriptionFilter) {
     var _a;
     const fields = (_a = this._config) === null || _a === void 0 ? void 0 : _a.fields;
     if (fields != undefined && fields.length > 0) {
-      return [...fields];
+      return fields.map(({ label, name, readOnly }) => {
+        if (label == undefined) {
+          return dataUnit.getField(name);
+        }
+        return { name, label, readOnly };
+      })
+        .filter(field => this.isFieldVisible(field, descriptionFilter));
     }
     if (dataUnit != undefined) {
       return dataUnit.metadata.fields
-        .filter(field => field.visible !== false)
-        .map(({ name }) => { return { name }; });
+        .filter(field => this.isFieldVisible(field, descriptionFilter))
+        .map(({ label, name, readOnly }) => { return { label, name, readOnly }; });
     }
     return [];
   }
+  isFieldVisible(field, descriptionFilter) {
+    if (field.visible === false) {
+      return false;
+    }
+    if (descriptionFilter == undefined) {
+      return true;
+    }
+    const normalizedText = StringUtils.replaceAccentuatedCharsLower((field.label || field.name).toLocaleLowerCase());
+    const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(descriptionFilter.toLocaleLowerCase());
+    return normalizedText.includes(normalizedFilter);
+  }
   getInsertionConfig(dataUnit) {
     const fields = this.getFieldsList(dataUnit).filter(field => {
       if (dataUnit) {

package/dist/collection/components/snk-form/subcomponents/snk-form-config/snk-form-config.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { Sortable } from '@shopify/draggable';
 import { ObjectUtils, ArrayUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from "@sankhyalabs/ezui/dist/collection/utils";
-import { ACTION_CONFIG, CONFIG_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../../../lib/utils/constants";
+import { ACTION_CONFIG, CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../../../lib/utils/constants";
 import { UserConfigType } from "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher";
 import { buildFormConfigFromDataUnit } from "@sankhyalabs/ezui/dist/collection/utils/form";
 const CONTAINER_ID = {
@@ -410,11 +410,12 @@ export class SnkFormConfig {
       draggable: '[data-draggable-element="field"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableField.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
-    this._sortableField.on(CONFIG_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
-    this._sortableField.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
   }
   controlStartDraggingGroup(evt) {
     if (this._mouseOnFieldConfig || this._editingTitleGroup) {
@@ -440,10 +441,11 @@ export class SnkFormConfig {
       draggable: '[data-draggable-element="group"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableGroup.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
-    this._sortableGroup.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
   }
   loadUserConfig() {
     if (this.configManager == undefined) {

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js

@@ -1,7 +1,7 @@
 import { h, Host, Fragment } from "@stencil/core";
 import { Sortable } from '@shopify/draggable';
 import { ApplicationContext, ElementIDUtils } from "@sankhyalabs/core";
-import { CONFIG_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
+import { CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
 export class SnkTabConfig {
   constructor() {
     this._refTabActions = [];
@@ -33,10 +33,11 @@ export class SnkTabConfig {
       draggable: '[data-draggable-element="tab"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableTab.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
-    this._sortableTab.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
+    this._sortableTab.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
+    this._sortableTab.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
   }
   controlStartDraggingTab(evt) {
     var _a, _b;
@@ -211,8 +212,9 @@ export class SnkTabConfig {
     };
     return styledLabel;
   }
-  cancelEditText() {
+  cancelEditText(cancelTextEdition) {
     var _a;
+    cancelTextEdition.stopPropagation();
     this._activeEditText = false;
     if (this._scrollContainer != undefined) {
       (_a = this._scrollContainer.querySelector('.tab-config__tab--is-active')) === null || _a === void 0 ? void 0 : _a.focus();
@@ -234,13 +236,13 @@ export class SnkTabConfig {
   handleSaveEditionText(editDetails) {
     const { value, newValue } = editDetails.detail;
     if (value === newValue) {
-      this.cancelEditText();
+      this.cancelEditText(editDetails);
       return;
     }
     this._processedTabs.forEach((tab) => {
       if (tab.label === value) {
         tab.label = newValue;
-        this.cancelEditText();
+        this.cancelEditText(editDetails);
         this.editionTitleTab.emit(editDetails);
       }
     });
@@ -306,7 +308,7 @@ export class SnkTabConfig {
       return h("button", { id: tabId, class: `tab-config__tab${isSelected ? " tab-config__tab--is-active" : ""}`, onClick: () => this.handleTabClick(tab), onDblClick: () => { this._activeEditText = true; this._activeEditTextIndex = index; }, "data-draggable-element": index > 0 ? "tab" : "", onMouseLeave: () => this.onHideActions(index), key: tab.label }, (this._activeEditText === true && this._activeEditTextIndex === index && index > 0) ||
         h(Fragment, null, index > 0 && h("ez-icon", { iconName: tab.leftIcon || "drag-indicator", class: "tab-config__left-icon" }), (tab.visible === false && index > 0) && h("ez-icon", { iconName: tab.leftIcon || "eye-off", class: "tab-config__left-icon tab-config__left-icon--eye-off" }), h("span", { class: "tab-config__tab-label" + (tab.visible === false && index > 0 ? " tab-config__tab-label-disabled" : ""), title: tab.label }, tab.label), index > 0 &&
           h("ez-actions-button", { class: "tab-config__actions-button", size: "small", ref: elem => this._refTabActions[index] = elem, actions: tab.visible === false ? this._actionsShow : this._actionsHide, isTransparent: true, arrowActive: true, onEzAction: (ev) => this.handleActions(ev, tab) }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } })), (this._activeEditText === true && index > 0 && this._activeEditTextIndex === index) &&
-        h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: () => this.cancelEditText() }));
+        h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: (ev) => this.cancelEditText(ev) }));
     })), h("button", { class: "tab-config__forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   static get is() { return "snk-tab-config"; }

package/dist/collection/components/snk-grid/filtercolumn/SnkMultiSelectionListDataSource.js

@@ -1,4 +1,6 @@
 import { DateUtils, UserInterface } from '@sankhyalabs/core';
+import { default as InMemoryFilterColumnDataSource } from '@sankhyalabs/ezui/dist/collection/components/ez-grid/utils/InMemoryFilterColumnDataSource';
+import PreloadManager from '../../../lib/http/data-fetcher/fetchers/data-unit/cache/PreloadManager';
 export default class SnkMultiSelectionListDataSource {
   setDataUnit(dataUnit) {
     this._dataUnit = dataUnit;
@@ -13,6 +15,12 @@ export default class SnkMultiSelectionListDataSource {
     }
     return String(this._dataUnit.getFormattedValue(fieldName, value));
   }
+  async getStaticOptions(fieldName) {
+    if (fieldName == undefined) {
+      return Promise.resolve(undefined);
+    }
+    return Promise.resolve(await PreloadManager.getDistinct(this._dataUnit, fieldName));
+  }
   fetchData(filterTerm, fieldName) {
     return new Promise(resolve => {
       this._application.executeSelectDistinct(this._dataUnit, fieldName, filterTerm).then(result => {
@@ -26,4 +34,7 @@ export default class SnkMultiSelectionListDataSource {
       });
     });
   }
+  sortItems(fieldName, items) {
+    return InMemoryFilterColumnDataSource.defaultSorterMultSelectionOption(this._dataUnit, fieldName, items);
+  }
 }

package/dist/collection/components/snk-grid/snk-grid.css

@@ -1,3 +1,7 @@
+:host {
+  --snk-grid-min-height: 300px;
+}
+
 .snk-grid__container {
   display: flex;
   height: 100%;
@@ -5,9 +9,10 @@
 }
 
 .snk-grid__header {
+  width: 100%;
   display: flex;
   flex-wrap: nowrap;
-  width: 100%;
+  justify-content: flex-end;
 }
 
 .snk-grid__filter-bar {
@@ -20,7 +25,7 @@
 }
 
 .snk-grid__table {
-  min-height: 300px;
+  min-height: var(--snk-grid-min-height);
 }
 
 .snk-grid-container__without-shadow {