@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.7

package/tools/storybook-argtypes/services/arg-types-row-builder.d.ts

@@ -0,0 +1,43 @@
+/**
+ * ArgTypesRowBuilder - Build individual Storybook argType rows.
+ *
+ * Constructs complete argType entries with type information, descriptions,
+ * and control metadata from TypeScript properties and type declarations.
+ */
+import type { GeneratedArgType } from "../types";
+/**
+ * Builds Storybook argType rows.
+ * Creates complete argType entries with metadata.
+ *
+ * Usage:
+ * ```typescript
+ * const builder = new ArgTypesRowBuilder();
+ * const row = builder.buildArgTypeRow({
+ *   key: 'Button.color',
+ *   name: 'color',
+ *   category: 'Styling',
+ *   typeSummary: 'string | number'
+ * });
+ * ```
+ */
+export declare class ArgTypesRowBuilder {
+    /**
+     * Build a complete argType row.
+     * Combines property information with metadata to create a Storybook argType entry.
+     *
+     * @param opts Options object containing name, property, description, etc.
+     * @returns Generated argType row
+     */
+    buildArgTypeRow(opts: {
+        key: string;
+        name: string;
+        category: string;
+        tabGroup?: string;
+        typeSummary?: string;
+        typeSummaryParts?: string[];
+        defaultValue?: string;
+        deprecated?: string | boolean;
+        description?: string;
+        required?: boolean;
+    }): GeneratedArgType;
+}

package/tools/storybook-argtypes/services/file-path-resolver.d.ts

@@ -0,0 +1,118 @@
+/**
+ * FilePathResolver - Resolve file paths and import paths for components and types.
+ *
+ * Handles mapping story files to their corresponding type files
+ * and resolving import paths for components.
+ */
+import type { IFileSystemAdapter } from "../adapters/file-system-adapter";
+/**
+ * Resolves file paths for type definitions and story imports.
+ * Maps story files to component types and resolves import paths.
+ *
+ * Usage:
+ * ```typescript
+ * const resolver = new FilePathResolver();
+ * const typesFile = resolver.getTypesFileFromStoryDirectory('stories/button/button.stories.ts');
+ * ```
+ */
+export declare class FilePathResolver {
+    private readonly fileSystemAdapter;
+    /**
+     * Create a new FilePathResolver.
+     *
+     * @param fileSystemAdapter Adapter for filesystem operations (optional, uses default)
+     */
+    constructor(fileSystemAdapter?: IFileSystemAdapter);
+    /**
+     * Extract the story title from story file text.
+     *
+     * @param fileText Content of the story file
+     * @returns Story title or undefined if not found
+     */
+    getStoryTitle(fileText: string): string | undefined;
+    /**
+     * Extract the component reference from story file text.
+     * Matches `component: Form.CustomField` style declarations.
+     *
+     * @param fileText Content of the story file
+     * @returns Object with rootIdentifier and memberPath, or undefined if not found
+     */
+    getComponentReference(fileText: string): {
+        rootIdentifier: string;
+        memberPath: string[];
+    } | undefined;
+    /**
+     * Get the import path for a referenced identifier in story file text.
+     *
+     * @param fileText Story file content
+     * @param identifier Component identifier to find
+     * @returns Import path or undefined if not found
+     */
+    getImportPathForIdentifier(fileText: string, identifier: string): string | undefined;
+    toKebabCase(name: string): string;
+    private buildResolutionCandidates;
+    /**
+     * Resolve an import path to an absolute file path.
+     * Handles `src/`-prefixed paths and relative paths.
+     *
+     * @param storyFilePath Path to the story file (for relative resolution)
+     * @param importPath Import path to resolve
+     * @returns Absolute file path or undefined if not found
+     */
+    resolveImportPath(storyFilePath: string, importPath: string): string | undefined;
+    /**
+     * Get component directory from a component source path.
+     *
+     * @param componentSourcePath Path to component source file
+     * @returns Component directory path
+     */
+    getComponentDirectory(componentSourcePath: string): string;
+    /**
+     * Get the types.ts file for a component directory.
+     *
+     * @param componentDirectory Component directory path
+     * @returns Path to types.ts or undefined if not found
+     */
+    getTypesFileForComponentDirectory(componentDirectory: string): string | undefined;
+    /**
+     * Get the types file for a nested form component (e.g., Form.CustomField).
+     * Maps `form` directory + member path to `form-{leaf-member}/types.ts`.
+     *
+     * @param componentDirectory Component directory (must be the `form` directory)
+     * @param memberPath Member access path (e.g., ["CustomField"])
+     * @returns Path to the types file or undefined
+     */
+    getNestedFormTypesFile(componentDirectory: string, memberPath: string[]): string | undefined;
+    /**
+     * Get the types file inferred from a story file's location.
+     * Resolves `stories/{dir}/{story-name}.stories.ts` to `src/{dir}/types.ts`
+     * with subdirectory-aware fallback logic.
+     *
+     * @param storyFilePath Path to the story file
+     * @returns Path to the inferred types file or undefined
+     */
+    getTypesFileFromStoryDirectory(storyFilePath: string): string | undefined;
+    /**
+     * Get the output file path for a types source file.
+     * e.g. `src/button/types.ts` → `.storybook/generated/button.argtypes.generated.ts`
+     *
+     * @param sourceFilePath Absolute path to the types source file
+     * @returns Absolute path to the generated output file
+     */
+    getOutputFile(sourceFilePath: string): string;
+    /**
+     * Get the export name for the component's argTypes object.
+     * e.g. "form-custom-field" → "formCustomFieldExtraArgTypes"
+     *
+     * @param sourceFilePath Absolute path to the types source file
+     * @returns Export identifier name
+     */
+    getExportName(sourceFilePath: string): string;
+    /**
+     * Get the relative import path for a generated argTypes file.
+     *
+     * @param outputFile Absolute path to the generated output file
+     * @returns Relative import path (suitable for use in import statements)
+     */
+    getArgTypesImportPath(outputFile: string): string;
+}

