@hashicorp/design-system-components 2.14.1 → 2.14.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hashicorp/design-system-components
 
+## 2.14.2
+
+### Patch Changes
+
+- [#1724](https://github.com/hashicorp/design-system/pull/1724) [`65ebe6dde`](https://github.com/hashicorp/design-system/commit/65ebe6ddeb477ebc74ad6db353aaf19e1dfb06b1) Thanks [@didoo](https://github.com/didoo)! - `Pagination` - updated the logic for “Compact” variant to expose `@currentPageSize` and handle controlled/uncontrolled changes
+
+- [#1716](https://github.com/hashicorp/design-system/pull/1716) [`cde67bc7f`](https://github.com/hashicorp/design-system/commit/cde67bc7fc32c1025ddd22de6d0f9baeabf43961) Thanks [@didoo](https://github.com/didoo)! - `Tabs` - replace `assert` with `warn` in `setIndicator` function
+
 ## 2.14.1
 
 ### Patch Changes

package/addon/components/hds/pagination/compact/index.js

@@ -4,6 +4,7 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
@@ -15,6 +16,18 @@ export const DEFAULT_PAGE_SIZES = [10, 30, 50];
 export default class HdsPaginationCompactIndexComponent extends Component {
   @service router;
 
+  // This private variable is used to differentiate between
+  // "uncontrolled" component (where the state is handled internally) and
+  // "controlled" component (where the state is handled externally, by the consumer's code).
+  // In the first case, the variable stores the internal state of the component at any moment,
+  // and its value is updated internally according to the user's interaction with the component.
+  // In the second case, the variable stores *only* the initial state of the component (coming from the arguments)
+  // at rendering time, but from that moment on it's not updated anymore, no matter what interaction the user
+  // has with the component (the state is controlled externally, eg. via query parameters)
+  @tracked _currentPageSize = this.args.currentPageSize ?? this.pageSizes[0];
+  @tracked isControlled;
+
+  showLabels = this.args.showLabels ?? true; // if the labels for the "prev/next" controls are visible
   showSizeSelector = this.args.showSizeSelector ?? false; // if the "size selector" block is visible
 
   constructor() {
@@ -31,28 +44,16 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     // initialized and updated using the arguments passed to it.
 
     if (queryFunction === undefined) {
-      this.hasRouting = false;
+      this.isControlled = false;
     } else {
       assert(
         '@queryFunction for "Hds::Pagination::Numbered" must be a function',
         typeof queryFunction === 'function'
       );
-      this.hasRouting = true;
+      this.isControlled = true;
     }
   }
 
-  /**
-   * @param showLabels
-   * @type {boolean}
-   * @default true
-   * @description Show the labels for the "prev/next" controls
-   */
-  get showLabels() {
-    let { showLabels = true } = this.args;
-
-    return showLabels;
-  }
-
   /**
    * @param ariaLabel
    * @type {string}
@@ -62,6 +63,35 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return this.args.ariaLabel ?? 'Pagination';
   }
 
+  // This very specific `get/set` pattern is used to handle the two different use cases of the component
+  // being "controlled" (when it has routing, meaning it needs to support pagination controls as links/`LinkTo`)
+  // vs being "uncontrolled" (see comments above for details).
+  //
+  // If it has routing (and so it's "controlled"), than the value ("state") of the `currentPageSize` variable
+  // is *always* determined by the controller via arguments (most of the times, connected to query parameters in the URL).
+  // For this reason the "get" method always returns the value from the `args`,
+  // while the "set" method never updates the private internal state (_variable).
+  //
+  // If instead it doesn't have routing (and so it's "uncontrolled") than the value ("state") of the `currentPageSize` variables
+  // is *always* determined by the component's internal logic (and updated according to the user interaction with it).
+  // For this reason the "get" and "set" methods always read from or write to the private internal state (_variable).
+
+  get currentPageSize() {
+    if (this.isControlled) {
+      return this.args.currentPageSize;
+    } else {
+      return this._currentPageSize;
+    }
+  }
+
+  set currentPageSize(value) {
+    if (this.isControlled) {
+      // noop
+    } else {
+      this._currentPageSize = value;
+    }
+  }
+
   /**
    * @param pageSizes
    * @type {array of numbers}
@@ -83,9 +113,9 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return this.router.currentRoute?.queryParams || {};
   }
 
-  buildQueryParamsObject(page) {
-    if (this.hasRouting) {
-      return this.args.queryFunction(page, this.currentPage);
+  buildQueryParamsObject(page, pageSize) {
+    if (this.isControlled) {
+      return this.args.queryFunction(page, pageSize);
     } else {
       return {};
     }
@@ -100,9 +130,15 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     };
 
     // the "query" is dynamic and needs to be calculated
-    if (this.hasRouting) {
-      routing.queryPrev = this.buildQueryParamsObject('prev');
-      routing.queryNext = this.buildQueryParamsObject('next');
+    if (this.isControlled) {
+      routing.queryPrev = this.buildQueryParamsObject(
+        'prev',
+        this.currentPageSize
+      );
+      routing.queryNext = this.buildQueryParamsObject(
+        'next',
+        this.currentPageSize
+      );
     } else {
       routing.queryPrev = undefined;
       routing.queryNext = undefined;
@@ -121,4 +157,23 @@ export default class HdsPaginationCompactIndexComponent extends Component {
       onPageChange(newPage);
     }
   }
+
+  @action
+  onPageSizeChange(newPageSize) {
+    let { onPageSizeChange } = this.args;
+
+    // we need to manually update the query parameters in the route (it's not a link!)
+    if (this.isControlled) {
+      // we pass `null` as value for the `page` argument, so consumers can handle this condition accordingly (probably will just change the side of the data/array slice)
+      const queryParams = this.buildQueryParamsObject(null, newPageSize);
+      this.router.transitionTo({ queryParams });
+    } else {
+      this.currentPageSize = newPageSize;
+    }
+
+    // invoke the callback function
+    if (typeof onPageSizeChange === 'function') {
+      onPageSizeChange(newPageSize);
+    }
+  }
 }

package/addon/components/hds/pagination/numbered/index.js

@@ -85,6 +85,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   // has with the component (the state is controlled externally, eg. via query parameters)
   @tracked _currentPage = this.args.currentPage ?? 1;
   @tracked _currentPageSize = this.args.currentPageSize ?? this.pageSizes[0];
+  @tracked isControlled;
 
   showInfo = this.args.showInfo ?? true; // if the "info" block is visible
   showLabels = this.args.showLabels ?? false; // if the labels for the "prev/next" controls are visible
@@ -107,7 +108,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     // initialized and updated using the arguments passed to it.
 
     if (queryFunction === undefined) {
-      this.hasRouting = false;
+      this.isControlled = false;
     } else {
       assert(
         '@queryFunction for "Hds::Pagination::Numbered" must be a function',
@@ -118,7 +119,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
         typeof this.args.currentPageSize === 'number' &&
           typeof this.args.currentPage === 'number'
       );
-      this.hasRouting = true;
+      this.isControlled = true;
     }
 
     assert(
@@ -137,7 +138,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   // This very specific `get/set` pattern is used to handle the two different use cases of the component
-  // being "controlled" (when it has routing, meaning it needs to support links as controls)
+  // being "controlled" (when it has routing, meaning it needs to support pagination controls as links/`LinkTo`)
   // vs being "uncontrolled" (see comments above for details).
   //
   // If it has routing (and so it's "controlled"), than the value ("state") of the `currentPage/currentPageSize` variables
@@ -150,7 +151,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   // For this reason the "get" and "set" methods always read from or write to the private internal state (_variable).
 
   get currentPage() {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       return this.args.currentPage;
     } else {
       return this._currentPage;
@@ -158,7 +159,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   set currentPage(value) {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       // noop
     } else {
       this._currentPage = value;
@@ -166,7 +167,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   get currentPageSize() {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       return this.args.currentPageSize;
     } else {
       return this._currentPageSize;
@@ -174,7 +175,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   set currentPageSize(value) {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       // noop
     } else {
       this._currentPageSize = value;
@@ -242,7 +243,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   buildQueryParamsObject(page, pageSize) {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       return this.args.queryFunction(page, pageSize);
     } else {
       return {};
@@ -258,7 +259,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     };
 
     // the "query" is dynamic and needs to be calculated
-    if (this.hasRouting) {
+    if (this.isControlled) {
       routing.queryPrev = this.buildQueryParamsObject(
         this.currentPage - 1,
         this.currentPageSize
@@ -323,10 +324,9 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     let { onPageSizeChange } = this.args;
 
     // we need to manually update the query parameters in the route (it's not a link!)
-    // notice: we agreed to reset the pagination to the first element (any alternative would result in an unpredictable UX)
-    if (this.hasRouting) {
-      let queryParams = Object.assign({}, this.routeQueryParams);
-      queryParams = this.buildQueryParamsObject(1, newPageSize);
+    if (this.isControlled) {
+      // notice: we agreed to reset the pagination to the first element (any alternative would result in an unpredictable UX)
+      const queryParams = this.buildQueryParamsObject(1, newPageSize);
       this.router.transitionTo({ queryParams });
     } else {
       this.currentPage = 1;

package/addon/components/hds/tabs/index.js

@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { assert } from '@ember/debug';
+import { assert, warn } from '@ember/debug';
 import { next, schedule } from '@ember/runloop';
 
 export default class HdsTabsIndexComponent extends Component {
@@ -188,13 +188,23 @@ export default class HdsTabsIndexComponent extends Component {
           );
         }
       } else {
-        assert(
-          `"Hds::Tabs" has tried to set the indicator for an element that doesn't exist (the value ${
+        let message;
+        message +=
+          '"Hds::Tabs" has tried to set the indicator for an element that doesn\'t exist';
+        if (this.tabNodes.length === 0) {
+          message +=
+            ' (the array `this.tabNodes` is empty, there are no tabs, probably already destroyed)';
+        } else {
+          message += ` (the value ${
             this.selectedTabIndex
-          } of \`this.selectedTabIndex\` is out of bound for the array \`this.tabNodes\`, whose index range is [0-${
+          } of \`this.selectedTabIndex\` is out of bound for the array \`this.tabNodes\`, whose index range is [0 - ${
             this.tabNodes.length - 1
-          }])`
-        );
+          }])`;
+        }
+        // https://api.emberjs.com/ember/5.3/classes/@ember%2Fdebug/methods/warn?anchor=warn
+        warn(message, true, {
+          id: 'hds-debug.tabs.setTabIndicator-tabElem-not-available',
+        });
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",