Form::Fieldset, Form::Header, Text::Display, Form:SuperSelect, Form::TextInput: small type fixes (#3008)

shleewhite · shleewhite · web-flow · commit a5a519236714 · 2025-07-16T10:25:28.000-04:00
Co-authored-by: shleewhite &lt;lee.white@hahicorp.com&gt;
diff --git a/.changeset/fresh-horses-wink.md b/.changeset/fresh-horses-wink.md
@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/form/super-select -->
+`Form::SuperSelect` - fix type for the `@resultCountMessage` argument so it can accept a string or a function.
+<!-- END -->
diff --git a/packages/components/src/components/hds/form/fieldset/index.ts b/packages/components/src/components/hds/form/fieldset/index.ts
@@ -21,6 +21,10 @@ import type { HdsFormFieldsetLayouts } from './types.ts';
 import type { HdsYieldSignature } from '../../yield/index.ts';
 import type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';
 
+export const LAYOUT_TYPES: HdsFormFieldsetLayouts[] = Object.values(
+  HdsFormFieldsetLayoutValues
+);
+
 export interface HdsFormFieldsetSignature {
   Args: {
     extraAriaDescribedBy?: string;
diff --git a/packages/components/src/components/hds/form/header/title.ts b/packages/components/src/components/hds/form/header/title.ts
@@ -13,7 +13,7 @@ import type { HdsTextDisplaySignature } from '../../text/display.ts';
 
 export const DEFAULT_SIZE = HdsTextSizeValues.FourHundred;
 export const DEFAULT_TAG = HdsFormHeaderTitleTagValues.Div;
-export const AVAILABLE_TAGS: string[] = Object.values(
+export const TAGS: HdsFormHeaderTitleTags[] = Object.values(
   HdsFormHeaderTitleTagValues
 );
 
@@ -33,10 +33,10 @@ export default class HdsFormHeaderTitle extends Component<HdsFormHeaderTitleSign
     const { tag = DEFAULT_TAG } = this.args;
 
     assert(
-      `@tag for "Hds::Form::Header::Title" must be one of the following: ${AVAILABLE_TAGS.join(
+      `@tag for "Hds::Form::Header::Title" must be one of the following: ${TAGS.join(
         ', '
       )}; received: ${tag}`,
-      AVAILABLE_TAGS.includes(tag)
+      TAGS.includes(tag)
     );
 
     return tag;
diff --git a/packages/components/src/components/hds/form/super-select/multiple/base.hbs b/packages/components/src/components/hds/form/super-select/multiple/base.hbs
@@ -12,7 +12,7 @@
         (component
           "hds/form/super-select/after-options"
           content=@afterOptionsContent
-          resultCountMessage=this.resultCountMessage
+          resultCountMessage=this.resultCountMessageText
           showNoSelectedMessage=this._showNoSelectedMessage
           showOnlySelected=this._showOnlySelected
           showSelected=this.showSelected
@@ -54,7 +54,7 @@
     @preventScroll={{@preventScroll}}
     @registerAPI={{this.setPowerSelectAPI}}
     @renderInPlace={{true}}
-    @resultCountMessage={{@resultCountMessage}}
+    @resultCountMessage={{this.resultCountMessageFunction}}
     @scrollTo={{@scrollTo}}
     @search={{@search}}
     @searchEnabled={{@searchEnabled}}
diff --git a/packages/components/src/components/hds/form/super-select/multiple/base.ts b/packages/components/src/components/hds/form/super-select/multiple/base.ts
@@ -24,10 +24,12 @@ export const HORIZONTAL_POSITION_MAPPING =
   HdsFormSuperSelectHorizontalPositionToPlacementValues;
 
 export interface HdsFormSuperSelectMultipleBaseSignature {
-  Args: PowerSelectSignature['Args'] & {
+  Args: Omit<PowerSelectSignature['Args'], 'resultCountMessage'> & {
     showAfterOptions?: boolean;
     afterOptionsContent?: string;
-    resultCountMessage?: string;
+    resultCountMessage?:
+      | string
+      | PowerSelectSignature['Args']['resultCountMessage'];
     dropdownMaxWidth?: string;
     matchTriggerWidth?: boolean;
     isInvalid?: boolean;
@@ -55,8 +57,20 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
     return this._powerSelectAPI?.resultsCount.toString() || '0';
   }
 
-  get resultCountMessage(): string {
-    return this.args.resultCountMessage || `${this.optionsCount} total`;
+  get resultCountMessageText(): string {
+    if (typeof this.args.resultCountMessage === 'string') {
+      return this.args.resultCountMessage;
+    }
+
+    return `${this.optionsCount} total`;
+  }
+
+  get resultCountMessageFunction(): PowerSelectSignature['Args']['resultCountMessage'] {
+    if (typeof this.args.resultCountMessage === 'function') {
+      return this.args.resultCountMessage;
+    }
+
+    return undefined;
   }
 
   @action calculatePosition(
diff --git a/packages/components/src/components/hds/form/super-select/single/base.hbs b/packages/components/src/components/hds/form/super-select/single/base.hbs
@@ -10,7 +10,9 @@
       (or
         @afterOptionsComponent
         (component
-          "hds/form/super-select/after-options" content=@afterOptionsContent resultCountMessage=this.resultCountMessage
+          "hds/form/super-select/after-options"
+          content=@afterOptionsContent
+          resultCountMessage=this.resultCountMessageText
         )
       )
     }}
@@ -46,7 +48,7 @@
     @preventScroll={{@preventScroll}}
     @registerAPI={{this.setPowerSelectAPI}}
     @renderInPlace={{true}}
-    @resultCountMessage={{@resultCountMessage}}
+    @resultCountMessage={{this.resultCountMessageFunction}}
     @scrollTo={{@scrollTo}}
     @search={{@search}}
     @searchEnabled={{@searchEnabled}}
diff --git a/packages/components/src/components/hds/form/super-select/single/base.ts b/packages/components/src/components/hds/form/super-select/single/base.ts
@@ -24,10 +24,12 @@ export const HORIZONTAL_POSITION_MAPPING =
   HdsFormSuperSelectHorizontalPositionToPlacementValues;
 
 export interface HdsFormSuperSelectSingleBaseSignature {
-  Args: PowerSelectSignature['Args'] & {
+  Args: Omit<PowerSelectSignature['Args'], 'resultCountMessage'> & {
     showAfterOptions?: boolean;
     afterOptionsContent?: string;
-    resultCountMessage?: string;
+    resultCountMessage?:
+      | string
+      | PowerSelectSignature['Args']['resultCountMessage'];
     dropdownMaxWidth?: string;
     matchTriggerWidth?: boolean;
     isInvalid?: boolean;
@@ -44,10 +46,22 @@ export default class HdsFormSuperSelectSingleBase extends Component<HdsFormSuper
     return horizontalPosition as HdsFormSuperSelectHorizontalPositions;
   }
 
-  get resultCountMessage(): string {
+  get resultCountMessageText(): string {
+    if (typeof this.args.resultCountMessage === 'string') {
+      return this.args.resultCountMessage;
+    }
+
     return `${this.powerSelectAPI?.resultsCount || 0} total`;
   }
 
+  get resultCountMessageFunction(): PowerSelectSignature['Args']['resultCountMessage'] {
+    if (typeof this.args.resultCountMessage === 'function') {
+      return this.args.resultCountMessage;
+    }
+
+    return undefined;
+  }
+
   /**
    * This action sets the powerSelectAPI property and optionally calls a registerAPI function.
    *
diff --git a/packages/components/src/components/hds/form/text-input/base.ts b/packages/components/src/components/hds/form/text-input/base.ts
@@ -12,7 +12,9 @@ import type { HdsFormTextInputTypes } from './types.ts';
 // notice: we don't support all the possible HTML types, only a subset
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 export const DEFAULT_TYPE = HdsFormTextInputTypeValues.Text;
-export const TYPES: string[] = Object.values(HdsFormTextInputTypeValues);
+export const TYPES: HdsFormTextInputTypes[] = Object.values(
+  HdsFormTextInputTypeValues
+);
 
 export interface HdsFormTextInputBaseSignature {
   Args: {
diff --git a/packages/components/src/components/hds/text/display.ts b/packages/components/src/components/hds/text/display.ts
@@ -21,9 +21,9 @@ export const DEFAULT_SIZE = HdsTextSizeValues.TwoHundred;
 
 // Filter out reverse mappings from enum
 // https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings
-export const AVAILABLE_SIZES = Object.values(HdsTextSizeValues).filter(
+export const SIZES = Object.values(HdsTextSizeValues).filter(
   (v): boolean => typeof v === 'number'
-);
+) as HdsTextSizes[];
 
 export type HdsTextDisplayWeight = Extract<
   HdsTextWeights,
@@ -95,10 +95,10 @@ export default class HdsTextDisplay extends Component<HdsTextDisplaySignature> {
     }
 
     assert(
-      `@size for "Hds::Text::Display" must be one of the following: ${AVAILABLE_SIZES.join(
+      `@size for "Hds::Text::Display" must be one of the following: ${SIZES.join(
         ', '
       )}; received: ${size}`,
-      AVAILABLE_SIZES.includes(size)
+      SIZES.includes(size)
     );
 
     return size;
diff --git a/showcase/app/routes/page-components/form/layout.js b/showcase/app/routes/page-components/form/layout.js
@@ -5,7 +5,7 @@
 
 import Route from '@ember/routing/route';
 
-import { AVAILABLE_SIZES as DISPLAY_AVAILABLE_SIZES } from '@hashicorp/design-system-components/components/hds/text/display';
+import { SIZES as DISPLAY_AVAILABLE_SIZES } from '@hashicorp/design-system-components/components/hds/text/display';
 import { DEFAULT_SIZE as FORM_HEADER_TITLE_DEFAULT_SIZE } from '@hashicorp/design-system-components/components/hds/form/header/title';
 
 export default class PageComponentsFormRoute extends Route {
diff --git a/showcase/app/routes/page-components/text.js b/showcase/app/routes/page-components/text.js
@@ -6,7 +6,7 @@
 import Route from '@ember/routing/route';
 
 import {
-  AVAILABLE_SIZES as DISPLAY_AVAILABLE_SIZES,
+  SIZES as DISPLAY_AVAILABLE_SIZES,
   AVAILABLE_WEIGHTS_PER_SIZE as DISPLAY_AVAILABLE_WEIGHTS_PER_SIZE,
 } from '@hashicorp/design-system-components/components/hds/text/display';
 import {