package/tools/storybook-argtypes/services/index.d.ts

@@ -0,0 +1,6 @@
+export { ArgTypesRowBuilder } from "./arg-types-row-builder";
+export { FilePathResolver } from "./file-path-resolver";
+export { JsDocMetadataExtractor } from "./jsdoc-metadata-extractor";
+export { StoryRegistryGenerator } from "./story-registry-generator";
+export { TypeDependencyResolver } from "./type-dependency-resolver";
+export { TypeFormattingService } from "./type-formatting-service";

package/tools/storybook-argtypes/services/jsdoc-metadata-extractor.d.ts

@@ -0,0 +1,33 @@
+/**
+ * JsDocMetadataExtractor - Extract JSDoc and comment metadata from TypeScript nodes.
+ *
+ * Parses JSDoc tags and comments to extract documentation metadata
+ * like descriptions, examples, deprecation notices, and custom fields.
+ */
+import { type IndexSignatureDeclaration, type PropertySignature, type SourceFile } from "ts-morph";
+import type { JsDocMeta, StorybookTaggedDeclarationNode } from "../types";
+/** Nodes that can carry JSDoc in storybook generation. */
+type JsDocNode = IndexSignatureDeclaration | PropertySignature | StorybookTaggedDeclarationNode;
+/**
+ * Extracts JSDoc metadata from TypeScript declarations.
+ * Parses "@deprecated", "@default", "@remarks", "@example", and "@storybookSection" tags.
+ *
+ * Usage:
+ * ```typescript
+ * const extractor = new JsDocMetadataExtractor();
+ * const meta = extractor.getJsDocMeta(declaration);
+ * ```
+ */
+export declare class JsDocMetadataExtractor {
+    private readonly parser;
+    /**
+     * Check if a source file should be skipped from argTypes generation.
+     * Only top-of-file line comments are considered.
+     */
+    isSkippedSourceFile(sourceFile: SourceFile): boolean;
+    hasSkipTag(node: StorybookTaggedDeclarationNode): boolean;
+    getJsDocMeta(node: JsDocNode): JsDocMeta;
+    mergeJsDocMeta(metas: JsDocMeta[]): JsDocMeta;
+    toStorybookDescription(meta: JsDocMeta): string | undefined;
+}
+export {};

