Remove ember-render-modifiers

.changeset/bitter-baboons-tease.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/flyout -->
+`Flyout` - Removed deprecated `HdsFlyoutHeader`, `HdsFlyoutBody`, `HdsFlyoutDescription`, and `HdsFlyoutFooter` subcomponents.
+<!-- END -->
+
+<!-- START components/modal -->
+`Modal` - Removed deprecated `HdsModalHeader`, `HdsModalBody`, and `HdsModalFooter` subcomponents.
+<!-- END -->

.changeset/cold-worlds-notice.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/dropdown -->
+
+`Dropdown` - Removed the deprecated `@text` argument from the `HdsDropdownListItemInteractive` component.
+
+To migrate run the codemod `v4/dropdown-list-item-interactive` (see [readme file](https://github.com/hashicorp/design-system/tree/main/packages/codemods/transforms/v4/dropdown-list-item-interactive))
+
+<!-- END -->

.changeset/fluffy-places-ask.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed support for Ember 3.28. New minimum support target is Ember 4.12.

.changeset/full-showers-kiss.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+- Removed `sass` and `ember-cli-sass` dependencies. Consumers using `sass` in their projects should make sure it's added as a direct dependency to their project.

.changeset/hot-owls-rescue.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/table/advanced-table -->
+`AdvancedTable` - Removed the `@isVisuallyHidden` argument from `HdsAdvancedTableTh` component. This setting is supported via setting `isVisuallyHidden` in the corresponding `@columns` item's configuration.
+<!-- END -->

.changeset/legal-swans-occur.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed the deprecated `MenuPrimitive` component

.changeset/spicy-ads-roll.md

@@ -0,0 +1,10 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/side-nav -->
+`SideNav` - Removed deprecated features
+- Removed the `@ariaLabel` argument
+- Removed the `HdsSideNavHeaderIconButton` component
+- Updated the deprecation removal version from `5.0.0` to `6.0.0`
+<!-- END -->

.changeset/young-meals-knock.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed support for deprecated `ember-flight-icons` `lazyEmbed` config

.github/workflows/ci-components.yml

@@ -7,7 +7,7 @@ on:
   pull_request: {}
 
 env:
-  NODE_VERSION: '22.x'
+  NODE_VERSION: "22.x"
 
 concurrency:
   group: ci-components-${{ github.head_ref || github.ref }}
@@ -28,7 +28,7 @@ jobs:
         run: ./.github/scripts/filter_changed_files.sh "packages/components" "packages/flight-icons/catalog.json" "showcase" ".github/workflows/ci-components.yml" "packages/tokens"
 
   test:
-    name: 'Tests'
+    name: "Tests"
     runs-on: ubuntu-latest
     needs: [conditional-skip]
     if: needs.conditional-skip.outputs.trigger-ci == 'true'
@@ -63,13 +63,12 @@ jobs:
   try-scenarios:
     name: ${{ matrix.try-scenario }}
     runs-on: ubuntu-latest
-    needs: 'test'
+    needs: "test"
 
     strategy:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-3.28
           - ember-lts-4.12
           # - ember-release
           - ember-beta

README.md

@@ -1,3 +1,5 @@
+<!-- TEMPORARY ADDITION SO BRANCH DIVERGES FROM MAIN -->
+
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://github.com/hashicorp/design-system/assets/788096/5d6969b7-f8b4-4ad3-9ece-b16b4527522e" width="300">
   <source media="(prefers-color-scheme: light)" srcset="https://github.com/hashicorp/design-system/assets/788096/8e278094-427f-40cc-912f-9ccd3a0ff879" width="300">

packages/components/README.md

@@ -8,9 +8,9 @@ A package containing the components for the Helios Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.28 or above
-* Ember CLI v3.28 or above
-* Node.js v16 or above
+* Ember.js v4.12 or above
+* Ember CLI v4.12 or above
+* Node.js v18 or above
 
 Installation
 ------------------------------------------------------------------------------

packages/components/addon-main.cjs

@@ -9,11 +9,8 @@ const flightIconSprite = require('@hashicorp/flight-icons/svg-sprite/svg-sprite-
 module.exports = {
   ...addonV1Shim(__dirname),
   contentFor(type, config) {
-    const legacyLazyEmbed = config?.emberFlightIcons?.lazyEmbed;
-
     if (
       !config.flightIconsSpriteLazyEmbed &&
-      !legacyLazyEmbed &&
       !config.__flightIconsSpriteLoaded &&
       type === 'body-footer'
     ) {

packages/components/package.json

@@ -59,7 +59,6 @@
     "codemirror-lang-hcl": "^0.0.0-beta.2",
     "decorator-transforms": "^2.3.0",
     "ember-a11y-refocus": "^4.1.4",
-    "ember-cli-sass": "^11.0.1",
     "ember-concurrency": "^4.0.4",
     "ember-element-helper": "^0.8.6",
     "ember-focus-trap": "^1.1.1",
@@ -71,10 +70,9 @@
     "ember-truth-helpers": "^4.0.3",
     "luxon": "^3.4.2",
     "prismjs": "^1.30.0",
-    "sass": "^1.83.0",
-    "tracked-built-ins": "^4.0.0",
     "tabbable": "^6.2.0",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "tracked-built-ins": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -113,6 +111,7 @@
     "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.89.2",
     "stylelint": "^16.17.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^14.0.0",
@@ -236,10 +235,6 @@
       "./components/hds/dropdown/toggle/button.js": "./dist/_app_/components/hds/dropdown/toggle/button.js",
       "./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
       "./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
-      "./components/hds/flyout/body.js": "./dist/_app_/components/hds/flyout/body.js",
-      "./components/hds/flyout/description.js": "./dist/_app_/components/hds/flyout/description.js",
-      "./components/hds/flyout/footer.js": "./dist/_app_/components/hds/flyout/footer.js",
-      "./components/hds/flyout/header.js": "./dist/_app_/components/hds/flyout/header.js",
       "./components/hds/flyout.js": "./dist/_app_/components/hds/flyout.js",
       "./components/hds/form/character-count.js": "./dist/_app_/components/hds/form/character-count.js",
       "./components/hds/form/checkbox/base.js": "./dist/_app_/components/hds/form/checkbox/base.js",
@@ -305,10 +300,6 @@
       "./components/hds/layout/grid/item.js": "./dist/_app_/components/hds/layout/grid/item.js",
       "./components/hds/link/inline.js": "./dist/_app_/components/hds/link/inline.js",
       "./components/hds/link/standalone.js": "./dist/_app_/components/hds/link/standalone.js",
-      "./components/hds/menu-primitive.js": "./dist/_app_/components/hds/menu-primitive.js",
-      "./components/hds/modal/body.js": "./dist/_app_/components/hds/modal/body.js",
-      "./components/hds/modal/footer.js": "./dist/_app_/components/hds/modal/footer.js",
-      "./components/hds/modal/header.js": "./dist/_app_/components/hds/modal/header.js",
       "./components/hds/modal.js": "./dist/_app_/components/hds/modal.js",
       "./components/hds/page-header/actions.js": "./dist/_app_/components/hds/page-header/actions.js",
       "./components/hds/page-header/badges.js": "./dist/_app_/components/hds/page-header/badges.js",
@@ -333,7 +324,6 @@
       "./components/hds/separator.js": "./dist/_app_/components/hds/separator.js",
       "./components/hds/side-nav/base.js": "./dist/_app_/components/hds/side-nav/base.js",
       "./components/hds/side-nav/header/home-link.js": "./dist/_app_/components/hds/side-nav/header/home-link.js",
-      "./components/hds/side-nav/header/icon-button.js": "./dist/_app_/components/hds/side-nav/header/icon-button.js",
       "./components/hds/side-nav/header.js": "./dist/_app_/components/hds/side-nav/header.js",
       "./components/hds/side-nav.js": "./dist/_app_/components/hds/side-nav.js",
       "./components/hds/side-nav/list/back-link.js": "./dist/_app_/components/hds/side-nav/list/back-link.js",
@@ -392,6 +382,8 @@
       "./modifiers/hds-code-editor/palettes/hds-dark-palette.js": "./dist/_app_/modifiers/hds-code-editor/palettes/hds-dark-palette.js",
       "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
+      "./modifiers/hds-lifecycle.js": "./dist/_app_/modifiers/hds-lifecycle.js",
+      "./modifiers/hds-register-element.js": "./dist/_app_/modifiers/hds-register-element.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",

packages/components/src/components.ts

@@ -279,7 +279,6 @@ export { default as HdsSideNav } from './components/hds/side-nav/index.ts';
 export { default as HdsSideNavBase } from './components/hds/side-nav/base.ts';
 export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.ts';
 export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.ts';
-export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.ts';
 export { default as HdsSideNavList } from './components/hds/side-nav/list/index.ts';
 export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.ts';
 export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.ts';
@@ -390,8 +389,5 @@ export { default as HdsDismissButton } from './components/hds/dismiss-button/ind
 // Interactive
 export { default as HdsInteractive } from './components/hds/interactive/index.ts';
 
-// MenuPrimitive
-export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.ts';
-
 // PopoverPrimitive
 export { default as HdsPopoverPrimitive } from './components/hds/popover-primitive/index.ts';

packages/components/src/components/hds/advanced-table/index.hbs

@@ -6,8 +6,8 @@
 <div
   class="hds-advanced-table__container
     {{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
-  {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}
-  {{did-update this.updateTableModelColumnOrder @columnOrder}}
+  {{this._syncTableData columns=@columns model=@model sortBy=@sortBy sortOrder=@sortOrder}}
+  {{this._syncColumnOrder columnOrder=@columnOrder}}
   ...attributes
 >
   {{! Caption }}
@@ -84,7 +84,6 @@
               @isExpandable={{column.isExpandable}}
               @isStickyColumn={{this._isStickyColumn column}}
               @isStickyColumnPinned={{this.isStickyColumnPinned}}
-              @isVisuallyHidden={{column.isVisuallyHidden}}
               @tableHeight={{this._tableHeight}}
               @tooltip={{column.tooltip}}
               @onClickToggle={{this._tableModel.toggleAll}}

packages/components/src/components/hds/advanced-table/index.ts

@@ -10,6 +10,7 @@ import { tracked } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
+import { schedule } from '@ember/runloop';
 import HdsAdvancedTableTableModel from './models/table.ts';
 
 import type Owner from '@ember/owner';
@@ -196,6 +197,25 @@ export interface HdsAdvancedTableSignature {
   Element: HTMLDivElement;
 }
 
+interface HdsAdvancedTableSyncTableDataModifierSignature {
+  Element: HdsAdvancedTableSignature['Element'];
+  Args: {
+    Named: Pick<
+      HdsAdvancedTableSignature['Args'],
+      'columns' | 'model' | 'sortBy' | 'sortOrder'
+    >;
+  };
+}
+
+interface HdsAdvancedTableSyncColumnOrderModifierSignature {
+  Element: HdsAdvancedTableSignature['Element'];
+  Args: {
+    Named: {
+      columnOrder?: HdsAdvancedTableSignature['Args']['columnOrder'];
+    };
+  };
+}
+
 export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignature> {
   @service hdsIntl!: HdsIntlService;
 
@@ -426,6 +446,50 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     return classes.join(' ');
   }
 
+  private _syncTableData = (() => {
+    let isFirstRun = true;
+
+    return modifier<HdsAdvancedTableSyncTableDataModifierSignature>(
+      (_element, _positional, { columns, model, sortBy, sortOrder }) => {
+        // eslint-disable-next-line ember/no-runloop
+        schedule('afterRender', (): void => {
+          if (isFirstRun) {
+            isFirstRun = false;
+            return;
+          }
+          this._tableModel.setupData({
+            columns,
+            model,
+            sortBy,
+            sortOrder,
+          });
+        });
+      }
+    );
+  })();
+
+  private _syncColumnOrder = (() => {
+    let isFirstRun = true;
+
+    return modifier<HdsAdvancedTableSyncColumnOrderModifierSignature>(
+      (_element, _positional, { columnOrder }) => {
+        // eslint-disable-next-line ember/no-runloop
+        schedule('afterRender', (): void => {
+          if (isFirstRun) {
+            isFirstRun = false;
+            return;
+          }
+
+          if (columnOrder === undefined) {
+            return;
+          }
+
+          this._tableModel.columnOrder = columnOrder;
+        });
+      }
+    );
+  })();
+
   private _registerGridElement = modifier((element: HTMLDivElement) => {
     this._tableModel.gridElement = element;
   });
@@ -613,27 +677,6 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     });
   }
 
-  @action
-  setupTableModelData(): void {
-    const { columns, model, sortBy, sortOrder } = this.args;
-
-    this._tableModel.setupData({
-      columns,
-      model,
-      sortBy,
-      sortOrder,
-    });
-  }
-
-  @action
-  updateTableModelColumnOrder(): void {
-    if (this.args.columnOrder === undefined) {
-      return;
-    }
-
-    this._tableModel.columnOrder = this.args.columnOrder;
-  }
-
   @action
   onSelectionAllChange(): void {
     this._selectableRows.forEach((row) => {

packages/components/src/components/hds/advanced-table/th.ts

@@ -44,7 +44,6 @@ export interface HdsAdvancedTableThSignature {
     isExpandable?: boolean;
     isStickyColumn?: boolean;
     isStickyColumnPinned?: boolean;
-    isVisuallyHidden?: boolean;
     newLabel?: string;
     parentId?: string;
     rowspan?: number;

packages/components/src/components/hds/alert/description.hbs

@@ -2,4 +2,8 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-alert__description hds-font-weight-regular hds-foreground-primary" ...attributes>{{yield}}</div>
+<div
+  class="hds-alert__description hds-font-weight-regular hds-foreground-primary"
+  {{this._registerElement}}
+  ...attributes
+>{{yield}}</div>

packages/components/src/components/hds/alert/description.ts

@@ -3,16 +3,23 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import TemplateOnlyComponent from '@ember/component/template-only';
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 
 export interface HdsAlertDescriptionSignature {
+  Args: {
+    onInsert: (element: HdsAlertDescriptionSignature['Element']) => void;
+  };
   Blocks: {
     default: [];
   };
   Element: HTMLDivElement;
 }
 
-const HdsAlertDescription =
-  TemplateOnlyComponent<HdsAlertDescriptionSignature>();
-
-export default HdsAlertDescription;
+export default class HdsAlertDescription extends Component<HdsAlertDescriptionSignature> {
+  private _registerElement = modifier(
+    (element: HdsAlertDescriptionSignature['Element']) => {
+      this.args.onInsert(element);
+    }
+  );
+}