@cloudscape-design/components 3.0.685 → 3.0.687

package/key-value-pairs/interfaces.d.ts

@@ -24,6 +24,17 @@ export interface KeyValuePairsProps extends BaseComponentProps {
      *     key-value pair items.
      */
     items: ReadonlyArray<KeyValuePairsProps.Item>;
+    /**
+     * Provides an `aria-label` to the Key-value pairs container.
+     * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `aria-labelledby` property on the Key-value pairs container.
+     * If there's a visible label element that you can reference, use this instead of `ariaLabel`.
+     * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+     */
+    ariaLabelledby?: string;
 }
 export declare namespace KeyValuePairsProps {
     type Item = Group | Pair;

package/key-value-pairs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/key-value-pairs/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;CAC/C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,KAAY,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEhC,UAAiB,KAAK;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,UAAiB,IAAK,SAAQ,kBAAkB;QAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/key-value-pairs/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,yBAAiB,kBAAkB,CAAC;IAClC,KAAY,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEhC,UAAiB,KAAK;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,UAAiB,IAAK,SAAQ,kBAAkB;QAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB;CACF"}

package/key-value-pairs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/key-value-pairs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\n\nexport interface KeyValuePairsProps extends BaseComponentProps {\n  /**\n   * Specifies the number of columns in each grid row.\n   * Valid values are any integer between 1 and 4. It defaults to 1.\n   */\n  columns?: number;\n  /**\n   * An array of either key-value pairs individual items or groups.\n   * They could be combined.\n   * Each item has `type` prop, which might be either `group` or `pair`. Defaults to `pair` if not specified.\n   *\n   * Each key-value pair definition has the following properties:\n   *   * `type` (string) - (Optional) Item type (pair).\n   *   * `label` (string) - The key label.\n   *   * `info` (React.ReactNode) - (Optional) Area next to the key to display an info link.\n   *   * `value` (React.ReactNode) - The corresponding value for the key.\n   *\n   * Each group definition has the following properties:\n   *   * `type` (string) - Item type (group).\n   *   * `title` (string) - (Optional) An optional title for this column.\n   *   * `items` (ReadonlyArray<KeyValuePairProps.KeyValuePair>) - An array of\n   *     key-value pair items.\n   */\n  items: ReadonlyArray<KeyValuePairsProps.Item>;\n}\n\nexport namespace KeyValuePairsProps {\n  export type Item = Group | Pair;\n\n  export interface Group {\n    type: 'group';\n    title?: string;\n    items: ReadonlyArray<Pair>;\n  }\n\n  export interface Pair extends BaseComponentProps {\n    type?: 'pair';\n    label: string;\n    value: React.ReactNode;\n    info?: React.ReactNode;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/key-value-pairs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\n\nexport interface KeyValuePairsProps extends BaseComponentProps {\n  /**\n   * Specifies the number of columns in each grid row.\n   * Valid values are any integer between 1 and 4. It defaults to 1.\n   */\n  columns?: number;\n  /**\n   * An array of either key-value pairs individual items or groups.\n   * They could be combined.\n   * Each item has `type` prop, which might be either `group` or `pair`. Defaults to `pair` if not specified.\n   *\n   * Each key-value pair definition has the following properties:\n   *   * `type` (string) - (Optional) Item type (pair).\n   *   * `label` (string) - The key label.\n   *   * `info` (React.ReactNode) - (Optional) Area next to the key to display an info link.\n   *   * `value` (React.ReactNode) - The corresponding value for the key.\n   *\n   * Each group definition has the following properties:\n   *   * `type` (string) - Item type (group).\n   *   * `title` (string) - (Optional) An optional title for this column.\n   *   * `items` (ReadonlyArray<KeyValuePairProps.KeyValuePair>) - An array of\n   *     key-value pair items.\n   */\n  items: ReadonlyArray<KeyValuePairsProps.Item>;\n  /**\n   * Provides an `aria-label` to the Key-value pairs container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n  /**\n   * Sets the `aria-labelledby` property on the Key-value pairs container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n}\n\nexport namespace KeyValuePairsProps {\n  export type Item = Group | Pair;\n\n  export interface Group {\n    type: 'group';\n    title?: string;\n    items: ReadonlyArray<Pair>;\n  }\n\n  export interface Pair extends BaseComponentProps {\n    type?: 'pair';\n    label: string;\n    value: React.ReactNode;\n    info?: React.ReactNode;\n  }\n}\n"]}

package/key-value-pairs/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/key-value-pairs/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAgClD,QAAA,MAAM,qBAAqB,2IAiD1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/key-value-pairs/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAgClD,QAAA,MAAM,qBAAqB,2IA8D1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/key-value-pairs/internal.js

@@ -21,9 +21,9 @@ const InternalKeyValuePairGroup = ({ label, value }) => (React.createElement(Rea
     label && React.createElement("dt", { className: styles['group-title'] }, label),
     React.createElement("dd", { className: styles.detail }, value)));
 const InternalKeyValuePairs = React.forwardRef((_a, ref) => {
-    var { columns, items, className } = _a, rest = __rest(_a, ["columns", "items", "className"]);
+    var { columns, items, className, ariaLabel, ariaLabelledby } = _a, rest = __rest(_a, ["columns", "items", "className", "ariaLabel", "ariaLabelledby"]);
     return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
-        React.createElement("div", Object.assign({}, rest, { className: clsx(styles['key-value-pairs'], className), ref: ref }),
+        React.createElement("div", Object.assign({}, rest, { className: clsx(styles['key-value-pairs'], className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: ref }),
             React.createElement(ColumnLayout, { __tagOverride: "dl", columns: Math.min(columns, 4), variant: "text-grid", minColumnWidth: 150 }, items.map((pair, index) => {
                 if (pair.type === 'group') {
                     return (

package/key-value-pairs/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/key-value-pairs/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { KeyValuePairsProps } from './interfaces';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport ColumnLayout from '../column-layout/internal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport Box from '../box/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nconst InternalKeyValuePair = ({ label, info, value, id }: KeyValuePairsProps.Pair) => {\n  const kvPairId = useUniqueId('kv-pair-');\n\n  return (\n    <>\n      <dt className={styles.term}>\n        <label className={styles['key-label']} id={id || kvPairId}>\n          {label}\n        </label>\n        <InfoLinkLabelContext.Provider value={id || kvPairId}>\n          {info && <span className={styles.info}>{info}</span>}\n        </InfoLinkLabelContext.Provider>\n      </dt>\n      <dd className={styles.detail}>{value}</dd>\n    </>\n  );\n};\n\nconst InternalKeyValuePairGroup = ({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) => (\n  <>\n    {label && <dt className={styles['group-title']}>{label}</dt>}\n    <dd className={styles.detail}>{value}</dd>\n  </>\n);\n\nconst InternalKeyValuePairs = React.forwardRef(\n  (\n    { columns, items, className, ...rest }: KeyValuePairsProps & Required<Pick<KeyValuePairsProps, 'columns'>>,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    return (\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div {...rest} className={clsx(styles['key-value-pairs'], className)} ref={ref}>\n          {/*\n          minColumnWidth={150} is set to use FlexibleColumnLayout which has only 1 nested div wrapper for column items,\n          otherwise GridColumnLayout will be used, which has 2 nested div, therefore it is not a11y compatible for dl -> dt/dd relationship\n        */}\n          <ColumnLayout __tagOverride=\"dl\" columns={Math.min(columns, 4)} variant=\"text-grid\" minColumnWidth={150}>\n            {items.map((pair, index) => {\n              if (pair.type === 'group') {\n                return (\n                  /* InternalKeyValuePairGroup tells react to treat the dt-dd pair as an individual layout item.\n                   * Otherwise, without this component, they will be rendered as a list, which ruins the html structure.\n                   * InternalKeyValuePairGroup is not wrapped by div tag, because it ruins a11y compatibility for dl -> dt/dd\n                   *  */\n                  <InternalKeyValuePairGroup\n                    key={index}\n                    label={\n                      pair.title && (\n                        <Box variant=\"h3\" padding=\"n\">\n                          {pair.title}\n                        </Box>\n                      )\n                    }\n                    value={\n                      <dl className={styles['group-list']}>\n                        {pair.items.map((item, itemIndex) => (\n                          <div key={itemIndex} className={styles['group-list-item']}>\n                            <InternalKeyValuePair {...item} />\n                          </div>\n                        ))}\n                      </dl>\n                    }\n                  />\n                );\n              }\n\n              return <InternalKeyValuePair key={index} {...pair} />;\n            })}\n          </ColumnLayout>\n        </div>\n      </LinkDefaultVariantContext.Provider>\n    );\n  }\n);\n\nexport default InternalKeyValuePairs;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/key-value-pairs/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { KeyValuePairsProps } from './interfaces';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport ColumnLayout from '../column-layout/internal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport Box from '../box/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nconst InternalKeyValuePair = ({ label, info, value, id }: KeyValuePairsProps.Pair) => {\n  const kvPairId = useUniqueId('kv-pair-');\n\n  return (\n    <>\n      <dt className={styles.term}>\n        <label className={styles['key-label']} id={id || kvPairId}>\n          {label}\n        </label>\n        <InfoLinkLabelContext.Provider value={id || kvPairId}>\n          {info && <span className={styles.info}>{info}</span>}\n        </InfoLinkLabelContext.Provider>\n      </dt>\n      <dd className={styles.detail}>{value}</dd>\n    </>\n  );\n};\n\nconst InternalKeyValuePairGroup = ({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) => (\n  <>\n    {label && <dt className={styles['group-title']}>{label}</dt>}\n    <dd className={styles.detail}>{value}</dd>\n  </>\n);\n\nconst InternalKeyValuePairs = React.forwardRef(\n  (\n    {\n      columns,\n      items,\n      className,\n      ariaLabel,\n      ariaLabelledby,\n      ...rest\n    }: KeyValuePairsProps & Required<Pick<KeyValuePairsProps, 'columns'>>,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    return (\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div\n          {...rest}\n          className={clsx(styles['key-value-pairs'], className)}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={ref}\n        >\n          {/*\n          minColumnWidth={150} is set to use FlexibleColumnLayout which has only 1 nested div wrapper for column items,\n          otherwise GridColumnLayout will be used, which has 2 nested div, therefore it is not a11y compatible for dl -> dt/dd relationship\n        */}\n          <ColumnLayout __tagOverride=\"dl\" columns={Math.min(columns, 4)} variant=\"text-grid\" minColumnWidth={150}>\n            {items.map((pair, index) => {\n              if (pair.type === 'group') {\n                return (\n                  /* InternalKeyValuePairGroup tells react to treat the dt-dd pair as an individual layout item.\n                   * Otherwise, without this component, they will be rendered as a list, which ruins the html structure.\n                   * InternalKeyValuePairGroup is not wrapped by div tag, because it ruins a11y compatibility for dl -> dt/dd\n                   *  */\n                  <InternalKeyValuePairGroup\n                    key={index}\n                    label={\n                      pair.title && (\n                        <Box variant=\"h3\" padding=\"n\">\n                          {pair.title}\n                        </Box>\n                      )\n                    }\n                    value={\n                      <dl className={styles['group-list']}>\n                        {pair.items.map((item, itemIndex) => (\n                          <div key={itemIndex} className={styles['group-list-item']}>\n                            <InternalKeyValuePair {...item} />\n                          </div>\n                        ))}\n                      </dl>\n                    }\n                  />\n                );\n              }\n\n              return <InternalKeyValuePair key={index} {...pair} />;\n            })}\n          </ColumnLayout>\n        </div>\n      </LinkDefaultVariantContext.Provider>\n    );\n  }\n);\n\nexport default InternalKeyValuePairs;\n"]}

package/package.json

@@ -59,6 +59,7 @@
     "./pie-chart": "./pie-chart/index.js",
     "./popover": "./popover/index.js",
     "./progress-bar": "./progress-bar/index.js",
+    "./prompt-input": "./prompt-input/index.js",
     "./property-filter": "./property-filter/index.js",
     "./radio-group": "./radio-group/index.js",
     "./s3-resource-selector": "./s3-resource-selector/index.js",
@@ -123,7 +124,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.685",
+  "version": "3.0.687",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/prompt-input/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PromptInputProps } from './interfaces';
+export { PromptInputProps };
+declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<PromptInputProps.Ref>>;
+export default PromptInput;
+//# sourceMappingURL=index.d.ts.map