package/tools/storybook-argtypes/services/story-registry-generator.d.ts

@@ -0,0 +1,27 @@
+/**
+ * StoryRegistryGenerator - Generate story-title to argTypes registry content.
+ */
+import { type SourceFile } from "ts-morph";
+import type { IFileSystemAdapter } from "../adapters/file-system-adapter";
+import { FilePathResolver } from "./file-path-resolver";
+/**
+ * Generates registry file content from story source files.
+ */
+export declare class StoryRegistryGenerator {
+    private readonly filePathResolver;
+    /**
+     * Create a new StoryRegistryGenerator.
+     *
+     * @param filePathResolver File path resolver service (optional, uses default)
+     * @param fileSystemAdapter Filesystem adapter (optional, uses default)
+     */
+    constructor(filePathResolver?: FilePathResolver, fileSystemAdapter?: IFileSystemAdapter);
+    /**
+     * Generate complete registry file content.
+     * Returns the full content for the storybook-argtypes.generated.ts file.
+     *
+     * @returns Complete file content
+     */
+    generateRegistryFileContent(storyFiles: SourceFile[], shouldIncludeTypesFile: (typesFilePath: string) => boolean): string;
+    private renderRegistryFileContent;
+}

package/tools/storybook-argtypes/services/type-dependency-resolver.d.ts

@@ -0,0 +1,46 @@
+/**
+ * TypeDependencyResolver - Resolve and cache type dependencies across source files.
+ *
+ * Owns type-level dependency concerns: local type discovery, imported type source
+ * resolution, and safe property-symbol extraction from declarations.
+ */
+import { type InterfaceDeclaration, type PropertySignature, type SourceFile, type Symbol as TsMorphSymbol, type TypeAliasDeclaration } from "ts-morph";
+/**
+ * Resolves and caches type dependency operations used by argTypes generation.
+ */
+export declare class TypeDependencyResolver {
+    /** Cache of locally declared interface/type-alias names keyed by source file path. */
+    private readonly localTypeNamesCache;
+    /** Cache of wrapped imported type usage grouped by source file path and type name. */
+    private readonly wrappedTypeNamesCache;
+    /**
+     * Returns local interface/type-alias names for a file and memoizes the result.
+     */
+    getLocalTypeNames(sourceFile: SourceFile): Set<string>;
+    /**
+     * Returns the first property-signature declaration for a symbol, if present.
+     */
+    getPropertyDeclaration(symbol: TsMorphSymbol): PropertySignature | undefined;
+    /**
+     * Treats symbols from node_modules and custom-types as external declarations.
+     */
+    isExternalDeclaration(symbol: TsMorphSymbol): boolean;
+    /**
+     * Resolves declaration properties and filters out external symbols.
+     */
+    getResolvedProperties(declaration: InterfaceDeclaration | TypeAliasDeclaration): TsMorphSymbol[];
+    /**
+     * Resolves the source file backing an imported type name.
+     *
+     * Resolution order:
+     * 1. Follow alias symbol declarations for interface/type-alias declarations.
+     * 2. Fall back to module specifier source file when declaration lookup is not available.
+     */
+    resolveImportedTypeSourceFile(sourceFile: SourceFile, importedTypeName: string): SourceFile | undefined;
+    /**
+     * Gets cached wrapped type names or computes and stores them lazily.
+     */
+    getOrCreateWrappedTypeNames(sourceFile: SourceFile, factory: () => Map<string, Set<string | undefined>>): Map<string, Set<string | undefined>>;
+    /** Clear all in-memory caches. */
+    clear(): void;
+}

