feat(components): wrap contextual components in ensure-safe-component (#2728)

Author: aklkv

.changeset/long-maps-smell.md

@@ -0,0 +1,7 @@
+---
+'@hashicorp/design-system-components': patch
+---
+
+Added `@embroider/util` dependency
+
+Updated `MaskedInput`, `TextInput`, and `Textarea` to use `ensure-safe-component` helper

packages/components/package.json

@@ -46,6 +46,7 @@
     "@ember/test-waiters": "^3.1.0",
     "@embroider/addon-shim": "^1.9.0",
     "@embroider/macros": "^1.16.10",
+    "@embroider/util": "^1.13.2",
     "@floating-ui/dom": "^1.6.12",
     "@hashicorp/design-system-tokens": "^2.3.0",
     "@hashicorp/flight-icons": "^3.9.0",

packages/components/src/components/hds/form/masked-input/field.hbs

@@ -13,7 +13,7 @@
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
   {{#if F.CharacterCount}}
-    {{yield (hash CharacterCount=(component F.CharacterCount value=@value))}}
+    {{yield (hash CharacterCount=(component (ensure-safe-component F.CharacterCount) value=@value))}}
   {{/if}}
   <F.Control>
     <Hds::Form::MaskedInput::Base

packages/components/src/components/hds/form/text-input/field.hbs

@@ -13,7 +13,7 @@
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
   {{#if F.CharacterCount}}
-    {{yield (hash CharacterCount=(component F.CharacterCount value=@value))}}
+    {{yield (hash CharacterCount=(component (ensure-safe-component F.CharacterCount) value=@value))}}
   {{/if}}
   <F.Control>
     <div class="hds-form-text-input__wrapper" {{style width=@width}}>

packages/components/src/components/hds/form/textarea/field.hbs

@@ -13,7 +13,7 @@
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
   {{#if F.CharacterCount}}
-    {{yield (hash CharacterCount=(component F.CharacterCount value=@value))}}
+    {{yield (hash CharacterCount=(component (ensure-safe-component F.CharacterCount) value=@value))}}
   {{/if}}
   <F.Control>
     <Hds::Form::Textarea::Base

packages/components/unpublished-development-types/global.d.ts

@@ -9,6 +9,7 @@ import type EmberStargateRegistry from 'ember-stargate/template-registry';
 import type EmberStyleModifierRegistry from 'ember-style-modifier/template-registry';
 import type EmberTruthRegistry from 'ember-truth-helpers/template-registry';
 import type PowerSelectRegistry from 'ember-power-select/template-registry';
+import type { EmbroiderUtilRegistry } from '@embroider/util';
 // eslint-disable-next-line ember/no-at-ember-render-modifiers
 import type RenderModifiersRegistry from '@ember/render-modifiers/template-registry';
 
@@ -20,7 +21,8 @@ declare module '@glint/environment-ember-loose/registry' {
       EmberStyleModifierRegistry,
       EmberTruthRegistry,
       PowerSelectRegistry,
-      RenderModifiersRegistry /*, other addon registries */ {
+      RenderModifiersRegistry,
+      EmbroiderUtilRegistry /*, other addon registries */ {
     // local entries
     LinkToExternal: typeof LinkTo;
     // we have to use `ember-stargate` version `0.4.3` because version `0.5.0` causes a break in the tests for `ember-lts-3.28`