package/prompt-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FA8ChB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/prompt-input/index.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalPromptInput from './internal';
+import useBaseComponent from '../internal/hooks/use-base-component';
+const PromptInput = React.forwardRef((_a, ref) => {
+    var { autoComplete, autoFocus, disableBrowserAutocorrect, disableActionButton, spellcheck, readOnly, actionButtonIconName, minRows, maxRows } = _a, props = __rest(_a, ["autoComplete", "autoFocus", "disableBrowserAutocorrect", "disableActionButton", "spellcheck", "readOnly", "actionButtonIconName", "minRows", "maxRows"]);
+    const baseComponentProps = useBaseComponent('PromptInput', {
+        props: {
+            readOnly,
+            autoComplete,
+            autoFocus,
+            disableBrowserAutocorrect,
+            disableActionButton,
+            spellcheck,
+            actionButtonIconName,
+            minRows,
+            maxRows,
+        },
+    });
+    return (React.createElement(InternalPromptInput, Object.assign({ readOnly: readOnly, autoComplete: autoComplete, autoFocus: autoFocus, disableBrowserAutocorrect: disableBrowserAutocorrect, disableActionButton: disableActionButton, spellcheck: spellcheck, actionButtonIconName: actionButtonIconName, minRows: minRows, maxRows: maxRows }, props, baseComponentProps, { ref: ref })));
+});
+applyDisplayName(PromptInput, 'PromptInput');
+export default PromptInput;
+//# sourceMappingURL=index.js.map