package/tools/storybook-argtypes/services/type-formatting-service.d.ts

@@ -0,0 +1,27 @@
+/**
+ * TypeFormattingService - Transform and format TypeScript type text for Storybook.
+ *
+ * Handles type text cleaning, union simplification, and formatting
+ * to make types more readable in Storybook's argTypes table.
+ */
+import { type IndexSignatureDeclaration, type Node, type PropertySignature, type Type } from "ts-morph";
+/**
+ * Formats TypeScript type text for Storybook argTypes.
+ * Provides type cleaning, union handling, and description generation.
+ *
+ * Usage:
+ * ```typescript
+ * const formatter = new TypeFormattingService();
+ * const cleaned = formatter.cleanType('string | undefined');
+ * ```
+ */
+export declare class TypeFormattingService {
+    cleanType(type: string): string;
+    formatUnionSummary(typeText: string): string;
+    isSimpleLiteralUnion(type: Type): boolean;
+    getExpandedLiteralUnionText(type: Type, contextNode: Node): string | undefined;
+    getSummaryTypeText(type: Type, contextNode: Node, fallbackText?: string): string;
+    getUnionMemberTexts(type: Type, contextNode: Node): string[] | undefined;
+    getPropertyTypeText(property: PropertySignature): string;
+    getIndexSignatureTypeText(indexSignature: IndexSignatureDeclaration): string;
+}

package/tools/storybook-argtypes/types.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Type definitions for Storybook argTypes generation system.
+ * Centralizes all interfaces and types for better discoverability and reusability.
+ */
+import type { IndexSignatureDeclaration, InterfaceDeclaration, PropertySignature, Symbol as TsMorphSymbol, TypeAliasDeclaration, VariableStatement } from "ts-morph";
+/**
+ * Parsed JSDoc metadata extracted from a TypeScript declaration.
+ * Supports these tags: "@deprecated", "@default", "@remarks", "@example", "@storybookSection"
+ */
+export interface JsDocMeta {
+    defaultValue?: string;
+    deprecated?: string | boolean;
+    description?: string;
+    examples?: string[];
+    remarks?: string;
+    tabGroups?: string[];
+}
+/**
+ * Metadata about a story file that determines which argTypes it uses.
+ */
+export interface StoryMetadata {
+    componentReference?: ComponentReference;
+    filePath: string;
+    title: string;
+    typesFilePath?: string;
+}
+/**
+ * Parsed component reference from story's component property.
+ * Examples:
+ * - component: Form.CustomField → { rootIdentifier: "Form", memberPath: ["CustomField"] }
+ * - component: Button → { rootIdentifier: "Button", memberPath: [] }
+ */
+export interface ComponentReference {
+    memberPath: string[];
+    rootIdentifier: string;
+}
+/**
+ * Single argType row for display in Storybook's props table.
+ * Maps to Storybook's internal ArgType structure.
+ */
+export interface GeneratedArgType {
+    key: string;
+    value: {
+        control: false;
+        deprecated?: string | boolean;
+        description?: string;
+        name: string;
+        type?: {
+            required?: boolean;
+        };
+        table: {
+            category: string;
+            defaultValue?: {
+                summary: string;
+            };
+            tabGroup?: string;
+            type: {
+                summary?: string;
+                summaryParts?: string[];
+            };
+        };
+    };
+}
+/**
+ * TypeScript declaration nodes that can have JSDoc comments.
+ * Union of declaration kinds that support documentation in Storybook.
+ */
+export type StorybookTaggedDeclarationNode = InterfaceDeclaration | TypeAliasDeclaration | VariableStatement;
+/**
+ * TypeScript symbol that can be resolved to a type.
+ * Alias for ts-morph's Symbol type for clearer intent.
+ */
+export type ResolvedSymbol = TsMorphSymbol;
+/**
+ * Supported JSDoc declaration node types for metadata extraction.
+ */
+export type JsDocSupportedNode = IndexSignatureDeclaration | InterfaceDeclaration | PropertySignature | VariableStatement | TypeAliasDeclaration;
+/**
+ * Options for configuring the ArgTypes generation.
+ */
+export interface ArgTypesGenerationConfig {
+    sourceFileGlobs: readonly string[];
+    storybookArgTypesFile: string;
+    storyFileGlob: string;
+    watchRoots: readonly string[];
+}
+/**
+ * Result of resolving a types file for a story.
+ * Includes both the file path and metadata about whether it was nested.
+ */
+export interface ResolvedTypesFile {
+    exportName: string;
+    filePath: string;
+    isNested: boolean;
+}
+/**
+ * File statistics result from FileSystemAdapter.
+ */
+export interface FileStat {
+    isDirectory(): boolean;
+    isFile(): boolean;
+}

