@zeedhi/common 1.67.0 → 1.69.0

package/dist/zd-common.esm.js

@@ -23,6 +23,10 @@ class Component {
      * @param props Components properties
      */
     constructor(props) {
+        /**
+         * Automatically add focus to input when it's created.
+         */
+        this.autofocus = false;
         /**
          * Children component structure if the component has children.
          */
@@ -77,6 +81,7 @@ class Component {
         this.parent = props.parent;
         this.name = props.name;
         this.events = Event.factory(props.events || this.events);
+        this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
         this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
         this.directives = this.getInitValue('directives', props.directives, this.directives);
@@ -1612,10 +1617,6 @@ class Input extends ComponentRender {
          * Input auto complete.
          */
         this.autofill = true;
-        /**
-         * Automatically add focus to input when it's created.
-         */
-        this.autofocus = false;
         /**
          * Add input clear functionality if the input isn't readonly or disabled.
          */
@@ -1704,7 +1705,6 @@ class Input extends ComponentRender {
         this.align = this.getInitValue('align', props.align, this.align);
         this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
         this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-        this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
         this.color = this.getInitValue('color', props.color, this.color);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
@@ -2992,6 +2992,8 @@ class Dashboard extends ComponentRender {
         super(props);
         /* Enable edit mode */
         this.editingMode = false;
+        /* show edit header */
+        this.showEditHeader = true;
         /* Enable only move mode */
         this.moveMode = false;
         /* Cards */
@@ -3226,6 +3228,7 @@ class Dashboard extends ComponentRender {
         this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
         this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
         this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
+        this.showEditHeader = this.getInitValue('showEditHeader', props.showEditHeader, this.showEditHeader);
         this.createAccessors();
     }
     onMounted(element) {
@@ -4073,19 +4076,25 @@ class DateRange extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
-    updateHelperHint() {
-        if (this.helperValue) {
+    updateHelperHint(helperValue) {
+        const previousHelperHint = this.helperValue ? DateHelper.getLabel(this.helperValue) : '';
+        if (!this.hint || previousHelperHint !== this.hint) {
             this.previousHint = this.hint;
             this.previousPersistentHint = this.persistentHint;
-            this.hint = DateHelper.getLabel(this.helperValue);
-            this.persistentHint = true;
         }
+        this.helperValue = helperValue;
+        const label = DateHelper.getLabel(helperValue);
+        if (!helperValue || !label) {
+            this.hint = this.previousHint;
+            this.persistentHint = this.previousPersistentHint;
+            return;
+        }
+        this.hint = label;
+        this.persistentHint = true;
     }
     change(event, element) {
         super.change(event, element);
-        this.helperValue = '';
-        this.hint = this.previousHint;
-        this.persistentHint = this.previousPersistentHint;
+        this.updateHelperHint('');
     }
     getMaskValue() {
         let mask = '';
@@ -4774,9 +4783,11 @@ class Column extends Component {
             this.loading = true;
             const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
             this.lookupDatasource.addFilter(lookupColumn, dataToLookup).then((data) => {
+                const lookupData = {};
                 data.forEach((row) => {
-                    this.lookupData[row[lookupColumn]] = row;
+                    lookupData[row[lookupColumn]] = row;
                 });
+                this.lookupData = lookupData;
                 this.lookupDataCount += 1;
                 this.loading = false;
             });
@@ -7914,6 +7925,10 @@ class Menu extends ComponentRender {
          * Defines if the menu is an application menu
          */
         this.app = false;
+        /**
+         * Defines if the menu must be rendered inside an absolute div
+         */
+        this.absolute = false;
         /**
          * Defines if the menu should rests under the application toolbar
          */
@@ -8007,6 +8022,7 @@ class Menu extends ComponentRender {
         /** Store the current item focused */
         this.currentItem = null;
         this.app = this.getInitValue('app', props.app, this.app);
+        this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
         this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.floating = this.getInitValue('floating', props.floating, this.floating);
@@ -9273,6 +9289,7 @@ class TreeDataStructure {
         this.parentField = tree.parentField;
         this.fetchOnDemand = tree.fetchOnDemand;
         this.openLevelOnLoad = tree.openLevelOnLoad;
+        this.tree = tree;
         this.init();
     }
     /**
@@ -9292,20 +9309,20 @@ class TreeDataStructure {
             this.searchValue = this.originalDatasource.search;
             this.searchHasNoData = false;
             if (this.fetchOnDemand) {
-                if (this.originalDatasource.search) {
+                if (this.tree.detach || this.originalDatasource.search) {
                     delete this.originalDatasource.filter[this.parentField];
                 }
                 else if (!this.originalDatasource.filter[this.parentField]) {
                     this.originalDatasource.filter[this.parentField] = 'NULL';
                 }
             }
-            if (!this.fetchOnDemand && this.searchValue) {
+            if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
                 this.searchAllData();
                 return Promise.resolve(this.originalDatasource.data);
             }
             return originalGet.call(this.originalDatasource).then((data) => {
                 if (this.searchValue) {
-                    this.searchOnDemand();
+                    this.buildDetached();
                 }
                 else {
                     this.buildTree();
@@ -9318,7 +9335,10 @@ class TreeDataStructure {
      * search data
      */
     buildTree() {
-        if (this.fetchOnDemand) {
+        if (this.tree.detach) {
+            this.buildDetached();
+        }
+        else if (this.fetchOnDemand) {
             this.buildOnDemand();
         }
         else {
@@ -9571,13 +9591,12 @@ class TreeDataStructure {
         });
     }
     /**
-     * Search tree with fetchOnDemand
-     * @param data datasource data
+     * Arrange treeData in a uniform structure
      */
-    searchOnDemand() {
+    buildDetached() {
         this.treeData = [];
         this.treeStructure = {};
-        const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
+        const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: !!this.searchValue, tree__level: 1, tree__parent: undefined })));
         this.treeData = childData;
         this.treeStructure['no-parent'] = childData;
     }
@@ -10613,6 +10632,14 @@ class Textarea extends TextInput {
          * Default row count.
          */
         this.rows = 5;
+        /**
+         * Input height
+         */
+        this.height = 'auto';
+        /**
+         * Should input fill the remaining height
+         */
+        this.fillHeight = false;
         this.autoGrow = this.getInitValue('autoGrow', props.autoGrow, this.autoGrow);
         this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
         this.clearIcon = this.getInitValue('clearIcon', props.clearIcon, this.clearIcon);
@@ -10624,6 +10651,8 @@ class Textarea extends TextInput {
         this.rounded = this.getInitValue('rounded', props.rounded, this.reverse);
         this.rowHeight = this.getInitValue('rowHeight', props.rowHeight, this.rowHeight);
         this.rows = this.getInitValue('rows', props.rows, this.rows);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.createAccessors();
         if (this.counter && !Number.isNaN(parseInt(this.counter.toString(), 10))) {
             this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
@@ -11042,11 +11071,15 @@ class Tooltip extends ComponentRender {
          */
         this.nudge = 0;
         /**
-         * Nudge the content to the top
+         * Open the tooltip on activator click
          */
         this.openOnClick = false;
         /**
-         * Nudge the content to the top
+         * Open the tooltip on activator focus
+         */
+        this.openOnFocus = true;
+        /**
+         * Open the tooltip on activator hover
          */
         this.openOnHover = true;
         /**
@@ -11066,6 +11099,7 @@ class Tooltip extends ComponentRender {
         this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
         this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
         this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+        this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
         this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
         this.right = this.getInitValue('right', props.right, this.right);
         this.top = this.getInitValue('top', props.top, this.top);
@@ -11495,6 +11529,10 @@ class TreeGrid extends Grid {
          * Even though all children are selected, the parent node is not
          */
         this.flat = false;
+        /**
+         * Display the rows detached from their parents
+         */
+        this.detach = false;
         this.navigationTreeKeyMapping = {
             right: {
                 event: this.navigateToggle.bind(this, false),
@@ -11512,6 +11550,7 @@ class TreeGrid extends Grid {
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
         this.flat = this.getInitValue('flat', props.flat, this.flat);
+        this.detach = this.getInitValue('detach', props.detach, this.detach);
         this.treeDataStructure = new TreeDataStructure(this);
         this.createAccessors();
     }
@@ -11526,17 +11565,15 @@ class TreeGrid extends Grid {
      * Build tree data
      */
     buildTree(doGet = true) {
-        if (doGet) {
-            if (this.fetchOnDemand) {
-                this.datasource.addFilter(this.parentField, 'NULL');
-            }
-            else {
-                this.datasource.get();
-            }
-        }
-        else {
+        if (!doGet) {
             this.treeDataStructure.buildTree();
+            return;
+        }
+        if (!this.fetchOnDemand) {
+            this.datasource.get();
+            return;
         }
+        this.datasource.addFilter(this.parentField, 'NULL');
     }
     /**
      * This function takes an array of objects and updates the data in the tree.

package/dist/zd-common.umd.js

@@ -30,6 +30,10 @@
        * @param props Components properties
        */
       constructor(props) {
+          /**
+           * Automatically add focus to input when it's created.
+           */
+          this.autofocus = false;
           /**
            * Children component structure if the component has children.
            */
@@ -84,6 +88,7 @@
           this.parent = props.parent;
           this.name = props.name;
           this.events = core.Event.factory(props.events || this.events);
+          this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
           this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
           this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
           this.directives = this.getInitValue('directives', props.directives, this.directives);
@@ -1619,10 +1624,6 @@
            * Input auto complete.
            */
           this.autofill = true;
-          /**
-           * Automatically add focus to input when it's created.
-           */
-          this.autofocus = false;
           /**
            * Add input clear functionality if the input isn't readonly or disabled.
            */
@@ -1711,7 +1712,6 @@
           this.align = this.getInitValue('align', props.align, this.align);
           this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
           this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-          this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
           this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
           this.color = this.getInitValue('color', props.color, this.color);
           this.dense = this.getInitValue('dense', props.dense, this.dense);
@@ -2999,6 +2999,8 @@
           super(props);
           /* Enable edit mode */
           this.editingMode = false;
+          /* show edit header */
+          this.showEditHeader = true;
           /* Enable only move mode */
           this.moveMode = false;
           /* Cards */
@@ -3233,6 +3235,7 @@
           this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
           this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
           this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
+          this.showEditHeader = this.getInitValue('showEditHeader', props.showEditHeader, this.showEditHeader);
           this.createAccessors();
       }
       onMounted(element) {
@@ -4080,19 +4083,25 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
-      updateHelperHint() {
-          if (this.helperValue) {
+      updateHelperHint(helperValue) {
+          const previousHelperHint = this.helperValue ? core.DateHelper.getLabel(this.helperValue) : '';
+          if (!this.hint || previousHelperHint !== this.hint) {
               this.previousHint = this.hint;
               this.previousPersistentHint = this.persistentHint;
-              this.hint = core.DateHelper.getLabel(this.helperValue);
-              this.persistentHint = true;
           }
+          this.helperValue = helperValue;
+          const label = core.DateHelper.getLabel(helperValue);
+          if (!helperValue || !label) {
+              this.hint = this.previousHint;
+              this.persistentHint = this.previousPersistentHint;
+              return;
+          }
+          this.hint = label;
+          this.persistentHint = true;
       }
       change(event, element) {
           super.change(event, element);
-          this.helperValue = '';
-          this.hint = this.previousHint;
-          this.persistentHint = this.previousPersistentHint;
+          this.updateHelperHint('');
       }
       getMaskValue() {
           let mask = '';
@@ -4781,9 +4790,11 @@
               this.loading = true;
               const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
               this.lookupDatasource.addFilter(lookupColumn, dataToLookup).then((data) => {
+                  const lookupData = {};
                   data.forEach((row) => {
-                      this.lookupData[row[lookupColumn]] = row;
+                      lookupData[row[lookupColumn]] = row;
                   });
+                  this.lookupData = lookupData;
                   this.lookupDataCount += 1;
                   this.loading = false;
               });
@@ -7921,6 +7932,10 @@
            * Defines if the menu is an application menu
            */
           this.app = false;
+          /**
+           * Defines if the menu must be rendered inside an absolute div
+           */
+          this.absolute = false;
           /**
            * Defines if the menu should rests under the application toolbar
            */
@@ -8014,6 +8029,7 @@
           /** Store the current item focused */
           this.currentItem = null;
           this.app = this.getInitValue('app', props.app, this.app);
+          this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
           this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
           this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
           this.floating = this.getInitValue('floating', props.floating, this.floating);
@@ -9280,6 +9296,7 @@
           this.parentField = tree.parentField;
           this.fetchOnDemand = tree.fetchOnDemand;
           this.openLevelOnLoad = tree.openLevelOnLoad;
+          this.tree = tree;
           this.init();
       }
       /**
@@ -9299,20 +9316,20 @@
               this.searchValue = this.originalDatasource.search;
               this.searchHasNoData = false;
               if (this.fetchOnDemand) {
-                  if (this.originalDatasource.search) {
+                  if (this.tree.detach || this.originalDatasource.search) {
                       delete this.originalDatasource.filter[this.parentField];
                   }
                   else if (!this.originalDatasource.filter[this.parentField]) {
                       this.originalDatasource.filter[this.parentField] = 'NULL';
                   }
               }
-              if (!this.fetchOnDemand && this.searchValue) {
+              if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
                   this.searchAllData();
                   return Promise.resolve(this.originalDatasource.data);
               }
               return originalGet.call(this.originalDatasource).then((data) => {
                   if (this.searchValue) {
-                      this.searchOnDemand();
+                      this.buildDetached();
                   }
                   else {
                       this.buildTree();
@@ -9325,7 +9342,10 @@
        * search data
        */
       buildTree() {
-          if (this.fetchOnDemand) {
+          if (this.tree.detach) {
+              this.buildDetached();
+          }
+          else if (this.fetchOnDemand) {
               this.buildOnDemand();
           }
           else {
@@ -9578,13 +9598,12 @@
           });
       }
       /**
-       * Search tree with fetchOnDemand
-       * @param data datasource data
+       * Arrange treeData in a uniform structure
        */
-      searchOnDemand() {
+      buildDetached() {
           this.treeData = [];
           this.treeStructure = {};
-          const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
+          const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: !!this.searchValue, tree__level: 1, tree__parent: undefined })));
           this.treeData = childData;
           this.treeStructure['no-parent'] = childData;
       }
@@ -10620,6 +10639,14 @@
            * Default row count.
            */
           this.rows = 5;
+          /**
+           * Input height
+           */
+          this.height = 'auto';
+          /**
+           * Should input fill the remaining height
+           */
+          this.fillHeight = false;
           this.autoGrow = this.getInitValue('autoGrow', props.autoGrow, this.autoGrow);
           this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
           this.clearIcon = this.getInitValue('clearIcon', props.clearIcon, this.clearIcon);
@@ -10631,6 +10658,8 @@
           this.rounded = this.getInitValue('rounded', props.rounded, this.reverse);
           this.rowHeight = this.getInitValue('rowHeight', props.rowHeight, this.rowHeight);
           this.rows = this.getInitValue('rows', props.rows, this.rows);
+          this.height = this.getInitValue('height', props.height, this.height);
+          this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
           this.createAccessors();
           if (this.counter && !Number.isNaN(parseInt(this.counter.toString(), 10))) {
               this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
@@ -11049,11 +11078,15 @@
            */
           this.nudge = 0;
           /**
-           * Nudge the content to the top
+           * Open the tooltip on activator click
            */
           this.openOnClick = false;
           /**
-           * Nudge the content to the top
+           * Open the tooltip on activator focus
+           */
+          this.openOnFocus = true;
+          /**
+           * Open the tooltip on activator hover
            */
           this.openOnHover = true;
           /**
@@ -11073,6 +11106,7 @@
           this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
           this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
           this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+          this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
           this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
           this.right = this.getInitValue('right', props.right, this.right);
           this.top = this.getInitValue('top', props.top, this.top);
@@ -11502,6 +11536,10 @@
            * Even though all children are selected, the parent node is not
            */
           this.flat = false;
+          /**
+           * Display the rows detached from their parents
+           */
+          this.detach = false;
           this.navigationTreeKeyMapping = {
               right: {
                   event: this.navigateToggle.bind(this, false),
@@ -11519,6 +11557,7 @@
           this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
           this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
           this.flat = this.getInitValue('flat', props.flat, this.flat);
+          this.detach = this.getInitValue('detach', props.detach, this.detach);
           this.treeDataStructure = new TreeDataStructure(this);
           this.createAccessors();
       }
@@ -11533,17 +11572,15 @@
        * Build tree data
        */
       buildTree(doGet = true) {
-          if (doGet) {
-              if (this.fetchOnDemand) {
-                  this.datasource.addFilter(this.parentField, 'NULL');
-              }
-              else {
-                  this.datasource.get();
-              }
-          }
-          else {
+          if (!doGet) {
               this.treeDataStructure.buildTree();
+              return;
+          }
+          if (!this.fetchOnDemand) {
+              this.datasource.get();
+              return;
           }
+          this.datasource.addFilter(this.parentField, 'NULL');
       }
       /**
        * This function takes an array of objects and updates the data in the tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.67.0",
+  "version": "1.69.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -39,5 +39,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "e073bdc1515fa3ab9da439f984a2a8f8fd572c9e"
+  "gitHead": "68d387623e59f31de6b04926cb0d476f2e1715a0"
 }

package/types/components/zd-component/component.d.ts

@@ -4,6 +4,10 @@ import { IComponent, IComponentDirectives, IComponentEvents } from './interfaces
  * Base class for all Zeedhi components.
  */
 export declare class Component implements IComponent {
+    /**
+     * Automatically add focus to input when it's created.
+     */
+    autofocus: boolean;
     /**
      * Children component structure if the component has children.
      */

package/types/components/zd-component/interfaces.d.ts

@@ -7,6 +7,7 @@ export interface IPropAccessor {
     };
 }
 export interface IComponent {
+    autofocus?: boolean;
     children?: IComponent[];
     componentId?: number;
     cssClass?: string;

package/types/components/zd-dashboard/dashboard.d.ts

@@ -10,6 +10,7 @@ import { IHeader } from '../zd-header/interfaces';
 export declare class Dashboard extends ComponentRender implements IDashboard {
     events: IDashboardEvents;
     editingMode: boolean;
+    showEditHeader: boolean;
     moveMode: boolean;
     cards: IDashboardCard[];
     addModal?: Modal;

package/types/components/zd-dashboard/interfaces.d.ts

@@ -18,6 +18,7 @@ export interface IDashboard extends IComponentRender {
     removePadding?: boolean;
     height?: string | number;
     heightAdjust?: string | number;
+    showEditHeader?: string | boolean;
     cardFooterSlot?: IComponentRender[];
 }
 export interface IDashboardCard extends Omit<ICard, 'name' | 'component'> {

package/types/components/zd-date/date-range.d.ts

@@ -127,7 +127,7 @@ export declare class DateRange extends TextInput implements IDateRange {
     protected isSimpleFormat(format: string): boolean;
     private previousHint;
     private previousPersistentHint;
-    updateHelperHint(): void;
+    updateHelperHint(helperValue: string): void;
     change(event?: Event, element?: any): void;
     getMaskValue(): any;
 }

package/types/components/zd-form/form.d.ts

@@ -71,12 +71,16 @@ export declare class Form extends ComponentRender implements IForm {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
         component: string;
+        autofocus?: boolean | undefined;
         componentId?: number | undefined;
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
         events?: import("..").IComponentEvents<import("@zeedhi/core").IEventParam<any>> | undefined;
         directives?: import("..").IComponentDirectives | undefined;
-        isVisible?: string | boolean | undefined;
+        isVisible?: string | boolean | undefined; /**
+         * Applies the align-items css property.
+         * Available options are start, center, end, space-between, space-around and stretch.
+         */
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;

package/types/components/zd-grid/grid-column.d.ts

@@ -18,6 +18,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
         component: string;
+        autofocus?: boolean | undefined;
         componentId?: number | undefined;
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
@@ -27,10 +28,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;
-        name: string; /**
-         * Creates a new Grid Column.
-         * @param props Grid column properties
-         */
+        name: string;
         parent?: import("..").Component | undefined;
         tabStop?: boolean | undefined;
     }[];

package/types/components/zd-input/input.d.ts

@@ -17,10 +17,6 @@ export declare class Input extends ComponentRender implements IInput {
      * Input auto complete.
      */
     autofill: boolean;
-    /**
-     * Automatically add focus to input when it's created.
-     */
-    autofocus: boolean;
     /**
      * Add input clear functionality if the input isn't readonly or disabled.
      */

package/types/components/zd-input/interfaces.d.ts

@@ -12,7 +12,6 @@ export interface IInput extends IComponentRender {
     align?: string;
     alwaysShowError?: boolean;
     autofill?: boolean;
-    autofocus?: boolean;
     clearable?: boolean;
     color?: string;
     dark?: boolean;

package/types/components/zd-menu/interfaces.d.ts

@@ -9,6 +9,7 @@ export declare type IMenuLinkEvents = IComponentEvents<IMenuLinkEvent>;
  */
 export interface IMenu extends IComponentRender {
     app?: boolean | string;
+    absolute?: boolean | string;
     clipped?: boolean | string;
     dense?: boolean | string;
     fixed?: boolean | string;

package/types/components/zd-menu/menu.d.ts

@@ -9,6 +9,10 @@ export declare class Menu extends ComponentRender implements IMenu {
      * Defines if the menu is an application menu
      */
     app: boolean | string;
+    /**
+     * Defines if the menu must be rendered inside an absolute div
+     */
+    absolute: boolean | string;
     /**
      * Defines if the menu should rests under the application toolbar
      */

package/types/components/zd-textarea/interfaces.d.ts

@@ -15,4 +15,6 @@ export interface ITextarea extends ITextInput {
     rounded?: boolean;
     rowHeight?: number | string;
     rows?: number | string;
+    height?: number | string;
+    fillHeight?: number | string | boolean;
 }

package/types/components/zd-textarea/textarea.d.ts

@@ -48,6 +48,14 @@ export declare class Textarea extends TextInput implements ITextarea {
      * Default row count.
      */
     rows: number | string;
+    /**
+     * Input height
+     */
+    height: number | string;
+    /**
+     * Should input fill the remaining height
+     */
+    fillHeight: number | string | boolean;
     /**
      * Create a new Textarea.
      * @param props Textarea properties

package/types/components/zd-tooltip/interfaces.d.ts

@@ -12,6 +12,7 @@ export interface ITooltip extends IComponentRender {
     minWidth?: number | string;
     nudge?: number | string;
     openOnClick?: boolean;
+    openOnFocus?: boolean;
     openOnHover?: boolean;
     right?: boolean;
     top?: boolean;

package/types/components/zd-tooltip/tooltip.d.ts

@@ -34,11 +34,15 @@ export declare class Tooltip extends ComponentRender implements ITooltip {
      */
     nudge: number | string;
     /**
-     * Nudge the content to the top
+     * Open the tooltip on activator click
      */
     openOnClick: boolean;
     /**
-     * Nudge the content to the top
+     * Open the tooltip on activator focus
+     */
+    openOnFocus: boolean;
+    /**
+     * Open the tooltip on activator hover
      */
     openOnHover: boolean;
     /**

package/types/components/zd-tree-grid/interfaces.d.ts

@@ -6,6 +6,7 @@ export interface ITreeGrid extends IGrid {
     openLevelOnLoad?: number | boolean;
     fetchOnDemand?: boolean;
     flat?: boolean;
+    detach?: boolean;
 }
 export interface ITreeGridEditable extends ITreeGrid {
     columns?: IGridColumnEditable[];

package/types/components/zd-tree-grid/tree-grid.d.ts

@@ -35,6 +35,10 @@ export declare class TreeGrid extends Grid implements ITreeGrid {
      * Even though all children are selected, the parent node is not
      */
     flat: boolean;
+    /**
+     * Display the rows detached from their parents
+     */
+    detach: boolean;
     viewUpdateScrollData?: () => void;
     /**
      * Creates a new Tree Grid.

package/types/utils/tree-data-structure/interfaces.d.ts

@@ -4,4 +4,5 @@ export interface ITreeDataStructure {
     parentField: string;
     openLevelOnLoad: number | boolean;
     fetchOnDemand: boolean;
+    detach?: boolean;
 }

package/types/utils/tree-data-structure/tree-data-structure.d.ts

@@ -29,6 +29,10 @@ export declare class TreeDataStructure {
      * Stores tree structure
      */
     private treeStructure;
+    /**
+     * Tree component
+     */
+    private tree;
     constructor(tree: ITreeDataStructure);
     /**
      * Creates properties and methods
@@ -122,10 +126,9 @@ export declare class TreeDataStructure {
      */
     private reloadAndUpdateSelectedRows;
     /**
-     * Search tree with fetchOnDemand
-     * @param data datasource data
+     * Arrange treeData in a uniform structure
      */
-    private searchOnDemand;
+    buildDetached(): void;
     /**
      * Search value against a memory datasource
      */