package/prompt-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/prompt-input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAC7C,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EAWmB,EACnB,GAAoC,EACpC,EAAE;QAbF,EACE,YAAY,EACZ,SAAS,EACT,yBAAyB,EACzB,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,oBAAoB,EACpB,OAAO,EACP,OAAO,OAEU,EADd,KAAK,cAVV,yJAWC,CADS;IAIV,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,yBAAyB;YACzB,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,OAAO;YACP,OAAO;SACR;KACF,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,mBAAmB,kBAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,yBAAyB,EAAE,yBAAyB,EACpD,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,IACZ,KAAK,EACL,kBAAkB,IACtB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { PromptInputProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalPromptInput from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { PromptInputProps };\n\nconst PromptInput = React.forwardRef(\n  (\n    {\n      autoComplete,\n      autoFocus,\n      disableBrowserAutocorrect,\n      disableActionButton,\n      spellcheck,\n      readOnly,\n      actionButtonIconName,\n      minRows,\n      maxRows,\n      ...props\n    }: PromptInputProps,\n    ref: React.Ref<PromptInputProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('PromptInput', {\n      props: {\n        readOnly,\n        autoComplete,\n        autoFocus,\n        disableBrowserAutocorrect,\n        disableActionButton,\n        spellcheck,\n        actionButtonIconName,\n        minRows,\n        maxRows,\n      },\n    });\n    return (\n      <InternalPromptInput\n        readOnly={readOnly}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        disableBrowserAutocorrect={disableBrowserAutocorrect}\n        disableActionButton={disableActionButton}\n        spellcheck={spellcheck}\n        actionButtonIconName={actionButtonIconName}\n        minRows={minRows}\n        maxRows={maxRows}\n        {...props}\n        {...baseComponentProps}\n        ref={ref}\n      />\n    );\n  }\n);\napplyDisplayName(PromptInput, 'PromptInput');\nexport default PromptInput;\n"]}

package/prompt-input/interfaces.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../internal/base-component';
+import { BaseKeyDetail, NonCancelableEventHandler } from '../internal/events';
+import { BaseInputProps, InputAutoCorrect, InputAutoComplete, InputKeyEvents, InputSpellcheck, BaseChangeDetail } from '../input/interfaces';
+import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
+import { IconProps } from '../icon/interfaces';
+export interface PromptInputProps extends BaseInputProps, InputKeyEvents, InputAutoCorrect, InputAutoComplete, InputSpellcheck, BaseComponentProps, FormFieldValidationControlProps {
+    /**
+     * Called whenever a user clicks the action button or presses the "Enter" key.
+     * The event `detail` contains the current value of the field.
+     */
+    onAction?: NonCancelableEventHandler<PromptInputProps.ActionDetail>;
+    /**
+     * Determines what icon to display in the action button.
+     */
+    actionButtonIconName?: IconProps.Name;
+    /**
+     * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.
+     *
+     * If you set both `actionButtonIconUrl` and `actionButtonIconSvg`, `actionButtonIconSvg` will take precedence.
+     */
+    actionButtonIconUrl?: string;
+    /**
+     * Specifies the SVG of a custom icon.
+     *
+     * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.
+     * When this property is set, the component will be decorated with `aria-hidden="true"`. Ensure that the `svg` element:
+     * - has attribute `focusable="false"`.
+     * - has `viewBox="0 0 16 16"`.
+     *
+     * If you set the `svg` element as the root node of the slot, the component will automatically
+     * - set `stroke="currentColor"`, `fill="none"`, and `vertical-align="top"`.
+     * - set the stroke width based on the size of the icon.
+     * - set the width and height of the SVG element based on the size of the icon.
+     *
+     * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.
+     * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.
+     *
+     * If you set both `actionButtonIconUrl` and `actionButtonIconSvg`, `iconSvg` will take precedence.
+     *
+     * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.
+     * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.
+     */
+    actionButtonIconSvg?: React.ReactNode;
+    /**
+     * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.
+     * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.
+     */
+    actionButtonIconAlt?: string;
+    /**
+     * Adds an aria-label to the action button.
+     * @i18n
+     */
+    actionButtonAriaLabel?: string;
+    /**
+     * Specifies whether to disable the action button.
+     */
+    disableActionButton?: boolean;
+    /**
+     * Specifies the minimum number of lines of text to set the height to.
+     */
+    minRows?: number;
+    /**
+     * Specifies the maximum number of lines of text the textarea will expand to.
+     */
+    maxRows?: number;
+}
+export declare namespace PromptInputProps {
+    type KeyDetail = BaseKeyDetail;
+    type ActionDetail = BaseChangeDetail;
+    interface Ref {
+        /**
+         * Sets input focus on the textarea control.
+         */
+        focus(): void;
+        /**
+         * Selects all text in the textarea control.
+         */
+        select(): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/prompt-input/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,gBACf,SAAQ,cAAc,EACpB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,+BAA+B;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACpE;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,SAAS,GAAG,aAAa,CAAC;IACtC,KAAY,YAAY,GAAG,gBAAgB,CAAC;IAE5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;QAEd;;WAEG;QACH,MAAM,IAAI,IAAI,CAAC;KAChB;CACF"}

package/prompt-input/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/prompt-input/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/prompt-input/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseKeyDetail, NonCancelableEventHandler } from '../internal/events';\nimport {\n  BaseInputProps,\n  InputAutoCorrect,\n  InputAutoComplete,\n  InputKeyEvents,\n  InputSpellcheck,\n  BaseChangeDetail,\n} from '../input/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface PromptInputProps\n  extends BaseInputProps,\n    InputKeyEvents,\n    InputAutoCorrect,\n    InputAutoComplete,\n    InputSpellcheck,\n    BaseComponentProps,\n    FormFieldValidationControlProps {\n  /**\n   * Called whenever a user clicks the action button or presses the \"Enter\" key.\n   * The event `detail` contains the current value of the field.\n   */\n  onAction?: NonCancelableEventHandler<PromptInputProps.ActionDetail>;\n  /**\n   * Determines what icon to display in the action button.\n   */\n  actionButtonIconName?: IconProps.Name;\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   *\n   * If you set both `actionButtonIconUrl` and `actionButtonIconSvg`, `actionButtonIconSvg` will take precedence.\n   */\n  actionButtonIconUrl?: string;\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `actionButtonIconUrl` and `actionButtonIconSvg`, `iconSvg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  actionButtonIconSvg?: React.ReactNode;\n  /**\n   * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n   */\n  actionButtonIconAlt?: string;\n  /**\n   * Adds an aria-label to the action button.\n   * @i18n\n   */\n  actionButtonAriaLabel?: string;\n\n  /**\n   * Specifies whether to disable the action button.\n   */\n  disableActionButton?: boolean;\n\n  /**\n   * Specifies the minimum number of lines of text to set the height to.\n   */\n  minRows?: number;\n\n  /**\n   * Specifies the maximum number of lines of text the textarea will expand to.\n   */\n  maxRows?: number;\n}\n\nexport namespace PromptInputProps {\n  export type KeyDetail = BaseKeyDetail;\n  export type ActionDetail = BaseChangeDetail;\n\n  export interface Ref {\n    /**\n     * Sets input focus on the textarea control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the textarea control.\n     */\n    select(): void;\n  }\n}\n"]}

package/prompt-input/internal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PromptInputProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface InternalPromptInputProps extends PromptInputProps, InternalBaseComponentProps {
+}
+declare const InternalPromptInput: React.ForwardRefExoticComponent<InternalPromptInputProps & React.RefAttributes<PromptInputProps.Ref>>;
+export default InternalPromptInput;
+//# sourceMappingURL=internal.d.ts.map

package/prompt-input/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;CAAG;AAEjG,QAAA,MAAM,mBAAmB,uGAkKxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/prompt-input/internal.js

@@ -0,0 +1,109 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { getBaseProps } from '../internal/base-component';
+import InternalButton from '../button/internal';
+import { fireKeyboardEvent, fireNonCancelableEvent } from '../internal/events';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import testutilStyles from './test-classes/styles.css.js';
+import { convertAutoComplete } from '../input/utils';
+import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
+import * as tokens from '../internal/generated/styles/tokens';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+const InternalPromptInput = React.forwardRef((_a, ref) => {
+    var { value, actionButtonAriaLabel, actionButtonIconName, actionButtonIconUrl, actionButtonIconSvg, actionButtonIconAlt, ariaLabel, autoComplete, autoFocus, disableActionButton, disableBrowserAutocorrect, disabled, maxRows = 3, minRows, name, onAction, onBlur, onChange, onFocus, onKeyDown, onKeyUp, placeholder, readOnly, spellcheck, __internalRootRef = null } = _a, rest = __rest(_a, ["value", "actionButtonAriaLabel", "actionButtonIconName", "actionButtonIconUrl", "actionButtonIconSvg", "actionButtonIconAlt", "ariaLabel", "autoComplete", "autoFocus", "disableActionButton", "disableBrowserAutocorrect", "disabled", "maxRows", "minRows", "name", "onAction", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "spellcheck", "__internalRootRef"]);
+    const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest);
+    const baseProps = getBaseProps(rest);
+    const textareaRef = useRef(null);
+    const isRefresh = useVisualRefresh();
+    const isCompactMode = useDensityMode(textareaRef) === 'compact';
+    const PADDING = isRefresh ? tokens.spaceXxs : tokens.spaceXxxs;
+    const LINE_HEIGHT = tokens.lineHeightBodyM;
+    useImperativeHandle(ref, () => ({
+        focus(...args) {
+            var _a;
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus(...args);
+        },
+        select() {
+            var _a;
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.select();
+        },
+    }), [textareaRef]);
+    const handleKeyDown = (event) => {
+        if (onKeyDown) {
+            fireKeyboardEvent(onKeyDown, event);
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+            if ('form' in event.target && event.target.form !== null && !event.isDefaultPrevented()) {
+                event.target.form.requestSubmit();
+            }
+            event.preventDefault();
+            fireNonCancelableEvent(onAction, { value });
+        }
+    };
+    const handleChange = (event) => {
+        fireNonCancelableEvent(onChange, { value: event.target.value });
+        adjustTextareaHeight();
+    };
+    const adjustTextareaHeight = useCallback(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            const maxRowsHeight = `calc(${maxRows <= 0 ? 3 : maxRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`;
+            const scrollHeight = `calc(${textareaRef.current.scrollHeight}px + ${PADDING})`;
+            textareaRef.current.style.height = `min(${scrollHeight}, ${maxRowsHeight})`;
+        }
+    }, [maxRows, LINE_HEIGHT, PADDING]);
+    useEffect(() => {
+        const handleResize = () => {
+            adjustTextareaHeight();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [adjustTextareaHeight]);
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [value, adjustTextareaHeight, maxRows, isCompactMode]);
+    const attributes = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-describedby': ariaDescribedby,
+        'aria-invalid': invalid ? 'true' : undefined,
+        name,
+        placeholder,
+        autoFocus,
+        className: clsx(styles.textarea, testutilStyles.textarea, {
+            [styles['textarea-readonly']]: readOnly,
+            [styles['textarea-invalid']]: invalid,
+            [styles['textarea-warning']]: warning && !invalid,
+            [styles['textarea-with-button']]: actionButtonIconName,
+        }),
+        autoComplete: convertAutoComplete(autoComplete),
+        spellCheck: spellcheck,
+        disabled,
+        readOnly: readOnly ? true : undefined,
+        rows: minRows || 1,
+        onKeyDown: handleKeyDown,
+        onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),
+        // We set a default value on the component in order to force it into the controlled mode.
+        value: value || '',
+        onChange: handleChange,
+        onBlur: onBlur && (() => fireNonCancelableEvent(onBlur)),
+        onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),
+    };
+    const hasActionButton = actionButtonIconName || actionButtonIconSvg || actionButtonIconUrl;
+    if (disableBrowserAutocorrect) {
+        attributes.autoCorrect = 'off';
+        attributes.autoCapitalize = 'off';
+    }
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, testutilStyles.root, baseProps.className), ref: __internalRootRef }),
+        React.createElement("textarea", Object.assign({ ref: textareaRef, id: controlId }, attributes)),
+        hasActionButton && (React.createElement("div", { className: styles.button },
+            React.createElement(InternalButton, { className: clsx(styles['action-button'], testutilStyles['action-button']), ariaLabel: actionButtonAriaLabel, disabled: disabled || readOnly || disableActionButton, iconName: actionButtonIconName, iconUrl: actionButtonIconUrl, iconSvg: actionButtonIconSvg, iconAlt: actionButtonIconAlt, onClick: () => fireNonCancelableEvent(onAction, { value }), variant: "icon" })))));
+});
+export default InternalPromptInput;
+//# sourceMappingURL=internal.js.map