package/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/typography/index.ts"],"sourcesContent":["import {\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXL,\n    HeadingXS,\n    HeadingXXL,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n} from \"./typography\";\n\n/**\n * A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n *\n * Use `Typography` sub-components to render consistently sized and weighted\n * text.\n *\n * Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n *\n * @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n */\nexport const Typography = {\n    /** Renders the largest heading (`h1`). */\n    HeadingXXL,\n    /** Renders an extra-large heading (`h2`). */\n    HeadingXL,\n    /** Renders a large heading (`h3`). */\n    HeadingLG,\n    /** Renders a medium heading (`h4`). */\n    HeadingMD,\n    /** Renders a small heading (`h5`). */\n    HeadingSM,\n    /** Renders the smallest heading (`h6`). */\n    HeadingXS,\n    /** Renders baseline body text (`p`). */\n    BodyBL,\n    /** Renders medium body text (`p`). */\n    BodyMD,\n    /** Renders small body text (`p`). */\n    BodySM,\n    /** Renders extra-small body text (`p`). */\n    BodyXS,\n    /** Renders a baseline-size hyperlink (`a`). */\n    LinkBL,\n    /** Renders a medium-size hyperlink (`a`). */\n    LinkMD,\n    /** Renders a small-size hyperlink (`a`). */\n    LinkSM,\n    /** Renders an extra-small hyperlink (`a`). */\n    LinkXS,\n};\n\nexport * from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"wNAgCO,MAAMA,EAAa,CAEtBC,aAEAC,YAEAC,YAEAC,YAEAC,YAEAC,YAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC"}
+{"version":3,"file":"index.js","sources":["../../src/typography/index.ts"],"sourcesContent":["import {\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXL,\n    HeadingXS,\n    HeadingXXL,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n} from \"./typography\";\n\n// @catalog\n/**\n * A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n *\n * Use `Typography` sub-components to render consistently sized and weighted\n * text.\n *\n * Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n *\n * @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n */\nexport const Typography = {\n    /** Renders the largest heading (`h1`). */\n    HeadingXXL,\n    /** Renders an extra-large heading (`h2`). */\n    HeadingXL,\n    /** Renders a large heading (`h3`). */\n    HeadingLG,\n    /** Renders a medium heading (`h4`). */\n    HeadingMD,\n    /** Renders a small heading (`h5`). */\n    HeadingSM,\n    /** Renders the smallest heading (`h6`). */\n    HeadingXS,\n    /** Renders baseline body text (`p`). */\n    BodyBL,\n    /** Renders medium body text (`p`). */\n    BodyMD,\n    /** Renders small body text (`p`). */\n    BodySM,\n    /** Renders extra-small body text (`p`). */\n    BodyXS,\n    /** Renders a baseline-size hyperlink (`a`). */\n    LinkBL,\n    /** Renders a medium-size hyperlink (`a`). */\n    LinkMD,\n    /** Renders a small-size hyperlink (`a`). */\n    LinkSM,\n    /** Renders an extra-small hyperlink (`a`). */\n    LinkXS,\n};\n\nexport * from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"wNAiCO,MAAMA,EAAa,CAEtBC,aAEAC,YAEAC,YAEAC,YAEAC,YAEAC,YAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC"}

package/uneditable-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\n\n/**\n * A read-only summary section for displaying labeled field values.\n *\n * Use `UneditableSection` to present a group of non-editable field–value pairs\n * in a responsive grid layout\n *\n * Sub-components:\n * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.\n * - `UneditableSection.ItemSection` — a standalone grid list for composing items.\n */\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n    /**\n     * A standalone grid list for rendering `UneditableSection.Item` elements\n     * outside the full section wrapper.\n     */\n    ItemSection: UneditableItemSection,\n    /** A standalone labeled read-only field with optional masking support. */\n    Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0LAgBaA,EAAoBC,OAAOC,OAAOC,EAAuB,CAKlEC,YAAaC,EAEbC,KAAMC"}
+{"version":3,"file":"index.js","sources":["../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\n\n// @catalog\n/**\n * A read-only summary section for displaying labeled field values.\n *\n * Use `UneditableSection` to present a group of non-editable field–value pairs\n * in a responsive grid layout\n *\n * Sub-components:\n * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.\n * - `UneditableSection.ItemSection` — a standalone grid list for composing items.\n */\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n    /**\n     * A standalone grid list for rendering `UneditableSection.Item` elements\n     * outside the full section wrapper.\n     */\n    ItemSection: UneditableItemSection,\n    /** A standalone labeled read-only field with optional masking support. */\n    Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0LAiBaA,EAAoBC,OAAOC,OAAOC,EAAuB,CAKlEC,YAAaC,EAEbC,KAAMC"}

package/uneditable-section/section-item.js

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as e,Fragment as s}from"react/jsx-runtime";import{ExclamationTriangleIcon as i}from"@lifesg/react-icons/exclamation-triangle";import{EyeIcon as r}from"@lifesg/react-icons/eye";import{EyeSlashIcon as t}from"@lifesg/react-icons/eye-slash";import{useState as n,useEffect as l}from"react";import{Alert as m}from"../alert/alert.js";import{FormLabel as o}from"../form/form-label.js";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{ComponentLoadingSpinner as d}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Typography as p}from"../typography/index.js";import{StringHelper as k}from"../util/string-helper.js";import{container as f,alert as h,clickable as g,iconContainer as u,spinner as y,loadingLabel as b,errorIcon as j,errorLabel as N,tryAgainLabel as x}from"./section-item.styles.js";const R=({label:R,value:T,displayWidth:v="full",maskState:w,maskLoadingState:B,maskChar:C="•",maskRange:L,unmaskRange:M,maskRegex:D,disableMaskUnmask:S,alert:U,maskTransformer:W,onMask:$,onUnmask:z,onTryAgain:A,fullWidth:E})=>{const[H,O]=n(w);l((()=>{O(w)}),[w]);const V=()=>{switch("fail"===B&&A&&A(),H){case"masked":z&&z(),O("unmasked");break;case"unmasked":$&&$(),O("masked")}},q=()=>"string"!=typeof T?T:"masked"===H?k.maskValue(T,{maskChar:C,maskRange:L,unmaskRange:M,maskRegex:D,maskTransformer:W}):T,F=()=>{switch(B){case"fail":return a(s,{children:[e(i,{className:j}),e("span",{className:N,children:"Error"}),a("span",{className:x,children:["Try again?",e(c,{children:R})]})]});case"loading":return a(s,{children:[e(d,{className:y}),e("span",{className:b,children:"Retrieving..."})]});default:return a(s,{children:[q(),e("div",{className:u,"aria-label":"masked"===H?`Display ${R}`:`Hide ${R}`,children:"masked"===H?e(r,{"data-testid":"masked-icon"}):e(t,{"data-testid":"unmasked-icon"})})]})}};return a("li",{"data-width":v,"data-full-width":E,className:f,children:[e(o,{children:R}),"string"!=typeof T?T:H?S?e(p.BodyBL,{children:q()}):e("button",{className:g,"data-testid":"clickable-label",onClick:V,"aria-busy":"loading"===B,"aria-live":"polite",type:"button","aria-label":k.getMaskedDescription(T,H,L),children:F()}):e(p.BodyBL,{children:T}),U&&e(m,Object.assign({className:h,sizeType:"small"},U))]})};export{R as UneditableSectionItem};
+import{jsxs as a,jsx as e,Fragment as s}from"react/jsx-runtime";import{ExclamationTriangleIcon as r}from"@lifesg/react-icons/exclamation-triangle";import{EyeIcon as i}from"@lifesg/react-icons/eye";import{EyeSlashIcon as t}from"@lifesg/react-icons/eye-slash";import{useState as n,useEffect as l}from"react";import{Alert as m}from"../alert/alert.js";import{FormLabel as o}from"../form/form-label/form-label.js";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{ComponentLoadingSpinner as d}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Typography as p}from"../typography/index.js";import{StringHelper as k}from"../util/string-helper.js";import{container as f,alert as h,clickable as g,iconContainer as u,spinner as y,loadingLabel as b,errorIcon as j,errorLabel as N,tryAgainLabel as x}from"./section-item.styles.js";const R=({label:R,value:T,displayWidth:v="full",maskState:w,maskLoadingState:B,maskChar:C="•",maskRange:L,unmaskRange:M,maskRegex:D,disableMaskUnmask:S,alert:U,maskTransformer:W,onMask:$,onUnmask:z,onTryAgain:A,fullWidth:E})=>{const[H,O]=n(w);l((()=>{O(w)}),[w]);const V=()=>{switch("fail"===B&&A&&A(),H){case"masked":z&&z(),O("unmasked");break;case"unmasked":$&&$(),O("masked")}},q=()=>"string"!=typeof T?T:"masked"===H?k.maskValue(T,{maskChar:C,maskRange:L,unmaskRange:M,maskRegex:D,maskTransformer:W}):T,F=()=>{switch(B){case"fail":return a(s,{children:[e(r,{className:j}),e("span",{className:N,children:"Error"}),a("span",{className:x,children:["Try again?",e(c,{children:R})]})]});case"loading":return a(s,{children:[e(d,{className:y}),e("span",{className:b,children:"Retrieving..."})]});default:return a(s,{children:[q(),e("div",{className:u,"aria-label":"masked"===H?`Display ${R}`:`Hide ${R}`,children:"masked"===H?e(i,{"data-testid":"masked-icon"}):e(t,{"data-testid":"unmasked-icon"})})]})}};return a("li",{"data-width":v,"data-full-width":E,className:f,children:[e(o,{children:R}),"string"!=typeof T?T:H?S?e(p.BodyBL,{children:q()}):e("button",{className:g,"data-testid":"clickable-label",onClick:V,"aria-busy":"loading"===B,"aria-live":"polite",type:"button","aria-label":k.getMaskedDescription(T,H,L),children:F()}):e(p.BodyBL,{children:T}),U&&e(m,Object.assign({className:h,sizeType:"small"},U))]})};export{R as UneditableSectionItem};
 //# sourceMappingURL=section-item.js.map