package/prompt-input/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/prompt-input/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalButton from '../button/internal';\nimport { fireKeyboardEvent, fireNonCancelableEvent } from '../internal/events';\nimport { PromptInputProps } from './interfaces';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { convertAutoComplete } from '../input/utils';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface InternalPromptInputProps extends PromptInputProps, InternalBaseComponentProps {}\n\nconst InternalPromptInput = React.forwardRef(\n  (\n    {\n      value,\n      actionButtonAriaLabel,\n      actionButtonIconName,\n      actionButtonIconUrl,\n      actionButtonIconSvg,\n      actionButtonIconAlt,\n      ariaLabel,\n      autoComplete,\n      autoFocus,\n      disableActionButton,\n      disableBrowserAutocorrect,\n      disabled,\n      maxRows = 3,\n      minRows,\n      name,\n      onAction,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      placeholder,\n      readOnly,\n      spellcheck,\n      __internalRootRef = null,\n      ...rest\n    }: InternalPromptInputProps,\n    ref: Ref<PromptInputProps.Ref>\n  ) => {\n    const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest);\n\n    const baseProps = getBaseProps(rest);\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const isRefresh = useVisualRefresh();\n    const isCompactMode = useDensityMode(textareaRef) === 'compact';\n\n    const PADDING = isRefresh ? tokens.spaceXxs : tokens.spaceXxxs;\n    const LINE_HEIGHT = tokens.lineHeightBodyM;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        focus(...args: Parameters<HTMLElement['focus']>) {\n          textareaRef.current?.focus(...args);\n        },\n        select() {\n          textareaRef.current?.select();\n        },\n      }),\n      [textareaRef]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (onKeyDown) {\n        fireKeyboardEvent(onKeyDown, event);\n      }\n\n      if (event.key === 'Enter' && !event.shiftKey) {\n        if ('form' in event.target && event.target.form !== null && !event.isDefaultPrevented()) {\n          (event.target.form as HTMLFormElement).requestSubmit();\n        }\n\n        event.preventDefault();\n        fireNonCancelableEvent(onAction, { value });\n      }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      fireNonCancelableEvent(onChange, { value: event.target.value });\n      adjustTextareaHeight();\n    };\n\n    const adjustTextareaHeight = useCallback(() => {\n      if (textareaRef.current) {\n        textareaRef.current.style.height = 'auto';\n        const maxRowsHeight = `calc(${maxRows <= 0 ? 3 : maxRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`;\n        const scrollHeight = `calc(${textareaRef.current.scrollHeight}px + ${PADDING})`;\n        textareaRef.current.style.height = `min(${scrollHeight}, ${maxRowsHeight})`;\n      }\n    }, [maxRows, LINE_HEIGHT, PADDING]);\n\n    useEffect(() => {\n      const handleResize = () => {\n        adjustTextareaHeight();\n      };\n\n      window.addEventListener('resize', handleResize);\n\n      return () => {\n        window.removeEventListener('resize', handleResize);\n      };\n    }, [adjustTextareaHeight]);\n\n    useEffect(() => {\n      adjustTextareaHeight();\n    }, [value, adjustTextareaHeight, maxRows, isCompactMode]);\n\n    const attributes: React.TextareaHTMLAttributes<HTMLTextAreaElement> = {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      'aria-invalid': invalid ? 'true' : undefined,\n      name,\n      placeholder,\n      autoFocus,\n      className: clsx(styles.textarea, testutilStyles.textarea, {\n        [styles['textarea-readonly']]: readOnly,\n        [styles['textarea-invalid']]: invalid,\n        [styles['textarea-warning']]: warning && !invalid,\n        [styles['textarea-with-button']]: actionButtonIconName,\n      }),\n      autoComplete: convertAutoComplete(autoComplete),\n      spellCheck: spellcheck,\n      disabled,\n      readOnly: readOnly ? true : undefined,\n      rows: minRows || 1,\n      onKeyDown: handleKeyDown,\n      onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n      // We set a default value on the component in order to force it into the controlled mode.\n      value: value || '',\n      onChange: handleChange,\n      onBlur: onBlur && (() => fireNonCancelableEvent(onBlur)),\n      onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n    };\n\n    const hasActionButton = actionButtonIconName || actionButtonIconSvg || actionButtonIconUrl;\n\n    if (disableBrowserAutocorrect) {\n      attributes.autoCorrect = 'off';\n      attributes.autoCapitalize = 'off';\n    }\n\n    return (\n      <div\n        {...baseProps}\n        className={clsx(styles.root, testutilStyles.root, baseProps.className)}\n        ref={__internalRootRef}\n      >\n        <textarea ref={textareaRef} id={controlId} {...attributes} />\n        {hasActionButton && (\n          <div className={styles.button}>\n            <InternalButton\n              className={clsx(styles['action-button'], testutilStyles['action-button'])}\n              ariaLabel={actionButtonAriaLabel}\n              disabled={disabled || readOnly || disableActionButton}\n              iconName={actionButtonIconName}\n              iconUrl={actionButtonIconUrl}\n              iconSvg={actionButtonIconSvg}\n              iconAlt={actionButtonIconAlt}\n              onClick={() => fireNonCancelableEvent(onAction, { value })}\n              variant=\"icon\"\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default InternalPromptInput;\n"]}

package/prompt-input/styles.css.js

@@ -0,0 +1,13 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_55fkh_v0e3_98",
+  "button": "awsui_button_55fkh_v0e3_101",
+  "action-button": "awsui_action-button_55fkh_v0e3_106",
+  "textarea": "awsui_textarea_55fkh_v0e3_128",
+  "textarea-readonly": "awsui_textarea-readonly_55fkh_v0e3_181",
+  "textarea-invalid": "awsui_textarea-invalid_55fkh_v0e3_223",
+  "textarea-warning": "awsui_textarea-warning_55fkh_v0e3_234",
+  "textarea-with-button": "awsui_textarea-with-button_55fkh_v0e3_245"
+};
+