package/uneditable-section/section-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-item.js","sources":["../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ExclamationTriangleIcon className={styles.errorIcon} />\n                        <span className={styles.errorLabel}>Error</span>\n                        <span className={styles.tryAgainLabel}>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </span>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <ComponentLoadingSpinner className={styles.spinner} />\n                        <span className={styles.loadingLabel}>\n                            Retrieving...\n                        </span>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <div\n                            className={styles.iconContainer}\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </div>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <button\n                className={styles.clickable}\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </button>\n        );\n    };\n\n    return (\n        <li\n            data-width={displayWidth}\n            data-full-width={fullWidth}\n            className={styles.container}\n        >\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && (\n                <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n            )}\n        </li>\n    );\n};\n"],"names":["UneditableSectionItem","label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"01BAyBO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,GAAwBC,UAAWC,IACpCH,EAAA,OAAA,CAAME,UAAWE,EAAiBL,SAAA,UAClCF,EAAA,OAAA,CAAMK,UAAWG,EAAoBN,SAAA,CAAA,aAEjCC,EAACM,YAAgBlC,UAIjC,IAAK,UACD,OACIyB,eACIG,EAACO,GAAwBL,UAAWM,IACpCR,EAAA,OAAA,CAAME,UAAWO,EAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAC,EAAA,CAAAC,SAAA,CACKN,IACDO,EAAA,MAAA,CACIE,UAAWQ,EAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,EAACW,EAAO,CAAA,cAAa,gBAErBX,EAACY,EAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAgBd,SAAA,CAE3BC,EAACc,EAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAACe,EAAWC,iBAAQvB,MAI3BO,EAAA,SAAA,CACIE,UAAWe,EAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAACe,EAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAACqB,iBAAMnB,UAAWoB,EAAcC,SAAS,SAAYzC,MAExD"}
+{"version":3,"file":"section-item.js","sources":["../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ExclamationTriangleIcon className={styles.errorIcon} />\n                        <span className={styles.errorLabel}>Error</span>\n                        <span className={styles.tryAgainLabel}>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </span>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <ComponentLoadingSpinner className={styles.spinner} />\n                        <span className={styles.loadingLabel}>\n                            Retrieving...\n                        </span>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <div\n                            className={styles.iconContainer}\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </div>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <button\n                className={styles.clickable}\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </button>\n        );\n    };\n\n    return (\n        <li\n            data-width={displayWidth}\n            data-full-width={fullWidth}\n            className={styles.container}\n        >\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && (\n                <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n            )}\n        </li>\n    );\n};\n"],"names":["UneditableSectionItem","label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"q2BAyBO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,GAAwBC,UAAWC,IACpCH,EAAA,OAAA,CAAME,UAAWE,EAAiBL,SAAA,UAClCF,EAAA,OAAA,CAAMK,UAAWG,EAAoBN,SAAA,CAAA,aAEjCC,EAACM,YAAgBlC,UAIjC,IAAK,UACD,OACIyB,eACIG,EAACO,GAAwBL,UAAWM,IACpCR,EAAA,OAAA,CAAME,UAAWO,EAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAC,EAAA,CAAAC,SAAA,CACKN,IACDO,EAAA,MAAA,CACIE,UAAWQ,EAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,EAACW,EAAO,CAAA,cAAa,gBAErBX,EAACY,EAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAgBd,SAAA,CAE3BC,EAACc,EAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAACe,EAAWC,iBAAQvB,MAI3BO,EAAA,SAAA,CACIE,UAAWe,EAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAACe,EAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAACqB,iBAAMnB,UAAWoB,EAAcC,SAAS,SAAYzC,MAExD"}

package/uneditable-section/types.d.ts

@@ -8,7 +8,7 @@ export type UneditableSectionItemMaskState = "masked" | "unmasked";
 /** Async loading state during a mask or unmask action. */
 export type UneditableSectionItemMaskLoadingState = "loading" | "fail";
 /**
- * Props for `UneditableSection` component.
+ * Props for the `UneditableSection.Item` sub-component.
  */
 export interface UneditableSectionItemProps extends MaskAttributeProps {
     id?: string | undefined;
@@ -42,7 +42,7 @@ export interface UneditableSectionItemProps extends MaskAttributeProps {
     alert?: AlertProps | undefined;
 }
 /**
- * Props for `UneditableSection.ItemSection`.
+ * Props for the `UneditableSection.ItemSection` sub-component.
  */
 export interface UneditableSectionItemSectionProps extends React.HTMLAttributes<HTMLUListElement> {
     /** Stretches every child item to fill the full width of the grid. */